@corto-ai/gds-angular 2.1.3-dev.2 → 2.1.3-dev.4
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/README.md +5 -5
- package/assets/css/acctivity.css +13 -15
- package/assets/css/acctivity.css.map +1 -1
- package/assets/css/all.css +13 -15
- package/assets/css/all.css.map +1 -1
- package/assets/css/corto.css +13 -15
- package/assets/css/corto.css.map +1 -1
- package/assets/css/lawy.css +13 -15
- package/assets/css/lawy.css.map +1 -1
- package/assets/css/leap.css +13 -15
- package/assets/css/leap.css.map +1 -1
- package/assets/css/storybook.css +4 -0
- package/assets/scss/_mixins.scss +73 -13
- package/assets/scss/fonts/_inter.scss +1 -1
- package/assets/scss/fonts/_satoshi-black.scss +6 -6
- package/assets/scss/fonts/_satoshi-bold.scss +6 -6
- package/assets/scss/fonts/_satoshi-light.scss +6 -6
- package/assets/scss/fonts/_satoshi-medium.scss +6 -6
- package/assets/scss/fonts/_satoshi-regular.scss +6 -6
- package/assets/scss/fonts/_satoshi-variable.scss +6 -6
- package/assets/scss/mixins/buttons/_base.scss +1 -0
- package/assets/scss/utilities/_toastr.scss +12 -4
- package/assets/storybook/guide-actions.png +0 -0
- package/assets/storybook/guide-branding.png +0 -0
- package/assets/storybook/guide-code-examples.png +0 -0
- package/assets/storybook/guide-controls.png +0 -0
- package/assets/svg/filled/filled-document-multiple.svg +3 -1
- package/assets/svg/leap/leap-logo-matter-ai-background.svg +10 -0
- package/assets/svg/line/line-email-alert.svg +3 -0
- package/fesm2022/corto-ai-gds-angular.mjs +317 -69
- package/fesm2022/corto-ai-gds-angular.mjs.map +1 -1
- package/package.json +12 -12
- package/types/corto-ai-gds-angular.d.ts +76 -17
- package/assets/storybook/components.svg +0 -5
- package/assets/storybook/guide-viewport.png +0 -0
- package/assets/storybook/icon-filled.svg +0 -3
- package/assets/storybook/icon-general.svg +0 -8
- package/assets/storybook/icon-line.svg +0 -3
- package/assets/storybook/icon-twotone.svg +0 -4
- package/assets/storybook/logo.svg +0 -3
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, inject, signal, Injector, input, viewChild, effect, afterNextRender, ChangeDetectionStrategy, Component, model, booleanAttribute, computed, ElementRef, output, Directive, contentChild, DestroyRef, Renderer2, InjectionToken, Input, ChangeDetectorRef, EventEmitter, NgZone, Output, DOCUMENT, HostBinding, EnvironmentInjector, ApplicationRef, createComponent, Pipe, contentChildren, ViewEncapsulation, untracked, ViewContainerRef, runInInjectionContext, TemplateRef, numberAttribute, HostListener, provideAppInitializer, NgModule } from '@angular/core';
|
|
2
|
+
import { Injectable, inject, signal, Injector, input, viewChild, effect, afterNextRender, ChangeDetectionStrategy, Component, model, booleanAttribute, computed, ElementRef, output, Directive, contentChild, DestroyRef, Renderer2, InjectionToken, Input, ChangeDetectorRef, EventEmitter, NgZone, Output, DOCUMENT, HostBinding, EnvironmentInjector, ApplicationRef, createComponent, Pipe, contentChildren, ViewEncapsulation, untracked, ViewContainerRef, runInInjectionContext, makeEnvironmentProviders, TemplateRef, numberAttribute, HostListener, provideAppInitializer, NgModule } from '@angular/core';
|
|
3
3
|
import { injectRegisterIcons, SvgIconRegistry, SvgIconComponent, provideSvgIconsConfig } from '@ngneat/svg-icon';
|
|
4
4
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
5
5
|
import * as i1 from '@ngneat/helipopper';
|
|
6
6
|
import { TippyDirective } from '@ngneat/helipopper';
|
|
7
7
|
import { NgClass, NgTemplateOutlet, TitleCasePipe, DOCUMENT as DOCUMENT$1, CommonModule } from '@angular/common';
|
|
8
8
|
import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
|
|
9
|
-
import { Subject, tap, debounceTime, fromEvent, take, map } from 'rxjs';
|
|
9
|
+
import { Subject, tap, debounceTime, fromEvent, take, map, EMPTY } from 'rxjs';
|
|
10
10
|
import { format, intervalToDuration } from 'date-fns';
|
|
11
11
|
import * as i1$2 from '@angular/cdk/a11y';
|
|
12
12
|
import { FocusKeyManager, CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
|
|
@@ -14,7 +14,7 @@ import * as i1$1 from '@angular/cdk/menu';
|
|
|
14
14
|
import { CdkMenuItem, CdkMenuTrigger, CdkMenuItemCheckbox, MENU_TRIGGER, CdkMenu, CdkTargetMenuAim } from '@angular/cdk/menu';
|
|
15
15
|
import { FormField } from '@angular/forms/signals';
|
|
16
16
|
import { v4 } from 'uuid';
|
|
17
|
-
import { OverlayModule } from '@angular/cdk/overlay';
|
|
17
|
+
import { OverlayModule, Overlay } from '@angular/cdk/overlay';
|
|
18
18
|
import * as i1$3 from '@ngx-translate/core';
|
|
19
19
|
import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
|
|
20
20
|
import { DeviceDetectorService } from 'ngx-device-detector';
|
|
@@ -26,8 +26,7 @@ import { FormsModule } from '@angular/forms';
|
|
|
26
26
|
import * as i2 from '@ng-select/ng-select';
|
|
27
27
|
import { NgSelectComponent, NgLabelTemplateDirective, NgMultiLabelTemplateDirective, NgFooterTemplateDirective, NgClearButtonTemplateDirective, NgOptionTemplateDirective, NgPlaceholderTemplateDirective, NgSelectModule } from '@ng-select/ng-select';
|
|
28
28
|
import { BreakpointObserver } from '@angular/cdk/layout';
|
|
29
|
-
import
|
|
30
|
-
import { ToastNoAnimation, provideToastr } from 'ngx-toastr';
|
|
29
|
+
import { ComponentPortal } from '@angular/cdk/portal';
|
|
31
30
|
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
|
|
32
31
|
import { provideTippyLoader, provideTippyConfig } from '@ngneat/helipopper/config';
|
|
33
32
|
|
|
@@ -852,7 +851,7 @@ const gdsFilledDetailsIcon = {
|
|
|
852
851
|
name: 'filled-details'
|
|
853
852
|
};
|
|
854
853
|
const gdsFilledDocumentMultipleIcon = {
|
|
855
|
-
data: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 4.25C4 3.00736 5.00736 2 6.25 2H10.5039V6.74753C10.5039 7.99017 11.5113 8.99753 12.7539 8.99753H17.5V17.25C17.5 18.4926 16.4926 19.5 15.25 19.5H6.25C5.00736 19.5 4 18.4926 4 17.25V4.
|
|
854
|
+
data: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 4.25C4 3.00736 5.00736 2 6.25 2H10.5039V6.74753C10.5039 7.99017 11.5113 8.99753 12.7539 8.99753H17.5V17.25C17.5 18.4926 16.4926 19.5 15.25 19.5H6.25C5.00736 19.5 4 18.4926 4 17.25V4.25Z" fill="currentColor"/><path d="M12.0039 6.74753V2.46728C12.0803 2.52611 12.1532 2.59009 12.2221 2.65901L16.841 7.27786C16.9103 7.34721 16.9747 7.42062 17.0338 7.49753H12.7539C12.3397 7.49753 12.0039 7.16174 12.0039 6.74753Z" fill="currentColor"/><path d="M8.75088 22C7.77121 22 6.93778 21.3739 6.62891 20.5H15.2509C17.0458 20.5 18.5009 19.0449 18.5009 17.25V8.93689L19.3419 9.77788C19.7638 10.1998 20.0009 10.7721 20.0009 11.3689V17.25C20.0009 19.8734 17.8742 22 15.2509 22H8.75088Z" fill="currentColor"/></svg>`,
|
|
856
855
|
name: 'filled-document-multiple'
|
|
857
856
|
};
|
|
858
857
|
const gdsFilledDocumentTableIcon = {
|
|
@@ -1335,6 +1334,10 @@ const gdsLeapLogoDefaultIcon = {
|
|
|
1335
1334
|
data: `<svg viewBox="0 0 314 66" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M86 0V66H134.084L128.558 52.7987H98.8993V0H86Z" fill="#F69139"/><path fill-rule="evenodd" clip-rule="evenodd" d="M274.479 26.4462L293.515 26.3894C302.894 26.3894 302.57 13.198 293.286 13.198H274.454L274.479 26.4462ZM293.515 39.5941H274.479L274.25 66H261.562V0H293.286C319.371 0 319.694 39.5941 293.515 39.5941Z" fill="#F69139"/><path fill-rule="evenodd" clip-rule="evenodd" d="M187.759 13.198V0H136.32V66H187.759V52.7987H149.18V39.5941H174.909V26.3894H149.18V13.198H187.759Z" fill="#F69139"/><path fill-rule="evenodd" clip-rule="evenodd" d="M215.091 39.5941L224.66 16.6881L234.228 39.5941H215.091ZM245.259 66H259.325L231.754 0H231.631H217.688H217.565L189.995 66H204.06L209.574 52.7987H239.744L245.259 66Z" fill="#F69139"/><rect width="66" height="66" fill="#1E365E"/><path fill-rule="evenodd" clip-rule="evenodd" d="M29.0941 28.1532L38.9678 31.6771L34.4036 40.3773L8 52.6404L27.4518 32.7542L29.0941 28.1532ZM34.5091 13L57.1539 23.318L54.0038 49.4321L50.6136 31.3576L29.0941 28.1532L34.5091 13Z" fill="#F69139"/></svg>`,
|
|
1336
1335
|
name: 'leap-logo-default'
|
|
1337
1336
|
};
|
|
1337
|
+
const gdsLeapLogoMatterAiBackgroundIcon = {
|
|
1338
|
+
data: `<svg width="137" height="137" viewBox="0 0 137 137" fill="none" xmlns="http://www.w3.org/2000/svg"><g><path d="M4.25 34.25C4.25 16.5769 18.5769 2.25 36.25 2.25H100.25C117.923 2.25 132.25 16.5769 132.25 34.25V98.25C132.25 115.923 117.923 130.25 100.25 130.25H36.25C18.5769 130.25 4.25 115.923 4.25 98.25V34.25Z" fill="#F5F5F5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M68.2505 26.7188C46.418 26.7188 28.7192 44.4175 28.7192 66.25C28.7192 73.827 30.8492 80.9012 34.5423 86.9125C34.7931 87.3207 34.8621 87.815 34.7327 88.2763L30.2542 104.248L46.1647 99.7295C46.628 99.598 47.1252 99.6668 47.5353 99.9193C53.5552 103.625 60.6621 105.781 68.2505 105.781C69.1997 105.781 69.9692 106.551 69.9692 107.5C69.9692 108.449 69.1997 109.219 68.2505 109.219C60.2762 109.219 52.7872 107.027 46.3855 103.24L28.2398 108.393C27.6413 108.563 26.9977 108.396 26.557 107.957C26.1163 107.518 25.9474 106.875 26.1154 106.276L31.2225 88.0629C27.4474 81.6679 25.2817 74.2094 25.2817 66.25C25.2817 42.519 44.5195 23.2812 68.2505 23.2812C91.9815 23.2812 111.219 42.519 111.219 66.25C111.219 68.6881 111.016 71.08 110.625 73.4094C110.468 74.3455 109.582 74.9771 108.646 74.8201C107.71 74.663 107.078 73.7768 107.235 72.8406C107.594 70.6984 107.782 68.4967 107.782 66.25C107.782 44.4175 90.083 26.7188 68.2505 26.7188Z" fill="#1E365E"/><path d="M113.972 83.4375V111.742H109.016V83.4375H113.972Z" fill="#32ABE2"/><path d="M85.1004 111.742H79.9506L90.1727 83.4375H95.2451L105.467 111.742H100.24L97.9555 105.198H87.3849L85.1004 111.742ZM92.07 91.8785L88.8562 101.016H96.5228L93.2703 91.8785C93.038 91.1428 92.767 90.291 92.6895 89.7102C92.5734 90.2522 92.341 91.1041 92.07 91.8785Z" fill="#32ABE2"/><path d="M54.5 61.0938C57.3477 61.0938 59.6562 63.4023 59.6562 66.25C59.6562 69.0977 57.3477 71.4062 54.5 71.4062C51.6523 71.4062 49.3438 69.0977 49.3438 66.25C49.3438 63.4023 51.6523 61.0938 54.5 61.0938ZM68.25 61.0938C71.0977 61.0938 73.4062 63.4023 73.4062 66.25C73.4062 69.0977 71.0977 71.4062 68.25 71.4062C65.4023 71.4062 63.0938 69.0977 63.0938 66.25C63.0938 63.4023 65.4023 61.0938 68.25 61.0938ZM82 61.0938C84.8477 61.0938 87.1562 63.4023 87.1562 66.25C87.1562 69.0977 84.8477 71.4062 82 71.4062C79.1523 71.4062 76.8438 69.0977 76.8438 66.25C76.8438 63.4023 79.1523 61.0938 82 61.0938Z" fill="#0060A9"/><path d="M4.25 34.25C4.25 16.5769 18.5769 2.25 36.25 2.25H100.25C117.923 2.25 132.25 16.5769 132.25 34.25V98.25C132.25 115.923 117.923 130.25 100.25 130.25H36.25C18.5769 130.25 4.25 115.923 4.25 98.25V34.25Z" stroke="#D2D7DF" stroke-width="1"/></g></svg>`,
|
|
1339
|
+
name: 'leap-logo-matter-ai-background'
|
|
1340
|
+
};
|
|
1338
1341
|
const gdsLeapLogoMatterAiIcon = {
|
|
1339
1342
|
data: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect width="24" height="24" fill="url(#pattern0_9507_6078)"/><defs><pattern id="pattern0_9507_6078" patternContentUnits="objectBoundingBox" width="1" height="1"><use xlink:href="#image0_9507_6078" transform="scale(0.0104167)"/></pattern><image id="image0_9507_6078" width="96" height="120" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAB4CAYAAAANHffOAAALy0lEQVR4Ae2dzXPbxhXA3y5A1vGHTB860ySWAt1yaUw7lqKbqZ56szLTeJqOLdG39iT7lp5s3XqL/BeYsjNtJz5YueVmeqaH2HFrqP+AYNlNcyvdOIeIwG72gQAIQAAIgAA/pP3NcAZfXBL7dt++fe8tACCRSCQSiURyFCEwYdTqzdqpKjQIZ+8B5XXCQOOEaM5pLXAxh464A4Nw3uEUDGBEZ5zuvDFB7+itDkwBEyGAs0vNBrXMFSD0MoQrOT8651x8lK1Xz1ptmFDGJgCv0oGuiX9Rg3IxhDDakyiMkQtgdrG5AtxaJ4Q0Ii9AtSIqDCg8Bga7nLEXSsXU8ZTxzd8N/6Xa0u81sGjN5LRGCT0nvjPPGT8XW3YPLGtz7+m9LZgARiaA2cWrKwTo5xClYrDSKWwxi22rJ1XdaA+vv89evNqglDbF5iWIVmuG+NwetyBKFwCqGmJZtw60Sl+lv3r2RRtKxCeMtYjTxv4+Xf5ebxkwBkoTAFozMxV+Cwi/ETjRs1zu0ON0s4iWngVtqakxxprQE4QWOo29YQNGTCkC+FW9qVWr7BH4b3KMFR/GJ4hboVMj7w2FC2BuaXUNLNj0WzZogSiKct34ZjzdPA4UhGVZd0PqUTQUvrH35P4mjAAFCmRucfWWaOlY+cfsA7ae539++fT+nzqv9ImbGOF/+v93/946ffaD16ItLolDx3of8tvT756D1//ZeQwlU1gPmFtY+zyk7w0x8C1PWquPw1FLQbU5gnGhkB4w+9HaXQL8j+6+rXJOKMvGP1rfw5SAveHML89vgcLeF+3yfedwY+adDzTRS76Ckhi6Bxxo+WKg3Xty7wZMMXMLq6hG19190aA2X357/yaUwFA9wNb5BD7zHdoQXfYzmHJef7fztRgDsHE2cF8M0ktljQm5BTD30Sq2kL94B7DlH4LKdxGV3T79zrkz4r6WnEMNIQRDHN+BAsmlgmw7v8Keu6YmAbL94unWx3AImV249shnpnbEPOF8kfMECjmwJ1l9O98gx8l1OKQoXQUbluHs1vDecZYPBZFZALbed001YefbpmZ7OoIfeTBEYAfvEQDce9ROVaxbUBCZxgBUPYrCt70DYpL14sm9r+GQgyaqmKz9hBM03MdB+dTbv34szFMDhiRTD3D8OzZo649quj4J4L3iPbv7CiGF9ILUAhCDURN8s0T07cARw7lnWxWJOHUDYxwwJKkFQIIS35gWF0OROPd8x913AkxDkUoAodaPPp4WHFHoPkW16w3IsxdXL8MQpBKAsPPXfbtbR7H1uxi9dBevF9BwwCkjAwVw9mKzISRQ975whFu/i78X4FiAIU/IyUABEGI2fTuto9z6XexewMEL5lOF5h6MUwiAXnK3mWVNRCrHJMA468+HeGSwPxWJArDVj2/wLTt7YZpw6sIdjGt51VCiAELqpw2SIAWooWQBAD3nbkv1c5CQGspljsYKQEOPn8/6kernIKqpYpqjNyfI4yWNFYCp9iuf+Hwgkj6ONWS4+6dUdgkyEisAqlieADglhUaBDhlemJIofB4yosae4aTu2zFgSLB7nnR6Vd4FFEWVcaICGuFQK2QhBxV1w93AYn/MTEusAITr9T3hgLO3mcV1yAnGECoVzD5jDffYTFV014VrrR+6ys00FWCvmqmYm6KMtXAZ3a6ykSZE6OWqAmva0TySvYwouMkNovTqiTCmQUZiVZDw/3gDikrUXK3EzRGNytcXx5ozVfZ80MCFZeB1YkK4FlVGmhChXflVjGELv01oMYhbBv4O5ECpqF7j9C2lSk28GUp8GWIK5BJApWLehuQlR1i5N4YtQ4QIE93CvZafXMYvRC+FMZA0D/BaSh7/D7aoqFYbwXrcCTSF05SBrTixFxDehAGgUy2PGRmqGw0ykisrIg2qmvrP1DAvM+qE3xQeWEgl+vecslNV7EnVTP17RVGaAAg3M7emMMK4SK36zAJ+bxyUJgDFUtspLzXiVFyla09yUgnhjalGWmpO2anKUFXVgBGTJADD3YhTEUngLJGAL4Ulnq2kMvwOr1hEnGKAOXsHUpSRZ6wL1U1mY6W0HoCQfTuLwEi4RN97eu92wnmgXXp7QBkGfYskZi7bESwOemIZhORaB9C1fOMLT/yfkcQKQEzEDHfbMlnmGR7iyyoLtuLeWuANetw+N7iMfXo+oYzzgzLz7DK64re46Anc10rtdWukZZeRM9KHM2pvG3jmHhA7Exam3QtvO4ePw8W5sabWaN4w35h1lbAOnKgaWdIZnUB4Ez8Y+BiiDJxz3NAW/tCzdjKWEYXtM3NcEZxSAzIS7wsiwv3AiWODEw2GxLnRNgxJEW5x49u/5natHIARrZ9jzjI7LeNVkOlzwDHI7GY9KnDG2r0N6FCipDE6AsQKIGBGknzBhqPAy39+sS3GkDP0BJ3PM44kLtCYW1zdBWd6zRhbllGx4kk2Qzl4qwOHyX2RxJMogKJyXyTxJAqgqNwXSTyDZ8IFpeBJohkogLAaktZQsQwUAKoh39Kc2qAIliQb6ZxxjPu9ieuyFxRHKgHgZAN8a2VlLygONe2F3GI3iUIfOrsYx70NU8iHD/YececZEC4UlJVnn7yb6YkoFx7scf8+A2tZ/2S+DRlJHQ/gwdSU4ZKZxkT94a4WrnzEAmtsPTq1AChhfRN0SlPVRVyhGXVc+GMa9bu7YxnX0kfESD/9empT1SmJnc0Lh9pYekEqAThZY5qz25lGp9zFB7sNCD7FMeA65pSMxeWeSgCVitXw7Zb+ILsysHhQ/TBioWntjWW2GuoJaaSkVUH+rvsQpgwx+NZEiNVToVwEz22LhfOAKqV89K6WgQLopQf2k2tFkH3qegDtKlix/eA57YVGGWHBCBYhI/f4DhSApZgNb4eDPo3rhAkJutIZ7xkRjt1u+E7VRq2GaIorfOYnlPb4xrII2/6e+nFhQTVEQCnsYUxpyLZQ2w1ATxFh299VPy4sFEgXg3F9lHOC0hZqY8re3MLquogrjzeSFrL9GbMCaYr6lbM6D6bL1Ohb0RO2Mkj0BWWZ/drrt45B3X0XDMPlOk7If3bx2kp3X7k56mf0o+3PfLa/rX6uzB/ICSKMPxY32/CuU2yLaRNGwCBnnKd+uHUw0dZ+3rLFLnPgKwRYXXikatjHwxAgK9UqW5kdcj1WVtD2J8T/P3jkGMaqbJOafd3vzgnyONeyEquC7Nmvb6H2D2bP/MQ3YswtXN3ElBXRynfFNZu2mRp+EQ+HDg+tL3bWY+0KQdzNuyYrC37bHxGNJbJV6x/Pd0JqCCijDRgBsT2gN/v1mo9xqmrdnVlYbQglGtnK3evQUvK/lsTpJQ/9wnQE0RSqSfQqZevl01bmjLJBXPhyrwnBlTEdqkDjwpe70V/AxSB+BzMlI3G5xyZmicp5iKoDksBWDlzHJ+dSZf+r8FuOAuUtXGs6z53TYsrZFufb+/v0cREqKsrvn5UkH39R8YBYAQgV8z+IXlvltfI8bzya/fDqCrauQa+aEgIxhGB3OFCdicHzxy4YaRdVo+0vdPouDItw2P3rylzkI5mLEkDSQm3drSTU5WlaeRqc8Oa2rZq4CG32njKihS6ri99DlYWDOyjOouqZxdVUj5KnZkE+HdKLE+jX50sLQMUKQNzksp2LX9B7vcI4Lg0vX5+Besm2ppJ7Bo4f+J0Bz/InwaWvBFpMsQavgOmKOQBRnvuOuHOC0kzSRDN0VH5/J18fP/YkyX7vl//NeL1V+5pjaSVWZNj2R3Dypf9u3oAUnH+w1yZ+10XJc4LUQflR4gi+DTkI2/5xk684enOFfi+05wR/+6+mf/q2ASVQ6iK9cRC2/UnI5z8IprIWhJIOKN1vQkkcKgFE2P7oQGxBBpxJWbDHULIOJXGoBBD2+6Mlp3+aTvcHvgcHBuyoOAEPfXIxkWNAXqxexW34DhiQBxV0ZlrBJbRmsCxh9/8mcP4NpB5nJBKJRCKRSCQSiUQikUgkEolEIpFIJBKJRCKRSCQSiUQikUgkEolEIimYnwGoCQ5GqttGHQAAAABJRU5ErkJggg=="/></defs></svg>`,
|
|
1340
1343
|
name: 'leap-logo-matter-ai'
|
|
@@ -1791,6 +1794,10 @@ const gdsLineEditIcon = {
|
|
|
1791
1794
|
data: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.6567 4.99599C14.4 4.25277 14.3875 3.04397 13.6291 2.31623C12.8925 1.6094 11.7259 1.62143 11.004 2.34329L9.95007 3.39725L3.33857 10.0087C3.28364 10.0637 3.24226 10.1307 3.21772 10.2044L2.2347 13.1575C2.17462 13.338 2.22215 13.5369 2.35733 13.6708C2.4925 13.8046 2.6919 13.8501 2.87177 13.7883L5.80038 12.7807C5.87225 12.756 5.93753 12.7152 5.99127 12.6614L13.6567 4.99599ZM10.3036 4.45791L4.12922 10.6323L3.50301 12.5136L5.36584 11.8727L11.5421 5.69639L10.3036 4.45791ZM12.2492 4.98929L11.0107 3.7508L11.7111 3.0504C12.0482 2.71338 12.5928 2.70776 12.9367 3.03776C13.2908 3.37753 13.2966 3.94189 12.9496 4.28888L12.2492 4.98929Z" fill="currentColor"/></svg>`,
|
|
1792
1795
|
name: 'line-edit'
|
|
1793
1796
|
};
|
|
1797
|
+
const gdsLineEmailAlertIcon = {
|
|
1798
|
+
data: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.5025 1C15.2934 1 13.5025 2.79086 13.5025 5L13.5023 8L12.5539 8.80035C12.2462 9.06004 12.0923 9.18988 12.0457 9.29132C11.9312 9.54071 12.0391 9.8358 12.2875 9.95252C12.3885 10 12.5898 10 12.9925 10H22.0121C22.4148 10 22.6162 10 22.7172 9.95252C22.9656 9.8358 23.0735 9.5407 22.9589 9.29131C22.9123 9.18987 22.7584 9.06001 22.4507 8.80031L21.5025 8V5C21.5025 2.79086 19.7116 1 17.5025 1ZM19.0025 11C18.7842 11.5826 18.195 12 17.5025 12C16.81 12 16.2208 11.5826 16.0025 11H19.0025ZM22 16.75V11L20.5 11V16.75L20.4942 16.8935C20.4212 17.7929 19.6682 18.5 18.75 18.5H5.25L5.10647 18.4942C4.20711 18.4212 3.5 17.6682 3.5 16.75V9.374L11.6507 13.6637L11.7468 13.706C11.9431 13.7764 12.1619 13.7623 12.3493 13.6637L15.4503 12.0313C15.2878 11.8289 15.1559 11.6003 15.0624 11.3509L14.9309 11L14.1893 11L12 12.1525L3.5 7.679V7.25L3.5058 7.10647C3.57881 6.20711 4.33183 5.5 5.25 5.5H12.4988L12.4988 5C12.4988 4.65753 12.5333 4.32311 12.5989 4H5.25L5.06558 4.00514C3.35645 4.10075 2 5.51697 2 7.25V16.75L2.00514 16.9344C2.10075 18.6435 3.51697 20 5.25 20H18.75L18.9344 19.9949C20.6435 19.8992 22 18.483 22 16.75Z" fill="currentColor"/></svg>`,
|
|
1799
|
+
name: 'line-email-alert'
|
|
1800
|
+
};
|
|
1794
1801
|
const gdsLineEmailArrowDownIcon = {
|
|
1795
1802
|
data: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.0224 5H6C4.89545 5 4 5.89539 4 7V11H7.5C7.77594 11 7.99963 11.2235 8 11.4994L8.00031 11.5115C8.00073 11.5238 8.00165 11.5443 8.0036 11.5718C8.00757 11.6268 8.01562 11.7087 8.03229 11.8085C8.06586 12.01 8.13214 12.2712 8.2597 12.5264C8.38629 12.7795 8.56836 13.0176 8.83203 13.1934C9.09259 13.3671 9.46246 13.5 10 13.5C10.5375 13.5 10.9074 13.3671 11.168 13.1934C11.4316 13.0176 11.6137 12.7795 11.7403 12.5264C11.8162 12.3745 11.8704 12.2206 11.9089 12.0784C11.9351 11.9816 11.9541 11.8901 11.9677 11.8085C11.9844 11.7087 11.9924 11.6268 11.9964 11.5718C11.9984 11.5443 11.9993 11.5238 11.9997 11.5115L12 11.4991C12 11.223 12.2239 11 12.5 11H16V10.4003C16.3578 10.2174 16.6929 9.99646 17 9.7428V15C17 16.6569 15.6569 18 14 18H6C4.34314 18 3 16.6569 3 15V7C3 5.34314 4.34314 4 6 4H8.20703C8.11591 4.32227 8.05334 4.65662 8.0224 5ZM7.05048 12H4V15C4 16.1046 4.89545 17 6 17H14C15.1046 17 16 16.1046 16 15V12H12.9495C12.9035 12.2643 12.8134 12.6161 12.6347 12.9736C12.4488 13.3455 12.1621 13.7324 11.7227 14.0254C11.2801 14.3204 10.7125 14.5 10 14.5C9.28754 14.5 8.71991 14.3204 8.27734 14.0254C7.83789 13.7324 7.55121 13.3455 7.3653 12.9736C7.18658 12.6161 7.0965 12.2643 7.05048 12ZM13.5 10C15.9853 10 18 7.98528 18 5.5C18 3.01472 15.9853 1 13.5 1C11.0147 1 9 3.01472 9 5.5C9 7.98528 11.0147 10 13.5 10ZM11.1464 5.85355C10.9512 5.65829 10.9512 5.34171 11.1464 5.14645C11.3417 4.95118 11.6583 4.95118 11.8536 5.14645L13 6.29289V3.5C13 3.22386 13.2239 3 13.5 3C13.7761 3 14 3.22386 14 3.5V6.29289L15.1464 5.14645C15.3417 4.95118 15.6583 4.95118 15.8536 5.14645C16.0488 5.34171 16.0488 5.65829 15.8536 5.85355L13.8536 7.85355C13.8056 7.90149 13.7504 7.93766 13.6914 7.96206C13.6333 7.98615 13.5697 7.9996 13.503 7.99999L13.5 8L13.497 7.99999C13.4303 7.9996 13.3667 7.98615 13.3086 7.96206C13.2505 7.93802 13.196 7.90256 13.1486 7.85567L13.146 7.85316L11.1464 5.85355Z" fill="#1A1A1A"/></svg>`,
|
|
1796
1803
|
name: 'line-email-arrow-down'
|
|
@@ -2957,6 +2964,7 @@ var icons = /*#__PURE__*/Object.freeze({
|
|
|
2957
2964
|
gdsLeapIconTransparentOrangeIcon: gdsLeapIconTransparentOrangeIcon,
|
|
2958
2965
|
gdsLeapIconTransparentWhiteIcon: gdsLeapIconTransparentWhiteIcon,
|
|
2959
2966
|
gdsLeapLogoDefaultIcon: gdsLeapLogoDefaultIcon,
|
|
2967
|
+
gdsLeapLogoMatterAiBackgroundIcon: gdsLeapLogoMatterAiBackgroundIcon,
|
|
2960
2968
|
gdsLeapLogoMatterAiIcon: gdsLeapLogoMatterAiIcon,
|
|
2961
2969
|
gdsLeapLogoOrangeIcon: gdsLeapLogoOrangeIcon,
|
|
2962
2970
|
gdsLeapLogoWhiteIcon: gdsLeapLogoWhiteIcon,
|
|
@@ -3071,6 +3079,7 @@ var icons = /*#__PURE__*/Object.freeze({
|
|
|
3071
3079
|
gdsLineDraftIcon: gdsLineDraftIcon,
|
|
3072
3080
|
gdsLineDuplicateIcon: gdsLineDuplicateIcon,
|
|
3073
3081
|
gdsLineEditIcon: gdsLineEditIcon,
|
|
3082
|
+
gdsLineEmailAlertIcon: gdsLineEmailAlertIcon,
|
|
3074
3083
|
gdsLineEmailArrowDownIcon: gdsLineEmailArrowDownIcon,
|
|
3075
3084
|
gdsLineEmailCheckmarkIcon: gdsLineEmailCheckmarkIcon,
|
|
3076
3085
|
gdsLineEmailDismissIcon: gdsLineEmailDismissIcon,
|
|
@@ -3806,6 +3815,9 @@ class ButtonBaseDirective {
|
|
|
3806
3815
|
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3807
3816
|
size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
3808
3817
|
variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
3818
|
+
// Safari does not set buttons as tabbable by default.
|
|
3819
|
+
// To keep same behavior as chrome, set the tabIndex to 0 by default.
|
|
3820
|
+
tabIndex = input(0, ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
3809
3821
|
clicked = output();
|
|
3810
3822
|
isDisabled = computed(() => this.disabled() || this.busy(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
3811
3823
|
nativeElement = this.#elementRef.nativeElement;
|
|
@@ -3815,7 +3827,7 @@ class ButtonBaseDirective {
|
|
|
3815
3827
|
this.clicked.emit(event);
|
|
3816
3828
|
}
|
|
3817
3829
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ButtonBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3818
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: ButtonBaseDirective, isStandalone: true, inputs: { busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { attributes: { "type": "button" }, listeners: { "click": "handleClick($event)" }, properties: { "attr.disabled": "isDisabled() ? \"\" : undefined", "attr.data-size": "size()", "attr.data-variant": "variant()", "attr.data-busy": "busy() ? \"\" : undefined" } }, ngImport: i0 });
|
|
3830
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: ButtonBaseDirective, isStandalone: true, inputs: { busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { attributes: { "type": "button" }, listeners: { "click": "handleClick($event)" }, properties: { "attr.disabled": "isDisabled() ? \"\" : undefined", "attr.tabindex": "tabIndex()", "attr.data-size": "size()", "attr.data-variant": "variant()", "attr.data-busy": "busy() ? \"\" : undefined" } }, ngImport: i0 });
|
|
3819
3831
|
}
|
|
3820
3832
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ButtonBaseDirective, decorators: [{
|
|
3821
3833
|
type: Directive,
|
|
@@ -3826,6 +3838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3826
3838
|
// https://www.a11yproject.com/checklist/#use-the-button-element-for-buttons
|
|
3827
3839
|
type: 'button',
|
|
3828
3840
|
'[attr.disabled]': 'isDisabled() ? "" : undefined',
|
|
3841
|
+
'[attr.tabindex]': 'tabIndex()',
|
|
3829
3842
|
// Custom attributes for CSS
|
|
3830
3843
|
'[attr.data-size]': 'size()',
|
|
3831
3844
|
'[attr.data-variant]': 'variant()',
|
|
@@ -3834,26 +3847,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3834
3847
|
'(click)': 'handleClick($event)'
|
|
3835
3848
|
}
|
|
3836
3849
|
}]
|
|
3837
|
-
}], propDecorators: { busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
3850
|
+
}], propDecorators: { busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
3838
3851
|
|
|
3839
3852
|
class GdsButtonComponent extends ButtonBaseDirective {
|
|
3840
3853
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3841
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsButtonComponent, isStandalone: true, selector: "button[gds-button]", usesInheritance: true, ngImport: i0, template: "<div class=\"body\">\n @if (busy()) {\n <gds-icon\n role=\"progressbar\"\n class=\"busy-icon\"\n key=\"loading-kebab\"\n />\n }\n <div class=\"label\">\n <ng-content />\n </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3854
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsButtonComponent, isStandalone: true, selector: "button[gds-button]", usesInheritance: true, ngImport: i0, template: "<div class=\"body\">\n @if (busy()) {\n <gds-icon\n role=\"progressbar\"\n class=\"busy-icon\"\n key=\"loading-kebab\"\n />\n }\n <div class=\"label\">\n <ng-content />\n </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%;max-width:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3842
3855
|
}
|
|
3843
3856
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsButtonComponent, decorators: [{
|
|
3844
3857
|
type: Component,
|
|
3845
|
-
args: [{ selector: 'button[gds-button]', imports: [GdsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"body\">\n @if (busy()) {\n <gds-icon\n role=\"progressbar\"\n class=\"busy-icon\"\n key=\"loading-kebab\"\n />\n }\n <div class=\"label\">\n <ng-content />\n </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}}\n"] }]
|
|
3858
|
+
args: [{ selector: 'button[gds-button]', imports: [GdsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"body\">\n @if (busy()) {\n <gds-icon\n role=\"progressbar\"\n class=\"busy-icon\"\n key=\"loading-kebab\"\n />\n }\n <div class=\"label\">\n <ng-content />\n </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%;max-width:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}}\n"] }]
|
|
3846
3859
|
}] });
|
|
3847
3860
|
|
|
3848
3861
|
class GdsIconButtonComponent extends ButtonBaseDirective {
|
|
3849
3862
|
tooltipLabel = input(...(ngDevMode ? [undefined, { debugName: "tooltipLabel" }] : /* istanbul ignore next */ []));
|
|
3850
3863
|
enableTooltip = computed(() => !this.disabled() && !!this.tooltipLabel()?.trim(), ...(ngDevMode ? [{ debugName: "enableTooltip" }] : /* istanbul ignore next */ []));
|
|
3851
3864
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsIconButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3852
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsIconButtonComponent, isStandalone: true, selector: "button[gds-icon-button]", inputs: { tooltipLabel: { classPropertyName: "tooltipLabel", publicName: "tooltipLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n class=\"body\"\n [tp]=\"tooltipLabel()\"\n tpVariation=\"light\"\n tpAppendTo=\"parent\"\n [tpIsEnabled]=\"enableTooltip()\"\n [tpHideOnClick]=\"false\"\n>\n @if (busy()) {\n <gds-icon\n role=\"progressbar\"\n class=\"busy-icon\"\n key=\"loading-kebab\"\n />\n }\n\n <div class=\"\n gds-display-grid\n gds-gap-0\n label\n \">\n <ng-content select=\"gds-icon\" />\n </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-borderColor-hover: transparent}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host:has(gds-icon:only-child){aspect-ratio:1;padding:unset}}\n"], dependencies: [{ kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3865
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsIconButtonComponent, isStandalone: true, selector: "button[gds-icon-button]", inputs: { tooltipLabel: { classPropertyName: "tooltipLabel", publicName: "tooltipLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n class=\"body\"\n [tp]=\"tooltipLabel()\"\n tpVariation=\"light\"\n tpAppendTo=\"parent\"\n [tpIsEnabled]=\"enableTooltip()\"\n [tpHideOnClick]=\"false\"\n>\n @if (busy()) {\n <gds-icon\n role=\"progressbar\"\n class=\"busy-icon\"\n key=\"loading-kebab\"\n />\n }\n\n <div class=\"\n gds-display-grid\n gds-gap-0\n label\n \">\n <ng-content select=\"gds-icon\" />\n </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%;max-width:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-borderColor-hover: transparent}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host:has(gds-icon:only-child){aspect-ratio:1;padding:unset}}\n"], dependencies: [{ kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3853
3866
|
}
|
|
3854
3867
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsIconButtonComponent, decorators: [{
|
|
3855
3868
|
type: Component,
|
|
3856
|
-
args: [{ selector: 'button[gds-icon-button]', imports: [TippyDirective, GdsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"body\"\n [tp]=\"tooltipLabel()\"\n tpVariation=\"light\"\n tpAppendTo=\"parent\"\n [tpIsEnabled]=\"enableTooltip()\"\n [tpHideOnClick]=\"false\"\n>\n @if (busy()) {\n <gds-icon\n role=\"progressbar\"\n class=\"busy-icon\"\n key=\"loading-kebab\"\n />\n }\n\n <div class=\"\n gds-display-grid\n gds-gap-0\n label\n \">\n <ng-content select=\"gds-icon\" />\n </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-borderColor-hover: transparent}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host:has(gds-icon:only-child){aspect-ratio:1;padding:unset}}\n"] }]
|
|
3869
|
+
args: [{ selector: 'button[gds-icon-button]', imports: [TippyDirective, GdsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"body\"\n [tp]=\"tooltipLabel()\"\n tpVariation=\"light\"\n tpAppendTo=\"parent\"\n [tpIsEnabled]=\"enableTooltip()\"\n [tpHideOnClick]=\"false\"\n>\n @if (busy()) {\n <gds-icon\n role=\"progressbar\"\n class=\"busy-icon\"\n key=\"loading-kebab\"\n />\n }\n\n <div class=\"\n gds-display-grid\n gds-gap-0\n label\n \">\n <ng-content select=\"gds-icon\" />\n </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%;max-width:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-borderColor-hover: transparent}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host:has(gds-icon:only-child){aspect-ratio:1;padding:unset}}\n"] }]
|
|
3857
3870
|
}], propDecorators: { tooltipLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipLabel", required: false }] }] } });
|
|
3858
3871
|
|
|
3859
3872
|
class GdsBannerComponent {
|
|
@@ -5445,14 +5458,14 @@ class GdsFeedbackButtonComponent extends ButtonBaseDirective {
|
|
|
5445
5458
|
}
|
|
5446
5459
|
}
|
|
5447
5460
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFeedbackButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5448
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsFeedbackButtonComponent, isStandalone: true, selector: "button[gds-feedback-button]", inputs: { tooltipLabel: { classPropertyName: "tooltipLabel", publicName: "tooltipLabel", isSignal: true, isRequired: false, transformFunction: null }, clickedLabel: { classPropertyName: "clickedLabel", publicName: "clickedLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--icon": "iconVisible()", "style.--clicked-icon": "clickedIconVisible()" } }, usesInheritance: true, ngImport: i0, template: "<div\n class=\"body\"\n [tp]=\"tooltipTemplate\"\n tpVariation=\"light\"\n tpAppendTo=\"parent\"\n [tpIsEnabled]=\"hasTooltip()\"\n [tpHideOnClick]=\"false\"\n>\n @if (busy()) {\n <gds-icon\n role=\"progressbar\"\n class=\"busy-icon\"\n key=\"loading-kebab\"\n />\n }\n\n <div class=\"\n gds-display-grid\n gds-gap-0\n label\n \">\n <ng-content select=\"gds-icon\" />\n <ng-content select=\"[clicked-icon]\" />\n </div>\n</div>\n\n<ng-template #tooltipTemplate>\n {{ tooltipTextContent() }}\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled);--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover)}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host{aspect-ratio:1;padding-inline:unset}:host .body{display:grid;grid-template-columns:1fr;grid-template-areas:\"main\";align-items:center;justify-items:center}:host .label ::ng-deep>*{grid-area:main}:host .label ::ng-deep>*:has(+[clicked-icon]){transition:175ms opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--icon));opacity:var(--icon)}:host .label ::ng-deep>[clicked-icon]{transition:.2s opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--clicked-icon));opacity:var(--clicked-icon)}}\n"], dependencies: [{ kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5461
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsFeedbackButtonComponent, isStandalone: true, selector: "button[gds-feedback-button]", inputs: { tooltipLabel: { classPropertyName: "tooltipLabel", publicName: "tooltipLabel", isSignal: true, isRequired: false, transformFunction: null }, clickedLabel: { classPropertyName: "clickedLabel", publicName: "clickedLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--icon": "iconVisible()", "style.--clicked-icon": "clickedIconVisible()" } }, usesInheritance: true, ngImport: i0, template: "<div\n class=\"body\"\n [tp]=\"tooltipTemplate\"\n tpVariation=\"light\"\n tpAppendTo=\"parent\"\n [tpIsEnabled]=\"hasTooltip()\"\n [tpHideOnClick]=\"false\"\n>\n @if (busy()) {\n <gds-icon\n role=\"progressbar\"\n class=\"busy-icon\"\n key=\"loading-kebab\"\n />\n }\n\n <div class=\"\n gds-display-grid\n gds-gap-0\n label\n \">\n <ng-content select=\"gds-icon\" />\n <ng-content select=\"[clicked-icon]\" />\n </div>\n</div>\n\n<ng-template #tooltipTemplate>\n {{ tooltipTextContent() }}\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%;max-width:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled);--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover)}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host{aspect-ratio:1;padding-inline:unset}:host .body{display:grid;grid-template-columns:1fr;grid-template-areas:\"main\";align-items:center;justify-items:center}:host .label ::ng-deep>*{grid-area:main}:host .label ::ng-deep>*:has(+[clicked-icon]){transition:175ms opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--icon));opacity:var(--icon)}:host .label ::ng-deep>[clicked-icon]{transition:.2s opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--clicked-icon));opacity:var(--clicked-icon)}}\n"], dependencies: [{ kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5449
5462
|
}
|
|
5450
5463
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFeedbackButtonComponent, decorators: [{
|
|
5451
5464
|
type: Component,
|
|
5452
5465
|
args: [{ selector: 'button[gds-feedback-button]', imports: [TippyDirective, GdsIconComponent], host: {
|
|
5453
5466
|
'[style.--icon]': 'iconVisible()',
|
|
5454
5467
|
'[style.--clicked-icon]': 'clickedIconVisible()'
|
|
5455
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"body\"\n [tp]=\"tooltipTemplate\"\n tpVariation=\"light\"\n tpAppendTo=\"parent\"\n [tpIsEnabled]=\"hasTooltip()\"\n [tpHideOnClick]=\"false\"\n>\n @if (busy()) {\n <gds-icon\n role=\"progressbar\"\n class=\"busy-icon\"\n key=\"loading-kebab\"\n />\n }\n\n <div class=\"\n gds-display-grid\n gds-gap-0\n label\n \">\n <ng-content select=\"gds-icon\" />\n <ng-content select=\"[clicked-icon]\" />\n </div>\n</div>\n\n<ng-template #tooltipTemplate>\n {{ tooltipTextContent() }}\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled);--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover)}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host{aspect-ratio:1;padding-inline:unset}:host .body{display:grid;grid-template-columns:1fr;grid-template-areas:\"main\";align-items:center;justify-items:center}:host .label ::ng-deep>*{grid-area:main}:host .label ::ng-deep>*:has(+[clicked-icon]){transition:175ms opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--icon));opacity:var(--icon)}:host .label ::ng-deep>[clicked-icon]{transition:.2s opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--clicked-icon));opacity:var(--clicked-icon)}}\n"] }]
|
|
5468
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"body\"\n [tp]=\"tooltipTemplate\"\n tpVariation=\"light\"\n tpAppendTo=\"parent\"\n [tpIsEnabled]=\"hasTooltip()\"\n [tpHideOnClick]=\"false\"\n>\n @if (busy()) {\n <gds-icon\n role=\"progressbar\"\n class=\"busy-icon\"\n key=\"loading-kebab\"\n />\n }\n\n <div class=\"\n gds-display-grid\n gds-gap-0\n label\n \">\n <ng-content select=\"gds-icon\" />\n <ng-content select=\"[clicked-icon]\" />\n </div>\n</div>\n\n<ng-template #tooltipTemplate>\n {{ tooltipTextContent() }}\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%;max-width:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled);--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover)}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host{aspect-ratio:1;padding-inline:unset}:host .body{display:grid;grid-template-columns:1fr;grid-template-areas:\"main\";align-items:center;justify-items:center}:host .label ::ng-deep>*{grid-area:main}:host .label ::ng-deep>*:has(+[clicked-icon]){transition:175ms opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--icon));opacity:var(--icon)}:host .label ::ng-deep>[clicked-icon]{transition:.2s opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--clicked-icon));opacity:var(--clicked-icon)}}\n"] }]
|
|
5456
5469
|
}], propDecorators: { tooltipLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipLabel", required: false }] }], clickedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickedLabel", required: false }] }] } });
|
|
5457
5470
|
|
|
5458
5471
|
class GdsFilterChipComponent extends OnBrandChanged {
|
|
@@ -5835,7 +5848,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
5835
5848
|
|
|
5836
5849
|
class GdsButtonRadioOptionComponent extends GdsRadioOptionDirective {
|
|
5837
5850
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsButtonRadioOptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5838
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: GdsButtonRadioOptionComponent, isStandalone: true, selector: "input[gds-button-radio-option]", host: { attributes: { "type": "radio" }, listeners: { "change": "onChange()" }, properties: { "checked": "selected()", "id": "id()", "name": "name()", "disabled": "disabled()", "attr.invalid": "invalid()", "attr.data-label": "label()", "attr.aria-label": "label()" }, classAttribute: "gds-text-caption-strong gds-radius-sm" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: ["@layer design-system{:host{border:var(--gds-borderWidth-md) solid;border-color:var(--gds-palette-border-primary);color:var(--gds-palette-text-primary-primary)}:host:hover,:host:checked{border-color:var(--gds-palette-border-selected);background-color:var(--gds-palette-background-hover)}:host[invalid=true],:host:disabled{border-color:inherit;color:inherit;background-color:inherit}:host[invalid=true]:hover,:host[invalid=true]:checked{background-color:var(--gds-palette-helper-error-default)}:host:focus-visible{outline:var(--gds-borderWidth-lg) solid var(--gds-palette-border-dark);outline-offset:2px}:host:before{display:block;content:attr(data-label);padding:var(--gds-spacing-2xs)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5851
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: GdsButtonRadioOptionComponent, isStandalone: true, selector: "input[gds-button-radio-option]", host: { attributes: { "type": "radio" }, listeners: { "change": "onChange()" }, properties: { "checked": "selected()", "id": "id()", "name": "name()", "disabled": "disabled()", "attr.invalid": "invalid()", "attr.data-label": "label()", "attr.tabindex": "selected() ? 0 : -1", "attr.aria-label": "label()" }, classAttribute: "gds-text-caption-strong gds-radius-sm" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: ["@layer design-system{:host{border:var(--gds-borderWidth-md) solid;border-color:var(--gds-palette-border-primary);color:var(--gds-palette-text-primary-primary)}:host:hover,:host:checked{border-color:var(--gds-palette-border-selected);background-color:var(--gds-palette-background-hover)}:host[invalid=true],:host:disabled{border-color:inherit;color:inherit;background-color:inherit}:host[invalid=true]:hover,:host[invalid=true]:checked{background-color:var(--gds-palette-helper-error-default)}:host:focus-visible{outline:var(--gds-borderWidth-lg) solid var(--gds-palette-border-dark);outline-offset:2px}:host:before{display:block;content:attr(data-label);padding:var(--gds-spacing-2xs)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5839
5852
|
}
|
|
5840
5853
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsButtonRadioOptionComponent, decorators: [{
|
|
5841
5854
|
type: Component,
|
|
@@ -5852,6 +5865,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
5852
5865
|
'[attr.invalid]': 'invalid()',
|
|
5853
5866
|
'[attr.data-label]': 'label()',
|
|
5854
5867
|
// a11y
|
|
5868
|
+
'[attr.tabindex]': 'selected() ? 0 : -1',
|
|
5855
5869
|
'[attr.aria-label]': 'label()'
|
|
5856
5870
|
}, styles: ["@layer design-system{:host{border:var(--gds-borderWidth-md) solid;border-color:var(--gds-palette-border-primary);color:var(--gds-palette-text-primary-primary)}:host:hover,:host:checked{border-color:var(--gds-palette-border-selected);background-color:var(--gds-palette-background-hover)}:host[invalid=true],:host:disabled{border-color:inherit;color:inherit;background-color:inherit}:host[invalid=true]:hover,:host[invalid=true]:checked{background-color:var(--gds-palette-helper-error-default)}:host:focus-visible{outline:var(--gds-borderWidth-lg) solid var(--gds-palette-border-dark);outline-offset:2px}:host:before{display:block;content:attr(data-label);padding:var(--gds-spacing-2xs)}}\n"] }]
|
|
5857
5871
|
}] });
|
|
@@ -6902,13 +6916,18 @@ class GdsSearchBarComponent {
|
|
|
6902
6916
|
#setDropdownStyling = () => {
|
|
6903
6917
|
if (!this.dropdownPanelScroll)
|
|
6904
6918
|
return;
|
|
6905
|
-
this
|
|
6906
|
-
this
|
|
6919
|
+
const dropdownPanel = this.dropdownPanelScroll.nativeElement;
|
|
6920
|
+
const dropdownPanelParent = this.dropdownPanelScroll.nativeElement.parentElement;
|
|
6921
|
+
if (!dropdownPanelParent)
|
|
6922
|
+
return;
|
|
6923
|
+
this.#renderer.setStyle(dropdownPanel, 'maxHeight', this.maxHeight());
|
|
6924
|
+
this.#renderer.setStyle(dropdownPanel, 'minHeight', this.minHeight());
|
|
6925
|
+
this.#renderer.setStyle(dropdownPanelParent, 'marginTop', '4px');
|
|
6907
6926
|
// this needs to be last to prevent the dropdown from flashing
|
|
6908
|
-
this.#renderer.setStyle(
|
|
6927
|
+
this.#renderer.setStyle(dropdownPanelParent, 'visibility', 'visible');
|
|
6909
6928
|
};
|
|
6910
6929
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6911
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsSearchBarComponent, isStandalone: true, selector: "gds-search-bar", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: true, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, suppressClearOnClose: { classPropertyName: "suppressClearOnClose", publicName: "suppressClearOnClose", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, isOpenOverride: { classPropertyName: "isOpenOverride", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, searchFunction: { classPropertyName: "searchFunction", publicName: "searchFunction", isSignal: true, isRequired: false, transformFunction: null }, showAllItems: { classPropertyName: "showAllItems", publicName: "showAllItems", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isDisabled: "isDisabledChange", focused: "focused", blurred: "blurred", dropdownStateChanged: "dropdownStateChanged", searched: "searched", changed: "changed", value: "valueChange" }, host: { listeners: { "keydown": "setMarkedItemIndex()", "window:resize": "close()" }, properties: { "attr.disabled": "isDisabled() ? \"\" : undefined" } }, queries: [{ propertyName: "groupItemTmpl", first: true, predicate: ["groupItemTmpl"], descendants: true, isSignal: true }, { propertyName: "dropdownItemTmpl", first: true, predicate: ["itemTmpl"], descendants: true, isSignal: true }, { propertyName: "emptyTmpl", first: true, predicate: ["emptyTmpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-select\n #select\n class=\"\n gds-radius-sm\n gds-search-bar_input\n \"\n [placeholder]=\"!value() ? placeholder() : ''\"\n [isOpen]=\"isOpen()\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"setValue($event)\"\n [items]=\"items()\"\n [bindValue]=\"bindValue()\"\n [bindLabel]=\"bindLabel()\"\n [loading]=\"loading()\"\n [markFirst]=\"false\"\n [groupBy]=\"groupBy()\"\n [dropdownPosition]=\"dropdownPosition()\"\n [searchFn]=\"showAllItems() ? showAllItemsSearchFunction : searchFunction()\"\n [ariaLabel]=\"ariaLabel() ?? 'Core.Accessibility.Searchbar' | translate\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n (click)=\"handleClick($event)\"\n (search)=\"handleSearch($event.term)\"\n (open)=\"handleOpened()\"\n (close)=\"handleClosed()\"\n (change)=\"handleChange($event)\"\n (clear)=\"handleClear()\"\n>\n <ng-template\n ng-optgroup-tmp\n let-item=\"item\"\n let-index=\"index\"\n >\n <div class=\"\n gds-display-flex\n gds-padding-block-3xs\n gds-padding-inline-0\n gds-text-body\n gds-text-primary\n \">\n <ng-container *ngTemplateOutlet=\"groupItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n </div>\n </ng-template>\n <ng-template\n ng-option-tmp\n let-item=\"item\"\n let-index=\"index\"\n >\n <div class=\"\n gds-display-flex\n gds-padding-block-3xs\n gds-padding-inline-0\n gds-text-body\n gds-text-primary\n \">\n <ng-container *ngTemplateOutlet=\"dropdownItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n </div>\n </ng-template>\n <ng-template\n ng-notfound-tmp\n let-searchTerm=\"searchTerm\"\n >\n <ng-container *ngTemplateOutlet=\"emptyTmpl(); context: { searchTerm }\" />\n </ng-template>\n <ng-template ng-loadingtext-tmp>\n <div class=\"\n gds-display-flex\n gds-justify-content-center\n gds-padding-sm\n gds-text-body\n gds-text-primary\n \">\n <gds-spinner />\n </div>\n </ng-template>\n <ng-template ng-loadingspinner-tmp />\n <ng-template ng-clearbutton-tmp>\n <button\n gds-icon-button\n class=\"\n gds-background-none\n gds-min-height-0\n ng-clear-wrapper\n \"\n (click)=\"select.handleClearClick()\"\n (mousedown)=\"onClearMouseDown($event)\"\n (keydown.enter)=\"onKeydownClear($event)\"\n >\n <gds-icon\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n gds-mobile-icon-size-2xs\n \"\n key=\"line-dismiss\"\n />\n </button>\n </ng-template>\n</ng-select>\n", styles: ["@layer design-system{gds-search-bar{display:flex;max-width:var(--search-bar-max-width, 560px);min-width:230px;width:100%;position:relative;--background-color: var(--gds-palette-background-white);--text-color: var(--gds-palette-text-default-primary);--icon-color: var(--gds-palette-icon-primary);--cursor: text}gds-search-bar[disabled]{--background-color: var(--gds-palette-background-disabled);--text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled);--cursor: not-allowed}gds-search-bar .gds-search-bar_icon{min-width:var(--gds-spacing-sm);color:var(--icon-color)}gds-search-bar .gds-search-bar_input{background-color:var(--background-color);border:.5px solid var(--gds-palette-border-default);color:var(--text-color);box-sizing:border-box;text-overflow:ellipsis;width:100%;font:var(--gds-text-body-shorthand)}:is(body[isMobile=true]) gds-search-bar .gds-search-bar_input{font:var(--gds-text-inputMobile-shorthand)}gds-search-bar .gds-search-bar_input::placeholder{color:var(--gds-palette-text-default-secondary);width:100%}gds-search-bar .gds-search-bar_input:focus-visible{outline:none}gds-search-bar .gds-search-bar_end-content{display:flex;align-items:center;gap:var(--gds-spacing-2xs)}gds-search-bar .gds-search-bar_clear-button{cursor:pointer}gds-search-bar ng-select.ng-select .leading-icon{height:var(--gds-iconSize-2xs);width:var(--gds-iconSize-2xs);color:var(--icon-color);margin-right:var(--gds-size-3xs-rem)}gds-search-bar ng-select.ng-select .ng-select-container{padding:6px var(--gds-spacing-xs);cursor:var(--cursor)}:is(body[isMobile=true]) gds-search-bar ng-select.ng-select .ng-select-container{padding-block:11px}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container{display:flex;justify-content:var(--search-bar-placeholder-justify, \"center\");align-items:center}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container:focus-within{justify-content:unset}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 calc(12px + var(--gds-iconSize-xs))}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input>input{vertical-align:baseline;cursor:var(--cursor)}gds-search-bar ng-select.ng-select .ng-select-container .ng-clear-wrapper[gds-icon-button]{--gds-mobile-button-size: var(--gds-iconSize-2xs)}gds-search-bar ng-select.ng-select .ng-dropdown-panel{padding:var(--gds-spacing-3xs) 2px;visibility:hidden}gds-search-bar ng-select.ng-select .ng-dropdown-panel .ng-option{overflow:unset!important}gds-search-bar ng-select.ng-select .ng-dropdown-panel .scroll-host{padding:0 2px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: i2.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i2.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "directive", type: i2.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "directive", type: i2.NgClearButtonTemplateDirective, selector: "[ng-clearbutton-tmp]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GdsSpinnerComponent, selector: "gds-spinner", inputs: ["trackWidth", "size"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6930
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsSearchBarComponent, isStandalone: true, selector: "gds-search-bar", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: true, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, suppressClearOnClose: { classPropertyName: "suppressClearOnClose", publicName: "suppressClearOnClose", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, isOpenOverride: { classPropertyName: "isOpenOverride", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, searchFunction: { classPropertyName: "searchFunction", publicName: "searchFunction", isSignal: true, isRequired: false, transformFunction: null }, showAllItems: { classPropertyName: "showAllItems", publicName: "showAllItems", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isDisabled: "isDisabledChange", focused: "focused", blurred: "blurred", dropdownStateChanged: "dropdownStateChanged", searched: "searched", changed: "changed", value: "valueChange" }, host: { listeners: { "keydown": "setMarkedItemIndex()", "window:resize": "close()" }, properties: { "attr.disabled": "isDisabled() ? \"\" : undefined" } }, queries: [{ propertyName: "groupItemTmpl", first: true, predicate: ["groupItemTmpl"], descendants: true, isSignal: true }, { propertyName: "dropdownItemTmpl", first: true, predicate: ["itemTmpl"], descendants: true, isSignal: true }, { propertyName: "emptyTmpl", first: true, predicate: ["emptyTmpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-select\n #select\n class=\"\n gds-radius-sm\n gds-search-bar_input\n \"\n [placeholder]=\"!value() ? placeholder() : ''\"\n [isOpen]=\"isOpen()\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"setValue($event)\"\n [items]=\"items()\"\n [bindValue]=\"bindValue()\"\n [bindLabel]=\"bindLabel()\"\n [loading]=\"loading()\"\n [markFirst]=\"false\"\n [groupBy]=\"groupBy()\"\n [dropdownPosition]=\"dropdownPosition()\"\n [searchFn]=\"showAllItems() ? showAllItemsSearchFunction : searchFunction()\"\n [ariaLabel]=\"ariaLabel() ?? 'Core.Accessibility.Searchbar' | translate\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n (click)=\"handleClick($event)\"\n (search)=\"handleSearch($event.term)\"\n (open)=\"handleOpened()\"\n (close)=\"handleClosed()\"\n (change)=\"handleChange($event)\"\n (clear)=\"handleClear()\"\n>\n <ng-template\n ng-optgroup-tmp\n let-item=\"item\"\n let-index=\"index\"\n >\n <div class=\"\n gds-display-flex\n gds-padding-block-3xs\n gds-padding-inline-0\n gds-text-body\n gds-text-primary\n \">\n <ng-container *ngTemplateOutlet=\"groupItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n </div>\n </ng-template>\n <ng-template\n ng-option-tmp\n let-item=\"item\"\n let-index=\"index\"\n >\n <div class=\"\n gds-display-flex\n gds-padding-block-3xs\n gds-padding-inline-0\n gds-text-body\n gds-text-primary\n \">\n <ng-container *ngTemplateOutlet=\"dropdownItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n </div>\n </ng-template>\n <ng-template\n ng-notfound-tmp\n let-searchTerm=\"searchTerm\"\n >\n <ng-container *ngTemplateOutlet=\"emptyTmpl(); context: { searchTerm }\" />\n </ng-template>\n <ng-template ng-loadingtext-tmp>\n <div class=\"\n gds-display-flex\n gds-justify-content-center\n gds-padding-sm\n gds-text-body\n gds-text-primary\n \">\n <gds-spinner />\n </div>\n </ng-template>\n <ng-template ng-loadingspinner-tmp />\n <ng-template ng-clearbutton-tmp>\n <button\n gds-icon-button\n class=\"\n gds-background-none\n gds-min-height-0\n ng-clear-wrapper\n \"\n (click)=\"select.handleClearClick()\"\n (mousedown)=\"onClearMouseDown($event)\"\n (keydown.enter)=\"onKeydownClear($event)\"\n >\n <gds-icon\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n gds-mobile-icon-size-2xs\n \"\n key=\"line-dismiss\"\n />\n </button>\n </ng-template>\n</ng-select>\n", styles: ["@layer design-system{gds-search-bar{display:flex;max-width:var(--search-bar-max-width, 560px);min-width:230px;width:100%;position:relative;--background-color: var(--gds-palette-background-white);--text-color: var(--gds-palette-text-default-primary);--icon-color: var(--gds-palette-icon-primary);--cursor: text;--border: .5px solid var(--gds-palette-border-default);--border-radius: var(--gds-borderRadius-sm);--padding: 0px}gds-search-bar[disabled]{--background-color: var(--gds-palette-background-disabled);--text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled);--cursor: not-allowed}gds-search-bar .gds-search-bar_icon{min-width:var(--gds-spacing-sm);color:var(--icon-color)}gds-search-bar .gds-search-bar_input{background-color:var(--background-color);border:var(--border);color:var(--text-color);box-sizing:border-box;text-overflow:ellipsis;width:100%;border-radius:var(--border-radius)!important;font:var(--gds-text-body-shorthand)}:is(body[isMobile=true]) gds-search-bar .gds-search-bar_input{font:var(--gds-text-inputMobile-shorthand)}gds-search-bar .gds-search-bar_input::placeholder{color:var(--gds-palette-text-default-secondary);width:100%}gds-search-bar .gds-search-bar_input:focus-visible{outline:none}gds-search-bar .gds-search-bar_end-content{display:flex;align-items:center;gap:var(--gds-spacing-2xs)}gds-search-bar .gds-search-bar_clear-button{cursor:pointer}gds-search-bar ng-select.ng-select .leading-icon{height:var(--gds-iconSize-2xs);width:var(--gds-iconSize-2xs);color:var(--icon-color);margin-right:var(--gds-size-3xs-rem)}gds-search-bar ng-select.ng-select .ng-select-container{padding:6px var(--gds-spacing-xs);cursor:var(--cursor);border-radius:var(--border-radius)}:is(body[isMobile=true]) gds-search-bar ng-select.ng-select .ng-select-container{padding-block:11px}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container{display:flex;justify-content:var(--search-bar-placeholder-justify, \"center\");align-items:center;padding:var(--padding)}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container:focus-within{justify-content:unset}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 calc(12px + var(--gds-iconSize-xs))}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input>input{vertical-align:baseline;cursor:var(--cursor)}gds-search-bar ng-select.ng-select .ng-select-container .ng-clear-wrapper[gds-icon-button]{--gds-mobile-button-size: var(--gds-iconSize-2xs)}gds-search-bar ng-select.ng-select .ng-dropdown-panel{padding:var(--gds-spacing-3xs) 2px;visibility:hidden}gds-search-bar ng-select.ng-select .ng-dropdown-panel .ng-option{overflow:unset!important}gds-search-bar ng-select.ng-select .ng-dropdown-panel .scroll-host{padding:0 2px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: i2.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i2.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "directive", type: i2.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "directive", type: i2.NgClearButtonTemplateDirective, selector: "[ng-clearbutton-tmp]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GdsSpinnerComponent, selector: "gds-spinner", inputs: ["trackWidth", "size"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6912
6931
|
}
|
|
6913
6932
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSearchBarComponent, decorators: [{
|
|
6914
6933
|
type: Component,
|
|
@@ -6924,7 +6943,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
6924
6943
|
'[attr.disabled]': 'isDisabled() ? "" : undefined',
|
|
6925
6944
|
'(keydown)': 'setMarkedItemIndex()',
|
|
6926
6945
|
'(window:resize)': 'close()'
|
|
6927
|
-
}, template: "<ng-select\n #select\n class=\"\n gds-radius-sm\n gds-search-bar_input\n \"\n [placeholder]=\"!value() ? placeholder() : ''\"\n [isOpen]=\"isOpen()\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"setValue($event)\"\n [items]=\"items()\"\n [bindValue]=\"bindValue()\"\n [bindLabel]=\"bindLabel()\"\n [loading]=\"loading()\"\n [markFirst]=\"false\"\n [groupBy]=\"groupBy()\"\n [dropdownPosition]=\"dropdownPosition()\"\n [searchFn]=\"showAllItems() ? showAllItemsSearchFunction : searchFunction()\"\n [ariaLabel]=\"ariaLabel() ?? 'Core.Accessibility.Searchbar' | translate\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n (click)=\"handleClick($event)\"\n (search)=\"handleSearch($event.term)\"\n (open)=\"handleOpened()\"\n (close)=\"handleClosed()\"\n (change)=\"handleChange($event)\"\n (clear)=\"handleClear()\"\n>\n <ng-template\n ng-optgroup-tmp\n let-item=\"item\"\n let-index=\"index\"\n >\n <div class=\"\n gds-display-flex\n gds-padding-block-3xs\n gds-padding-inline-0\n gds-text-body\n gds-text-primary\n \">\n <ng-container *ngTemplateOutlet=\"groupItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n </div>\n </ng-template>\n <ng-template\n ng-option-tmp\n let-item=\"item\"\n let-index=\"index\"\n >\n <div class=\"\n gds-display-flex\n gds-padding-block-3xs\n gds-padding-inline-0\n gds-text-body\n gds-text-primary\n \">\n <ng-container *ngTemplateOutlet=\"dropdownItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n </div>\n </ng-template>\n <ng-template\n ng-notfound-tmp\n let-searchTerm=\"searchTerm\"\n >\n <ng-container *ngTemplateOutlet=\"emptyTmpl(); context: { searchTerm }\" />\n </ng-template>\n <ng-template ng-loadingtext-tmp>\n <div class=\"\n gds-display-flex\n gds-justify-content-center\n gds-padding-sm\n gds-text-body\n gds-text-primary\n \">\n <gds-spinner />\n </div>\n </ng-template>\n <ng-template ng-loadingspinner-tmp />\n <ng-template ng-clearbutton-tmp>\n <button\n gds-icon-button\n class=\"\n gds-background-none\n gds-min-height-0\n ng-clear-wrapper\n \"\n (click)=\"select.handleClearClick()\"\n (mousedown)=\"onClearMouseDown($event)\"\n (keydown.enter)=\"onKeydownClear($event)\"\n >\n <gds-icon\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n gds-mobile-icon-size-2xs\n \"\n key=\"line-dismiss\"\n />\n </button>\n </ng-template>\n</ng-select>\n", styles: ["@layer design-system{gds-search-bar{display:flex;max-width:var(--search-bar-max-width, 560px);min-width:230px;width:100%;position:relative;--background-color: var(--gds-palette-background-white);--text-color: var(--gds-palette-text-default-primary);--icon-color: var(--gds-palette-icon-primary);--cursor: text}gds-search-bar[disabled]{--background-color: var(--gds-palette-background-disabled);--text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled);--cursor: not-allowed}gds-search-bar .gds-search-bar_icon{min-width:var(--gds-spacing-sm);color:var(--icon-color)}gds-search-bar .gds-search-bar_input{background-color:var(--background-color);border
|
|
6946
|
+
}, template: "<ng-select\n #select\n class=\"\n gds-radius-sm\n gds-search-bar_input\n \"\n [placeholder]=\"!value() ? placeholder() : ''\"\n [isOpen]=\"isOpen()\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"setValue($event)\"\n [items]=\"items()\"\n [bindValue]=\"bindValue()\"\n [bindLabel]=\"bindLabel()\"\n [loading]=\"loading()\"\n [markFirst]=\"false\"\n [groupBy]=\"groupBy()\"\n [dropdownPosition]=\"dropdownPosition()\"\n [searchFn]=\"showAllItems() ? showAllItemsSearchFunction : searchFunction()\"\n [ariaLabel]=\"ariaLabel() ?? 'Core.Accessibility.Searchbar' | translate\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n (click)=\"handleClick($event)\"\n (search)=\"handleSearch($event.term)\"\n (open)=\"handleOpened()\"\n (close)=\"handleClosed()\"\n (change)=\"handleChange($event)\"\n (clear)=\"handleClear()\"\n>\n <ng-template\n ng-optgroup-tmp\n let-item=\"item\"\n let-index=\"index\"\n >\n <div class=\"\n gds-display-flex\n gds-padding-block-3xs\n gds-padding-inline-0\n gds-text-body\n gds-text-primary\n \">\n <ng-container *ngTemplateOutlet=\"groupItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n </div>\n </ng-template>\n <ng-template\n ng-option-tmp\n let-item=\"item\"\n let-index=\"index\"\n >\n <div class=\"\n gds-display-flex\n gds-padding-block-3xs\n gds-padding-inline-0\n gds-text-body\n gds-text-primary\n \">\n <ng-container *ngTemplateOutlet=\"dropdownItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n </div>\n </ng-template>\n <ng-template\n ng-notfound-tmp\n let-searchTerm=\"searchTerm\"\n >\n <ng-container *ngTemplateOutlet=\"emptyTmpl(); context: { searchTerm }\" />\n </ng-template>\n <ng-template ng-loadingtext-tmp>\n <div class=\"\n gds-display-flex\n gds-justify-content-center\n gds-padding-sm\n gds-text-body\n gds-text-primary\n \">\n <gds-spinner />\n </div>\n </ng-template>\n <ng-template ng-loadingspinner-tmp />\n <ng-template ng-clearbutton-tmp>\n <button\n gds-icon-button\n class=\"\n gds-background-none\n gds-min-height-0\n ng-clear-wrapper\n \"\n (click)=\"select.handleClearClick()\"\n (mousedown)=\"onClearMouseDown($event)\"\n (keydown.enter)=\"onKeydownClear($event)\"\n >\n <gds-icon\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n gds-mobile-icon-size-2xs\n \"\n key=\"line-dismiss\"\n />\n </button>\n </ng-template>\n</ng-select>\n", styles: ["@layer design-system{gds-search-bar{display:flex;max-width:var(--search-bar-max-width, 560px);min-width:230px;width:100%;position:relative;--background-color: var(--gds-palette-background-white);--text-color: var(--gds-palette-text-default-primary);--icon-color: var(--gds-palette-icon-primary);--cursor: text;--border: .5px solid var(--gds-palette-border-default);--border-radius: var(--gds-borderRadius-sm);--padding: 0px}gds-search-bar[disabled]{--background-color: var(--gds-palette-background-disabled);--text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled);--cursor: not-allowed}gds-search-bar .gds-search-bar_icon{min-width:var(--gds-spacing-sm);color:var(--icon-color)}gds-search-bar .gds-search-bar_input{background-color:var(--background-color);border:var(--border);color:var(--text-color);box-sizing:border-box;text-overflow:ellipsis;width:100%;border-radius:var(--border-radius)!important;font:var(--gds-text-body-shorthand)}:is(body[isMobile=true]) gds-search-bar .gds-search-bar_input{font:var(--gds-text-inputMobile-shorthand)}gds-search-bar .gds-search-bar_input::placeholder{color:var(--gds-palette-text-default-secondary);width:100%}gds-search-bar .gds-search-bar_input:focus-visible{outline:none}gds-search-bar .gds-search-bar_end-content{display:flex;align-items:center;gap:var(--gds-spacing-2xs)}gds-search-bar .gds-search-bar_clear-button{cursor:pointer}gds-search-bar ng-select.ng-select .leading-icon{height:var(--gds-iconSize-2xs);width:var(--gds-iconSize-2xs);color:var(--icon-color);margin-right:var(--gds-size-3xs-rem)}gds-search-bar ng-select.ng-select .ng-select-container{padding:6px var(--gds-spacing-xs);cursor:var(--cursor);border-radius:var(--border-radius)}:is(body[isMobile=true]) gds-search-bar ng-select.ng-select .ng-select-container{padding-block:11px}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container{display:flex;justify-content:var(--search-bar-placeholder-justify, \"center\");align-items:center;padding:var(--padding)}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container:focus-within{justify-content:unset}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 calc(12px + var(--gds-iconSize-xs))}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input>input{vertical-align:baseline;cursor:var(--cursor)}gds-search-bar ng-select.ng-select .ng-select-container .ng-clear-wrapper[gds-icon-button]{--gds-mobile-button-size: var(--gds-iconSize-2xs)}gds-search-bar ng-select.ng-select .ng-dropdown-panel{padding:var(--gds-spacing-3xs) 2px;visibility:hidden}gds-search-bar ng-select.ng-select .ng-dropdown-panel .ng-option{overflow:unset!important}gds-search-bar ng-select.ng-select .ng-dropdown-panel .scroll-host{padding:0 2px}}\n"] }]
|
|
6928
6947
|
}], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: true }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }, { type: i0.Output, args: ["isDisabledChange"] }], suppressClearOnClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "suppressClearOnClose", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], isOpenOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], searchFunction: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFunction", required: false }] }], showAllItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAllItems", required: false }] }], dropdownPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownPosition", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], groupItemTmpl: [{ type: i0.ContentChild, args: ['groupItemTmpl', { isSignal: true }] }], dropdownItemTmpl: [{ type: i0.ContentChild, args: ['itemTmpl', { isSignal: true }] }], emptyTmpl: [{ type: i0.ContentChild, args: ['emptyTmpl', { isSignal: true }] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], dropdownStateChanged: [{ type: i0.Output, args: ["dropdownStateChanged"] }], searched: [{ type: i0.Output, args: ["searched"] }], changed: [{ type: i0.Output, args: ["changed"] }], select: [{ type: i0.ViewChild, args: ['select', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
6929
6948
|
|
|
6930
6949
|
class GdsSidebarItemComponent {
|
|
@@ -6999,7 +7018,7 @@ class GdsSplitButtonComponent extends ButtonBaseDirective {
|
|
|
6999
7018
|
});
|
|
7000
7019
|
}
|
|
7001
7020
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSplitButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
7002
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsSplitButtonComponent, isStandalone: true, selector: "gds-split-button", inputs: { trailingDropdown: { classPropertyName: "trailingDropdown", publicName: "trailingDropdown", isSignal: true, isRequired: true, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, leadingAriaLabel: { classPropertyName: "leadingAriaLabel", publicName: "leadingAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, trailingAriaLabel: { classPropertyName: "trailingAriaLabel", publicName: "trailingAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, menuPosition: { classPropertyName: "menuPosition", publicName: "menuPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown.enter": "onEnter()", "keydown.arrowDown": "onArrowDown()" }, classAttribute: "gds-display-flex gds-radius-sm" }, viewQueries: [{ propertyName: "leadingBtn", first: true, predicate: ["leadingBtn"], descendants: true, isSignal: true }, { propertyName: "trailingBtn", first: true, predicate: ["trailingBtn"], descendants: true, isSignal: true }, { propertyName: "menuTrigger", first: true, predicate: CdkMenuTrigger, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\n #leadingBtn\n gds-button\n class=\"\n gds-radius-bottom-right-0\n gds-radius-top-right-0\n gds-split-button_button\n gds-split-button_leading\n \"\n
|
|
7021
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsSplitButtonComponent, isStandalone: true, selector: "gds-split-button", inputs: { trailingDropdown: { classPropertyName: "trailingDropdown", publicName: "trailingDropdown", isSignal: true, isRequired: true, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, leadingAriaLabel: { classPropertyName: "leadingAriaLabel", publicName: "leadingAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, trailingAriaLabel: { classPropertyName: "trailingAriaLabel", publicName: "trailingAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, menuPosition: { classPropertyName: "menuPosition", publicName: "menuPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown.enter": "onEnter()", "keydown.arrowDown": "onArrowDown()" }, classAttribute: "gds-display-flex gds-radius-sm" }, viewQueries: [{ propertyName: "leadingBtn", first: true, predicate: ["leadingBtn"], descendants: true, isSignal: true }, { propertyName: "trailingBtn", first: true, predicate: ["trailingBtn"], descendants: true, isSignal: true }, { propertyName: "menuTrigger", first: true, predicate: CdkMenuTrigger, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\n #leadingBtn\n gds-button\n class=\"\n gds-radius-bottom-right-0\n gds-radius-top-right-0\n gds-split-button_button\n gds-split-button_leading\n \"\n [tabIndex]=\"-1\"\n [size]=\"size()\"\n [busy]=\"busy()\"\n [variant]=\"variant()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"leadingAriaLabel()\"\n (click)=\"clicked.emit($event)\"\n>\n <ng-content />\n</button>\n\n<button\n #trailingBtn\n gds-button\n class=\"\n gds-radius-bottom-left-0\n gds-radius-top-left-0\n gds-split-button_button\n gds-split-button_trailing\n \"\n [tabIndex]=\"-1\"\n [size]=\"size()\"\n [variant]=\"variant()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"trailingAriaLabel()\"\n [cdkMenuTriggerFor]=\"!disabled() ? trailingDropdown() : undefined\"\n [cdkMenuPosition]=\"menuPosition()\"\n (cdkMenuClosed)=\"onMenuClosed()\"\n>\n <gds-icon\n [key]=\"trailingIcon()\"\n class=\"gds-icon-size-2xs\"\n />\n</button>\n", styles: ["@layer design-system{:host{--border-separator-width: .5px;--border-separator: var(--border-separator-width) solid var(--gds-palette-border-default)}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:is(body[isMobile=true]) :host{--border-separator-width: 1px}:host .gds-split-button_leading{border-right:none;padding-inline:var(--gds-spacing-xs)}:host .gds-split-button_trailing,:host .gds-split-button_trailing:not(:disabled):hover{border-left:var(--border-separator);padding-inline:var(--gds-spacing-3xs)}:is(body[isMobile=true]) :host .gds-split-button_trailing,:is(body[isMobile=true]) :host .gds-split-button_trailing:not(:disabled):hover{padding-inline:10px}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsButtonComponent, selector: "button[gds-button]" }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7003
7022
|
}
|
|
7004
7023
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSplitButtonComponent, decorators: [{
|
|
7005
7024
|
type: Component,
|
|
@@ -7008,7 +7027,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
7008
7027
|
tabindex: '0',
|
|
7009
7028
|
'(keydown.enter)': 'onEnter()',
|
|
7010
7029
|
'(keydown.arrowDown)': 'onArrowDown()'
|
|
7011
|
-
}, template: "<button\n #leadingBtn\n gds-button\n class=\"\n gds-radius-bottom-right-0\n gds-radius-top-right-0\n gds-split-button_button\n gds-split-button_leading\n \"\n
|
|
7030
|
+
}, template: "<button\n #leadingBtn\n gds-button\n class=\"\n gds-radius-bottom-right-0\n gds-radius-top-right-0\n gds-split-button_button\n gds-split-button_leading\n \"\n [tabIndex]=\"-1\"\n [size]=\"size()\"\n [busy]=\"busy()\"\n [variant]=\"variant()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"leadingAriaLabel()\"\n (click)=\"clicked.emit($event)\"\n>\n <ng-content />\n</button>\n\n<button\n #trailingBtn\n gds-button\n class=\"\n gds-radius-bottom-left-0\n gds-radius-top-left-0\n gds-split-button_button\n gds-split-button_trailing\n \"\n [tabIndex]=\"-1\"\n [size]=\"size()\"\n [variant]=\"variant()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"trailingAriaLabel()\"\n [cdkMenuTriggerFor]=\"!disabled() ? trailingDropdown() : undefined\"\n [cdkMenuPosition]=\"menuPosition()\"\n (cdkMenuClosed)=\"onMenuClosed()\"\n>\n <gds-icon\n [key]=\"trailingIcon()\"\n class=\"gds-icon-size-2xs\"\n />\n</button>\n", styles: ["@layer design-system{:host{--border-separator-width: .5px;--border-separator: var(--border-separator-width) solid var(--gds-palette-border-default)}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:is(body[isMobile=true]) :host{--border-separator-width: 1px}:host .gds-split-button_leading{border-right:none;padding-inline:var(--gds-spacing-xs)}:host .gds-split-button_trailing,:host .gds-split-button_trailing:not(:disabled):hover{border-left:var(--border-separator);padding-inline:var(--gds-spacing-3xs)}:is(body[isMobile=true]) :host .gds-split-button_trailing,:is(body[isMobile=true]) :host .gds-split-button_trailing:not(:disabled):hover{padding-inline:10px}}\n"] }]
|
|
7012
7031
|
}], propDecorators: { trailingDropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingDropdown", required: true }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], leadingAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingAriaLabel", required: false }] }], trailingAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingAriaLabel", required: false }] }], menuPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuPosition", required: false }] }], leadingBtn: [{ type: i0.ViewChild, args: ['leadingBtn', { isSignal: true }] }], trailingBtn: [{ type: i0.ViewChild, args: ['trailingBtn', { isSignal: true }] }], menuTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkMenuTrigger), { isSignal: true }] }] } });
|
|
7013
7032
|
|
|
7014
7033
|
class GdsTimelineItemComponent {
|
|
@@ -7026,11 +7045,213 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
7026
7045
|
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"\n gds-display-flex\n gds-flex-column\n timeline\n\">\n <div class=\"\n end\n gds-display-flex\n gds-height-2xs\n gds-justify-content-center\n \">\n @if (!end()) {\n <span class=\"gds-timeline_edge\"></span>\n }\n </div>\n <ng-content select=\"[tag]\" />\n <div class=\"\n gds-display-flex\n gds-flex-grow-1\n gds-justify-content-center\n start\n \">\n @if (!start() || connectorType() === 'content') {\n <span class=\"\n gds-timeline_edge\n start\n \"></span>\n }\n </div>\n</div>\n<div class=\"\n content\n gds-flex-grow-1\n gds-padding-block-2xs\n\">\n <ng-content />\n</div>\n", styles: ["@layer design-system{:host[connectorType=content] .gds-timeline_edge{margin-block:var(--gds-spacing-2xs)}:host:hover{background-color:var(--gds-palette-background-hover)}:host .gds-timeline_edge{width:1px;background-color:var(--gds-palette-border-default)}:host .content{overflow:hidden}:host .timeline{width:40px}}\n"] }]
|
|
7027
7046
|
}], propDecorators: { end: [{ type: i0.Input, args: [{ isSignal: true, alias: "end", required: false }] }], start: [{ type: i0.Input, args: [{ isSignal: true, alias: "start", required: false }] }], connectorType: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectorType", required: false }] }] } });
|
|
7028
7047
|
|
|
7029
|
-
|
|
7030
|
-
|
|
7031
|
-
|
|
7032
|
-
|
|
7033
|
-
|
|
7048
|
+
class GdsToastContainerComponent {
|
|
7049
|
+
toaster = inject(ToastrService);
|
|
7050
|
+
hostClass = computed(() => `toast-container ${this.toaster.positionClass}`, ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
|
|
7051
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7052
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsToastContainerComponent, isStandalone: true, selector: "gds-toast-container", host: { properties: { "class": "hostClass()" } }, ngImport: i0, template: `
|
|
7053
|
+
@for (toast of toaster.toasts(); track toast.toastId) {
|
|
7054
|
+
<gds-toast [toast]="toast" />
|
|
7055
|
+
}
|
|
7056
|
+
`, isInline: true, dependencies: [{ kind: "component", type: GdsToastComponent, selector: "gds-toast", inputs: ["toast"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7057
|
+
}
|
|
7058
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsToastContainerComponent, decorators: [{
|
|
7059
|
+
type: Component,
|
|
7060
|
+
args: [{
|
|
7061
|
+
selector: 'gds-toast-container',
|
|
7062
|
+
template: `
|
|
7063
|
+
@for (toast of toaster.toasts(); track toast.toastId) {
|
|
7064
|
+
<gds-toast [toast]="toast" />
|
|
7065
|
+
}
|
|
7066
|
+
`,
|
|
7067
|
+
host: {
|
|
7068
|
+
'[class]': 'hostClass()'
|
|
7069
|
+
},
|
|
7070
|
+
imports: [GdsToastComponent],
|
|
7071
|
+
changeDetection: ChangeDetectionStrategy.OnPush
|
|
7072
|
+
}]
|
|
7073
|
+
}] });
|
|
7074
|
+
|
|
7075
|
+
const GDS_TOASTER_CONFIG = new InjectionToken('GDS_TOASTER_CONFIG');
|
|
7076
|
+
const GDS_TOAST_CONTAINER = new InjectionToken('GDS_TOAST_CONTAINER');
|
|
7077
|
+
const DEFAULT_CONFIG = {
|
|
7078
|
+
timeOut: 5000,
|
|
7079
|
+
extendedTimeOut: 1000,
|
|
7080
|
+
positionClass: 'toast-top-left',
|
|
7081
|
+
preventDuplicates: true,
|
|
7082
|
+
tapToDismiss: false,
|
|
7083
|
+
disableTimeOut: false,
|
|
7084
|
+
payload: {}
|
|
7085
|
+
};
|
|
7086
|
+
const provideToaster = (customOptions = {}) => makeEnvironmentProviders([
|
|
7087
|
+
{
|
|
7088
|
+
provide: GDS_TOASTER_CONFIG,
|
|
7089
|
+
useValue: { ...DEFAULT_CONFIG, ...customOptions }
|
|
7090
|
+
},
|
|
7091
|
+
{ provide: GDS_TOAST_CONTAINER, useValue: GdsToastContainerComponent }
|
|
7092
|
+
]);
|
|
7093
|
+
|
|
7094
|
+
class ToastrService {
|
|
7095
|
+
#overlay = inject(Overlay);
|
|
7096
|
+
#container = inject(GDS_TOAST_CONTAINER);
|
|
7097
|
+
#globalConfig = inject(GDS_TOASTER_CONFIG);
|
|
7098
|
+
#toasts = signal([], ...(ngDevMode ? [{ debugName: "#toasts" }] : /* istanbul ignore next */ []));
|
|
7099
|
+
#actionSubjects = new Map();
|
|
7100
|
+
#timeouts = new Map();
|
|
7101
|
+
#overlayRef = null;
|
|
7102
|
+
#nextId = 0;
|
|
7103
|
+
/** Visible toasts for the overlay stack container. */
|
|
7104
|
+
toasts = this.#toasts.asReadonly();
|
|
7105
|
+
get positionClass() {
|
|
7106
|
+
return this.#globalConfig.positionClass;
|
|
7107
|
+
}
|
|
7108
|
+
success = (message, title, override) => this.#show('success', message, title, override);
|
|
7109
|
+
error = (message, title, override) => this.#show('error', message, title, override);
|
|
7110
|
+
info = (message, title, override) => this.#show('info', message, title, override);
|
|
7111
|
+
warning = (message, title, override) => this.#show('warning', message, title, override);
|
|
7112
|
+
show = (message, title, override) => this.#show('show', message, title, override);
|
|
7113
|
+
clear = (toastId) => {
|
|
7114
|
+
if (!toastId) {
|
|
7115
|
+
[...this.#toasts()].forEach((toast) => this.remove(toast.toastId));
|
|
7116
|
+
return;
|
|
7117
|
+
}
|
|
7118
|
+
this.remove(toastId);
|
|
7119
|
+
};
|
|
7120
|
+
remove = (toastId) => {
|
|
7121
|
+
const timeout = this.#timeouts.get(toastId);
|
|
7122
|
+
if (timeout != null) {
|
|
7123
|
+
clearTimeout(timeout);
|
|
7124
|
+
this.#timeouts.delete(toastId);
|
|
7125
|
+
}
|
|
7126
|
+
const existed = this.#toasts().some((toast) => toast.toastId === toastId);
|
|
7127
|
+
if (!existed) {
|
|
7128
|
+
return;
|
|
7129
|
+
}
|
|
7130
|
+
this.#toasts.update((toasts) => toasts.filter((toast) => toast.toastId !== toastId));
|
|
7131
|
+
const actionSub = this.#actionSubjects.get(toastId);
|
|
7132
|
+
this.#actionSubjects.delete(toastId);
|
|
7133
|
+
// Defer complete: callers often clear() inside onAction.map(). Completing the Subject
|
|
7134
|
+
// synchronously during that emission stops the value from reaching downstream operators.
|
|
7135
|
+
queueMicrotask(() => actionSub?.complete());
|
|
7136
|
+
if (this.#toasts().length === 0) {
|
|
7137
|
+
this.#overlayRef?.dispose();
|
|
7138
|
+
this.#overlayRef = null;
|
|
7139
|
+
}
|
|
7140
|
+
};
|
|
7141
|
+
triggerAction = (toastId, event) => this.#actionSubjects.get(toastId)?.next(event);
|
|
7142
|
+
/** Clears the auto-dismiss timer (e.g. while the pointer is over the toast). */
|
|
7143
|
+
pauseTimeout = (toastId) => {
|
|
7144
|
+
const timeout = this.#timeouts.get(toastId);
|
|
7145
|
+
if (timeout == null) {
|
|
7146
|
+
return;
|
|
7147
|
+
}
|
|
7148
|
+
clearTimeout(timeout);
|
|
7149
|
+
this.#timeouts.delete(toastId);
|
|
7150
|
+
};
|
|
7151
|
+
/** Starts the post-hover dismiss timer using extendedTimeOut. */
|
|
7152
|
+
resumeTimeout = (toastId) => {
|
|
7153
|
+
const instance = this.#toasts().find((toast) => toast.toastId === toastId);
|
|
7154
|
+
if (!instance || instance.options.disableTimeOut) {
|
|
7155
|
+
return;
|
|
7156
|
+
}
|
|
7157
|
+
this.pauseTimeout(toastId);
|
|
7158
|
+
const extendedTimeOutMs = instance.options.extendedTimeOut ?? this.#globalConfig.extendedTimeOut;
|
|
7159
|
+
// 0 keeps the toast open after hover (ngx-toastr behavior).
|
|
7160
|
+
if (!extendedTimeOutMs) {
|
|
7161
|
+
return;
|
|
7162
|
+
}
|
|
7163
|
+
const timeout = setTimeout(() => this.remove(toastId), extendedTimeOutMs);
|
|
7164
|
+
this.#timeouts.set(toastId, timeout);
|
|
7165
|
+
};
|
|
7166
|
+
#show = (toastType, message = '', title = '', override = {}) => {
|
|
7167
|
+
const options = {
|
|
7168
|
+
...this.#globalConfig,
|
|
7169
|
+
...override,
|
|
7170
|
+
payload: {
|
|
7171
|
+
...this.#globalConfig.payload,
|
|
7172
|
+
...override.payload
|
|
7173
|
+
}
|
|
7174
|
+
};
|
|
7175
|
+
const existing = this.#toasts().find((toast) => toast.toastType === toastType && toast.message === message && toast.title === title);
|
|
7176
|
+
if (this.#globalConfig.preventDuplicates !== false && existing) {
|
|
7177
|
+
return this.#toActiveToast(existing);
|
|
7178
|
+
}
|
|
7179
|
+
const toastId = ++this.#nextId;
|
|
7180
|
+
const actionSub = new Subject();
|
|
7181
|
+
this.#actionSubjects.set(toastId, actionSub);
|
|
7182
|
+
const instance = {
|
|
7183
|
+
toastId,
|
|
7184
|
+
toastType,
|
|
7185
|
+
title,
|
|
7186
|
+
message,
|
|
7187
|
+
options
|
|
7188
|
+
};
|
|
7189
|
+
this.#toasts.update((toasts) => [...toasts, instance]);
|
|
7190
|
+
this.#ensureOverlayOpen();
|
|
7191
|
+
this.#scheduleTimeout(instance);
|
|
7192
|
+
return {
|
|
7193
|
+
toastId,
|
|
7194
|
+
message,
|
|
7195
|
+
title,
|
|
7196
|
+
toastType,
|
|
7197
|
+
onAction: actionSub.asObservable()
|
|
7198
|
+
};
|
|
7199
|
+
};
|
|
7200
|
+
#toActiveToast = (instance) => ({
|
|
7201
|
+
toastId: instance.toastId,
|
|
7202
|
+
message: instance.message,
|
|
7203
|
+
title: instance.title,
|
|
7204
|
+
toastType: instance.toastType,
|
|
7205
|
+
onAction: this.#actionSubjects.get(instance.toastId)?.asObservable() ?? EMPTY
|
|
7206
|
+
});
|
|
7207
|
+
#scheduleTimeout = (instance) => {
|
|
7208
|
+
if (instance.options.disableTimeOut) {
|
|
7209
|
+
return;
|
|
7210
|
+
}
|
|
7211
|
+
const timeOutMs = instance.options.timeOut;
|
|
7212
|
+
const timeout = setTimeout(() => this.remove(instance.toastId), timeOutMs);
|
|
7213
|
+
this.#timeouts.set(instance.toastId, timeout);
|
|
7214
|
+
};
|
|
7215
|
+
#ensureOverlayOpen = () => {
|
|
7216
|
+
if (this.#overlayRef) {
|
|
7217
|
+
return;
|
|
7218
|
+
}
|
|
7219
|
+
this.#overlayRef = this.#overlay.create({
|
|
7220
|
+
hasBackdrop: false,
|
|
7221
|
+
panelClass: [
|
|
7222
|
+
'gds-toast-overlay-pane',
|
|
7223
|
+
'gds-position-fixed',
|
|
7224
|
+
'gds-inset-0',
|
|
7225
|
+
'gds-pointer-events-none',
|
|
7226
|
+
'gds-margin-0',
|
|
7227
|
+
'gds-max-width-unset'
|
|
7228
|
+
],
|
|
7229
|
+
positionStrategy: this.#overlay.position().global().top('0').left('0'),
|
|
7230
|
+
scrollStrategy: this.#overlay.scrollStrategies.noop(),
|
|
7231
|
+
width: '100%',
|
|
7232
|
+
height: '100%'
|
|
7233
|
+
});
|
|
7234
|
+
this.#overlayRef.attach(new ComponentPortal(this.#container));
|
|
7235
|
+
this.#overlayRef.detachments().subscribe(() => {
|
|
7236
|
+
this.#overlayRef = null;
|
|
7237
|
+
if (this.#toasts().length > 0) {
|
|
7238
|
+
this.clear();
|
|
7239
|
+
}
|
|
7240
|
+
});
|
|
7241
|
+
};
|
|
7242
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastrService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
7243
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastrService, providedIn: 'root' });
|
|
7244
|
+
}
|
|
7245
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastrService, decorators: [{
|
|
7246
|
+
type: Injectable,
|
|
7247
|
+
args: [{ providedIn: 'root' }]
|
|
7248
|
+
}] });
|
|
7249
|
+
|
|
7250
|
+
class GdsToastComponent {
|
|
7251
|
+
#toaster = inject(ToastrService);
|
|
7252
|
+
toast = input.required(...(ngDevMode ? [{ debugName: "toast" }] : /* istanbul ignore next */ []));
|
|
7253
|
+
status = computed(() => {
|
|
7254
|
+
switch (this.toast().toastType) {
|
|
7034
7255
|
case 'error':
|
|
7035
7256
|
return 'danger';
|
|
7036
7257
|
case 'success':
|
|
@@ -7040,45 +7261,63 @@ class GdsToastComponent extends ToastNoAnimation {
|
|
|
7040
7261
|
default:
|
|
7041
7262
|
return 'default';
|
|
7042
7263
|
}
|
|
7043
|
-
}
|
|
7044
|
-
|
|
7045
|
-
|
|
7046
|
-
|
|
7047
|
-
|
|
7048
|
-
|
|
7049
|
-
}
|
|
7050
|
-
get actionLabel() {
|
|
7051
|
-
return this.options.payload?.actionLabel;
|
|
7052
|
-
}
|
|
7053
|
-
get dismissAriaLabel() {
|
|
7054
|
-
return this.options.payload?.dismissAriaLabel ?? 'Gds.Toast.Dismiss.AriaLabel';
|
|
7055
|
-
}
|
|
7056
|
-
get actionAriaLabel() {
|
|
7057
|
-
return this.options.payload?.actionAriaLabel;
|
|
7058
|
-
}
|
|
7264
|
+
}, ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
|
|
7265
|
+
title = computed(() => this.toast().title, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
7266
|
+
message = computed(() => this.toast().message, ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
|
|
7267
|
+
actionLabel = computed(() => this.toast().options.payload?.actionLabel, ...(ngDevMode ? [{ debugName: "actionLabel" }] : /* istanbul ignore next */ []));
|
|
7268
|
+
dismissAriaLabel = computed(() => this.toast().options.payload?.dismissAriaLabel ?? 'Gds.Toast.Dismiss.AriaLabel', ...(ngDevMode ? [{ debugName: "dismissAriaLabel" }] : /* istanbul ignore next */ []));
|
|
7269
|
+
actionAriaLabel = computed(() => this.toast().options.payload?.actionAriaLabel, ...(ngDevMode ? [{ debugName: "actionAriaLabel" }] : /* istanbul ignore next */ []));
|
|
7059
7270
|
action = (event) => {
|
|
7060
|
-
event
|
|
7061
|
-
this.
|
|
7062
|
-
|
|
7271
|
+
event?.stopPropagation();
|
|
7272
|
+
this.#toaster.triggerAction(this.toast().toastId, event);
|
|
7273
|
+
};
|
|
7274
|
+
remove = () => {
|
|
7275
|
+
this.#toaster.remove(this.toast().toastId);
|
|
7063
7276
|
};
|
|
7064
|
-
|
|
7065
|
-
|
|
7277
|
+
onHostClick(event) {
|
|
7278
|
+
if (!this.toast().options.tapToDismiss) {
|
|
7279
|
+
return;
|
|
7280
|
+
}
|
|
7281
|
+
const target = event.target;
|
|
7282
|
+
if (target?.closest('button')) {
|
|
7283
|
+
return;
|
|
7284
|
+
}
|
|
7285
|
+
this.remove();
|
|
7286
|
+
}
|
|
7287
|
+
onMouseEnter = () => {
|
|
7288
|
+
if (this.toast().options.disableTimeOut) {
|
|
7289
|
+
return;
|
|
7290
|
+
}
|
|
7291
|
+
this.#toaster.pauseTimeout(this.toast().toastId);
|
|
7292
|
+
};
|
|
7293
|
+
onMouseLeave = () => {
|
|
7294
|
+
if (this.toast().options.disableTimeOut) {
|
|
7295
|
+
return;
|
|
7296
|
+
}
|
|
7297
|
+
this.#toaster.resumeTimeout(this.toast().toastId);
|
|
7298
|
+
};
|
|
7299
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7300
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsToastComponent, isStandalone: true, selector: "gds-toast", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "animate.enter": "gds-scale-in gds-fade-in", "animate.leave": "gds-scale-out gds-fade-out" }, listeners: { "click": "onHostClick($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "attr.type": "status()" }, classAttribute: "gds-responsive-sm-width-100-parent" }, ngImport: i0, template: "<div\n class=\"\n gds-border\n gds-display-flex\n gds-gap-sm\n gds-padding-block-2xs\n gds-padding-inline-sm\n gds-radius-sm\n gds-responsive-sm-padding-3xs\n gds-toaster--container\n \"\n>\n <div class=\"\n gds-align-items-center\n gds-display-flex\n gds-height-md\n gds-justify-content-center\n \">\n <gds-icon\n key=\"filled-info\"\n class=\"\n gds-icon-size-xs\n gds-toaster--icon\n \"\n />\n </div>\n <div class=\"\n gds-align-items-center\n gds-column-gap-sm\n gds-display-flex\n gds-flex-1\n gds-flex-wrap\n gds-row-gap-2xs\n \">\n @if (title()) {\n <div class=\"\n gds-height-fit-content\n gds-text-body-strong\n gds-text-primary\n gds-width-fit-content\n \">\n {{ title() | translate }}\n </div>\n }\n @if (message()) {\n <div\n class=\"\n gds-height-fit-content\n gds-text-body\n gds-text-primary\n gds-width-fit-content\n \"\n [innerHtml]=\"message() | translate\"\n ></div>\n }\n @if (actionLabel()) {\n <button\n gds-button\n class=\"\n gds-border-none\n gds-toaster--action-btn\n \"\n [attr.aria-label]=\"actionAriaLabel() | translate\"\n (clicked)=\"action($event)\"\n >\n {{ actionLabel() | translate }}\n </button>\n }\n </div>\n <div class=\"\n gds-align-items-center\n gds-display-flex\n gds-height-md\n gds-justify-content-center\n \">\n <button\n gds-icon-button\n class=\"gds-background-none\"\n variant=\"primary\"\n [attr.aria-label]=\"dismissAriaLabel() | translate\"\n (clicked)=\"remove()\"\n >\n <gds-icon\n key=\"line-dismiss\"\n class=\"gds-icon-size-3xs\"\n />\n </button>\n </div>\n</div>\n", styles: ["@layer design-system{:host{pointer-events:auto;--background-color: var(--gds-pattern-toast-default-backgroundColor-rest);--icon-color: var(--gds-pattern-toast-default-iconColor-rest);--action-btn-backgroundColor: var(--gds-pattern-toast-default-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-default-btnColor-hover);--action-btn-color: var(--gds-palette-text-default-contrast)}:host[type=success]{--background-color: var(--gds-palette-helper-success-default);--icon-color: var(--gds-palette-helper-success-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-success-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-success-btnColor-hover)}:host[type=warning]{--background-color: var(--gds-palette-helper-warning-default);--icon-color: var(--gds-palette-helper-warning-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-warning-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-warning-btnColor-hover)}:host[type=danger]{--background-color: var(--gds-palette-helper-error-default);--icon-color: var(--gds-palette-helper-error-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-error-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-error-btnColor-hover)}:host .gds-toaster--container{background-color:var(--background-color)}:host .gds-toaster--icon{color:var(--icon-color)}:host .gds-toaster--action-btn{--gds-button-backgroundColor: var(--action-btn-backgroundColor);--gds-button-backgroundColor-hover: var(--action-btn-backgroundColor-hover);--gds-button-color: var(--action-btn-color)}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsButtonComponent, selector: "button[gds-button]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7066
7301
|
}
|
|
7067
7302
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsToastComponent, decorators: [{
|
|
7068
7303
|
type: Component,
|
|
7069
7304
|
args: [{ selector: 'gds-toast', imports: [GdsIconComponent, GdsIconButtonComponent, GdsButtonComponent, TranslatePipe], host: {
|
|
7070
|
-
'[attr.type]': 'status',
|
|
7071
|
-
'
|
|
7305
|
+
'[attr.type]': 'status()',
|
|
7306
|
+
class: 'gds-responsive-sm-width-100-parent',
|
|
7072
7307
|
'animate.enter': 'gds-scale-in gds-fade-in',
|
|
7073
|
-
'animate.leave': 'gds-scale-out gds-fade-out'
|
|
7074
|
-
|
|
7075
|
-
|
|
7308
|
+
'animate.leave': 'gds-scale-out gds-fade-out',
|
|
7309
|
+
'(click)': 'onHostClick($event)',
|
|
7310
|
+
'(mouseenter)': 'onMouseEnter()',
|
|
7311
|
+
'(mouseleave)': 'onMouseLeave()'
|
|
7312
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"\n gds-border\n gds-display-flex\n gds-gap-sm\n gds-padding-block-2xs\n gds-padding-inline-sm\n gds-radius-sm\n gds-responsive-sm-padding-3xs\n gds-toaster--container\n \"\n>\n <div class=\"\n gds-align-items-center\n gds-display-flex\n gds-height-md\n gds-justify-content-center\n \">\n <gds-icon\n key=\"filled-info\"\n class=\"\n gds-icon-size-xs\n gds-toaster--icon\n \"\n />\n </div>\n <div class=\"\n gds-align-items-center\n gds-column-gap-sm\n gds-display-flex\n gds-flex-1\n gds-flex-wrap\n gds-row-gap-2xs\n \">\n @if (title()) {\n <div class=\"\n gds-height-fit-content\n gds-text-body-strong\n gds-text-primary\n gds-width-fit-content\n \">\n {{ title() | translate }}\n </div>\n }\n @if (message()) {\n <div\n class=\"\n gds-height-fit-content\n gds-text-body\n gds-text-primary\n gds-width-fit-content\n \"\n [innerHtml]=\"message() | translate\"\n ></div>\n }\n @if (actionLabel()) {\n <button\n gds-button\n class=\"\n gds-border-none\n gds-toaster--action-btn\n \"\n [attr.aria-label]=\"actionAriaLabel() | translate\"\n (clicked)=\"action($event)\"\n >\n {{ actionLabel() | translate }}\n </button>\n }\n </div>\n <div class=\"\n gds-align-items-center\n gds-display-flex\n gds-height-md\n gds-justify-content-center\n \">\n <button\n gds-icon-button\n class=\"gds-background-none\"\n variant=\"primary\"\n [attr.aria-label]=\"dismissAriaLabel() | translate\"\n (clicked)=\"remove()\"\n >\n <gds-icon\n key=\"line-dismiss\"\n class=\"gds-icon-size-3xs\"\n />\n </button>\n </div>\n</div>\n", styles: ["@layer design-system{:host{pointer-events:auto;--background-color: var(--gds-pattern-toast-default-backgroundColor-rest);--icon-color: var(--gds-pattern-toast-default-iconColor-rest);--action-btn-backgroundColor: var(--gds-pattern-toast-default-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-default-btnColor-hover);--action-btn-color: var(--gds-palette-text-default-contrast)}:host[type=success]{--background-color: var(--gds-palette-helper-success-default);--icon-color: var(--gds-palette-helper-success-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-success-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-success-btnColor-hover)}:host[type=warning]{--background-color: var(--gds-palette-helper-warning-default);--icon-color: var(--gds-palette-helper-warning-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-warning-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-warning-btnColor-hover)}:host[type=danger]{--background-color: var(--gds-palette-helper-error-default);--icon-color: var(--gds-palette-helper-error-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-error-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-error-btnColor-hover)}:host .gds-toaster--container{background-color:var(--background-color)}:host .gds-toaster--icon{color:var(--icon-color)}:host .gds-toaster--action-btn{--gds-button-backgroundColor: var(--action-btn-backgroundColor);--gds-button-backgroundColor-hover: var(--action-btn-backgroundColor-hover);--gds-button-color: var(--action-btn-color)}}\n"] }]
|
|
7313
|
+
}], propDecorators: { toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: true }] }] } });
|
|
7076
7314
|
|
|
7077
7315
|
class GdsListboxBaseDirective {
|
|
7078
7316
|
tabindex = signal(0, ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
|
|
7079
7317
|
items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
7080
7318
|
_keyManager;
|
|
7081
7319
|
_activeId = signal(null, ...(ngDevMode ? [{ debugName: "_activeId" }] : /* istanbul ignore next */ []));
|
|
7320
|
+
#pointerInteraction = false;
|
|
7082
7321
|
// Maintain a single key manager instance in case of dynamic item changes.
|
|
7083
7322
|
#setupKeyManager = effect(() => {
|
|
7084
7323
|
const items = this.items();
|
|
@@ -7105,7 +7344,20 @@ class GdsListboxBaseDirective {
|
|
|
7105
7344
|
ngOnDestroy() {
|
|
7106
7345
|
this._keyManager?.destroy();
|
|
7107
7346
|
}
|
|
7347
|
+
onPointerDown() {
|
|
7348
|
+
this.#pointerInteraction = true;
|
|
7349
|
+
}
|
|
7350
|
+
onPointerUp() {
|
|
7351
|
+
// Reset after focus handlers from the same gesture have run.
|
|
7352
|
+
queueMicrotask(() => {
|
|
7353
|
+
this.#pointerInteraction = false;
|
|
7354
|
+
});
|
|
7355
|
+
}
|
|
7108
7356
|
onFocus() {
|
|
7357
|
+
if (this.#pointerInteraction) {
|
|
7358
|
+
// When event comes from pointer interaction, don't focus the first item
|
|
7359
|
+
return;
|
|
7360
|
+
}
|
|
7109
7361
|
this.tabindex.set(-1);
|
|
7110
7362
|
this._keyManager?.setFirstItemActive();
|
|
7111
7363
|
}
|
|
@@ -7150,7 +7402,7 @@ class GdsListboxDirective extends GdsListboxBaseDirective {
|
|
|
7150
7402
|
super.onKeydown(event);
|
|
7151
7403
|
};
|
|
7152
7404
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsListboxDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
7153
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.17", type: GdsListboxDirective, isStandalone: true, selector: "[gdsListbox]", inputs: { onNavigatePastLastOption: { classPropertyName: "onNavigatePastLastOption", publicName: "onNavigatePastLastOption", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, listeners: { "keydown": "onKeydown($event)", "focus": "onFocus()" }, properties: { "attr.tabindex": "tabindex()" } }, queries: [{ propertyName: "options", predicate: GdsListboxOption, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
|
|
7405
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.17", type: GdsListboxDirective, isStandalone: true, selector: "[gdsListbox]", inputs: { onNavigatePastLastOption: { classPropertyName: "onNavigatePastLastOption", publicName: "onNavigatePastLastOption", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, listeners: { "keydown": "onKeydown($event)", "focus": "onFocus()", "pointerdown": "onPointerDown()", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()" }, properties: { "attr.tabindex": "tabindex()" } }, queries: [{ propertyName: "options", predicate: GdsListboxOption, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
|
|
7154
7406
|
}
|
|
7155
7407
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsListboxDirective, decorators: [{
|
|
7156
7408
|
type: Directive,
|
|
@@ -7160,7 +7412,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
7160
7412
|
role: 'listbox',
|
|
7161
7413
|
'[attr.tabindex]': 'tabindex()',
|
|
7162
7414
|
'(keydown)': 'onKeydown($event)',
|
|
7163
|
-
'(focus)': 'onFocus()'
|
|
7415
|
+
'(focus)': 'onFocus()',
|
|
7416
|
+
'(pointerdown)': 'onPointerDown()',
|
|
7417
|
+
'(pointerup)': 'onPointerUp()',
|
|
7418
|
+
'(pointercancel)': 'onPointerUp()'
|
|
7164
7419
|
}
|
|
7165
7420
|
}]
|
|
7166
7421
|
}], propDecorators: { onNavigatePastLastOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "onNavigatePastLastOption", required: false }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => GdsListboxOption), { ...{ descendants: true }, isSignal: true }] }] } });
|
|
@@ -7386,7 +7641,7 @@ class GdsVirtualScrollListboxDirective extends GdsListboxBaseDirective {
|
|
|
7386
7641
|
return Number.isFinite(index) ? index : null;
|
|
7387
7642
|
};
|
|
7388
7643
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsVirtualScrollListboxDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
7389
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.17", type: GdsVirtualScrollListboxDirective, isStandalone: true, selector: "[gdsListboxVirtualScroll]", inputs: { total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, optionIndexAttribute: { classPropertyName: "optionIndexAttribute", publicName: "optionIndexAttribute", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentFocusedIndex: "currentFocusedIndex" }, host: { attributes: { "role": "listbox" }, listeners: { "keydown": "onKeydown($event)", "focus": "onFocus()", "focusin": "onFocusIn($event)" }, properties: { "attr.tabindex": "tabindex()" } }, queries: [{ propertyName: "options", predicate: GdsListboxOption, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
|
|
7644
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.17", type: GdsVirtualScrollListboxDirective, isStandalone: true, selector: "[gdsListboxVirtualScroll]", inputs: { total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, optionIndexAttribute: { classPropertyName: "optionIndexAttribute", publicName: "optionIndexAttribute", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentFocusedIndex: "currentFocusedIndex" }, host: { attributes: { "role": "listbox" }, listeners: { "keydown": "onKeydown($event)", "focus": "onFocus()", "focusin": "onFocusIn($event)", "pointerdown": "onPointerDown()", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()" }, properties: { "attr.tabindex": "tabindex()" } }, queries: [{ propertyName: "options", predicate: GdsListboxOption, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
|
|
7390
7645
|
}
|
|
7391
7646
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsVirtualScrollListboxDirective, decorators: [{
|
|
7392
7647
|
type: Directive,
|
|
@@ -7397,7 +7652,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
7397
7652
|
'[attr.tabindex]': 'tabindex()',
|
|
7398
7653
|
'(keydown)': 'onKeydown($event)',
|
|
7399
7654
|
'(focus)': 'onFocus()',
|
|
7400
|
-
'(focusin)': 'onFocusIn($event)'
|
|
7655
|
+
'(focusin)': 'onFocusIn($event)',
|
|
7656
|
+
'(pointerdown)': 'onPointerDown()',
|
|
7657
|
+
'(pointerup)': 'onPointerUp()',
|
|
7658
|
+
'(pointercancel)': 'onPointerUp()'
|
|
7401
7659
|
}
|
|
7402
7660
|
}]
|
|
7403
7661
|
}], propDecorators: { options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => GdsListboxOption), { ...{ descendants: true }, isSignal: true }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], optionIndexAttribute: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionIndexAttribute", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehavior", required: false }] }], currentFocusedIndex: [{ type: i0.Output, args: ["currentFocusedIndex"] }] } });
|
|
@@ -8026,16 +8284,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
8026
8284
|
}]
|
|
8027
8285
|
}], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocompleteMenu", required: true }] }], autocompleteOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocompleteOptions", required: false }] }], valueProp: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueProp", required: false }] }], autocompleteSelected: [{ type: i0.Output, args: ["autocompleteSelected"] }] } });
|
|
8028
8286
|
|
|
8029
|
-
const provideToaster = (customOptions = {}) => {
|
|
8030
|
-
const defaultOptions = {
|
|
8031
|
-
toastComponent: GdsToastComponent,
|
|
8032
|
-
timeOut: 5000,
|
|
8033
|
-
positionClass: 'toast-top-left',
|
|
8034
|
-
preventDuplicates: true
|
|
8035
|
-
};
|
|
8036
|
-
return provideToastr({ ...defaultOptions, ...customOptions });
|
|
8037
|
-
};
|
|
8038
|
-
|
|
8039
8287
|
const OPERATING_SYSTEM = {
|
|
8040
8288
|
windows: 'windows',
|
|
8041
8289
|
mac: 'mac',
|
|
@@ -8097,7 +8345,7 @@ class GdsModule {
|
|
|
8097
8345
|
switch (env) {
|
|
8098
8346
|
case 'local':
|
|
8099
8347
|
case 'dev':
|
|
8100
|
-
cdnUrl = 'https://cdn.cortoaws.com';
|
|
8348
|
+
cdnUrl = 'https://cdn.dev.cortoaws.com';
|
|
8101
8349
|
break;
|
|
8102
8350
|
case 'test':
|
|
8103
8351
|
cdnUrl = 'https://cdn.test.cortoaws.com';
|
|
@@ -8194,5 +8442,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
8194
8442
|
* Generated bundle index. Do not edit.
|
|
8195
8443
|
*/
|
|
8196
8444
|
|
|
8197
|
-
export { BrandEnum, CDN_URL, CONTACT_INITIALS_REGEX, GDS_BRANDS, GDS_EMPTY_STATE_VARIANTS, GdsAccountingService, GdsAutoRoundCurrencyDirective, GdsAutofocusDirective, GdsAvatarComponent, GdsBadgeColorType, GdsBadgeComponent, GdsBadgeVariantType, GdsBannerComponent, GdsBreadcrumbsComponent, GdsBuildOptionConfigPipe, GdsButtonComponent, GdsButtonRadioOptionComponent, GdsChatExpandableListComponent, GdsChatPromptComponent, GdsChatSuggestionComponent, GdsCheckboxComponent, GdsChipColorsMap, GdsChipComponent, GdsCollapsibleAsideLayoutComponent, GdsCompositeOptionPrimaryDirective, GdsCompositeOptionSecondaryDirective, GdsContextMenuHeadingComponent, GdsContextMenuItemComponent, GdsContextMenuItemVariantEnum, GdsContextMenuSwitchComponent, GdsDateInputComponent, GdsDatePipe, GdsDialogBaseDirective, GdsDialogComponent, GdsDialogOverlayComponent, GdsDialogService, GdsDoctypeService, GdsDoctypeToIconPipe, GdsDocumentItemComponent, GdsDropdownComponent, GdsEmptyStateComponent, GdsFeatureBlockComponent, GdsFeedbackButtonComponent, GdsFileUploadComponent, GdsFilenameToIconPipe, GdsFilterChipComponent, GdsFocusOnInitDirective, GdsFormControlComponent, GdsHistoryComponent, GdsIconButtonComponent, GdsIconComponent, GdsIconDoctypeComponent, GdsIconService, GdsInputAutocompleteDirective, GdsItemDisplayComponent, GdsKeyboardNavigationHost, GdsKeyboardNavigationItem, GdsListboxCompositeOptionDirective, GdsListboxDirective, GdsListboxOptionDirective, GdsLoadingCarouselComponent, GdsMapArrayToRadioOptionsPipe, GdsMathFloorPipe, GdsMathMaxPipe, GdsMathMinPipe, GdsMessageInputComponent, GdsModule, GdsNativeInputDirective, GdsNativeTextareaDirective, GdsNavAsideComponent, GdsNavAsideItemComponent, GdsNestedSelectComponent, GdsProgressBarComponent, GdsRadioComponent, GdsRadioOptionDirective, GdsReferenceComponent, GdsReferenceLinkComponent, GdsRegexFilterDirective, GdsResizedDirective, GdsResizedEvent, GdsResponseComponent, GdsScrollOutOfViewDirective, GdsScrollOutOfViewScrollStatus, GdsScrollOutOfViewService, GdsScrollToBottomDirective, GdsScrollToFirstInvalidDirective, GdsSearchBarComponent, GdsSelectComponent, GdsSelectOnFocusDirective, GdsSidebarItemBodyComponent, GdsSidebarItemComponent, GdsSkeletonLoadingComponent, GdsSliderComponent, GdsSpinnerComponent, GdsSplitButtonComponent, GdsSvgIconPipe, GdsSwitchComponent, GdsTextInputComponent, GdsTextareaComponent, GdsTimelineItemComponent, GdsToastComponent, GdsTooltipComponent, GdsTreeViewListItemComponent, GdsUserPromptService, GdsVirtualScrollListboxDirective, MapperPipe, OnBrandChanged, RoundMode, TreeViewListItemDirective, chipColor, chipSize, chipTypes, chipWidth, formatToISO, gdsButtonSizes, gdsButtonVariants, gdsDropdownPositionsX, gdsDropdownPositionsY, gdsSelectWidths, gdsServices, gdsUserPromptSecondaryTextVariants, getIconsByPrefix, isGdsBrand, ngSelectDropdownPositions, parseLocalizedDate, provideToaster, shortDate, shortDateTime, transformDateFormat, transformDurationToSeconds, transformSecondsToDuration };
|
|
8445
|
+
export { BrandEnum, CDN_URL, CONTACT_INITIALS_REGEX, GDS_BRANDS, GDS_EMPTY_STATE_VARIANTS, GDS_TOASTER_CONFIG, GDS_TOAST_CONTAINER, GdsAccountingService, GdsAutoRoundCurrencyDirective, GdsAutofocusDirective, GdsAvatarComponent, GdsBadgeColorType, GdsBadgeComponent, GdsBadgeVariantType, GdsBannerComponent, GdsBreadcrumbsComponent, GdsBuildOptionConfigPipe, GdsButtonComponent, GdsButtonRadioOptionComponent, GdsChatExpandableListComponent, GdsChatPromptComponent, GdsChatSuggestionComponent, GdsCheckboxComponent, GdsChipColorsMap, GdsChipComponent, GdsCollapsibleAsideLayoutComponent, GdsCompositeOptionPrimaryDirective, GdsCompositeOptionSecondaryDirective, GdsContextMenuHeadingComponent, GdsContextMenuItemComponent, GdsContextMenuItemVariantEnum, GdsContextMenuSwitchComponent, GdsDateInputComponent, GdsDatePipe, GdsDialogBaseDirective, GdsDialogComponent, GdsDialogOverlayComponent, GdsDialogService, GdsDoctypeService, GdsDoctypeToIconPipe, GdsDocumentItemComponent, GdsDropdownComponent, GdsEmptyStateComponent, GdsFeatureBlockComponent, GdsFeedbackButtonComponent, GdsFileUploadComponent, GdsFilenameToIconPipe, GdsFilterChipComponent, GdsFocusOnInitDirective, GdsFormControlComponent, GdsHistoryComponent, GdsIconButtonComponent, GdsIconComponent, GdsIconDoctypeComponent, GdsIconService, GdsInputAutocompleteDirective, GdsItemDisplayComponent, GdsKeyboardNavigationHost, GdsKeyboardNavigationItem, GdsListboxCompositeOptionDirective, GdsListboxDirective, GdsListboxOptionDirective, GdsLoadingCarouselComponent, GdsMapArrayToRadioOptionsPipe, GdsMathFloorPipe, GdsMathMaxPipe, GdsMathMinPipe, GdsMessageInputComponent, GdsModule, GdsNativeInputDirective, GdsNativeTextareaDirective, GdsNavAsideComponent, GdsNavAsideItemComponent, GdsNestedSelectComponent, GdsProgressBarComponent, GdsRadioComponent, GdsRadioOptionDirective, GdsReferenceComponent, GdsReferenceLinkComponent, GdsRegexFilterDirective, GdsResizedDirective, GdsResizedEvent, GdsResponseComponent, GdsScrollOutOfViewDirective, GdsScrollOutOfViewScrollStatus, GdsScrollOutOfViewService, GdsScrollToBottomDirective, GdsScrollToFirstInvalidDirective, GdsSearchBarComponent, GdsSelectComponent, GdsSelectOnFocusDirective, GdsSidebarItemBodyComponent, GdsSidebarItemComponent, GdsSkeletonLoadingComponent, GdsSliderComponent, GdsSpinnerComponent, GdsSplitButtonComponent, GdsSvgIconPipe, GdsSwitchComponent, GdsTextInputComponent, GdsTextareaComponent, GdsTimelineItemComponent, GdsToastComponent, GdsTooltipComponent, GdsTreeViewListItemComponent, GdsUserPromptService, GdsVirtualScrollListboxDirective, MapperPipe, OnBrandChanged, RoundMode, ToastrService, TreeViewListItemDirective, chipColor, chipSize, chipTypes, chipWidth, formatToISO, gdsButtonSizes, gdsButtonVariants, gdsDropdownPositionsX, gdsDropdownPositionsY, gdsSelectWidths, gdsServices, gdsUserPromptSecondaryTextVariants, getIconsByPrefix, isGdsBrand, ngSelectDropdownPositions, parseLocalizedDate, provideToaster, shortDate, shortDateTime, transformDateFormat, transformDurationToSeconds, transformSecondsToDuration };
|
|
8198
8446
|
//# sourceMappingURL=corto-ai-gds-angular.mjs.map
|