@corto-ai/gds-angular 2.1.3 → 2.1.4-dev.2
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 +8 -10
- package/assets/css/acctivity.css.map +1 -1
- package/assets/css/all.css +8 -10
- package/assets/css/all.css.map +1 -1
- package/assets/css/corto.css +8 -10
- package/assets/css/corto.css.map +1 -1
- package/assets/css/lawy.css +8 -10
- package/assets/css/lawy.css.map +1 -1
- package/assets/css/leap.css +8 -10
- 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/mixins/_animated-border.scss +44 -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/leap/leap-logo-matter-ai-background.svg +10 -0
- package/assets/svg/line/line-document-one-page-sparkle.svg +3 -0
- package/fesm2022/corto-ai-gds-angular.mjs +324 -105
- package/fesm2022/corto-ai-gds-angular.mjs.map +1 -1
- package/package.json +3 -5
- package/types/corto-ai-gds-angular.d.ts +85 -22
- 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,20 +14,17 @@ 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';
|
|
18
|
-
import * as i1$3 from '@ngx-translate/core';
|
|
19
|
-
import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
|
|
17
|
+
import { OverlayModule, Overlay } from '@angular/cdk/overlay';
|
|
20
18
|
import { DeviceDetectorService } from 'ngx-device-detector';
|
|
21
19
|
import { MAT_DATE_LOCALE, provideNativeDateAdapter } from '@angular/material/core';
|
|
22
|
-
import * as i1$
|
|
20
|
+
import * as i1$3 from '@angular/material/datepicker';
|
|
23
21
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
24
|
-
import * as i1$
|
|
22
|
+
import * as i1$4 from '@angular/forms';
|
|
25
23
|
import { FormsModule } from '@angular/forms';
|
|
26
24
|
import * as i2 from '@ng-select/ng-select';
|
|
27
25
|
import { NgSelectComponent, NgLabelTemplateDirective, NgMultiLabelTemplateDirective, NgFooterTemplateDirective, NgClearButtonTemplateDirective, NgOptionTemplateDirective, NgPlaceholderTemplateDirective, NgSelectModule } from '@ng-select/ng-select';
|
|
28
26
|
import { BreakpointObserver } from '@angular/cdk/layout';
|
|
29
|
-
import
|
|
30
|
-
import { ToastNoAnimation, provideToastr } from 'ngx-toastr';
|
|
27
|
+
import { ComponentPortal } from '@angular/cdk/portal';
|
|
31
28
|
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
|
|
32
29
|
import { provideTippyLoader, provideTippyConfig } from '@ngneat/helipopper/config';
|
|
33
30
|
|
|
@@ -1335,6 +1332,10 @@ const gdsLeapLogoDefaultIcon = {
|
|
|
1335
1332
|
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
1333
|
name: 'leap-logo-default'
|
|
1337
1334
|
};
|
|
1335
|
+
const gdsLeapLogoMatterAiBackgroundIcon = {
|
|
1336
|
+
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>`,
|
|
1337
|
+
name: 'leap-logo-matter-ai-background'
|
|
1338
|
+
};
|
|
1338
1339
|
const gdsLeapLogoMatterAiIcon = {
|
|
1339
1340
|
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
1341
|
name: 'leap-logo-matter-ai'
|
|
@@ -1743,6 +1744,10 @@ const gdsLineDocumentMultipleIcon = {
|
|
|
1743
1744
|
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.6312C11.2279 2 11.8002 2.23705 12.2221 2.65901L16.841 7.27786C17.2629 7.69981 17.5 8.27211 17.5 8.86885V17.25C17.5 18.4926 16.4926 19.5 15.25 19.5H6.25C5.00736 19.5 4 18.4926 4 17.25V4.25ZM6.25 3.5C5.83579 3.5 5.5 3.83579 5.5 4.25V17.25C5.5 17.6642 5.83579 18 6.25 18H15.25C15.6642 18 16 17.6642 16 17.25V8.99753H12.7539C11.5113 8.99753 10.5039 7.99017 10.5039 6.74753V3.5H6.25ZM12.0039 4.56209V6.74753C12.0039 7.16174 12.3397 7.49753 12.7539 7.49753H14.9393L12.0039 4.56209Z" fill="currentColor"/><path d="M6.62891 20.5C6.93778 21.3739 7.77121 22 8.75088 22H15.2509C17.8742 22 20.0009 19.8734 20.0009 17.25V11.3689C20.0009 10.7721 19.7638 10.1998 19.3419 9.77788L18.5009 8.93689V17.25C18.5009 19.0449 17.0458 20.5 15.2509 20.5H6.62891Z" fill="currentColor"/></svg>`,
|
|
1744
1745
|
name: 'line-document-multiple'
|
|
1745
1746
|
};
|
|
1747
|
+
const gdsLineDocumentOnePageSparkleIcon = {
|
|
1748
|
+
data: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.8777 0.282251L11.226 1.35305C11.3343 1.67859 11.5171 1.97441 11.7599 2.21699C12.0026 2.45957 12.2987 2.64223 12.6245 2.75044L13.6961 3.09845L13.7175 3.10381C13.8001 3.13292 13.8716 3.18692 13.9222 3.25836C13.9728 3.3298 14 3.41516 14 3.50268C14 3.5902 13.9728 3.67556 13.9222 3.747C13.8716 3.81844 13.8001 3.87244 13.7175 3.90155L12.6459 4.24956C12.3201 4.35778 12.0241 4.54044 11.7813 4.78302C11.5385 5.0256 11.3558 5.32141 11.2475 5.64696L10.8992 6.71775C10.87 6.80029 10.816 6.87175 10.7445 6.92231C10.673 6.97286 10.5876 7.00001 10.5 7.00001C10.4124 7.00001 10.327 6.97286 10.2555 6.92231C10.2484 6.91732 10.2416 6.91213 10.2349 6.90675C10.1736 6.85755 10.1271 6.79215 10.1008 6.71775L9.75255 5.64696C9.73383 5.59014 9.71284 5.53422 9.68966 5.47932C9.57963 5.21872 9.42023 4.98116 9.21968 4.77999C9.18154 4.74173 9.14208 4.70496 9.10139 4.66973C8.88302 4.48064 8.62919 4.33588 8.35408 4.24421L7.28247 3.8962C7.19987 3.86708 7.12835 3.81308 7.07776 3.74164C7.02717 3.6702 7 3.58484 7 3.49733C7 3.40981 7.02717 3.32445 7.07776 3.25301C7.12835 3.18157 7.19987 3.12757 7.28247 3.09845L8.35408 2.75044C8.67591 2.63941 8.96768 2.45549 9.20656 2.21307C9.44544 1.97065 9.62497 1.67631 9.73111 1.35305L10.0794 0.282251C10.1085 0.19972 10.1626 0.128252 10.2341 0.0776997C10.3056 0.0271473 10.391 0 10.4786 0C10.5662 0 10.6516 0.0271473 10.7231 0.0776997C10.7946 0.128252 10.8486 0.19972 10.8777 0.282251ZM15.7829 8.21319L15.0175 7.96461C14.7848 7.88731 14.5733 7.75684 14.3999 7.58357C14.2265 7.4103 14.0959 7.199 14.0186 6.96647L13.7698 6.20161C13.749 6.14266 13.7104 6.09161 13.6593 6.05551C13.6083 6.0194 13.5473 6.00001 13.4847 6.00001C13.4221 6.00001 13.3611 6.0194 13.31 6.05551C13.259 6.09161 13.2204 6.14266 13.1996 6.20161L12.9508 6.96647C12.875 7.19737 12.7467 7.40762 12.5761 7.58077C12.4055 7.75392 12.1971 7.8853 11.9672 7.96461L11.2018 8.21319C11.1428 8.23398 11.0917 8.27255 11.0555 8.32358C11.0194 8.37461 11 8.43558 11 8.4981C11 8.56061 11.0194 8.62158 11.0555 8.67261C11.0917 8.72364 11.1428 8.76221 11.2018 8.78301L11.9672 9.03158C12.2003 9.10926 12.412 9.24032 12.5855 9.41428C12.7589 9.58824 12.8893 9.80031 12.9661 10.0335L13.2149 10.7984C13.2357 10.8574 13.2743 10.9084 13.3254 10.9445C13.3764 10.9806 13.4374 11 13.5 11C13.5626 11 13.6236 10.9806 13.6746 10.9445C13.7257 10.9084 13.7643 10.8574 13.7851 10.7984L14.0339 10.0335C14.1113 9.80101 14.2418 9.58972 14.4152 9.41645C14.5886 9.24317 14.8001 9.11271 15.0328 9.03541L15.7982 8.78683C15.8572 8.76603 15.9083 8.72746 15.9445 8.67643C15.9806 8.62541 16 8.56443 16 8.50192C16 8.43941 15.9806 8.37844 15.9445 8.32741C15.9083 8.27638 15.8572 8.23781 15.7982 8.21701L15.7829 8.21319ZM13 11.9009C12.9147 11.8659 12.833 11.8221 12.7561 11.7696C12.5359 11.6094 12.3758 11.399 12.2757 11.1486L12.0155 10.3473C12.0106 10.3343 12.0055 10.3213 12 10.3084V13C12 13.5523 11.5523 14 11 14H5C4.44772 14 4 13.5523 4 13V3C4 2.44772 4.44772 2 5 2H7.42985L8.04186 1.80334C8.202 1.75326 8.36215 1.64308 8.49227 1.51287C8.62238 1.38266 8.72248 1.22239 8.78253 1.0421L8.79629 1H5C3.89543 1 3 1.89543 3 3V13C3 14.1046 3.89543 15 5 15H11C12.1046 15 13 14.1046 13 13V11.9009ZM9.58988 8.49194C9.82312 8.44961 10 8.24546 10 8C10 7.72386 9.77614 7.5 9.5 7.5H6.5L6.41012 7.50806C6.17688 7.55039 6 7.75454 6 8C6 8.27614 6.22386 8.5 6.5 8.5H9.5L9.58988 8.49194ZM10 11.4919C10 11.7374 9.82312 11.9416 9.58988 11.9839L9.5 11.9919H6.5C6.22386 11.9919 6 11.7681 6 11.4919C6 11.2465 6.17688 11.0423 6.41012 11L6.5 10.9919H9.5C9.77614 10.9919 10 11.2158 10 11.4919Z" fill="currentColor"/></svg>`,
|
|
1749
|
+
name: 'line-document-one-page-sparkle'
|
|
1750
|
+
};
|
|
1746
1751
|
const gdsLineDocumentPreviewIcon = {
|
|
1747
1752
|
data: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.5859 2C10.9837 2.00004 11.3652 2.15818 11.6465 2.43945L15.5605 6.35352C15.8418 6.63478 16 7.01629 16 7.41406V16C16 17.1046 15.1046 18 14 18H9.81836C10.1064 17.6741 10.3453 17.3338 10.5312 17H14C14.5523 17 15 16.5523 15 16V8H11.5C10.6716 8 10 7.32843 10 6.5V3H6C5.44772 3 5 3.44772 5 4V11.0234C4.65144 11.0544 4.31758 11.1152 4 11.2041V4C4 2.89543 4.89543 2 6 2H10.5859ZM11 6.5C11 6.77614 11.2239 7 11.5 7H14.793L11 3.20703V6.5Z" fill="currentColor"/><path d="M1 15.5C1 14.318 2.736 12 5.5 12C8.261 12 10 14.3 10 15.5C10 16.682 8.261 19 5.5 19C2.739 19 1 16.7 1 15.5ZM4.11107 17.5787C4.5222 17.8534 5.00555 18 5.5 18C6.16304 18 6.79893 17.7366 7.26777 17.2678C7.73661 16.7989 8 16.163 8 15.5C8 15.0055 7.85338 14.5222 7.57867 14.1111C7.30397 13.7 6.91352 13.3795 6.45671 13.1903C5.99989 13.0011 5.49723 12.9516 5.01227 13.048C4.52732 13.1445 4.08186 13.3826 3.73223 13.7322C3.3826 14.0819 3.1445 14.5273 3.04804 15.0123C2.95157 15.4972 3.00108 15.9999 3.1903 16.4567C3.37952 16.9135 3.69995 17.304 4.11107 17.5787ZM6.7472 16.3334C6.91203 16.0867 7 15.7967 7 15.5C7 15.1022 6.84196 14.7206 6.56066 14.4393C6.27936 14.158 5.89782 14 5.5 14C5.20333 14 4.91332 14.088 4.66665 14.2528C4.41997 14.4176 4.22771 14.6519 4.11418 14.926C4.00065 15.2001 3.97094 15.5017 4.02882 15.7926C4.0867 16.0836 4.22956 16.3509 4.43934 16.5607C4.64912 16.7704 4.91639 16.9133 5.20736 16.9712C5.49834 17.0291 5.79994 16.9993 6.07403 16.8858C6.34811 16.7723 6.58238 16.58 6.7472 16.3334Z" fill="currentColor"/></svg>`,
|
|
1748
1753
|
name: 'line-document-preview'
|
|
@@ -2961,6 +2966,7 @@ var icons = /*#__PURE__*/Object.freeze({
|
|
|
2961
2966
|
gdsLeapIconTransparentOrangeIcon: gdsLeapIconTransparentOrangeIcon,
|
|
2962
2967
|
gdsLeapIconTransparentWhiteIcon: gdsLeapIconTransparentWhiteIcon,
|
|
2963
2968
|
gdsLeapLogoDefaultIcon: gdsLeapLogoDefaultIcon,
|
|
2969
|
+
gdsLeapLogoMatterAiBackgroundIcon: gdsLeapLogoMatterAiBackgroundIcon,
|
|
2964
2970
|
gdsLeapLogoMatterAiIcon: gdsLeapLogoMatterAiIcon,
|
|
2965
2971
|
gdsLeapLogoOrangeIcon: gdsLeapLogoOrangeIcon,
|
|
2966
2972
|
gdsLeapLogoWhiteIcon: gdsLeapLogoWhiteIcon,
|
|
@@ -3064,6 +3070,7 @@ var icons = /*#__PURE__*/Object.freeze({
|
|
|
3064
3070
|
gdsLineDocumentAddIcon: gdsLineDocumentAddIcon,
|
|
3065
3071
|
gdsLineDocumentIcon: gdsLineDocumentIcon,
|
|
3066
3072
|
gdsLineDocumentMultipleIcon: gdsLineDocumentMultipleIcon,
|
|
3073
|
+
gdsLineDocumentOnePageSparkleIcon: gdsLineDocumentOnePageSparkleIcon,
|
|
3067
3074
|
gdsLineDocumentPreviewIcon: gdsLineDocumentPreviewIcon,
|
|
3068
3075
|
gdsLineDocumentSyncIcon: gdsLineDocumentSyncIcon,
|
|
3069
3076
|
gdsLineDocumentTableIcon: gdsLineDocumentTableIcon,
|
|
@@ -5239,6 +5246,7 @@ class GdsDropdownComponent {
|
|
|
5239
5246
|
horizontal = input(false, { ...(ngDevMode ? { debugName: "horizontal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5240
5247
|
preventMobileStyling = input(false, { ...(ngDevMode ? { debugName: "preventMobileStyling" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5241
5248
|
allowDefaultTabBehavior = input(false, { ...(ngDevMode ? { debugName: "allowDefaultTabBehavior" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5249
|
+
mobileCancelLabel = input('Cancel', ...(ngDevMode ? [{ debugName: "mobileCancelLabel" }] : /* istanbul ignore next */ []));
|
|
5242
5250
|
items = contentChildren(CdkMenuItem, { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: true });
|
|
5243
5251
|
isMobile = signal(this.#deviceDetectorSvc.isMobile(), ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
|
|
5244
5252
|
#keyManager;
|
|
@@ -5307,11 +5315,11 @@ class GdsDropdownComponent {
|
|
|
5307
5315
|
};
|
|
5308
5316
|
};
|
|
5309
5317
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5310
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsDropdownComponent, isStandalone: true, selector: "gds-dropdown", inputs: { triggerElement: { classPropertyName: "triggerElement", publicName: "triggerElement", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, preventMobileStyling: { classPropertyName: "preventMobileStyling", publicName: "preventMobileStyling", isSignal: true, isRequired: false, transformFunction: null }, allowDefaultTabBehavior: { classPropertyName: "allowDefaultTabBehavior", publicName: "allowDefaultTabBehavior", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.horizontal": "horizontal() ? \"\" : undefined", "attr.isMobile": "isMobile() && !preventMobileStyling() ? \"\" : undefined", "animate.enter": "!preventMobileStyling() && isMobile() ? \"gds-mobile-slide-bottom\" : undefined", "animate.leave": "!preventMobileStyling() && isMobile() ? \"gds-mobile-slide-bottom leave\" : undefined" } }, queries: [{ propertyName: "items", predicate: CdkMenuItem, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkMenu, outputs: ["closed", "closed"] }], ngImport: i0, template: "<div class=\"\n content\n gds-background-white\n gds-display-flex\n gds-gap-2xs\n gds-padding-block-3xs\n\">\n <ng-content />\n</div>\n<div\n class=\"\n cancel\n gds-align-items-center\n gds-background-white\n gds-height-xl\n gds-justify-content-center\n gds-padding-block-3xs\n gds-padding-inline-sm\n gds-text-body-strong\n gds-text-primary\n gds-width-100-parent\n \"\n cdkMenuItem\n>\n <span>{{
|
|
5318
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsDropdownComponent, isStandalone: true, selector: "gds-dropdown", inputs: { triggerElement: { classPropertyName: "triggerElement", publicName: "triggerElement", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, preventMobileStyling: { classPropertyName: "preventMobileStyling", publicName: "preventMobileStyling", isSignal: true, isRequired: false, transformFunction: null }, allowDefaultTabBehavior: { classPropertyName: "allowDefaultTabBehavior", publicName: "allowDefaultTabBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobileCancelLabel: { classPropertyName: "mobileCancelLabel", publicName: "mobileCancelLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.horizontal": "horizontal() ? \"\" : undefined", "attr.isMobile": "isMobile() && !preventMobileStyling() ? \"\" : undefined", "animate.enter": "!preventMobileStyling() && isMobile() ? \"gds-mobile-slide-bottom\" : undefined", "animate.leave": "!preventMobileStyling() && isMobile() ? \"gds-mobile-slide-bottom leave\" : undefined" } }, queries: [{ propertyName: "items", predicate: CdkMenuItem, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkMenu, outputs: ["closed", "closed"] }], ngImport: i0, template: "<div class=\"\n content\n gds-background-white\n gds-display-flex\n gds-gap-2xs\n gds-padding-block-3xs\n\">\n <ng-content />\n</div>\n<div\n class=\"\n cancel\n gds-align-items-center\n gds-background-white\n gds-height-xl\n gds-justify-content-center\n gds-padding-block-3xs\n gds-padding-inline-sm\n gds-text-body-strong\n gds-text-primary\n gds-width-100-parent\n \"\n cdkMenuItem\n>\n <span>{{ mobileCancelLabel() }}</span>\n</div>\n", styles: ["@layer design-system{gds-dropdown .content{overflow:hidden;border-radius:var(--gds-borderRadius-sm);box-shadow:var(--gds-shadow-default);flex-direction:column}gds-dropdown .content[horizontal]{flex-direction:row}gds-dropdown .content{padding-inline:5px}gds-dropdown .cancel{display:none;border-radius:var(--gds-borderRadius-sm);border-bottom-left-radius:var(--gds-borderRadius-2xl);border-bottom-right-radius:var(--gds-borderRadius-2xl);box-shadow:var(--gds-shadow-default)}gds-dropdown[isMobile]{width:100%;margin-block-end:var(--gds-spacing-md);margin-inline:var(--gds-spacing-2xs);display:flex;flex-direction:column;gap:var(--gds-spacing-3xs)}gds-dropdown[isMobile] .content{width:100%;border-top-left-radius:var(--gds-borderRadius-2xl);border-top-right-radius:var(--gds-borderRadius-2xl)}gds-dropdown[isMobile] .cancel{display:flex}.cdk-overlay-container:has(gds-dropdown[isMobile]){display:grid;pointer-events:none;inset:0}.cdk-overlay-container:has(gds-dropdown[isMobile]):before{background-color:var(--gds-pattern-overlay-background-default);inset:0;content:\"\";position:absolute;pointer-events:auto}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-connected-position-bounding-box{grid-area:1/-1}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-connected-position-bounding-box:not(:last-of-type){display:none}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-pane{position:unset!important;transform:unset!important;align-items:center!important}.cdk-overlay-container:has(gds-dropdown[isMobile]):has(gds-dropdown) .cdk-overlay-connected-position-bounding-box{flex-direction:column-reverse!important}}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5311
5319
|
}
|
|
5312
5320
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsDropdownComponent, decorators: [{
|
|
5313
5321
|
type: Component,
|
|
5314
|
-
args: [{ selector: 'gds-dropdown', imports: [OverlayModule, CdkMenuItem
|
|
5322
|
+
args: [{ selector: 'gds-dropdown', imports: [OverlayModule, CdkMenuItem], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
|
|
5315
5323
|
{
|
|
5316
5324
|
directive: CdkMenu,
|
|
5317
5325
|
outputs: ['closed']
|
|
@@ -5322,8 +5330,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
5322
5330
|
'(keydown)': 'onKeydown($event)',
|
|
5323
5331
|
'[animate.enter]': '!preventMobileStyling() && isMobile() ? "gds-mobile-slide-bottom" : undefined',
|
|
5324
5332
|
'[animate.leave]': '!preventMobileStyling() && isMobile() ? "gds-mobile-slide-bottom leave" : undefined'
|
|
5325
|
-
}, encapsulation: ViewEncapsulation.None, template: "<div class=\"\n content\n gds-background-white\n gds-display-flex\n gds-gap-2xs\n gds-padding-block-3xs\n\">\n <ng-content />\n</div>\n<div\n class=\"\n cancel\n gds-align-items-center\n gds-background-white\n gds-height-xl\n gds-justify-content-center\n gds-padding-block-3xs\n gds-padding-inline-sm\n gds-text-body-strong\n gds-text-primary\n gds-width-100-parent\n \"\n cdkMenuItem\n>\n <span>{{
|
|
5326
|
-
}], ctorParameters: () => [], propDecorators: { triggerElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerElement", required: false }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], preventMobileStyling: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventMobileStyling", required: false }] }], allowDefaultTabBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDefaultTabBehavior", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CdkMenuItem), { ...{ descendants: true }, isSignal: true }] }] } });
|
|
5333
|
+
}, encapsulation: ViewEncapsulation.None, template: "<div class=\"\n content\n gds-background-white\n gds-display-flex\n gds-gap-2xs\n gds-padding-block-3xs\n\">\n <ng-content />\n</div>\n<div\n class=\"\n cancel\n gds-align-items-center\n gds-background-white\n gds-height-xl\n gds-justify-content-center\n gds-padding-block-3xs\n gds-padding-inline-sm\n gds-text-body-strong\n gds-text-primary\n gds-width-100-parent\n \"\n cdkMenuItem\n>\n <span>{{ mobileCancelLabel() }}</span>\n</div>\n", styles: ["@layer design-system{gds-dropdown .content{overflow:hidden;border-radius:var(--gds-borderRadius-sm);box-shadow:var(--gds-shadow-default);flex-direction:column}gds-dropdown .content[horizontal]{flex-direction:row}gds-dropdown .content{padding-inline:5px}gds-dropdown .cancel{display:none;border-radius:var(--gds-borderRadius-sm);border-bottom-left-radius:var(--gds-borderRadius-2xl);border-bottom-right-radius:var(--gds-borderRadius-2xl);box-shadow:var(--gds-shadow-default)}gds-dropdown[isMobile]{width:100%;margin-block-end:var(--gds-spacing-md);margin-inline:var(--gds-spacing-2xs);display:flex;flex-direction:column;gap:var(--gds-spacing-3xs)}gds-dropdown[isMobile] .content{width:100%;border-top-left-radius:var(--gds-borderRadius-2xl);border-top-right-radius:var(--gds-borderRadius-2xl)}gds-dropdown[isMobile] .cancel{display:flex}.cdk-overlay-container:has(gds-dropdown[isMobile]){display:grid;pointer-events:none;inset:0}.cdk-overlay-container:has(gds-dropdown[isMobile]):before{background-color:var(--gds-pattern-overlay-background-default);inset:0;content:\"\";position:absolute;pointer-events:auto}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-connected-position-bounding-box{grid-area:1/-1}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-connected-position-bounding-box:not(:last-of-type){display:none}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-pane{position:unset!important;transform:unset!important;align-items:center!important}.cdk-overlay-container:has(gds-dropdown[isMobile]):has(gds-dropdown) .cdk-overlay-connected-position-bounding-box{flex-direction:column-reverse!important}}\n"] }]
|
|
5334
|
+
}], ctorParameters: () => [], propDecorators: { triggerElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerElement", required: false }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], preventMobileStyling: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventMobileStyling", required: false }] }], allowDefaultTabBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDefaultTabBehavior", required: false }] }], mobileCancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileCancelLabel", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CdkMenuItem), { ...{ descendants: true }, isSignal: true }] }] } });
|
|
5327
5335
|
|
|
5328
5336
|
class GdsEmptyStateComponent extends OnBrandChanged {
|
|
5329
5337
|
#cdnUrl = inject(CDN_URL);
|
|
@@ -5399,6 +5407,7 @@ const GDS_EMPTY_STATE_VARIANTS = [
|
|
|
5399
5407
|
class GdsFeatureBlockComponent {
|
|
5400
5408
|
feature = input.required(...(ngDevMode ? [{ debugName: "feature" }] : /* istanbul ignore next */ []));
|
|
5401
5409
|
index = input.required(...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
|
|
5410
|
+
learnMoreLabel = input('Learn more', ...(ngDevMode ? [{ debugName: "learnMoreLabel" }] : /* istanbul ignore next */ []));
|
|
5402
5411
|
icon = computed(() => this.feature().icon, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
5403
5412
|
name = computed(() => this.feature().name, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
5404
5413
|
description = computed(() => this.feature().localeOverrides?.[navigator.language]?.description ?? this.feature().description, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
@@ -5423,7 +5432,7 @@ class GdsFeatureBlockComponent {
|
|
|
5423
5432
|
}
|
|
5424
5433
|
];
|
|
5425
5434
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFeatureBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5426
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsFeatureBlockComponent, isStandalone: true, selector: "gds-feature-block", inputs: { feature: { classPropertyName: "feature", publicName: "feature", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.background": "selectedColor().background", "style.color": "selectedColor().color" }, classAttribute: "gds-display-flex gds-flex-column gds-gap-sm gds-padding-sm gds-radius-lg gds-border" }, ngImport: i0, template: "<span class=\"\n gds-align-items-center\n gds-display-flex\n gds-gap-2xs\n gds-text-body-large-strong\n\">\n <gds-icon [key]=\"icon() | gdsSvgicon\" />\n {{ name() }}\n</span>\n<span class=\"\n gds-line-height-sm\n gds-text-body\n\">{{ description() }}</span>\n\n@if (learnMoreLink()) {\n <a\n class=\"\n gds-margin-block-start-auto\n gds-text-body\n gds-text-primary-primary\n \"\n [href]=\"learnMoreLink()\"\n target=\"_blank\"\n >\n {{
|
|
5435
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsFeatureBlockComponent, isStandalone: true, selector: "gds-feature-block", inputs: { feature: { classPropertyName: "feature", publicName: "feature", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, learnMoreLabel: { classPropertyName: "learnMoreLabel", publicName: "learnMoreLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.background": "selectedColor().background", "style.color": "selectedColor().color" }, classAttribute: "gds-display-flex gds-flex-column gds-gap-sm gds-padding-sm gds-radius-lg gds-border" }, ngImport: i0, template: "<span class=\"\n gds-align-items-center\n gds-display-flex\n gds-gap-2xs\n gds-text-body-large-strong\n\">\n <gds-icon [key]=\"icon() | gdsSvgicon\" />\n {{ name() }}\n</span>\n<span class=\"\n gds-line-height-sm\n gds-text-body\n\">{{ description() }}</span>\n\n@if (learnMoreLink()) {\n <a\n class=\"\n gds-margin-block-start-auto\n gds-text-body\n gds-text-primary-primary\n \"\n [href]=\"learnMoreLink()\"\n target=\"_blank\"\n >\n {{ learnMoreLabel() }}\n </a>\n}\n", styles: ["@layer design-system{:host{width:22.188rem;min-height:10.563rem;border-color:var(--gds-palette-accent-indigo-default)}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "pipe", type: GdsSvgIconPipe, name: "gdsSvgicon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5427
5436
|
}
|
|
5428
5437
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFeatureBlockComponent, decorators: [{
|
|
5429
5438
|
type: Component,
|
|
@@ -5431,8 +5440,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
5431
5440
|
class: 'gds-display-flex gds-flex-column gds-gap-sm gds-padding-sm gds-radius-lg gds-border',
|
|
5432
5441
|
'[style.background]': 'selectedColor().background',
|
|
5433
5442
|
'[style.color]': 'selectedColor().color'
|
|
5434
|
-
}, imports: [GdsIconComponent, GdsSvgIconPipe
|
|
5435
|
-
}], propDecorators: { feature: [{ type: i0.Input, args: [{ isSignal: true, alias: "feature", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }] } });
|
|
5443
|
+
}, imports: [GdsIconComponent, GdsSvgIconPipe], template: "<span class=\"\n gds-align-items-center\n gds-display-flex\n gds-gap-2xs\n gds-text-body-large-strong\n\">\n <gds-icon [key]=\"icon() | gdsSvgicon\" />\n {{ name() }}\n</span>\n<span class=\"\n gds-line-height-sm\n gds-text-body\n\">{{ description() }}</span>\n\n@if (learnMoreLink()) {\n <a\n class=\"\n gds-margin-block-start-auto\n gds-text-body\n gds-text-primary-primary\n \"\n [href]=\"learnMoreLink()\"\n target=\"_blank\"\n >\n {{ learnMoreLabel() }}\n </a>\n}\n", styles: ["@layer design-system{:host{width:22.188rem;min-height:10.563rem;border-color:var(--gds-palette-accent-indigo-default)}}\n"] }]
|
|
5444
|
+
}], propDecorators: { feature: [{ type: i0.Input, args: [{ isSignal: true, alias: "feature", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], learnMoreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "learnMoreLabel", required: false }] }] } });
|
|
5436
5445
|
|
|
5437
5446
|
class GdsFeedbackButtonComponent extends ButtonBaseDirective {
|
|
5438
5447
|
#changeDetector = inject(ChangeDetectorRef);
|
|
@@ -5466,6 +5475,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
5466
5475
|
|
|
5467
5476
|
class GdsFilterChipComponent extends OnBrandChanged {
|
|
5468
5477
|
dismissDisabled = input(false, { ...(ngDevMode ? { debugName: "dismissDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5478
|
+
dismissAriaLabel = input('Clear filter', ...(ngDevMode ? [{ debugName: "dismissAriaLabel" }] : /* istanbul ignore next */ []));
|
|
5469
5479
|
dismiss = new EventEmitter();
|
|
5470
5480
|
handleDismiss = () => {
|
|
5471
5481
|
if (!this.dismiss.observed && !this.dismissDisabled())
|
|
@@ -5473,11 +5483,11 @@ class GdsFilterChipComponent extends OnBrandChanged {
|
|
|
5473
5483
|
this.dismiss.emit();
|
|
5474
5484
|
};
|
|
5475
5485
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFilterChipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5476
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsFilterChipComponent, isStandalone: true, selector: "gds-filter-chip, button[gds-filter-chip]", inputs: { dismissDisabled: { classPropertyName: "dismissDisabled", publicName: "dismissDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { attributes: { "tabIndex": "0" }, listeners: { "keydown.delete": "handleDismiss()", "keydown.backspace": "handleDismiss()" }, classAttribute: "\n gds-align-items-center\n gds-display-flex\n gds-gap-2xs\n gds-padding-inline-2xs\n gds-radius-sm\n gds-text-caption\n gds-text-primary\n gds-min-height-md\n " }, usesInheritance: true, ngImport: i0, template: "<ng-content />\n<button\n gds-icon-button\n variant=\"primary\"\n class=\"\n gds-background-none\n gds-margin-inline-start-auto\n gds-min-height-0\n \"\n [attr.aria-label]=\"
|
|
5486
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsFilterChipComponent, isStandalone: true, selector: "gds-filter-chip, button[gds-filter-chip]", inputs: { dismissDisabled: { classPropertyName: "dismissDisabled", publicName: "dismissDisabled", isSignal: true, isRequired: false, transformFunction: null }, dismissAriaLabel: { classPropertyName: "dismissAriaLabel", publicName: "dismissAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { attributes: { "tabIndex": "0" }, listeners: { "keydown.delete": "handleDismiss()", "keydown.backspace": "handleDismiss()" }, classAttribute: "\n gds-align-items-center\n gds-display-flex\n gds-gap-2xs\n gds-padding-inline-2xs\n gds-radius-sm\n gds-text-caption\n gds-text-primary\n gds-min-height-md\n " }, usesInheritance: true, ngImport: i0, template: "<ng-content />\n<button\n gds-icon-button\n variant=\"primary\"\n class=\"\n gds-background-none\n gds-margin-inline-start-auto\n gds-min-height-0\n \"\n [attr.aria-label]=\"dismissAriaLabel()\"\n [disabled]=\"dismissDisabled()\"\n (click)=\"handleDismiss()\"\n>\n <gds-icon\n key=\"line-dismiss\"\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n \"\n />\n</button>\n", styles: ["@layer design-system{:host{background-color:var(--gds-pattern-label-background-default);padding-block:6px}button:host{cursor:pointer;border:none;width:100%}button:host:focus,button:host:focus-visible,button:host:hover{background-color:var(--gds-pattern-label-background-hover)}button:host:disabled{cursor:not-allowed;outline:none}}\n"], dependencies: [{ kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5477
5487
|
}
|
|
5478
5488
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFilterChipComponent, decorators: [{
|
|
5479
5489
|
type: Component,
|
|
5480
|
-
args: [{ selector: 'gds-filter-chip, button[gds-filter-chip]', imports: [GdsIconButtonComponent, GdsIconComponent
|
|
5490
|
+
args: [{ selector: 'gds-filter-chip, button[gds-filter-chip]', imports: [GdsIconButtonComponent, GdsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
5481
5491
|
class: `
|
|
5482
5492
|
gds-align-items-center
|
|
5483
5493
|
gds-display-flex
|
|
@@ -5491,8 +5501,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
5491
5501
|
'(keydown.delete)': 'handleDismiss()',
|
|
5492
5502
|
'(keydown.backspace)': 'handleDismiss()',
|
|
5493
5503
|
tabIndex: '0'
|
|
5494
|
-
}, template: "<ng-content />\n<button\n gds-icon-button\n variant=\"primary\"\n class=\"\n gds-background-none\n gds-margin-inline-start-auto\n gds-min-height-0\n \"\n [attr.aria-label]=\"
|
|
5495
|
-
}], propDecorators: { dismissDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissDisabled", required: false }] }], dismiss: [{
|
|
5504
|
+
}, template: "<ng-content />\n<button\n gds-icon-button\n variant=\"primary\"\n class=\"\n gds-background-none\n gds-margin-inline-start-auto\n gds-min-height-0\n \"\n [attr.aria-label]=\"dismissAriaLabel()\"\n [disabled]=\"dismissDisabled()\"\n (click)=\"handleDismiss()\"\n>\n <gds-icon\n key=\"line-dismiss\"\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n \"\n />\n</button>\n", styles: ["@layer design-system{:host{background-color:var(--gds-pattern-label-background-default);padding-block:6px}button:host{cursor:pointer;border:none;width:100%}button:host:focus,button:host:focus-visible,button:host:hover{background-color:var(--gds-pattern-label-background-hover)}button:host:disabled{cursor:not-allowed;outline:none}}\n"] }]
|
|
5505
|
+
}], propDecorators: { dismissDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissDisabled", required: false }] }], dismissAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissAriaLabel", required: false }] }], dismiss: [{
|
|
5496
5506
|
type: Output
|
|
5497
5507
|
}] } });
|
|
5498
5508
|
|
|
@@ -5671,7 +5681,7 @@ class GdsDateInputComponent extends GdsSignalFormContainer {
|
|
|
5671
5681
|
useValue: navigator.language
|
|
5672
5682
|
},
|
|
5673
5683
|
provideNativeDateAdapter()
|
|
5674
|
-
], queries: [{ propertyName: "inputComponent", first: true, predicate: GdsNativeInputDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[leading-visual]\" />\n<ng-content />\n<ng-content select=\"[trailing-visual]\" />\n@if (calendarVisible()) {\n <div\n #calendarContainer\n class=\"gds-date-input_calendar-container\"\n [ngClass]=\"dropdownPositionClass()\"\n tabindex=\"-1\"\n (blur)=\"onCalendarBlur($event)\"\n >\n <mat-calendar\n [(selected)]=\"selectedDate\"\n [startAt]=\"selectedDate()\"\n (click)=\"onCalendarClick($event)\"\n (selectedChange)=\"onSelectedDateChange()\"\n (viewChanged)=\"onCalendarViewChanged($event)\"\n />\n </div>\n}\n", styles: ["@layer design-system{:host{--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}:host .gds-date-input_calendar-container{width:300px;position:absolute;z-index:1;outline:none}:host .gds-date-input_calendar-container.position-top-left{bottom:100%;left:0}:host .gds-date-input_calendar-container.position-top-right{bottom:100%;right:0}:host .gds-date-input_calendar-container.position-bottom-left{top:100%;left:0}:host .gds-date-input_calendar-container.position-bottom-right{top:100%;right:0}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-mdc-button,:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-mdc-icon-button,:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-mdc-button-touch-target{padding:0;margin:0;height:auto}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-table-header-divider{display:none}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-header{padding:0}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-body tr[aria-hidden]{display:none}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-body .mat-calendar-body-label{visibility:hidden}:host .gds-date-input_calendar-container ::ng-deep mat-calendar.mat-calendar{border-radius:var(--gds-borderRadius-md);box-shadow:var(--gds-shadow-default);background-color:var(--gds-palette-background-white)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-header{border-bottom:1px solid var(--gds-palette-border-default);padding-top:var(--gds-spacing-2xs);margin-bottom:var(--gds-spacing-xs)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls{margin:0 var(--gds-spacing-sm) var(--gds-spacing-2xs)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-period-button{font-weight:var(--gds-fontWeight-title);color:var(--gds-palette-text-default-primary)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-period-button svg{display:none}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-previous-button,:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-next-button{color:var(--gds-palette-button-primary-default);transform:rotate(90deg)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar{--mat-datepicker-calendar-text-font: var(--gds-fontFamily-body);--mat-datepicker-calendar-text-size: var(--gds-fontSize-bodyStrong);--mat-datepicker-calendar-header-text-weight: var(--gds-fontWeight-title);--mat-datepicker-calendar-date-text-color: var(--gds-palette-text-default-primary);--mat-datepicker-calendar-header-text-color: var(--gds-palette-text-default-primary);--mat-datepicker-calendar-date-selected-state-text-color: var(--gds-palette-text-default-contrast);--mat-datepicker-calendar-date-selected-state-background-color: var(--gds-palette-button-primary-default);--mat-datepicker-calendar-date-today-outline-color: var(--gds-palette-button-primary-default);--mat-datepicker-calendar-date-today-selected-state-outline-color: var(--gds-palette-button-primary-default)}}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$
|
|
5684
|
+
], queries: [{ propertyName: "inputComponent", first: true, predicate: GdsNativeInputDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[leading-visual]\" />\n<ng-content />\n<ng-content select=\"[trailing-visual]\" />\n@if (calendarVisible()) {\n <div\n #calendarContainer\n class=\"gds-date-input_calendar-container\"\n [ngClass]=\"dropdownPositionClass()\"\n tabindex=\"-1\"\n (blur)=\"onCalendarBlur($event)\"\n >\n <mat-calendar\n [(selected)]=\"selectedDate\"\n [startAt]=\"selectedDate()\"\n (click)=\"onCalendarClick($event)\"\n (selectedChange)=\"onSelectedDateChange()\"\n (viewChanged)=\"onCalendarViewChanged($event)\"\n />\n </div>\n}\n", styles: ["@layer design-system{:host{--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}:host .gds-date-input_calendar-container{width:300px;position:absolute;z-index:1;outline:none}:host .gds-date-input_calendar-container.position-top-left{bottom:100%;left:0}:host .gds-date-input_calendar-container.position-top-right{bottom:100%;right:0}:host .gds-date-input_calendar-container.position-bottom-left{top:100%;left:0}:host .gds-date-input_calendar-container.position-bottom-right{top:100%;right:0}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-mdc-button,:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-mdc-icon-button,:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-mdc-button-touch-target{padding:0;margin:0;height:auto}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-table-header-divider{display:none}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-header{padding:0}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-body tr[aria-hidden]{display:none}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-body .mat-calendar-body-label{visibility:hidden}:host .gds-date-input_calendar-container ::ng-deep mat-calendar.mat-calendar{border-radius:var(--gds-borderRadius-md);box-shadow:var(--gds-shadow-default);background-color:var(--gds-palette-background-white)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-header{border-bottom:1px solid var(--gds-palette-border-default);padding-top:var(--gds-spacing-2xs);margin-bottom:var(--gds-spacing-xs)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls{margin:0 var(--gds-spacing-sm) var(--gds-spacing-2xs)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-period-button{font-weight:var(--gds-fontWeight-title);color:var(--gds-palette-text-default-primary)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-period-button svg{display:none}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-previous-button,:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-next-button{color:var(--gds-palette-button-primary-default);transform:rotate(90deg)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar{--mat-datepicker-calendar-text-font: var(--gds-fontFamily-body);--mat-datepicker-calendar-text-size: var(--gds-fontSize-bodyStrong);--mat-datepicker-calendar-header-text-weight: var(--gds-fontWeight-title);--mat-datepicker-calendar-date-text-color: var(--gds-palette-text-default-primary);--mat-datepicker-calendar-header-text-color: var(--gds-palette-text-default-primary);--mat-datepicker-calendar-date-selected-state-text-color: var(--gds-palette-text-default-contrast);--mat-datepicker-calendar-date-selected-state-background-color: var(--gds-palette-button-primary-default);--mat-datepicker-calendar-date-today-outline-color: var(--gds-palette-button-primary-default);--mat-datepicker-calendar-date-today-selected-state-outline-color: var(--gds-palette-button-primary-default)}}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$3.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5675
5685
|
}
|
|
5676
5686
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsDateInputComponent, decorators: [{
|
|
5677
5687
|
type: Component,
|
|
@@ -5705,8 +5715,10 @@ class GdsFileUploadComponent extends GdsSignalFormControl {
|
|
|
5705
5715
|
value = model([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
5706
5716
|
accept = input(...(ngDevMode ? [undefined, { debugName: "accept" }] : /* istanbul ignore next */ []));
|
|
5707
5717
|
multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5708
|
-
dragDropLabel = input('
|
|
5709
|
-
|
|
5718
|
+
dragDropLabel = input('Drag and drop a document here', ...(ngDevMode ? [{ debugName: "dragDropLabel" }] : /* istanbul ignore next */ []));
|
|
5719
|
+
separatorLabel = input('or', ...(ngDevMode ? [{ debugName: "separatorLabel" }] : /* istanbul ignore next */ []));
|
|
5720
|
+
browseLabel = input('Browse your files', ...(ngDevMode ? [{ debugName: "browseLabel" }] : /* istanbul ignore next */ []));
|
|
5721
|
+
inputAriaLabel = input('File upload', ...(ngDevMode ? [{ debugName: "inputAriaLabel" }] : /* istanbul ignore next */ []));
|
|
5710
5722
|
changed = output();
|
|
5711
5723
|
fileUpload = viewChild.required('fileUpload');
|
|
5712
5724
|
dragOver = signal(false, ...(ngDevMode ? [{ debugName: "dragOver" }] : /* istanbul ignore next */ []));
|
|
@@ -5740,11 +5752,11 @@ class GdsFileUploadComponent extends GdsSignalFormControl {
|
|
|
5740
5752
|
this.fileUpload().nativeElement.click();
|
|
5741
5753
|
}
|
|
5742
5754
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFileUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5743
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsFileUploadComponent, isStandalone: true, selector: "gds-file-upload", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, dragDropLabel: { classPropertyName: "dragDropLabel", publicName: "dragDropLabel", isSignal: true, isRequired: false, transformFunction: null }, inputAriaLabel: { classPropertyName: "inputAriaLabel", publicName: "inputAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { listeners: { "drop": "onFileDrop($event)", "dragover": "preventDragEvent($event, true)", "dragleave": "preventDragEvent($event)" }, properties: { "attr.data-dragover": "dragOver() ? \"\": undefined" }, classAttribute: "\n gds-height-100-parent\n gds-width-100-parent\n " }, viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<label\n tabindex=\"0\"\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-column\n gds-gap-sm\n gds-height-100-parent\n gds-justify-content-center\n gds-padding-md\n gds-radius-md\n gds-width-100-parent\n \"\n [ngClass]=\"{ 'gds-pointer-events-none': disabled() }\"\n [attr.inert]=\"disabled() ? '' : undefined\"\n (keydown.enter)=\"openFileSelector()\"\n>\n <gds-icon\n class=\"\n gds-icon-size-lg\n icon\n \"\n key=\"line-cloud-up\"\n aria-hidden=\"true\"\n />\n <div class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-text-body\n gds-text-center\n \">\n <span class=\"\n gds-text-body-large-strong\n text\n \">{{ dragDropLabel()
|
|
5755
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsFileUploadComponent, isStandalone: true, selector: "gds-file-upload", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, dragDropLabel: { classPropertyName: "dragDropLabel", publicName: "dragDropLabel", isSignal: true, isRequired: false, transformFunction: null }, separatorLabel: { classPropertyName: "separatorLabel", publicName: "separatorLabel", isSignal: true, isRequired: false, transformFunction: null }, browseLabel: { classPropertyName: "browseLabel", publicName: "browseLabel", isSignal: true, isRequired: false, transformFunction: null }, inputAriaLabel: { classPropertyName: "inputAriaLabel", publicName: "inputAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { listeners: { "drop": "onFileDrop($event)", "dragover": "preventDragEvent($event, true)", "dragleave": "preventDragEvent($event)" }, properties: { "attr.data-dragover": "dragOver() ? \"\": undefined" }, classAttribute: "\n gds-height-100-parent\n gds-width-100-parent\n " }, viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<label\n tabindex=\"0\"\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-column\n gds-gap-sm\n gds-height-100-parent\n gds-justify-content-center\n gds-padding-md\n gds-radius-md\n gds-width-100-parent\n \"\n [ngClass]=\"{ 'gds-pointer-events-none': disabled() }\"\n [attr.inert]=\"disabled() ? '' : undefined\"\n (keydown.enter)=\"openFileSelector()\"\n>\n <gds-icon\n class=\"\n gds-icon-size-lg\n icon\n \"\n key=\"line-cloud-up\"\n aria-hidden=\"true\"\n />\n <div class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-text-body\n gds-text-center\n \">\n <span class=\"\n gds-text-body-large-strong\n text\n \">{{ dragDropLabel() }}</span>\n <span class=\"text\">{{ separatorLabel() }}</span>\n <a class=\"link\">\n {{ browseLabel() }}\n </a>\n </div>\n <span\n class=\"\n gds-align-content-center\n gds-display-flex\n gds-flex-wrap\n gds-gap-2xs\n gds-justify-content-center\n gds-text-body\n gds-text-secondary\n \"\n >\n <ng-content />\n </span>\n\n <input\n #fileUpload\n type=\"file\"\n class=\"gds-display-none\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [attr.aria-label]=\"inputAriaLabel()\"\n (change)=\"fileSelected($event)\"\n />\n</label>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--gds-form-control-border-color: var(--gds-palette-border-primary);--gds-form-control-background-color: var(--gds-palette-background-base);--gds-form-control-text-color: var(--gds-palette-text-primary-primary);--icon-color: var(--gds-brand-300);--text-decoration: underline;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--icon-color: var(--disabled-text-color);--border-color: var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--icon-color: var(--invalid-color);--background-color: var(--gds-palette-helper-error-default)}:host,:host label{cursor:var(--cursor)}:host[data-dragover] label,:host label:focus{outline:var(--border-color) auto 1px}:host label{background:var(--background-color);border:2px dashed var(--border-color)}:host label .text{color:var(--text-color)}:host label .icon{color:var(--icon-color)}:host label .link{color:var(--text-color)}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5744
5756
|
}
|
|
5745
5757
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFileUploadComponent, decorators: [{
|
|
5746
5758
|
type: Component,
|
|
5747
|
-
args: [{ selector: 'gds-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GdsIconComponent,
|
|
5759
|
+
args: [{ selector: 'gds-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GdsIconComponent, NgClass], host: {
|
|
5748
5760
|
'[attr.data-dragover]': 'dragOver() ? "": undefined',
|
|
5749
5761
|
'(drop)': 'onFileDrop($event)',
|
|
5750
5762
|
'(dragover)': 'preventDragEvent($event, true)',
|
|
@@ -5753,20 +5765,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
5753
5765
|
gds-height-100-parent
|
|
5754
5766
|
gds-width-100-parent
|
|
5755
5767
|
`
|
|
5756
|
-
}, template: "<label\n tabindex=\"0\"\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-column\n gds-gap-sm\n gds-height-100-parent\n gds-justify-content-center\n gds-padding-md\n gds-radius-md\n gds-width-100-parent\n \"\n [ngClass]=\"{ 'gds-pointer-events-none': disabled() }\"\n [attr.inert]=\"disabled() ? '' : undefined\"\n (keydown.enter)=\"openFileSelector()\"\n>\n <gds-icon\n class=\"\n gds-icon-size-lg\n icon\n \"\n key=\"line-cloud-up\"\n aria-hidden=\"true\"\n />\n <div class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-text-body\n gds-text-center\n \">\n <span class=\"\n gds-text-body-large-strong\n text\n \">{{ dragDropLabel()
|
|
5757
|
-
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], dragDropLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragDropLabel", required: false }] }], inputAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAriaLabel", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], fileUpload: [{ type: i0.ViewChild, args: ['fileUpload', { isSignal: true }] }] } });
|
|
5768
|
+
}, template: "<label\n tabindex=\"0\"\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-column\n gds-gap-sm\n gds-height-100-parent\n gds-justify-content-center\n gds-padding-md\n gds-radius-md\n gds-width-100-parent\n \"\n [ngClass]=\"{ 'gds-pointer-events-none': disabled() }\"\n [attr.inert]=\"disabled() ? '' : undefined\"\n (keydown.enter)=\"openFileSelector()\"\n>\n <gds-icon\n class=\"\n gds-icon-size-lg\n icon\n \"\n key=\"line-cloud-up\"\n aria-hidden=\"true\"\n />\n <div class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-text-body\n gds-text-center\n \">\n <span class=\"\n gds-text-body-large-strong\n text\n \">{{ dragDropLabel() }}</span>\n <span class=\"text\">{{ separatorLabel() }}</span>\n <a class=\"link\">\n {{ browseLabel() }}\n </a>\n </div>\n <span\n class=\"\n gds-align-content-center\n gds-display-flex\n gds-flex-wrap\n gds-gap-2xs\n gds-justify-content-center\n gds-text-body\n gds-text-secondary\n \"\n >\n <ng-content />\n </span>\n\n <input\n #fileUpload\n type=\"file\"\n class=\"gds-display-none\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [attr.aria-label]=\"inputAriaLabel()\"\n (change)=\"fileSelected($event)\"\n />\n</label>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--gds-form-control-border-color: var(--gds-palette-border-primary);--gds-form-control-background-color: var(--gds-palette-background-base);--gds-form-control-text-color: var(--gds-palette-text-primary-primary);--icon-color: var(--gds-brand-300);--text-decoration: underline;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--icon-color: var(--disabled-text-color);--border-color: var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--icon-color: var(--invalid-color);--background-color: var(--gds-palette-helper-error-default)}:host,:host label{cursor:var(--cursor)}:host[data-dragover] label,:host label:focus{outline:var(--border-color) auto 1px}:host label{background:var(--background-color);border:2px dashed var(--border-color)}:host label .text{color:var(--text-color)}:host label .icon{color:var(--icon-color)}:host label .link{color:var(--text-color)}}\n"] }]
|
|
5769
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], dragDropLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragDropLabel", required: false }] }], separatorLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorLabel", required: false }] }], browseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "browseLabel", required: false }] }], inputAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAriaLabel", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], fileUpload: [{ type: i0.ViewChild, args: ['fileUpload', { isSignal: true }] }] } });
|
|
5758
5770
|
|
|
5759
5771
|
class GdsFormControlComponent extends GdsSignalFormContainer {
|
|
5760
5772
|
locked = input(false, { ...(ngDevMode ? { debugName: "locked" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5761
5773
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFormControlComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5762
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsFormControlComponent, isStandalone: true, selector: "gds-form-control", inputs: { locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.locked": "locked() ? \"\" : undefined" }, classAttribute: "gds-display-flex" }, usesInheritance: true, ngImport: i0, template: "<div class=\"\n gds-text-body\n gds-whitespace-nowrap\n label\n\">\n <ng-content select=\"[label]\" />\n</div>\n<div class=\"\n body\n gds-display-flex\n gds-flex-column\n gds-min-height-0\n gds-row-gap-2xs\n gds-text-body\n gds-text-primary\n\">\n <ng-container *ngTemplateOutlet=\"locked() ? lockedTemplate : editableTemplate\" />\n @if (formFieldError(); as errorMessage) {\n <span class=\"\n feedback\n gds-text-caption\n \">\n {{ errorMessage
|
|
5774
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsFormControlComponent, isStandalone: true, selector: "gds-form-control", inputs: { locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.locked": "locked() ? \"\" : undefined" }, classAttribute: "gds-display-flex" }, usesInheritance: true, ngImport: i0, template: "<div class=\"\n gds-text-body\n gds-whitespace-nowrap\n label\n\">\n <ng-content select=\"[label]\" />\n</div>\n<div class=\"\n body\n gds-display-flex\n gds-flex-column\n gds-min-height-0\n gds-row-gap-2xs\n gds-text-body\n gds-text-primary\n\">\n <ng-container *ngTemplateOutlet=\"locked() ? lockedTemplate : editableTemplate\" />\n @if (formFieldError(); as errorMessage) {\n <span class=\"\n feedback\n gds-text-caption\n \">\n {{ errorMessage }}\n </span>\n }\n</div>\n\n<ng-template #lockedTemplate>\n <ng-content select=\"[locked]\" />\n</ng-template>\n\n<ng-template #editableTemplate>\n <ng-content />\n</ng-template>\n", styles: ["@layer design-system{:host{flex-direction:column;align-items:baseline;gap:var(--gds-spacing-2xs);--gds-form-control-feedback-display: none;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--gds-form-control-feedback-display: initial;--feedback-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--feedback-color: var(--disabled-text-color)}:host.gds-flex-row .label,:host.gds-flex-row-reverse .label{flex:1}:is(body[isMobile=true]) :host.gds-flex-row,:is(body[isMobile=true]) :host.gds-flex-row-reverse{gap:var(--gds-spacing-sm)}:host .label:empty{display:none}:host .label{color:var(--text-color, var(--gds-palette-text-default-primary))}:host:not(.gds-flex-row):not(.gds-flex-row-reverse) .body{width:100%}:host .feedback{display:var(--gds-form-control-feedback-display);color:var(--feedback-color, var(--gds-palette-text-default-tertiary))}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5763
5775
|
}
|
|
5764
5776
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFormControlComponent, decorators: [{
|
|
5765
5777
|
type: Component,
|
|
5766
|
-
args: [{ selector: 'gds-form-control', imports: [NgTemplateOutlet
|
|
5778
|
+
args: [{ selector: 'gds-form-control', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
5767
5779
|
class: 'gds-display-flex',
|
|
5768
5780
|
'[attr.locked]': 'locked() ? "" : undefined'
|
|
5769
|
-
}, template: "<div class=\"\n gds-text-body\n gds-whitespace-nowrap\n label\n\">\n <ng-content select=\"[label]\" />\n</div>\n<div class=\"\n body\n gds-display-flex\n gds-flex-column\n gds-min-height-0\n gds-row-gap-2xs\n gds-text-body\n gds-text-primary\n\">\n <ng-container *ngTemplateOutlet=\"locked() ? lockedTemplate : editableTemplate\" />\n @if (formFieldError(); as errorMessage) {\n <span class=\"\n feedback\n gds-text-caption\n \">\n {{ errorMessage
|
|
5781
|
+
}, template: "<div class=\"\n gds-text-body\n gds-whitespace-nowrap\n label\n\">\n <ng-content select=\"[label]\" />\n</div>\n<div class=\"\n body\n gds-display-flex\n gds-flex-column\n gds-min-height-0\n gds-row-gap-2xs\n gds-text-body\n gds-text-primary\n\">\n <ng-container *ngTemplateOutlet=\"locked() ? lockedTemplate : editableTemplate\" />\n @if (formFieldError(); as errorMessage) {\n <span class=\"\n feedback\n gds-text-caption\n \">\n {{ errorMessage }}\n </span>\n }\n</div>\n\n<ng-template #lockedTemplate>\n <ng-content select=\"[locked]\" />\n</ng-template>\n\n<ng-template #editableTemplate>\n <ng-content />\n</ng-template>\n", styles: ["@layer design-system{:host{flex-direction:column;align-items:baseline;gap:var(--gds-spacing-2xs);--gds-form-control-feedback-display: none;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--gds-form-control-feedback-display: initial;--feedback-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--feedback-color: var(--disabled-text-color)}:host.gds-flex-row .label,:host.gds-flex-row-reverse .label{flex:1}:is(body[isMobile=true]) :host.gds-flex-row,:is(body[isMobile=true]) :host.gds-flex-row-reverse{gap:var(--gds-spacing-sm)}:host .label:empty{display:none}:host .label{color:var(--text-color, var(--gds-palette-text-default-primary))}:host:not(.gds-flex-row):not(.gds-flex-row-reverse) .body{width:100%}:host .feedback{display:var(--gds-form-control-feedback-display);color:var(--feedback-color, var(--gds-palette-text-default-tertiary))}}\n"] }]
|
|
5770
5782
|
}], propDecorators: { locked: [{ type: i0.Input, args: [{ isSignal: true, alias: "locked", required: false }] }] } });
|
|
5771
5783
|
|
|
5772
5784
|
class GdsMapArrayToRadioOptionsPipe {
|
|
@@ -5872,8 +5884,8 @@ class GdsSelectComponent extends GdsSignalFormControl {
|
|
|
5872
5884
|
searchable = input(false, { ...(ngDevMode ? { debugName: "searchable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5873
5885
|
appendTo = input('', ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
|
|
5874
5886
|
loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5875
|
-
loadingText = input('
|
|
5876
|
-
clearAriaLabel = input('
|
|
5887
|
+
loadingText = input('Loading...', ...(ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []));
|
|
5888
|
+
clearAriaLabel = input('Select clear', ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
|
|
5877
5889
|
autofocus = input(false, { ...(ngDevMode ? { debugName: "autofocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5878
5890
|
multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5879
5891
|
hideChevron = input(false, { ...(ngDevMode ? { debugName: "hideChevron" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
@@ -5987,7 +5999,7 @@ class GdsSelectComponent extends GdsSignalFormControl {
|
|
|
5987
5999
|
this.ref().handleClearClick();
|
|
5988
6000
|
};
|
|
5989
6001
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5990
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsSelectComponent, isStandalone: true, selector: "gds-select", inputs: { clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, hideChevron: { classPropertyName: "hideChevron", publicName: "hideChevron", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { changed: "changed", searched: "searched", blurred: "blurred", cleared: "cleared", closed: "closed", opened: "opened", bindValue: "bindValueChange", bindLabel: "bindLabelChange", value: "valueChange", items: "itemsChange" }, host: { listeners: { "keydown": "setMarkedItemIndex()" } }, queries: [{ propertyName: "multiLabelTmpl", first: true, predicate: ["multiLabelTmpl"], descendants: true, isSignal: true }, { propertyName: "labelTmpl", first: true, predicate: ["labelTmpl"], descendants: true, isSignal: true }, { propertyName: "optionTmpl", first: true, predicate: ["optionTmpl"], descendants: true, isSignal: true }, { propertyName: "footerTmpl", first: true, predicate: ["footerTmpl"], descendants: true, isSignal: true }, { propertyName: "clearBtnTmpl", first: true, predicate: ["clearBtnTmpl"], descendants: true, isSignal: true }, { propertyName: "placeholderTmpl", first: true, predicate: ["placeholderTmpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "ref", first: true, predicate: NgSelectComponent, descendants: true, isSignal: true }, { propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-select\n class=\"\n gds-mobile-text-input-mobile\n gds-text-input\n \"\n [ngClass]=\"{ 'ng-select-hide-chevron': hideChevron() }\"\n [dropdownPosition]=\"dropdownPosition()\"\n [notFoundText]=\"emptyText()\"\n [bindValue]=\"bindValue()\"\n [bindLabel]=\"bindLabel()\"\n [multiple]=\"multiple()\"\n [closeOnSelect]=\"!multiple()\"\n [disabled]=\"disabled()\"\n [items]=\"items()\"\n [ngModel]=\"value()\"\n [loading]=\"loading()\"\n [loadingText]=\"loadingText() | translate\"\n [searchable]=\"searchable()\"\n [clearable]=\"clearable()\"\n [virtualScroll]=\"virtualScroll()\"\n [searchFn]=\"itemShouldDisplay\"\n [appendTo]=\"appendTo()\"\n [keyDownFn]=\"onKeyDown\"\n [labelForId]=\"id()\"\n (ngModelChange)=\"setValue($event)\"\n (change)=\"onHandleChange($event)\"\n (search)=\"onSearchChange($event)\"\n (clear)=\"cleared.emit()\"\n (open)=\"handleOpened()\"\n (close)=\"handleClosed()\"\n>\n <ng-template\n ng-label-tmp\n let-item=\"item\"\n >\n <ng-container *ngTemplateOutlet=\"labelTmpl() ?? defaultLabelTmpl; context: { item }\" />\n </ng-template>\n\n @if (!value()) {\n <ng-template ng-placeholder-tmp>\n <ng-container *ngTemplateOutlet=\"placeholderTmpl() ?? defaultPlaceholderTmpl\" />\n </ng-template>\n }\n\n <ng-template\n ng-multi-label-tmp\n let-items=\"items\"\n >\n <ng-container *ngTemplateOutlet=\"multiLabelTmpl() ?? defaultMultiLabelTmpl; context: { items }\" />\n </ng-template>\n\n <ng-template\n ng-option-tmp\n let-option=\"item\"\n let-selected=\"item$.selected\"\n let-index=\"index\"\n >\n @if (multiple()) {\n <input\n type=\"checkbox\"\n class=\"\n gds-margin-block-auto\n gds-margin-inline-3xs\n \"\n gds-checkbox\n [checked]=\"selected\"\n (mousedown)=\"onCheckboxChanged($event)\"\n />\n }\n <ng-container\n *ngTemplateOutlet=\"optionTmpl() ?? defaultOptionTmpl; context: { option, marked: markedIndex() === index }\"\n />\n </ng-template>\n\n @if (footerTmpl(); as footerTmpl) {\n <ng-template ng-footer-tmp>\n <div\n class=\"\n gds-height-100-parent\n gds-width-100-parent\n \"\n (mouseenter)=\"unmarkItem()\"\n >\n <ng-container *ngTemplateOutlet=\"footerTmpl\" />\n </div>\n </ng-template>\n }\n\n <ng-template ng-clearbutton-tmp>\n <span class=\"ng-clear-wrapper\">\n <ng-container *ngTemplateOutlet=\"clearBtnTmpl() ?? defaultClearBtnTmpl\" />\n </span>\n </ng-template>\n</ng-select>\n\n<ng-template\n #defaultLabelTmpl\n let-item=\"item\"\n>\n @if (value !== undefined) {\n <gds-tooltip\n onlyTextOverflow\n [tooltip]=\"item[bindLabel()] | translate\"\n >\n {{ item[bindLabel()] | translate }}\n </gds-tooltip>\n }\n</ng-template>\n\n<ng-template\n #defaultMultiLabelTmpl\n let-items=\"items\"\n>\n <div class=\"\n gds-align-items-center\n gds-display-inline-flex\n gds-gap-2xs\n gds-select--multi-selected-content\n \">\n <gds-tooltip\n onlyOnTextOverflow\n [tooltip]=\"items[0][bindLabel()] | translate\"\n >\n {{ items[0][bindLabel()] | translate }}\n </gds-tooltip>\n @if (items.length > 1) {\n <span gds-badge>+{{ items.length - 1 }}</span>\n }\n </div>\n</ng-template>\n\n<ng-template\n #defaultOptionTmpl\n let-option=\"option\"\n let-active=\"marked\"\n>\n <gds-tooltip\n class=\"option\"\n onlyTextOverflow\n [tooltip]=\"option[bindLabel()] | translate\"\n [open]=\"active\"\n >\n {{ option[bindLabel()] | translate }}\n </gds-tooltip>\n</ng-template>\n\n<ng-template #defaultPlaceholderTmpl>\n <span class=\"ng-placeholder\">{{ placeholder() }}</span>\n</ng-template>\n\n<ng-template #defaultClearBtnTmpl>\n <button\n #clearButton\n gds-icon-button\n class=\"gds-background-none\"\n [attr.aria-label]=\"clearAriaLabel() | translate\"\n (click)=\"onClearClicked()\"\n (keydown.enter)=\"onClearClicked()\"\n >\n <gds-icon\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n \"\n key=\"line-dismiss\"\n />\n </button>\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23cd2127' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[disabled],:host:has(*:disabled,*[disabled=true]){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23b2b2b2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");--cursor: not-allowed}:host ng-select.ng-select-clearable,:host ng-select.ng-select-hide-chevron{--arrow-display: none}:host ng-select.ng-select-opened{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.75 10.25L8 5.75L3.25 10.25' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container{gap:var(--gds-spacing-2xs);flex-wrap:nowrap!important}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container .ng-input{padding-left:0}:host ng-select ::ng-deep .ng-select-container{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ng-select ::ng-deep .ng-select-container ::ng-deep input:focus,:host ng-select ::ng-deep .ng-select-container ::ng-deep textarea:focus{outline:none}:host ng-select ::ng-deep .ng-select-container:focus-within,:host ng-select ::ng-deep .ng-select-container.is-controlled{isolation:isolate;position:relative}:host ng-select ::ng-deep .ng-select-container:focus-within:before,:host ng-select ::ng-deep .ng-select-container.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-lg-rem)}:host ng-select ::ng-deep .ng-select-container:hover{background-color:var(--hover-color)}:host ng-select ::ng-deep .ng-select-container[disabled]::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host ng-select ::ng-deep .ng-select-container[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ng-select ::ng-deep .ng-select-container ::ng-deep *::placeholder{color:var(--placeholder-color)}:host ng-select ::ng-deep .ng-select-container{border-radius:var(--gds-borderRadius-sm);padding-block:var(--gds-spacing-3xs);padding-inline:var(--gds-spacing-xs);gap:var(--gds-spacing-2xs)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{padding-block:0}:host ng-select ::ng-deep .ng-has-value .ng-arrow-wrapper{display:var(--arrow-display);cursor:var(--cursor)}:host ng-select ::ng-deep .ng-arrow-wrapper,:host ng-select ::ng-deep .ng-clear-wrapper{width:var(--gds-size-sm-rem);height:var(--gds-size-sm-rem);display:flex;align-items:center;justify-content:center}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow,:host ng-select ::ng-deep .ng-clear-wrapper .ng-arrow{width:var(--gds-size-sm-rem)!important;height:var(--gds-size-sm-rem)!important;background-image:var(--arrow-url)}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-clear,:host ng-select ::ng-deep .ng-clear-wrapper .ng-clear{font-size:var(--gds-fontSize-bodyLarge)}:host ng-select ::ng-deep .ng-option{display:flex!important;gap:var(--gds-spacing-3xs);padding:11px var(--gds-spacing-sm);border-radius:var(--gds-borderRadius-sm);color:var(--text-color);position:relative}:host ng-select ::ng-deep .ng-option.ng-option-marked:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none;--wrapper-margin-inline: 5px;--wrapper-margin-block: 4px;z-index:-1}:host ng-select ::ng-deep .ng-value-container{overflow:hidden!important;align-items:center;height:var(--gds-primitive-lineHeight-250)}:host ng-select ::ng-deep .ng-value-container .ng-value{height:fit-content}:host ng-select ::ng-deep .ng-placeholder{color:var(--placeholder-color);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;min-width:0}:host ng-select ::ng-deep .ng-option-disabled{cursor:default!important}:host ng-select ::ng-deep .ng-spinner-loader{border-left-color:var(--gds-palette-text-primary-primary)!important}.gds-select--multi-selected-content{color:var(--gds-palette-text-default-primary);font:var(--gds-text-body-shorthand);min-width:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 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: NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: NgClearButtonTemplateDirective, selector: "[ng-clearbutton-tmp]" }, { kind: "directive", type: NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: NgPlaceholderTemplateDirective, selector: "[ng-placeholder-tmp]" }, { kind: "component", type: GdsCheckboxComponent, selector: "input[type=\"checkbox\"][gds-checkbox]", inputs: ["checked", "touched", "disabled", "readonly", "hidden", "invalid", "tabindex"], outputs: ["checkedChange", "touchedChange", "tabindexChange"] }, { kind: "component", type: GdsBadgeComponent, selector: "span[gds-badge]", inputs: ["icon", "tooltip", "tooltipInteractive"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsTooltipComponent, selector: "gds-tooltip", inputs: ["tooltip", "onlyTextOverflow", "disabled", "tooltipPlacement", "tooltipInteractive", "useHostWidth", "open", "maxWidth", "appendTo"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6002
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsSelectComponent, isStandalone: true, selector: "gds-select", inputs: { clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, hideChevron: { classPropertyName: "hideChevron", publicName: "hideChevron", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { changed: "changed", searched: "searched", blurred: "blurred", cleared: "cleared", closed: "closed", opened: "opened", bindValue: "bindValueChange", bindLabel: "bindLabelChange", value: "valueChange", items: "itemsChange" }, host: { listeners: { "keydown": "setMarkedItemIndex()" } }, queries: [{ propertyName: "multiLabelTmpl", first: true, predicate: ["multiLabelTmpl"], descendants: true, isSignal: true }, { propertyName: "labelTmpl", first: true, predicate: ["labelTmpl"], descendants: true, isSignal: true }, { propertyName: "optionTmpl", first: true, predicate: ["optionTmpl"], descendants: true, isSignal: true }, { propertyName: "footerTmpl", first: true, predicate: ["footerTmpl"], descendants: true, isSignal: true }, { propertyName: "clearBtnTmpl", first: true, predicate: ["clearBtnTmpl"], descendants: true, isSignal: true }, { propertyName: "placeholderTmpl", first: true, predicate: ["placeholderTmpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "ref", first: true, predicate: NgSelectComponent, descendants: true, isSignal: true }, { propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-select\n class=\"\n gds-mobile-text-input-mobile\n gds-text-input\n \"\n [ngClass]=\"{ 'ng-select-hide-chevron': hideChevron() }\"\n [dropdownPosition]=\"dropdownPosition()\"\n [notFoundText]=\"emptyText()\"\n [bindValue]=\"bindValue()\"\n [bindLabel]=\"bindLabel()\"\n [multiple]=\"multiple()\"\n [closeOnSelect]=\"!multiple()\"\n [disabled]=\"disabled()\"\n [items]=\"items()\"\n [ngModel]=\"value()\"\n [loading]=\"loading()\"\n [loadingText]=\"loadingText()\"\n [searchable]=\"searchable()\"\n [clearable]=\"clearable()\"\n [virtualScroll]=\"virtualScroll()\"\n [searchFn]=\"itemShouldDisplay\"\n [appendTo]=\"appendTo()\"\n [keyDownFn]=\"onKeyDown\"\n [labelForId]=\"id()\"\n (ngModelChange)=\"setValue($event)\"\n (change)=\"onHandleChange($event)\"\n (search)=\"onSearchChange($event)\"\n (clear)=\"cleared.emit()\"\n (open)=\"handleOpened()\"\n (close)=\"handleClosed()\"\n>\n <ng-template\n ng-label-tmp\n let-item=\"item\"\n >\n <ng-container *ngTemplateOutlet=\"labelTmpl() ?? defaultLabelTmpl; context: { item }\" />\n </ng-template>\n\n @if (!value()) {\n <ng-template ng-placeholder-tmp>\n <ng-container *ngTemplateOutlet=\"placeholderTmpl() ?? defaultPlaceholderTmpl\" />\n </ng-template>\n }\n\n <ng-template\n ng-multi-label-tmp\n let-items=\"items\"\n >\n <ng-container *ngTemplateOutlet=\"multiLabelTmpl() ?? defaultMultiLabelTmpl; context: { items }\" />\n </ng-template>\n\n <ng-template\n ng-option-tmp\n let-option=\"item\"\n let-selected=\"item$.selected\"\n let-index=\"index\"\n >\n @if (multiple()) {\n <input\n type=\"checkbox\"\n class=\"\n gds-margin-block-auto\n gds-margin-inline-3xs\n \"\n gds-checkbox\n [checked]=\"selected\"\n (mousedown)=\"onCheckboxChanged($event)\"\n />\n }\n <ng-container\n *ngTemplateOutlet=\"optionTmpl() ?? defaultOptionTmpl; context: { option, marked: markedIndex() === index }\"\n />\n </ng-template>\n\n @if (footerTmpl(); as footerTmpl) {\n <ng-template ng-footer-tmp>\n <div\n class=\"\n gds-height-100-parent\n gds-width-100-parent\n \"\n (mouseenter)=\"unmarkItem()\"\n >\n <ng-container *ngTemplateOutlet=\"footerTmpl\" />\n </div>\n </ng-template>\n }\n\n <ng-template ng-clearbutton-tmp>\n <span class=\"ng-clear-wrapper\">\n <ng-container *ngTemplateOutlet=\"clearBtnTmpl() ?? defaultClearBtnTmpl\" />\n </span>\n </ng-template>\n</ng-select>\n\n<ng-template\n #defaultLabelTmpl\n let-item=\"item\"\n>\n @if (value !== undefined) {\n <gds-tooltip\n onlyTextOverflow\n [tooltip]=\"item[bindLabel()]\"\n >\n {{ item[bindLabel()] }}\n </gds-tooltip>\n }\n</ng-template>\n\n<ng-template\n #defaultMultiLabelTmpl\n let-items=\"items\"\n>\n <div class=\"\n gds-align-items-center\n gds-display-inline-flex\n gds-gap-2xs\n gds-select--multi-selected-content\n \">\n <gds-tooltip\n onlyOnTextOverflow\n [tooltip]=\"items[0][bindLabel()]\"\n >\n {{ items[0][bindLabel()] }}\n </gds-tooltip>\n @if (items.length > 1) {\n <span gds-badge>+{{ items.length - 1 }}</span>\n }\n </div>\n</ng-template>\n\n<ng-template\n #defaultOptionTmpl\n let-option=\"option\"\n let-active=\"marked\"\n>\n <gds-tooltip\n class=\"option\"\n onlyTextOverflow\n [tooltip]=\"option[bindLabel()]\"\n [open]=\"active\"\n >\n {{ option[bindLabel()] }}\n </gds-tooltip>\n</ng-template>\n\n<ng-template #defaultPlaceholderTmpl>\n <span class=\"ng-placeholder\">{{ placeholder() }}</span>\n</ng-template>\n\n<ng-template #defaultClearBtnTmpl>\n <button\n #clearButton\n gds-icon-button\n class=\"gds-background-none\"\n [attr.aria-label]=\"clearAriaLabel()\"\n (click)=\"onClearClicked()\"\n (keydown.enter)=\"onClearClicked()\"\n >\n <gds-icon\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n \"\n key=\"line-dismiss\"\n />\n </button>\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23cd2127' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[disabled],:host:has(*:disabled,*[disabled=true]){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23b2b2b2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");--cursor: not-allowed}:host ng-select.ng-select-clearable,:host ng-select.ng-select-hide-chevron{--arrow-display: none}:host ng-select.ng-select-opened{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.75 10.25L8 5.75L3.25 10.25' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container{gap:var(--gds-spacing-2xs);flex-wrap:nowrap!important}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container .ng-input{padding-left:0}:host ng-select ::ng-deep .ng-select-container{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ng-select ::ng-deep .ng-select-container ::ng-deep input:focus,:host ng-select ::ng-deep .ng-select-container ::ng-deep textarea:focus{outline:none}:host ng-select ::ng-deep .ng-select-container:focus-within,:host ng-select ::ng-deep .ng-select-container.is-controlled{isolation:isolate;position:relative}:host ng-select ::ng-deep .ng-select-container:focus-within:before,:host ng-select ::ng-deep .ng-select-container.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-lg-rem)}:host ng-select ::ng-deep .ng-select-container:hover{background-color:var(--hover-color)}:host ng-select ::ng-deep .ng-select-container[disabled]::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host ng-select ::ng-deep .ng-select-container[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ng-select ::ng-deep .ng-select-container ::ng-deep *::placeholder{color:var(--placeholder-color)}:host ng-select ::ng-deep .ng-select-container{border-radius:var(--gds-borderRadius-sm);padding-block:var(--gds-spacing-3xs);padding-inline:var(--gds-spacing-xs);gap:var(--gds-spacing-2xs)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{padding-block:0}:host ng-select ::ng-deep .ng-has-value .ng-arrow-wrapper{display:var(--arrow-display);cursor:var(--cursor)}:host ng-select ::ng-deep .ng-arrow-wrapper,:host ng-select ::ng-deep .ng-clear-wrapper{width:var(--gds-size-sm-rem);height:var(--gds-size-sm-rem);display:flex;align-items:center;justify-content:center}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow,:host ng-select ::ng-deep .ng-clear-wrapper .ng-arrow{width:var(--gds-size-sm-rem)!important;height:var(--gds-size-sm-rem)!important;background-image:var(--arrow-url)}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-clear,:host ng-select ::ng-deep .ng-clear-wrapper .ng-clear{font-size:var(--gds-fontSize-bodyLarge)}:host ng-select ::ng-deep .ng-option{display:flex!important;gap:var(--gds-spacing-3xs);padding:11px var(--gds-spacing-sm);border-radius:var(--gds-borderRadius-sm);color:var(--text-color);position:relative}:host ng-select ::ng-deep .ng-option.ng-option-marked:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none;--wrapper-margin-inline: 5px;--wrapper-margin-block: 4px;z-index:-1}:host ng-select ::ng-deep .ng-value-container{overflow:hidden!important;align-items:center;height:var(--gds-primitive-lineHeight-250)}:host ng-select ::ng-deep .ng-value-container .ng-value{height:fit-content}:host ng-select ::ng-deep .ng-placeholder{color:var(--placeholder-color);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;min-width:0}:host ng-select ::ng-deep .ng-option-disabled{cursor:default!important}:host ng-select ::ng-deep .ng-spinner-loader{border-left-color:var(--gds-palette-text-primary-primary)!important}.gds-select--multi-selected-content{color:var(--gds-palette-text-default-primary);font:var(--gds-text-body-shorthand);min-width:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 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: NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: NgClearButtonTemplateDirective, selector: "[ng-clearbutton-tmp]" }, { kind: "directive", type: NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: NgPlaceholderTemplateDirective, selector: "[ng-placeholder-tmp]" }, { kind: "component", type: GdsCheckboxComponent, selector: "input[type=\"checkbox\"][gds-checkbox]", inputs: ["checked", "touched", "disabled", "readonly", "hidden", "invalid", "tabindex"], outputs: ["checkedChange", "touchedChange", "tabindexChange"] }, { kind: "component", type: GdsBadgeComponent, selector: "span[gds-badge]", inputs: ["icon", "tooltip", "tooltipInteractive"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsTooltipComponent, selector: "gds-tooltip", inputs: ["tooltip", "onlyTextOverflow", "disabled", "tooltipPlacement", "tooltipInteractive", "useHostWidth", "open", "maxWidth", "appendTo"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5991
6003
|
}
|
|
5992
6004
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSelectComponent, decorators: [{
|
|
5993
6005
|
type: Component,
|
|
@@ -6007,11 +6019,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
6007
6019
|
GdsTooltipComponent,
|
|
6008
6020
|
GdsIconButtonComponent,
|
|
6009
6021
|
FormsModule,
|
|
6010
|
-
TranslatePipe,
|
|
6011
6022
|
NgClass
|
|
6012
6023
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
6013
6024
|
'(keydown)': 'setMarkedItemIndex()'
|
|
6014
|
-
}, template: "<ng-select\n class=\"\n gds-mobile-text-input-mobile\n gds-text-input\n \"\n [ngClass]=\"{ 'ng-select-hide-chevron': hideChevron() }\"\n [dropdownPosition]=\"dropdownPosition()\"\n [notFoundText]=\"emptyText()\"\n [bindValue]=\"bindValue()\"\n [bindLabel]=\"bindLabel()\"\n [multiple]=\"multiple()\"\n [closeOnSelect]=\"!multiple()\"\n [disabled]=\"disabled()\"\n [items]=\"items()\"\n [ngModel]=\"value()\"\n [loading]=\"loading()\"\n [loadingText]=\"loadingText() | translate\"\n [searchable]=\"searchable()\"\n [clearable]=\"clearable()\"\n [virtualScroll]=\"virtualScroll()\"\n [searchFn]=\"itemShouldDisplay\"\n [appendTo]=\"appendTo()\"\n [keyDownFn]=\"onKeyDown\"\n [labelForId]=\"id()\"\n (ngModelChange)=\"setValue($event)\"\n (change)=\"onHandleChange($event)\"\n (search)=\"onSearchChange($event)\"\n (clear)=\"cleared.emit()\"\n (open)=\"handleOpened()\"\n (close)=\"handleClosed()\"\n>\n <ng-template\n ng-label-tmp\n let-item=\"item\"\n >\n <ng-container *ngTemplateOutlet=\"labelTmpl() ?? defaultLabelTmpl; context: { item }\" />\n </ng-template>\n\n @if (!value()) {\n <ng-template ng-placeholder-tmp>\n <ng-container *ngTemplateOutlet=\"placeholderTmpl() ?? defaultPlaceholderTmpl\" />\n </ng-template>\n }\n\n <ng-template\n ng-multi-label-tmp\n let-items=\"items\"\n >\n <ng-container *ngTemplateOutlet=\"multiLabelTmpl() ?? defaultMultiLabelTmpl; context: { items }\" />\n </ng-template>\n\n <ng-template\n ng-option-tmp\n let-option=\"item\"\n let-selected=\"item$.selected\"\n let-index=\"index\"\n >\n @if (multiple()) {\n <input\n type=\"checkbox\"\n class=\"\n gds-margin-block-auto\n gds-margin-inline-3xs\n \"\n gds-checkbox\n [checked]=\"selected\"\n (mousedown)=\"onCheckboxChanged($event)\"\n />\n }\n <ng-container\n *ngTemplateOutlet=\"optionTmpl() ?? defaultOptionTmpl; context: { option, marked: markedIndex() === index }\"\n />\n </ng-template>\n\n @if (footerTmpl(); as footerTmpl) {\n <ng-template ng-footer-tmp>\n <div\n class=\"\n gds-height-100-parent\n gds-width-100-parent\n \"\n (mouseenter)=\"unmarkItem()\"\n >\n <ng-container *ngTemplateOutlet=\"footerTmpl\" />\n </div>\n </ng-template>\n }\n\n <ng-template ng-clearbutton-tmp>\n <span class=\"ng-clear-wrapper\">\n <ng-container *ngTemplateOutlet=\"clearBtnTmpl() ?? defaultClearBtnTmpl\" />\n </span>\n </ng-template>\n</ng-select>\n\n<ng-template\n #defaultLabelTmpl\n let-item=\"item\"\n>\n @if (value !== undefined) {\n <gds-tooltip\n onlyTextOverflow\n [tooltip]=\"item[bindLabel()] | translate\"\n >\n {{ item[bindLabel()] | translate }}\n </gds-tooltip>\n }\n</ng-template>\n\n<ng-template\n #defaultMultiLabelTmpl\n let-items=\"items\"\n>\n <div class=\"\n gds-align-items-center\n gds-display-inline-flex\n gds-gap-2xs\n gds-select--multi-selected-content\n \">\n <gds-tooltip\n onlyOnTextOverflow\n [tooltip]=\"items[0][bindLabel()] | translate\"\n >\n {{ items[0][bindLabel()] | translate }}\n </gds-tooltip>\n @if (items.length > 1) {\n <span gds-badge>+{{ items.length - 1 }}</span>\n }\n </div>\n</ng-template>\n\n<ng-template\n #defaultOptionTmpl\n let-option=\"option\"\n let-active=\"marked\"\n>\n <gds-tooltip\n class=\"option\"\n onlyTextOverflow\n [tooltip]=\"option[bindLabel()] | translate\"\n [open]=\"active\"\n >\n {{ option[bindLabel()] | translate }}\n </gds-tooltip>\n</ng-template>\n\n<ng-template #defaultPlaceholderTmpl>\n <span class=\"ng-placeholder\">{{ placeholder() }}</span>\n</ng-template>\n\n<ng-template #defaultClearBtnTmpl>\n <button\n #clearButton\n gds-icon-button\n class=\"gds-background-none\"\n [attr.aria-label]=\"clearAriaLabel() | translate\"\n (click)=\"onClearClicked()\"\n (keydown.enter)=\"onClearClicked()\"\n >\n <gds-icon\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n \"\n key=\"line-dismiss\"\n />\n </button>\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23cd2127' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[disabled],:host:has(*:disabled,*[disabled=true]){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23b2b2b2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");--cursor: not-allowed}:host ng-select.ng-select-clearable,:host ng-select.ng-select-hide-chevron{--arrow-display: none}:host ng-select.ng-select-opened{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.75 10.25L8 5.75L3.25 10.25' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container{gap:var(--gds-spacing-2xs);flex-wrap:nowrap!important}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container .ng-input{padding-left:0}:host ng-select ::ng-deep .ng-select-container{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ng-select ::ng-deep .ng-select-container ::ng-deep input:focus,:host ng-select ::ng-deep .ng-select-container ::ng-deep textarea:focus{outline:none}:host ng-select ::ng-deep .ng-select-container:focus-within,:host ng-select ::ng-deep .ng-select-container.is-controlled{isolation:isolate;position:relative}:host ng-select ::ng-deep .ng-select-container:focus-within:before,:host ng-select ::ng-deep .ng-select-container.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-lg-rem)}:host ng-select ::ng-deep .ng-select-container:hover{background-color:var(--hover-color)}:host ng-select ::ng-deep .ng-select-container[disabled]::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host ng-select ::ng-deep .ng-select-container[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ng-select ::ng-deep .ng-select-container ::ng-deep *::placeholder{color:var(--placeholder-color)}:host ng-select ::ng-deep .ng-select-container{border-radius:var(--gds-borderRadius-sm);padding-block:var(--gds-spacing-3xs);padding-inline:var(--gds-spacing-xs);gap:var(--gds-spacing-2xs)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{padding-block:0}:host ng-select ::ng-deep .ng-has-value .ng-arrow-wrapper{display:var(--arrow-display);cursor:var(--cursor)}:host ng-select ::ng-deep .ng-arrow-wrapper,:host ng-select ::ng-deep .ng-clear-wrapper{width:var(--gds-size-sm-rem);height:var(--gds-size-sm-rem);display:flex;align-items:center;justify-content:center}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow,:host ng-select ::ng-deep .ng-clear-wrapper .ng-arrow{width:var(--gds-size-sm-rem)!important;height:var(--gds-size-sm-rem)!important;background-image:var(--arrow-url)}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-clear,:host ng-select ::ng-deep .ng-clear-wrapper .ng-clear{font-size:var(--gds-fontSize-bodyLarge)}:host ng-select ::ng-deep .ng-option{display:flex!important;gap:var(--gds-spacing-3xs);padding:11px var(--gds-spacing-sm);border-radius:var(--gds-borderRadius-sm);color:var(--text-color);position:relative}:host ng-select ::ng-deep .ng-option.ng-option-marked:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none;--wrapper-margin-inline: 5px;--wrapper-margin-block: 4px;z-index:-1}:host ng-select ::ng-deep .ng-value-container{overflow:hidden!important;align-items:center;height:var(--gds-primitive-lineHeight-250)}:host ng-select ::ng-deep .ng-value-container .ng-value{height:fit-content}:host ng-select ::ng-deep .ng-placeholder{color:var(--placeholder-color);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;min-width:0}:host ng-select ::ng-deep .ng-option-disabled{cursor:default!important}:host ng-select ::ng-deep .ng-spinner-loader{border-left-color:var(--gds-palette-text-primary-primary)!important}.gds-select--multi-selected-content{color:var(--gds-palette-text-default-primary);font:var(--gds-text-body-shorthand);min-width:0}}\n"] }]
|
|
6025
|
+
}, template: "<ng-select\n class=\"\n gds-mobile-text-input-mobile\n gds-text-input\n \"\n [ngClass]=\"{ 'ng-select-hide-chevron': hideChevron() }\"\n [dropdownPosition]=\"dropdownPosition()\"\n [notFoundText]=\"emptyText()\"\n [bindValue]=\"bindValue()\"\n [bindLabel]=\"bindLabel()\"\n [multiple]=\"multiple()\"\n [closeOnSelect]=\"!multiple()\"\n [disabled]=\"disabled()\"\n [items]=\"items()\"\n [ngModel]=\"value()\"\n [loading]=\"loading()\"\n [loadingText]=\"loadingText()\"\n [searchable]=\"searchable()\"\n [clearable]=\"clearable()\"\n [virtualScroll]=\"virtualScroll()\"\n [searchFn]=\"itemShouldDisplay\"\n [appendTo]=\"appendTo()\"\n [keyDownFn]=\"onKeyDown\"\n [labelForId]=\"id()\"\n (ngModelChange)=\"setValue($event)\"\n (change)=\"onHandleChange($event)\"\n (search)=\"onSearchChange($event)\"\n (clear)=\"cleared.emit()\"\n (open)=\"handleOpened()\"\n (close)=\"handleClosed()\"\n>\n <ng-template\n ng-label-tmp\n let-item=\"item\"\n >\n <ng-container *ngTemplateOutlet=\"labelTmpl() ?? defaultLabelTmpl; context: { item }\" />\n </ng-template>\n\n @if (!value()) {\n <ng-template ng-placeholder-tmp>\n <ng-container *ngTemplateOutlet=\"placeholderTmpl() ?? defaultPlaceholderTmpl\" />\n </ng-template>\n }\n\n <ng-template\n ng-multi-label-tmp\n let-items=\"items\"\n >\n <ng-container *ngTemplateOutlet=\"multiLabelTmpl() ?? defaultMultiLabelTmpl; context: { items }\" />\n </ng-template>\n\n <ng-template\n ng-option-tmp\n let-option=\"item\"\n let-selected=\"item$.selected\"\n let-index=\"index\"\n >\n @if (multiple()) {\n <input\n type=\"checkbox\"\n class=\"\n gds-margin-block-auto\n gds-margin-inline-3xs\n \"\n gds-checkbox\n [checked]=\"selected\"\n (mousedown)=\"onCheckboxChanged($event)\"\n />\n }\n <ng-container\n *ngTemplateOutlet=\"optionTmpl() ?? defaultOptionTmpl; context: { option, marked: markedIndex() === index }\"\n />\n </ng-template>\n\n @if (footerTmpl(); as footerTmpl) {\n <ng-template ng-footer-tmp>\n <div\n class=\"\n gds-height-100-parent\n gds-width-100-parent\n \"\n (mouseenter)=\"unmarkItem()\"\n >\n <ng-container *ngTemplateOutlet=\"footerTmpl\" />\n </div>\n </ng-template>\n }\n\n <ng-template ng-clearbutton-tmp>\n <span class=\"ng-clear-wrapper\">\n <ng-container *ngTemplateOutlet=\"clearBtnTmpl() ?? defaultClearBtnTmpl\" />\n </span>\n </ng-template>\n</ng-select>\n\n<ng-template\n #defaultLabelTmpl\n let-item=\"item\"\n>\n @if (value !== undefined) {\n <gds-tooltip\n onlyTextOverflow\n [tooltip]=\"item[bindLabel()]\"\n >\n {{ item[bindLabel()] }}\n </gds-tooltip>\n }\n</ng-template>\n\n<ng-template\n #defaultMultiLabelTmpl\n let-items=\"items\"\n>\n <div class=\"\n gds-align-items-center\n gds-display-inline-flex\n gds-gap-2xs\n gds-select--multi-selected-content\n \">\n <gds-tooltip\n onlyOnTextOverflow\n [tooltip]=\"items[0][bindLabel()]\"\n >\n {{ items[0][bindLabel()] }}\n </gds-tooltip>\n @if (items.length > 1) {\n <span gds-badge>+{{ items.length - 1 }}</span>\n }\n </div>\n</ng-template>\n\n<ng-template\n #defaultOptionTmpl\n let-option=\"option\"\n let-active=\"marked\"\n>\n <gds-tooltip\n class=\"option\"\n onlyTextOverflow\n [tooltip]=\"option[bindLabel()]\"\n [open]=\"active\"\n >\n {{ option[bindLabel()] }}\n </gds-tooltip>\n</ng-template>\n\n<ng-template #defaultPlaceholderTmpl>\n <span class=\"ng-placeholder\">{{ placeholder() }}</span>\n</ng-template>\n\n<ng-template #defaultClearBtnTmpl>\n <button\n #clearButton\n gds-icon-button\n class=\"gds-background-none\"\n [attr.aria-label]=\"clearAriaLabel()\"\n (click)=\"onClearClicked()\"\n (keydown.enter)=\"onClearClicked()\"\n >\n <gds-icon\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n \"\n key=\"line-dismiss\"\n />\n </button>\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23cd2127' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[disabled],:host:has(*:disabled,*[disabled=true]){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23b2b2b2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");--cursor: not-allowed}:host ng-select.ng-select-clearable,:host ng-select.ng-select-hide-chevron{--arrow-display: none}:host ng-select.ng-select-opened{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.75 10.25L8 5.75L3.25 10.25' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container{gap:var(--gds-spacing-2xs);flex-wrap:nowrap!important}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container .ng-input{padding-left:0}:host ng-select ::ng-deep .ng-select-container{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ng-select ::ng-deep .ng-select-container ::ng-deep input:focus,:host ng-select ::ng-deep .ng-select-container ::ng-deep textarea:focus{outline:none}:host ng-select ::ng-deep .ng-select-container:focus-within,:host ng-select ::ng-deep .ng-select-container.is-controlled{isolation:isolate;position:relative}:host ng-select ::ng-deep .ng-select-container:focus-within:before,:host ng-select ::ng-deep .ng-select-container.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-lg-rem)}:host ng-select ::ng-deep .ng-select-container:hover{background-color:var(--hover-color)}:host ng-select ::ng-deep .ng-select-container[disabled]::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host ng-select ::ng-deep .ng-select-container[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ng-select ::ng-deep .ng-select-container ::ng-deep *::placeholder{color:var(--placeholder-color)}:host ng-select ::ng-deep .ng-select-container{border-radius:var(--gds-borderRadius-sm);padding-block:var(--gds-spacing-3xs);padding-inline:var(--gds-spacing-xs);gap:var(--gds-spacing-2xs)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{padding-block:0}:host ng-select ::ng-deep .ng-has-value .ng-arrow-wrapper{display:var(--arrow-display);cursor:var(--cursor)}:host ng-select ::ng-deep .ng-arrow-wrapper,:host ng-select ::ng-deep .ng-clear-wrapper{width:var(--gds-size-sm-rem);height:var(--gds-size-sm-rem);display:flex;align-items:center;justify-content:center}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow,:host ng-select ::ng-deep .ng-clear-wrapper .ng-arrow{width:var(--gds-size-sm-rem)!important;height:var(--gds-size-sm-rem)!important;background-image:var(--arrow-url)}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-clear,:host ng-select ::ng-deep .ng-clear-wrapper .ng-clear{font-size:var(--gds-fontSize-bodyLarge)}:host ng-select ::ng-deep .ng-option{display:flex!important;gap:var(--gds-spacing-3xs);padding:11px var(--gds-spacing-sm);border-radius:var(--gds-borderRadius-sm);color:var(--text-color);position:relative}:host ng-select ::ng-deep .ng-option.ng-option-marked:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none;--wrapper-margin-inline: 5px;--wrapper-margin-block: 4px;z-index:-1}:host ng-select ::ng-deep .ng-value-container{overflow:hidden!important;align-items:center;height:var(--gds-primitive-lineHeight-250)}:host ng-select ::ng-deep .ng-value-container .ng-value{height:fit-content}:host ng-select ::ng-deep .ng-placeholder{color:var(--placeholder-color);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;min-width:0}:host ng-select ::ng-deep .ng-option-disabled{cursor:default!important}:host ng-select ::ng-deep .ng-spinner-loader{border-left-color:var(--gds-palette-text-primary-primary)!important}.gds-select--multi-selected-content{color:var(--gds-palette-text-default-primary);font:var(--gds-text-body-shorthand);min-width:0}}\n"] }]
|
|
6015
6026
|
}], propDecorators: { clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], hideChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideChevron", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], dropdownPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownPosition", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], searched: [{ type: i0.Output, args: ["searched"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], closed: [{ type: i0.Output, args: ["closed"] }], opened: [{ type: i0.Output, args: ["opened"] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }, { type: i0.Output, args: ["bindValueChange"] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }, { type: i0.Output, args: ["bindLabelChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }, { type: i0.Output, args: ["itemsChange"] }], ref: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgSelectComponent), { isSignal: true }] }], clearButton: [{ type: i0.ViewChild, args: ['clearButton', { ...{
|
|
6016
6027
|
read: (ElementRef)
|
|
6017
6028
|
}, isSignal: true }] }], multiLabelTmpl: [{ type: i0.ContentChild, args: ['multiLabelTmpl', { isSignal: true }] }], labelTmpl: [{ type: i0.ContentChild, args: ['labelTmpl', { isSignal: true }] }], optionTmpl: [{ type: i0.ContentChild, args: ['optionTmpl', { isSignal: true }] }], footerTmpl: [{ type: i0.ContentChild, args: ['footerTmpl', { isSignal: true }] }], clearBtnTmpl: [{ type: i0.ContentChild, args: ['clearBtnTmpl', { isSignal: true }] }], placeholderTmpl: [{ type: i0.ContentChild, args: ['placeholderTmpl', { isSignal: true }] }] } });
|
|
@@ -6543,7 +6554,7 @@ class GdsNestedSelectComponent extends GdsSignalFormContainer {
|
|
|
6543
6554
|
bindLabel = input.required(...(ngDevMode ? [{ debugName: "bindLabel" }] : /* istanbul ignore next */ []));
|
|
6544
6555
|
clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
6545
6556
|
maxMenuHeight = input('240px', ...(ngDevMode ? [{ debugName: "maxMenuHeight" }] : /* istanbul ignore next */ []));
|
|
6546
|
-
clearAriaLabel = input('
|
|
6557
|
+
clearAriaLabel = input('Select clear', ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
|
|
6547
6558
|
menuPosition = input(CDK_MENU_CONNECTED_POSITIONS, ...(ngDevMode ? [{ debugName: "menuPosition" }] : /* istanbul ignore next */ []));
|
|
6548
6559
|
dropdownWidth = signal(0, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : /* istanbul ignore next */ []));
|
|
6549
6560
|
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
@@ -6674,7 +6685,7 @@ class GdsNestedSelectComponent extends GdsSignalFormContainer {
|
|
|
6674
6685
|
}
|
|
6675
6686
|
};
|
|
6676
6687
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsNestedSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6677
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsNestedSelectComponent, isStandalone: true, selector: "gds-nested-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: true, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: true, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, maxMenuHeight: { classPropertyName: "maxMenuHeight", publicName: "maxMenuHeight", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, menuPosition: { classPropertyName: "menuPosition", publicName: "menuPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "button" }, listeners: { "keydown.escape": "onEscape()" }, properties: { "class.is-controlled": "isOpen()" }, classAttribute: "\n gds-align-items-center\n gds-display-flex\n gds-gap-2xs\n gds-justify-content-between\n gds-mobile-padding-block-0\n gds-mobile-text-input-mobile\n gds-padding-block-3xs\n gds-padding-inline-xs\n gds-radius-sm\n gds-text-input\n " }, queries: [{ propertyName: "input", first: true, predicate: GdsNativeInputDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1$1.CdkMenuTrigger }], ngImport: i0, template: "<div class=\"\n content\n gds-position-absolute\n\">\n <ng-content />\n</div>\n\n<div\n class=\"\n gds-flex-1\n gds-min-width-0\n gds-truncate\n label\n \"\n [ngClass]=\"{ placeholder: !label() }\"\n>\n {{ label() ? label() : inputPlaceholder() }}\n</div>\n\n@if (clearable() && label() && !inputDisabled()) {\n <button\n gds-icon-button\n class=\"\n gds-background-none\n gds-min-height-0\n \"\n [disabled]=\"inputDisabled()\"\n (click)=\"onClear($event)\"\n (keydown.enter)=\"onClear($event)\"\n [attr.aria-label]=\"clearAriaLabel() | translate\"\n >\n <gds-icon\n key=\"line-dismiss\"\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n icon\n \"\n />\n </button>\n} @else {\n <gds-icon\n class=\"\n gds-icon-primary\n gds-icon-size-2xs\n icon\n \"\n [key]=\"isOpen() ? 'line-chevron-up-stroke' : 'line-chevron-down-stroke'\"\n />\n}\n\n<ng-template #menu>\n <gds-dropdown\n cdkTargetMenuAim\n preventMobileStyling\n allowDefaultTabBehavior\n [style.minWidth]=\"dropdownWidth() + 'px'\"\n >\n <div\n [style.maxHeight]=\"maxMenuHeight()\"\n class=\"gds-scrollable-vertically\"\n >\n <div class=\"\n gds-display-flex\n gds-flex-column\n \">\n @for (option of options(); track $index) {\n @if (!option.children?.length) {\n <span\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n item\n \"\n role=\"button\"\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n cdkMenuItem\n (cdkMenuItemTriggered)=\"onItemClick(option)\"\n >{{ option[bindLabel()] }}</span\n >\n } @else {\n <span\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n item\n \"\n role=\"button\"\n cdkMenuItem\n [cdkMenuTriggerFor]=\"subMenu\"\n [cdkMenuTriggerData]=\"{ $implicit: option.children }\"\n >\n {{ option[bindLabel()] }}\n <gds-icon\n key=\"line-chevron-right-stroke\"\n class=\"gds-icon-size-2xs\"\n />\n </span>\n }\n }\n </div>\n </div>\n </gds-dropdown>\n</ng-template>\n\n<ng-template\n #subMenu\n let-data\n>\n <gds-dropdown\n cdkTargetMenuAim\n preventMobileStyling\n >\n <div\n [style.maxHeight]=\"maxMenuHeight()\"\n class=\"gds-scrollable-vertically\"\n >\n <div class=\"\n gds-display-flex\n gds-flex-column\n \">\n @for (option of data; track $index) {\n @if (!option.children?.length) {\n <span\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n item\n \"\n role=\"button\"\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n cdkMenuItem\n (cdkMenuItemTriggered)=\"onItemClick(option)\"\n >{{ option[bindLabel()] }}</span\n >\n } @else {\n <span\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n gds-text-primary\n item\n \"\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n cdkMenuItem\n role=\"button\"\n [cdkMenuTriggerFor]=\"subMenu\"\n [cdkMenuTriggerData]=\"{ $implicit: option.children }\"\n >\n {{ option[bindLabel()] }}\n <gds-icon\n key=\"line-chevron-right-stroke\"\n class=\"gds-icon-size-2xs\"\n />\n </span>\n }\n }\n </div>\n </div>\n </gds-dropdown>\n</ng-template>\n", styles: ["@layer design-system{:host{outline:none;--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}:host .label{color:var(--text-color)}:host .placeholder{color:var(--placeholder-color);-webkit-user-select:none;user-select:none}:host .chevron{outline:none}:host .content{opacity:0;z-index:-1}.item{padding-block:11px;cursor:pointer;--wrapper-margin-inline: 0px;--wrapper-margin-block: 2px}.item:hover:before,.item.active:before,.item[aria-expanded=true]:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}.item:focus-visible:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}.item:focus-visible{outline:none}}\n"], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: GdsDropdownComponent, selector: "gds-dropdown", inputs: ["triggerElement", "horizontal", "preventMobileStyling", "allowDefaultTabBehavior"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: CdkTargetMenuAim, selector: "[cdkTargetMenuAim]", exportAs: ["cdkTargetMenuAim"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6688
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsNestedSelectComponent, isStandalone: true, selector: "gds-nested-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: true, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: true, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, maxMenuHeight: { classPropertyName: "maxMenuHeight", publicName: "maxMenuHeight", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, menuPosition: { classPropertyName: "menuPosition", publicName: "menuPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "button" }, listeners: { "keydown.escape": "onEscape()" }, properties: { "class.is-controlled": "isOpen()" }, classAttribute: "\n gds-align-items-center\n gds-display-flex\n gds-gap-2xs\n gds-justify-content-between\n gds-mobile-padding-block-0\n gds-mobile-text-input-mobile\n gds-padding-block-3xs\n gds-padding-inline-xs\n gds-radius-sm\n gds-text-input\n " }, queries: [{ propertyName: "input", first: true, predicate: GdsNativeInputDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1$1.CdkMenuTrigger }], ngImport: i0, template: "<div class=\"\n content\n gds-position-absolute\n\">\n <ng-content />\n</div>\n\n<div\n class=\"\n gds-flex-1\n gds-min-width-0\n gds-truncate\n label\n \"\n [ngClass]=\"{ placeholder: !label() }\"\n>\n {{ label() ? label() : inputPlaceholder() }}\n</div>\n\n@if (clearable() && label() && !inputDisabled()) {\n <button\n gds-icon-button\n class=\"\n gds-background-none\n gds-min-height-0\n \"\n [disabled]=\"inputDisabled()\"\n (click)=\"onClear($event)\"\n (keydown.enter)=\"onClear($event)\"\n [attr.aria-label]=\"clearAriaLabel()\"\n >\n <gds-icon\n key=\"line-dismiss\"\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n icon\n \"\n />\n </button>\n} @else {\n <gds-icon\n class=\"\n gds-icon-primary\n gds-icon-size-2xs\n icon\n \"\n [key]=\"isOpen() ? 'line-chevron-up-stroke' : 'line-chevron-down-stroke'\"\n />\n}\n\n<ng-template #menu>\n <gds-dropdown\n mobileCancelLabel=\"Cancel\"\n cdkTargetMenuAim\n preventMobileStyling\n allowDefaultTabBehavior\n [style.minWidth]=\"dropdownWidth() + 'px'\"\n >\n <div\n [style.maxHeight]=\"maxMenuHeight()\"\n class=\"gds-scrollable-vertically\"\n >\n <div class=\"\n gds-display-flex\n gds-flex-column\n \">\n @for (option of options(); track $index) {\n @if (!option.children?.length) {\n <span\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n item\n \"\n role=\"button\"\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n cdkMenuItem\n (cdkMenuItemTriggered)=\"onItemClick(option)\"\n >{{ option[bindLabel()] }}</span\n >\n } @else {\n <span\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n item\n \"\n role=\"button\"\n cdkMenuItem\n [cdkMenuTriggerFor]=\"subMenu\"\n [cdkMenuTriggerData]=\"{ $implicit: option.children }\"\n >\n {{ option[bindLabel()] }}\n <gds-icon\n key=\"line-chevron-right-stroke\"\n class=\"gds-icon-size-2xs\"\n />\n </span>\n }\n }\n </div>\n </div>\n </gds-dropdown>\n</ng-template>\n\n<ng-template\n #subMenu\n let-data\n>\n <gds-dropdown\n mobileCancelLabel=\"Cancel\"\n cdkTargetMenuAim\n preventMobileStyling\n >\n <div\n [style.maxHeight]=\"maxMenuHeight()\"\n class=\"gds-scrollable-vertically\"\n >\n <div class=\"\n gds-display-flex\n gds-flex-column\n \">\n @for (option of data; track $index) {\n @if (!option.children?.length) {\n <span\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n item\n \"\n role=\"button\"\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n cdkMenuItem\n (cdkMenuItemTriggered)=\"onItemClick(option)\"\n >{{ option[bindLabel()] }}</span\n >\n } @else {\n <span\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n gds-text-primary\n item\n \"\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n cdkMenuItem\n role=\"button\"\n [cdkMenuTriggerFor]=\"subMenu\"\n [cdkMenuTriggerData]=\"{ $implicit: option.children }\"\n >\n {{ option[bindLabel()] }}\n <gds-icon\n key=\"line-chevron-right-stroke\"\n class=\"gds-icon-size-2xs\"\n />\n </span>\n }\n }\n </div>\n </div>\n </gds-dropdown>\n</ng-template>\n", styles: ["@layer design-system{:host{outline:none;--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}:host .label{color:var(--text-color)}:host .placeholder{color:var(--placeholder-color);-webkit-user-select:none;user-select:none}:host .chevron{outline:none}:host .content{opacity:0;z-index:-1}.item{padding-block:11px;cursor:pointer;--wrapper-margin-inline: 0px;--wrapper-margin-block: 2px}.item:hover:before,.item.active:before,.item[aria-expanded=true]:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}.item:focus-visible:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}.item:focus-visible{outline:none}}\n"], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: GdsDropdownComponent, selector: "gds-dropdown", inputs: ["triggerElement", "horizontal", "preventMobileStyling", "allowDefaultTabBehavior", "mobileCancelLabel"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: CdkTargetMenuAim, selector: "[cdkTargetMenuAim]", exportAs: ["cdkTargetMenuAim"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6678
6689
|
}
|
|
6679
6690
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsNestedSelectComponent, decorators: [{
|
|
6680
6691
|
type: Component,
|
|
@@ -6686,8 +6697,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
6686
6697
|
CdkTargetMenuAim,
|
|
6687
6698
|
GdsIconComponent,
|
|
6688
6699
|
NgClass,
|
|
6689
|
-
GdsIconButtonComponent
|
|
6690
|
-
TranslatePipe
|
|
6700
|
+
GdsIconButtonComponent
|
|
6691
6701
|
], host: {
|
|
6692
6702
|
role: 'button',
|
|
6693
6703
|
class: `
|
|
@@ -6704,7 +6714,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
6704
6714
|
`,
|
|
6705
6715
|
'[class.is-controlled]': 'isOpen()',
|
|
6706
6716
|
'(keydown.escape)': 'onEscape()'
|
|
6707
|
-
}, hostDirectives: [CdkMenuTrigger], template: "<div class=\"\n content\n gds-position-absolute\n\">\n <ng-content />\n</div>\n\n<div\n class=\"\n gds-flex-1\n gds-min-width-0\n gds-truncate\n label\n \"\n [ngClass]=\"{ placeholder: !label() }\"\n>\n {{ label() ? label() : inputPlaceholder() }}\n</div>\n\n@if (clearable() && label() && !inputDisabled()) {\n <button\n gds-icon-button\n class=\"\n gds-background-none\n gds-min-height-0\n \"\n [disabled]=\"inputDisabled()\"\n (click)=\"onClear($event)\"\n (keydown.enter)=\"onClear($event)\"\n [attr.aria-label]=\"clearAriaLabel()
|
|
6717
|
+
}, hostDirectives: [CdkMenuTrigger], template: "<div class=\"\n content\n gds-position-absolute\n\">\n <ng-content />\n</div>\n\n<div\n class=\"\n gds-flex-1\n gds-min-width-0\n gds-truncate\n label\n \"\n [ngClass]=\"{ placeholder: !label() }\"\n>\n {{ label() ? label() : inputPlaceholder() }}\n</div>\n\n@if (clearable() && label() && !inputDisabled()) {\n <button\n gds-icon-button\n class=\"\n gds-background-none\n gds-min-height-0\n \"\n [disabled]=\"inputDisabled()\"\n (click)=\"onClear($event)\"\n (keydown.enter)=\"onClear($event)\"\n [attr.aria-label]=\"clearAriaLabel()\"\n >\n <gds-icon\n key=\"line-dismiss\"\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n icon\n \"\n />\n </button>\n} @else {\n <gds-icon\n class=\"\n gds-icon-primary\n gds-icon-size-2xs\n icon\n \"\n [key]=\"isOpen() ? 'line-chevron-up-stroke' : 'line-chevron-down-stroke'\"\n />\n}\n\n<ng-template #menu>\n <gds-dropdown\n mobileCancelLabel=\"Cancel\"\n cdkTargetMenuAim\n preventMobileStyling\n allowDefaultTabBehavior\n [style.minWidth]=\"dropdownWidth() + 'px'\"\n >\n <div\n [style.maxHeight]=\"maxMenuHeight()\"\n class=\"gds-scrollable-vertically\"\n >\n <div class=\"\n gds-display-flex\n gds-flex-column\n \">\n @for (option of options(); track $index) {\n @if (!option.children?.length) {\n <span\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n item\n \"\n role=\"button\"\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n cdkMenuItem\n (cdkMenuItemTriggered)=\"onItemClick(option)\"\n >{{ option[bindLabel()] }}</span\n >\n } @else {\n <span\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n item\n \"\n role=\"button\"\n cdkMenuItem\n [cdkMenuTriggerFor]=\"subMenu\"\n [cdkMenuTriggerData]=\"{ $implicit: option.children }\"\n >\n {{ option[bindLabel()] }}\n <gds-icon\n key=\"line-chevron-right-stroke\"\n class=\"gds-icon-size-2xs\"\n />\n </span>\n }\n }\n </div>\n </div>\n </gds-dropdown>\n</ng-template>\n\n<ng-template\n #subMenu\n let-data\n>\n <gds-dropdown\n mobileCancelLabel=\"Cancel\"\n cdkTargetMenuAim\n preventMobileStyling\n >\n <div\n [style.maxHeight]=\"maxMenuHeight()\"\n class=\"gds-scrollable-vertically\"\n >\n <div class=\"\n gds-display-flex\n gds-flex-column\n \">\n @for (option of data; track $index) {\n @if (!option.children?.length) {\n <span\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n item\n \"\n role=\"button\"\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n cdkMenuItem\n (cdkMenuItemTriggered)=\"onItemClick(option)\"\n >{{ option[bindLabel()] }}</span\n >\n } @else {\n <span\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n gds-text-primary\n item\n \"\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n cdkMenuItem\n role=\"button\"\n [cdkMenuTriggerFor]=\"subMenu\"\n [cdkMenuTriggerData]=\"{ $implicit: option.children }\"\n >\n {{ option[bindLabel()] }}\n <gds-icon\n key=\"line-chevron-right-stroke\"\n class=\"gds-icon-size-2xs\"\n />\n </span>\n }\n }\n </div>\n </div>\n </gds-dropdown>\n</ng-template>\n", styles: ["@layer design-system{:host{outline:none;--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}:host .label{color:var(--text-color)}:host .placeholder{color:var(--placeholder-color);-webkit-user-select:none;user-select:none}:host .chevron{outline:none}:host .content{opacity:0;z-index:-1}.item{padding-block:11px;cursor:pointer;--wrapper-margin-inline: 0px;--wrapper-margin-block: 2px}.item:hover:before,.item.active:before,.item[aria-expanded=true]:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}.item:focus-visible:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}.item:focus-visible{outline:none}}\n"] }]
|
|
6708
6718
|
}], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: true }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: true }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], maxMenuHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxMenuHeight", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], menuPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuPosition", required: false }] }], input: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GdsNativeInputDirective), { isSignal: true }] }], menu: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }] } });
|
|
6709
6719
|
|
|
6710
6720
|
class GdsProgressBarComponent {
|
|
@@ -6744,7 +6754,7 @@ class GdsSearchBarComponent {
|
|
|
6744
6754
|
leadingIcon = input('titlebar-search', ...(ngDevMode ? [{ debugName: "leadingIcon" }] : /* istanbul ignore next */ []));
|
|
6745
6755
|
bindValue = input('id', ...(ngDevMode ? [{ debugName: "bindValue" }] : /* istanbul ignore next */ []));
|
|
6746
6756
|
bindLabel = input('value', ...(ngDevMode ? [{ debugName: "bindLabel" }] : /* istanbul ignore next */ []));
|
|
6747
|
-
ariaLabel = input(...(ngDevMode ? [
|
|
6757
|
+
ariaLabel = input('Search bar', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
6748
6758
|
isDisabled = model(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
6749
6759
|
suppressClearOnClose = input(false, { ...(ngDevMode ? { debugName: "suppressClearOnClose" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
6750
6760
|
loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
@@ -6923,7 +6933,7 @@ class GdsSearchBarComponent {
|
|
|
6923
6933
|
this.#renderer.setStyle(dropdownPanelParent, 'visibility', 'visible');
|
|
6924
6934
|
};
|
|
6925
6935
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6926
|
-
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 });
|
|
6936
|
+
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()\"\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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6927
6937
|
}
|
|
6928
6938
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSearchBarComponent, decorators: [{
|
|
6929
6939
|
type: Component,
|
|
@@ -6932,14 +6942,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
6932
6942
|
NgSelectModule,
|
|
6933
6943
|
NgTemplateOutlet,
|
|
6934
6944
|
GdsSpinnerComponent,
|
|
6935
|
-
TranslatePipe,
|
|
6936
6945
|
GdsIconButtonComponent,
|
|
6937
6946
|
GdsIconComponent
|
|
6938
6947
|
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
6939
6948
|
'[attr.disabled]': 'isDisabled() ? "" : undefined',
|
|
6940
6949
|
'(keydown)': 'setMarkedItemIndex()',
|
|
6941
6950
|
'(window:resize)': 'close()'
|
|
6942
|
-
}, 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()
|
|
6951
|
+
}, 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()\"\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"] }]
|
|
6943
6952
|
}], 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"] }] } });
|
|
6944
6953
|
|
|
6945
6954
|
class GdsSidebarItemComponent {
|
|
@@ -7041,11 +7050,170 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
7041
7050
|
}, 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"] }]
|
|
7042
7051
|
}], 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 }] }] } });
|
|
7043
7052
|
|
|
7044
|
-
|
|
7045
|
-
|
|
7046
|
-
|
|
7047
|
-
|
|
7048
|
-
|
|
7053
|
+
const GDS_TOASTER_CONFIG = new InjectionToken('GDS_TOASTER_CONFIG');
|
|
7054
|
+
const GDS_TOAST_CONTAINER = new InjectionToken('GDS_TOAST_CONTAINER');
|
|
7055
|
+
|
|
7056
|
+
class ToastrService {
|
|
7057
|
+
#overlay = inject(Overlay);
|
|
7058
|
+
#container = inject(GDS_TOAST_CONTAINER);
|
|
7059
|
+
#globalConfig = inject(GDS_TOASTER_CONFIG);
|
|
7060
|
+
#toasts = signal([], ...(ngDevMode ? [{ debugName: "#toasts" }] : /* istanbul ignore next */ []));
|
|
7061
|
+
#actionSubjects = new Map();
|
|
7062
|
+
#timeouts = new Map();
|
|
7063
|
+
#overlayRef = null;
|
|
7064
|
+
#nextId = 0;
|
|
7065
|
+
/** Visible toasts for the overlay stack container. */
|
|
7066
|
+
toasts = this.#toasts.asReadonly();
|
|
7067
|
+
get positionClass() {
|
|
7068
|
+
return this.#globalConfig.positionClass;
|
|
7069
|
+
}
|
|
7070
|
+
success = (message, title, override) => this.#show('success', message, title, override);
|
|
7071
|
+
error = (message, title, override) => this.#show('error', message, title, override);
|
|
7072
|
+
info = (message, title, override) => this.#show('info', message, title, override);
|
|
7073
|
+
warning = (message, title, override) => this.#show('warning', message, title, override);
|
|
7074
|
+
show = (message, title, override) => this.#show('show', message, title, override);
|
|
7075
|
+
clear = (toastId) => {
|
|
7076
|
+
if (!toastId) {
|
|
7077
|
+
[...this.#toasts()].forEach((toast) => this.remove(toast.toastId));
|
|
7078
|
+
return;
|
|
7079
|
+
}
|
|
7080
|
+
this.remove(toastId);
|
|
7081
|
+
};
|
|
7082
|
+
remove = (toastId) => {
|
|
7083
|
+
const timeout = this.#timeouts.get(toastId);
|
|
7084
|
+
if (timeout != null) {
|
|
7085
|
+
clearTimeout(timeout);
|
|
7086
|
+
this.#timeouts.delete(toastId);
|
|
7087
|
+
}
|
|
7088
|
+
const existed = this.#toasts().some((toast) => toast.toastId === toastId);
|
|
7089
|
+
if (!existed) {
|
|
7090
|
+
return;
|
|
7091
|
+
}
|
|
7092
|
+
this.#toasts.update((toasts) => toasts.filter((toast) => toast.toastId !== toastId));
|
|
7093
|
+
const actionSub = this.#actionSubjects.get(toastId);
|
|
7094
|
+
this.#actionSubjects.delete(toastId);
|
|
7095
|
+
// Defer complete: callers often clear() inside onAction.map(). Completing the Subject
|
|
7096
|
+
// synchronously during that emission stops the value from reaching downstream operators.
|
|
7097
|
+
queueMicrotask(() => actionSub?.complete());
|
|
7098
|
+
if (this.#toasts().length === 0) {
|
|
7099
|
+
this.#overlayRef?.dispose();
|
|
7100
|
+
this.#overlayRef = null;
|
|
7101
|
+
}
|
|
7102
|
+
};
|
|
7103
|
+
triggerAction = (toastId, event) => this.#actionSubjects.get(toastId)?.next(event);
|
|
7104
|
+
/** Clears the auto-dismiss timer (e.g. while the pointer is over the toast). */
|
|
7105
|
+
pauseTimeout = (toastId) => {
|
|
7106
|
+
const timeout = this.#timeouts.get(toastId);
|
|
7107
|
+
if (timeout == null) {
|
|
7108
|
+
return;
|
|
7109
|
+
}
|
|
7110
|
+
clearTimeout(timeout);
|
|
7111
|
+
this.#timeouts.delete(toastId);
|
|
7112
|
+
};
|
|
7113
|
+
/** Starts the post-hover dismiss timer using extendedTimeOut. */
|
|
7114
|
+
resumeTimeout = (toastId) => {
|
|
7115
|
+
const instance = this.#toasts().find((toast) => toast.toastId === toastId);
|
|
7116
|
+
if (!instance || instance.options.disableTimeOut) {
|
|
7117
|
+
return;
|
|
7118
|
+
}
|
|
7119
|
+
this.pauseTimeout(toastId);
|
|
7120
|
+
const extendedTimeOutMs = instance.options.extendedTimeOut ?? this.#globalConfig.extendedTimeOut;
|
|
7121
|
+
// 0 keeps the toast open after hover (ngx-toastr behavior).
|
|
7122
|
+
if (!extendedTimeOutMs) {
|
|
7123
|
+
return;
|
|
7124
|
+
}
|
|
7125
|
+
const timeout = setTimeout(() => this.remove(toastId), extendedTimeOutMs);
|
|
7126
|
+
this.#timeouts.set(toastId, timeout);
|
|
7127
|
+
};
|
|
7128
|
+
#show = (toastType, message = '', title = '', override = {}) => {
|
|
7129
|
+
const options = {
|
|
7130
|
+
...this.#globalConfig,
|
|
7131
|
+
...override,
|
|
7132
|
+
payload: {
|
|
7133
|
+
...this.#globalConfig.payload,
|
|
7134
|
+
...override.payload
|
|
7135
|
+
}
|
|
7136
|
+
};
|
|
7137
|
+
const existing = this.#toasts().find((toast) => toast.toastType === toastType && toast.message === message && toast.title === title);
|
|
7138
|
+
if (this.#globalConfig.preventDuplicates !== false && existing) {
|
|
7139
|
+
return this.#toActiveToast(existing);
|
|
7140
|
+
}
|
|
7141
|
+
const toastId = ++this.#nextId;
|
|
7142
|
+
const actionSub = new Subject();
|
|
7143
|
+
this.#actionSubjects.set(toastId, actionSub);
|
|
7144
|
+
const instance = {
|
|
7145
|
+
toastId,
|
|
7146
|
+
toastType,
|
|
7147
|
+
title,
|
|
7148
|
+
message,
|
|
7149
|
+
options
|
|
7150
|
+
};
|
|
7151
|
+
this.#toasts.update((toasts) => [...toasts, instance]);
|
|
7152
|
+
this.#ensureOverlayOpen();
|
|
7153
|
+
this.#scheduleTimeout(instance);
|
|
7154
|
+
return {
|
|
7155
|
+
toastId,
|
|
7156
|
+
message,
|
|
7157
|
+
title,
|
|
7158
|
+
toastType,
|
|
7159
|
+
onAction: actionSub.asObservable()
|
|
7160
|
+
};
|
|
7161
|
+
};
|
|
7162
|
+
#toActiveToast = (instance) => ({
|
|
7163
|
+
toastId: instance.toastId,
|
|
7164
|
+
message: instance.message,
|
|
7165
|
+
title: instance.title,
|
|
7166
|
+
toastType: instance.toastType,
|
|
7167
|
+
onAction: this.#actionSubjects.get(instance.toastId)?.asObservable() ?? EMPTY
|
|
7168
|
+
});
|
|
7169
|
+
#scheduleTimeout = (instance) => {
|
|
7170
|
+
if (instance.options.disableTimeOut) {
|
|
7171
|
+
return;
|
|
7172
|
+
}
|
|
7173
|
+
const timeOutMs = instance.options.timeOut;
|
|
7174
|
+
const timeout = setTimeout(() => this.remove(instance.toastId), timeOutMs);
|
|
7175
|
+
this.#timeouts.set(instance.toastId, timeout);
|
|
7176
|
+
};
|
|
7177
|
+
#ensureOverlayOpen = () => {
|
|
7178
|
+
if (this.#overlayRef) {
|
|
7179
|
+
return;
|
|
7180
|
+
}
|
|
7181
|
+
this.#overlayRef = this.#overlay.create({
|
|
7182
|
+
hasBackdrop: false,
|
|
7183
|
+
panelClass: [
|
|
7184
|
+
'gds-toast-overlay-pane',
|
|
7185
|
+
'gds-position-fixed',
|
|
7186
|
+
'gds-inset-0',
|
|
7187
|
+
'gds-pointer-events-none',
|
|
7188
|
+
'gds-margin-0',
|
|
7189
|
+
'gds-max-width-unset'
|
|
7190
|
+
],
|
|
7191
|
+
positionStrategy: this.#overlay.position().global().top('0').left('0'),
|
|
7192
|
+
scrollStrategy: this.#overlay.scrollStrategies.noop(),
|
|
7193
|
+
width: '100%',
|
|
7194
|
+
height: '100%'
|
|
7195
|
+
});
|
|
7196
|
+
this.#overlayRef.attach(new ComponentPortal(this.#container));
|
|
7197
|
+
this.#overlayRef.detachments().subscribe(() => {
|
|
7198
|
+
this.#overlayRef = null;
|
|
7199
|
+
if (this.#toasts().length > 0) {
|
|
7200
|
+
this.clear();
|
|
7201
|
+
}
|
|
7202
|
+
});
|
|
7203
|
+
};
|
|
7204
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastrService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
7205
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastrService, providedIn: 'root' });
|
|
7206
|
+
}
|
|
7207
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastrService, decorators: [{
|
|
7208
|
+
type: Injectable,
|
|
7209
|
+
args: [{ providedIn: 'root' }]
|
|
7210
|
+
}] });
|
|
7211
|
+
|
|
7212
|
+
class GdsToastComponent {
|
|
7213
|
+
#toaster = inject(ToastrService);
|
|
7214
|
+
toast = input.required(...(ngDevMode ? [{ debugName: "toast" }] : /* istanbul ignore next */ []));
|
|
7215
|
+
status = computed(() => {
|
|
7216
|
+
switch (this.toast().toastType) {
|
|
7049
7217
|
case 'error':
|
|
7050
7218
|
return 'danger';
|
|
7051
7219
|
case 'success':
|
|
@@ -7055,39 +7223,100 @@ class GdsToastComponent extends ToastNoAnimation {
|
|
|
7055
7223
|
default:
|
|
7056
7224
|
return 'default';
|
|
7057
7225
|
}
|
|
7058
|
-
}
|
|
7059
|
-
|
|
7060
|
-
|
|
7061
|
-
|
|
7062
|
-
|
|
7063
|
-
|
|
7064
|
-
}
|
|
7065
|
-
get actionLabel() {
|
|
7066
|
-
return this.options.payload?.actionLabel;
|
|
7067
|
-
}
|
|
7068
|
-
get dismissAriaLabel() {
|
|
7069
|
-
return this.options.payload?.dismissAriaLabel ?? 'Gds.Toast.Dismiss.AriaLabel';
|
|
7070
|
-
}
|
|
7071
|
-
get actionAriaLabel() {
|
|
7072
|
-
return this.options.payload?.actionAriaLabel;
|
|
7073
|
-
}
|
|
7226
|
+
}, ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
|
|
7227
|
+
title = computed(() => this.toast().title, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
7228
|
+
message = computed(() => this.toast().message, ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
|
|
7229
|
+
actionLabel = computed(() => this.toast().options.payload?.actionLabel, ...(ngDevMode ? [{ debugName: "actionLabel" }] : /* istanbul ignore next */ []));
|
|
7230
|
+
dismissAriaLabel = computed(() => this.toast().options.payload?.dismissAriaLabel ?? 'Dismiss notification', ...(ngDevMode ? [{ debugName: "dismissAriaLabel" }] : /* istanbul ignore next */ []));
|
|
7231
|
+
actionAriaLabel = computed(() => this.toast().options.payload?.actionAriaLabel, ...(ngDevMode ? [{ debugName: "actionAriaLabel" }] : /* istanbul ignore next */ []));
|
|
7074
7232
|
action = (event) => {
|
|
7075
|
-
event
|
|
7076
|
-
this.
|
|
7077
|
-
|
|
7233
|
+
event?.stopPropagation();
|
|
7234
|
+
this.#toaster.triggerAction(this.toast().toastId, event);
|
|
7235
|
+
};
|
|
7236
|
+
remove = () => {
|
|
7237
|
+
this.#toaster.remove(this.toast().toastId);
|
|
7238
|
+
};
|
|
7239
|
+
onHostClick(event) {
|
|
7240
|
+
if (!this.toast().options.tapToDismiss) {
|
|
7241
|
+
return;
|
|
7242
|
+
}
|
|
7243
|
+
const target = event.target;
|
|
7244
|
+
if (target?.closest('button')) {
|
|
7245
|
+
return;
|
|
7246
|
+
}
|
|
7247
|
+
this.remove();
|
|
7248
|
+
}
|
|
7249
|
+
onMouseEnter = () => {
|
|
7250
|
+
if (this.toast().options.disableTimeOut) {
|
|
7251
|
+
return;
|
|
7252
|
+
}
|
|
7253
|
+
this.#toaster.pauseTimeout(this.toast().toastId);
|
|
7078
7254
|
};
|
|
7079
|
-
|
|
7080
|
-
|
|
7255
|
+
onMouseLeave = () => {
|
|
7256
|
+
if (this.toast().options.disableTimeOut) {
|
|
7257
|
+
return;
|
|
7258
|
+
}
|
|
7259
|
+
this.#toaster.resumeTimeout(this.toast().toastId);
|
|
7260
|
+
};
|
|
7261
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7262
|
+
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() }}\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()\"\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()\"\n (clicked)=\"action($event)\"\n >\n {{ actionLabel() }}\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()\"\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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7081
7263
|
}
|
|
7082
7264
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsToastComponent, decorators: [{
|
|
7083
7265
|
type: Component,
|
|
7084
|
-
args: [{ selector: 'gds-toast', imports: [GdsIconComponent, GdsIconButtonComponent, GdsButtonComponent
|
|
7085
|
-
'[attr.type]': 'status',
|
|
7086
|
-
'
|
|
7266
|
+
args: [{ selector: 'gds-toast', imports: [GdsIconComponent, GdsIconButtonComponent, GdsButtonComponent], host: {
|
|
7267
|
+
'[attr.type]': 'status()',
|
|
7268
|
+
class: 'gds-responsive-sm-width-100-parent',
|
|
7087
7269
|
'animate.enter': 'gds-scale-in gds-fade-in',
|
|
7088
|
-
'animate.leave': 'gds-scale-out gds-fade-out'
|
|
7089
|
-
|
|
7090
|
-
|
|
7270
|
+
'animate.leave': 'gds-scale-out gds-fade-out',
|
|
7271
|
+
'(click)': 'onHostClick($event)',
|
|
7272
|
+
'(mouseenter)': 'onMouseEnter()',
|
|
7273
|
+
'(mouseleave)': 'onMouseLeave()'
|
|
7274
|
+
}, 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() }}\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()\"\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()\"\n (clicked)=\"action($event)\"\n >\n {{ actionLabel() }}\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()\"\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"] }]
|
|
7275
|
+
}], propDecorators: { toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: true }] }] } });
|
|
7276
|
+
|
|
7277
|
+
class GdsToastContainerComponent {
|
|
7278
|
+
toaster = inject(ToastrService);
|
|
7279
|
+
hostClass = computed(() => `toast-container ${this.toaster.positionClass}`, ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
|
|
7280
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7281
|
+
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: `
|
|
7282
|
+
@for (toast of toaster.toasts(); track toast.toastId) {
|
|
7283
|
+
<gds-toast [toast]="toast" />
|
|
7284
|
+
}
|
|
7285
|
+
`, isInline: true, dependencies: [{ kind: "component", type: GdsToastComponent, selector: "gds-toast", inputs: ["toast"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7286
|
+
}
|
|
7287
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsToastContainerComponent, decorators: [{
|
|
7288
|
+
type: Component,
|
|
7289
|
+
args: [{
|
|
7290
|
+
selector: 'gds-toast-container',
|
|
7291
|
+
template: `
|
|
7292
|
+
@for (toast of toaster.toasts(); track toast.toastId) {
|
|
7293
|
+
<gds-toast [toast]="toast" />
|
|
7294
|
+
}
|
|
7295
|
+
`,
|
|
7296
|
+
host: {
|
|
7297
|
+
'[class]': 'hostClass()'
|
|
7298
|
+
},
|
|
7299
|
+
imports: [GdsToastComponent],
|
|
7300
|
+
changeDetection: ChangeDetectionStrategy.OnPush
|
|
7301
|
+
}]
|
|
7302
|
+
}] });
|
|
7303
|
+
|
|
7304
|
+
const DEFAULT_CONFIG = {
|
|
7305
|
+
timeOut: 5000,
|
|
7306
|
+
extendedTimeOut: 1000,
|
|
7307
|
+
positionClass: 'toast-top-left',
|
|
7308
|
+
preventDuplicates: true,
|
|
7309
|
+
tapToDismiss: false,
|
|
7310
|
+
disableTimeOut: false,
|
|
7311
|
+
payload: {}
|
|
7312
|
+
};
|
|
7313
|
+
const provideToaster = (customOptions = {}) => makeEnvironmentProviders([
|
|
7314
|
+
{
|
|
7315
|
+
provide: GDS_TOASTER_CONFIG,
|
|
7316
|
+
useValue: { ...DEFAULT_CONFIG, ...customOptions }
|
|
7317
|
+
},
|
|
7318
|
+
{ provide: GDS_TOAST_CONTAINER, useValue: GdsToastContainerComponent }
|
|
7319
|
+
]);
|
|
7091
7320
|
|
|
7092
7321
|
class GdsListboxBaseDirective {
|
|
7093
7322
|
tabindex = signal(0, ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
|
|
@@ -7543,11 +7772,11 @@ class GdsUserPromptComponent extends GdsDialogBaseDirective {
|
|
|
7543
7772
|
return this.config.data?.secondaryTextVariant ?? 'default';
|
|
7544
7773
|
}
|
|
7545
7774
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsUserPromptComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
7546
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsUserPromptComponent, isStandalone: true, selector: "gds-user-prompt-dialog", viewQueries: [{ propertyName: "defaultDescTmpl", first: true, predicate: ["defaultDescriptionTmpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<dialog\n gds-dialog\n class=\"\n dialog\n gds-height-fit-content\n gds-width-fit-content\n \"\n [closeOnBackdropClick]=\"config.data?.closeOnBackdropClick\"\n (canceled)=\"close()\"\n (closed)=\"close()\"\n [suppressDismissBtn]=\"config.data?.suppressDismissBtn\"\n>\n <span header-label>{{ config.data?.title ?? ''
|
|
7775
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsUserPromptComponent, isStandalone: true, selector: "gds-user-prompt-dialog", viewQueries: [{ propertyName: "defaultDescTmpl", first: true, predicate: ["defaultDescriptionTmpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<dialog\n gds-dialog\n class=\"\n dialog\n gds-height-fit-content\n gds-width-fit-content\n \"\n [closeOnBackdropClick]=\"config.data?.closeOnBackdropClick\"\n (canceled)=\"close()\"\n (closed)=\"close()\"\n [suppressDismissBtn]=\"config.data?.suppressDismissBtn\"\n>\n <span header-label>{{ config.data?.title ?? '' }}</span>\n <ng-container *ngTemplateOutlet=\"descTemplate\" />\n <div\n footer-actions-primary\n class=\"\n gds-display-flex\n gds-gap-2xs\n gds-mobile-flex-row-reverse\n gds-mobile-padding-block-start-2xs\n \"\n >\n <button\n gds-button\n class=\"\n gds-mobile-padding-inline-2xs\n gds-mobile-text-primary-primary\n \"\n [variant]=\"isMobile() ? 'invisible' : 'primary'\"\n (clicked)=\"confirm()\"\n >\n {{ config.data?.primaryLabel ?? '' }}\n </button>\n @if (config.data?.secondaryLabel; as secondaryLabel) {\n <button\n gds-button\n class=\"\n gds-mobile-padding-inline-2xs\n secondary-button\n \"\n [attr.secondary-text-variant]=\"secondaryTextVariant\"\n footer-actions-primary\n [variant]=\"isMobile() ? 'invisible' : 'default'\"\n (clicked)=\"close()\"\n >\n {{ secondaryLabel }}\n </button>\n }\n </div>\n</dialog>\n\n<ng-template #defaultDescriptionTmpl>\n <span>{{ desc }}</span>\n</ng-template>\n", styles: ["@layer design-system{:host[isActive=true]{outline:2px solid}:is(body[isMobile=true]) :host .dialog{--gds-dialog-base-gap: var(--gds-spacing-2xs)}@media(max-width:484px){:host .dialog{max-width:calc(100% - 2 * var(--gds-spacing-sm))}}:host .secondary-button{--color: var(--gds-palette-text-primary-primary)}:host .secondary-button[secondary-text-variant=error]{--color: var(--gds-palette-helper-error-inverse)}:host .secondary-button{color:var(--color)}}\n"], dependencies: [{ kind: "component", type: GdsDialogComponent, selector: "dialog[gds-dialog]", inputs: ["type", "background", "headerLabelAlignment", "showFooterBorder", "closeOnBackdropClick", "suppressDismissBtn"], outputs: ["closed", "canceled"] }, { kind: "component", type: GdsButtonComponent, selector: "button[gds-button]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7547
7776
|
}
|
|
7548
7777
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsUserPromptComponent, decorators: [{
|
|
7549
7778
|
type: Component,
|
|
7550
|
-
args: [{ selector: 'gds-user-prompt-dialog', imports: [GdsDialogComponent, GdsButtonComponent,
|
|
7779
|
+
args: [{ selector: 'gds-user-prompt-dialog', imports: [GdsDialogComponent, GdsButtonComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dialog\n gds-dialog\n class=\"\n dialog\n gds-height-fit-content\n gds-width-fit-content\n \"\n [closeOnBackdropClick]=\"config.data?.closeOnBackdropClick\"\n (canceled)=\"close()\"\n (closed)=\"close()\"\n [suppressDismissBtn]=\"config.data?.suppressDismissBtn\"\n>\n <span header-label>{{ config.data?.title ?? '' }}</span>\n <ng-container *ngTemplateOutlet=\"descTemplate\" />\n <div\n footer-actions-primary\n class=\"\n gds-display-flex\n gds-gap-2xs\n gds-mobile-flex-row-reverse\n gds-mobile-padding-block-start-2xs\n \"\n >\n <button\n gds-button\n class=\"\n gds-mobile-padding-inline-2xs\n gds-mobile-text-primary-primary\n \"\n [variant]=\"isMobile() ? 'invisible' : 'primary'\"\n (clicked)=\"confirm()\"\n >\n {{ config.data?.primaryLabel ?? '' }}\n </button>\n @if (config.data?.secondaryLabel; as secondaryLabel) {\n <button\n gds-button\n class=\"\n gds-mobile-padding-inline-2xs\n secondary-button\n \"\n [attr.secondary-text-variant]=\"secondaryTextVariant\"\n footer-actions-primary\n [variant]=\"isMobile() ? 'invisible' : 'default'\"\n (clicked)=\"close()\"\n >\n {{ secondaryLabel }}\n </button>\n }\n </div>\n</dialog>\n\n<ng-template #defaultDescriptionTmpl>\n <span>{{ desc }}</span>\n</ng-template>\n", styles: ["@layer design-system{:host[isActive=true]{outline:2px solid}:is(body[isMobile=true]) :host .dialog{--gds-dialog-base-gap: var(--gds-spacing-2xs)}@media(max-width:484px){:host .dialog{max-width:calc(100% - 2 * var(--gds-spacing-sm))}}:host .secondary-button{--color: var(--gds-palette-text-primary-primary)}:host .secondary-button[secondary-text-variant=error]{--color: var(--gds-palette-helper-error-inverse)}:host .secondary-button{color:var(--color)}}\n"] }]
|
|
7551
7780
|
}], propDecorators: { defaultDescTmpl: [{ type: i0.ViewChild, args: ['defaultDescriptionTmpl', { isSignal: true }] }] } });
|
|
7552
7781
|
|
|
7553
7782
|
class GdsUserPromptService {
|
|
@@ -7559,8 +7788,8 @@ class GdsUserPromptService {
|
|
|
7559
7788
|
return this.#open({
|
|
7560
7789
|
title,
|
|
7561
7790
|
description,
|
|
7562
|
-
primaryLabel: '
|
|
7563
|
-
secondaryLabel: '
|
|
7791
|
+
primaryLabel: 'Confirm',
|
|
7792
|
+
secondaryLabel: 'Cancel',
|
|
7564
7793
|
secondaryTextVariant: 'default',
|
|
7565
7794
|
closeOnBackdropClick: true,
|
|
7566
7795
|
suppressDismissBtn: false,
|
|
@@ -7571,7 +7800,7 @@ class GdsUserPromptService {
|
|
|
7571
7800
|
return this.#open({
|
|
7572
7801
|
title,
|
|
7573
7802
|
description,
|
|
7574
|
-
primaryLabel: '
|
|
7803
|
+
primaryLabel: 'Ok',
|
|
7575
7804
|
secondaryLabel: '',
|
|
7576
7805
|
secondaryTextVariant: 'default',
|
|
7577
7806
|
closeOnBackdropClick: true,
|
|
@@ -7602,7 +7831,7 @@ class GdsHistoryComponent {
|
|
|
7602
7831
|
menuTmpl = contentChild('menuTmpl', ...(ngDevMode ? [{ debugName: "menuTmpl" }] : /* istanbul ignore next */ []));
|
|
7603
7832
|
menuPosition = CDK_MENU_CONNECTED_POSITIONS;
|
|
7604
7833
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7605
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsHistoryComponent, isStandalone: true, selector: "gds-history", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, connectorType: { classPropertyName: "connectorType", publicName: "connectorType", isSignal: true, isRequired: false, transformFunction: null }, suppressCloseBtn: { classPropertyName: "suppressCloseBtn", publicName: "suppressCloseBtn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", itemHovered: "itemHovered" }, queries: [{ propertyName: "contentTmpl", first: true, predicate: ["contentTmpl"], descendants: true, isSignal: true }, { propertyName: "menuTmpl", first: true, predicate: ["menuTmpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"\n gds-align-items-center\n gds-display-flex\n gds-padding-sm\n\">\n <span class=\"\n gds-flex-grow-1\n gds-text-primary-primary\n gds-text-subtitle\n \">{{ title() }}</span>\n @if (!suppressCloseBtn()) {\n <button\n gds-icon-button\n variant=\"primary\"\n class=\"gds-background-none\"\n (clicked)=\"closed.emit()\"\n [attr.aria-label]=\"'Dismiss'\"\n >\n <gds-icon\n key=\"line-dismiss\"\n class=\"gds-icon-size-3xs\"\n />\n </button>\n }\n</div>\n@if (loading()) {\n <gds-spinner class=\"\n gds-margin-block-auto\n gds-margin-inline-auto\n \" />\n} @else {\n <div class=\"gds-scrollable-vertically\">\n <ol\n role=\"list\"\n class=\"gds-list-unstyled\"\n >\n @for (item of reversed(); track $index) {\n <li\n gds-timeline-item\n [connectorType]=\"connectorType()\"\n [start]=\"$last\"\n [end]=\"$first\"\n (mouseenter)=\"itemHovered.emit(item)\"\n (mouseleave)=\"itemHovered.emit(null)\"\n >\n <div\n tag\n class=\"\n gds-display-flex\n gds-justify-content-center\n \"\n >\n @if (item.badgeType === 'icon') {\n <gds-icon\n class=\"\n badge-icon\n gds-background-base\n gds-icon-primary\n gds-icon-size-3xs\n gds-padding-3xs\n gds-radius-2xl\n \"\n [key]=\"item.badgeData | gdsSvgicon\"\n />\n } @else {\n <span\n gds-badge\n [ngClass]=\"{\n 'gds-background-dark-strong gds-text-default-contrast': $first,\n 'gds-background-white': !$first\n }\"\n >{{ item.badgeData }}</span\n >\n }\n </div>\n <div class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n \">\n <div class=\"\n gds-align-items-start\n gds-display-flex\n gds-gap-3xs\n gds-margin-inline-end-3xs\n \">\n <div class=\"\n gds-display-flex\n gds-flex-column\n gds-flex-grow-1\n gds-gap-2xs\n item-content\n \">\n <gds-tooltip\n class=\"\n gds-flex-grow-1\n gds-text-body\n gds-text-primary\n \"\n [tooltip]=\"item.title\"\n onlyTextOverflow\n >\n {{ item.title }}\n </gds-tooltip>\n @for (label of item.labels; track $index) {\n <gds-tooltip\n class=\"\n gds-text-caption\n gds-text-secondary\n \"\n onlyTextOverflow\n [tooltip]=\"label\"\n >\n {{ label }}\n </gds-tooltip>\n }\n <ng-container *ngTemplateOutlet=\"contentTmpl() ?? null; context: { $implicit: item }\" />\n </div>\n @if (menuTmpl() && !$first) {\n <button\n gds-icon-button\n variant=\"primary\"\n class=\"\n gds-background-none\n gds-min-height-0\n \"\n [attr.ariaLabel]=\"'Menu'\"\n [cdkMenuTriggerFor]=\"menu\"\n [cdkMenuPosition]=\"menuPosition\"\n #trigger=\"cdkMenuTriggerFor\"\n >\n <gds-icon\n key=\"filled-menu-more\"\n class=\"gds-icon-size-2xs\"\n />\n </button>\n <ng-template #menu>\n <gds-dropdown
|
|
7834
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsHistoryComponent, isStandalone: true, selector: "gds-history", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, connectorType: { classPropertyName: "connectorType", publicName: "connectorType", isSignal: true, isRequired: false, transformFunction: null }, suppressCloseBtn: { classPropertyName: "suppressCloseBtn", publicName: "suppressCloseBtn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", itemHovered: "itemHovered" }, queries: [{ propertyName: "contentTmpl", first: true, predicate: ["contentTmpl"], descendants: true, isSignal: true }, { propertyName: "menuTmpl", first: true, predicate: ["menuTmpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"\n gds-align-items-center\n gds-display-flex\n gds-padding-sm\n\">\n <span class=\"\n gds-flex-grow-1\n gds-text-primary-primary\n gds-text-subtitle\n \">{{ title() }}</span>\n @if (!suppressCloseBtn()) {\n <button\n gds-icon-button\n variant=\"primary\"\n class=\"gds-background-none\"\n (clicked)=\"closed.emit()\"\n [attr.aria-label]=\"'Dismiss'\"\n >\n <gds-icon\n key=\"line-dismiss\"\n class=\"gds-icon-size-3xs\"\n />\n </button>\n }\n</div>\n@if (loading()) {\n <gds-spinner class=\"\n gds-margin-block-auto\n gds-margin-inline-auto\n \" />\n} @else {\n <div class=\"gds-scrollable-vertically\">\n <ol\n role=\"list\"\n class=\"gds-list-unstyled\"\n >\n @for (item of reversed(); track $index) {\n <li\n gds-timeline-item\n [connectorType]=\"connectorType()\"\n [start]=\"$last\"\n [end]=\"$first\"\n (mouseenter)=\"itemHovered.emit(item)\"\n (mouseleave)=\"itemHovered.emit(null)\"\n >\n <div\n tag\n class=\"\n gds-display-flex\n gds-justify-content-center\n \"\n >\n @if (item.badgeType === 'icon') {\n <gds-icon\n class=\"\n badge-icon\n gds-background-base\n gds-icon-primary\n gds-icon-size-3xs\n gds-padding-3xs\n gds-radius-2xl\n \"\n [key]=\"item.badgeData | gdsSvgicon\"\n />\n } @else {\n <span\n gds-badge\n [ngClass]=\"{\n 'gds-background-dark-strong gds-text-default-contrast': $first,\n 'gds-background-white': !$first\n }\"\n >{{ item.badgeData }}</span\n >\n }\n </div>\n <div class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n \">\n <div class=\"\n gds-align-items-start\n gds-display-flex\n gds-gap-3xs\n gds-margin-inline-end-3xs\n \">\n <div class=\"\n gds-display-flex\n gds-flex-column\n gds-flex-grow-1\n gds-gap-2xs\n item-content\n \">\n <gds-tooltip\n class=\"\n gds-flex-grow-1\n gds-text-body\n gds-text-primary\n \"\n [tooltip]=\"item.title\"\n onlyTextOverflow\n >\n {{ item.title }}\n </gds-tooltip>\n @for (label of item.labels; track $index) {\n <gds-tooltip\n class=\"\n gds-text-caption\n gds-text-secondary\n \"\n onlyTextOverflow\n [tooltip]=\"label\"\n >\n {{ label }}\n </gds-tooltip>\n }\n <ng-container *ngTemplateOutlet=\"contentTmpl() ?? null; context: { $implicit: item }\" />\n </div>\n @if (menuTmpl() && !$first) {\n <button\n gds-icon-button\n variant=\"primary\"\n class=\"\n gds-background-none\n gds-min-height-0\n \"\n [attr.ariaLabel]=\"'Menu'\"\n [cdkMenuTriggerFor]=\"menu\"\n [cdkMenuPosition]=\"menuPosition\"\n #trigger=\"cdkMenuTriggerFor\"\n >\n <gds-icon\n key=\"filled-menu-more\"\n class=\"gds-icon-size-2xs\"\n />\n </button>\n <ng-template #menu>\n <gds-dropdown\n mobileCancelLabel=\"Cancel\"\n (click)=\"trigger.close()\"\n >\n <ng-container *ngTemplateOutlet=\"menuTmpl() ?? null; context: { $implicit: item }\" />\n </gds-dropdown>\n </ng-template>\n }\n </div>\n </div>\n </li>\n }\n </ol>\n </div>\n}\n", styles: ["@layer design-system{:host{display:flex;flex-direction:column;height:100%;background:var(--gds-palette-background-hover);overflow:hidden}:host .item-content{overflow:hidden}}\n"], dependencies: [{ kind: "component", type: GdsBadgeComponent, selector: "span[gds-badge]", inputs: ["icon", "tooltip", "tooltipInteractive"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsTimelineItemComponent, selector: "li[gds-timeline-item]", inputs: ["end", "start", "connectorType"] }, { kind: "component", type: GdsSpinnerComponent, selector: "gds-spinner", inputs: ["trackWidth", "size"] }, { kind: "component", type: GdsTooltipComponent, selector: "gds-tooltip", inputs: ["tooltip", "onlyTextOverflow", "disabled", "tooltipPlacement", "tooltipInteractive", "useHostWidth", "open", "maxWidth", "appendTo"] }, { kind: "component", type: GdsDropdownComponent, selector: "gds-dropdown", inputs: ["triggerElement", "horizontal", "preventMobileStyling", "allowDefaultTabBehavior", "mobileCancelLabel"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: GdsSvgIconPipe, name: "gdsSvgicon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7606
7835
|
}
|
|
7607
7836
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsHistoryComponent, decorators: [{
|
|
7608
7837
|
type: Component,
|
|
@@ -7619,7 +7848,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
7619
7848
|
NgTemplateOutlet,
|
|
7620
7849
|
NgClass,
|
|
7621
7850
|
GdsSvgIconPipe
|
|
7622
|
-
], template: "<div class=\"\n gds-align-items-center\n gds-display-flex\n gds-padding-sm\n\">\n <span class=\"\n gds-flex-grow-1\n gds-text-primary-primary\n gds-text-subtitle\n \">{{ title() }}</span>\n @if (!suppressCloseBtn()) {\n <button\n gds-icon-button\n variant=\"primary\"\n class=\"gds-background-none\"\n (clicked)=\"closed.emit()\"\n [attr.aria-label]=\"'Dismiss'\"\n >\n <gds-icon\n key=\"line-dismiss\"\n class=\"gds-icon-size-3xs\"\n />\n </button>\n }\n</div>\n@if (loading()) {\n <gds-spinner class=\"\n gds-margin-block-auto\n gds-margin-inline-auto\n \" />\n} @else {\n <div class=\"gds-scrollable-vertically\">\n <ol\n role=\"list\"\n class=\"gds-list-unstyled\"\n >\n @for (item of reversed(); track $index) {\n <li\n gds-timeline-item\n [connectorType]=\"connectorType()\"\n [start]=\"$last\"\n [end]=\"$first\"\n (mouseenter)=\"itemHovered.emit(item)\"\n (mouseleave)=\"itemHovered.emit(null)\"\n >\n <div\n tag\n class=\"\n gds-display-flex\n gds-justify-content-center\n \"\n >\n @if (item.badgeType === 'icon') {\n <gds-icon\n class=\"\n badge-icon\n gds-background-base\n gds-icon-primary\n gds-icon-size-3xs\n gds-padding-3xs\n gds-radius-2xl\n \"\n [key]=\"item.badgeData | gdsSvgicon\"\n />\n } @else {\n <span\n gds-badge\n [ngClass]=\"{\n 'gds-background-dark-strong gds-text-default-contrast': $first,\n 'gds-background-white': !$first\n }\"\n >{{ item.badgeData }}</span\n >\n }\n </div>\n <div class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n \">\n <div class=\"\n gds-align-items-start\n gds-display-flex\n gds-gap-3xs\n gds-margin-inline-end-3xs\n \">\n <div class=\"\n gds-display-flex\n gds-flex-column\n gds-flex-grow-1\n gds-gap-2xs\n item-content\n \">\n <gds-tooltip\n class=\"\n gds-flex-grow-1\n gds-text-body\n gds-text-primary\n \"\n [tooltip]=\"item.title\"\n onlyTextOverflow\n >\n {{ item.title }}\n </gds-tooltip>\n @for (label of item.labels; track $index) {\n <gds-tooltip\n class=\"\n gds-text-caption\n gds-text-secondary\n \"\n onlyTextOverflow\n [tooltip]=\"label\"\n >\n {{ label }}\n </gds-tooltip>\n }\n <ng-container *ngTemplateOutlet=\"contentTmpl() ?? null; context: { $implicit: item }\" />\n </div>\n @if (menuTmpl() && !$first) {\n <button\n gds-icon-button\n variant=\"primary\"\n class=\"\n gds-background-none\n gds-min-height-0\n \"\n [attr.ariaLabel]=\"'Menu'\"\n [cdkMenuTriggerFor]=\"menu\"\n [cdkMenuPosition]=\"menuPosition\"\n #trigger=\"cdkMenuTriggerFor\"\n >\n <gds-icon\n key=\"filled-menu-more\"\n class=\"gds-icon-size-2xs\"\n />\n </button>\n <ng-template #menu>\n <gds-dropdown
|
|
7851
|
+
], template: "<div class=\"\n gds-align-items-center\n gds-display-flex\n gds-padding-sm\n\">\n <span class=\"\n gds-flex-grow-1\n gds-text-primary-primary\n gds-text-subtitle\n \">{{ title() }}</span>\n @if (!suppressCloseBtn()) {\n <button\n gds-icon-button\n variant=\"primary\"\n class=\"gds-background-none\"\n (clicked)=\"closed.emit()\"\n [attr.aria-label]=\"'Dismiss'\"\n >\n <gds-icon\n key=\"line-dismiss\"\n class=\"gds-icon-size-3xs\"\n />\n </button>\n }\n</div>\n@if (loading()) {\n <gds-spinner class=\"\n gds-margin-block-auto\n gds-margin-inline-auto\n \" />\n} @else {\n <div class=\"gds-scrollable-vertically\">\n <ol\n role=\"list\"\n class=\"gds-list-unstyled\"\n >\n @for (item of reversed(); track $index) {\n <li\n gds-timeline-item\n [connectorType]=\"connectorType()\"\n [start]=\"$last\"\n [end]=\"$first\"\n (mouseenter)=\"itemHovered.emit(item)\"\n (mouseleave)=\"itemHovered.emit(null)\"\n >\n <div\n tag\n class=\"\n gds-display-flex\n gds-justify-content-center\n \"\n >\n @if (item.badgeType === 'icon') {\n <gds-icon\n class=\"\n badge-icon\n gds-background-base\n gds-icon-primary\n gds-icon-size-3xs\n gds-padding-3xs\n gds-radius-2xl\n \"\n [key]=\"item.badgeData | gdsSvgicon\"\n />\n } @else {\n <span\n gds-badge\n [ngClass]=\"{\n 'gds-background-dark-strong gds-text-default-contrast': $first,\n 'gds-background-white': !$first\n }\"\n >{{ item.badgeData }}</span\n >\n }\n </div>\n <div class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n \">\n <div class=\"\n gds-align-items-start\n gds-display-flex\n gds-gap-3xs\n gds-margin-inline-end-3xs\n \">\n <div class=\"\n gds-display-flex\n gds-flex-column\n gds-flex-grow-1\n gds-gap-2xs\n item-content\n \">\n <gds-tooltip\n class=\"\n gds-flex-grow-1\n gds-text-body\n gds-text-primary\n \"\n [tooltip]=\"item.title\"\n onlyTextOverflow\n >\n {{ item.title }}\n </gds-tooltip>\n @for (label of item.labels; track $index) {\n <gds-tooltip\n class=\"\n gds-text-caption\n gds-text-secondary\n \"\n onlyTextOverflow\n [tooltip]=\"label\"\n >\n {{ label }}\n </gds-tooltip>\n }\n <ng-container *ngTemplateOutlet=\"contentTmpl() ?? null; context: { $implicit: item }\" />\n </div>\n @if (menuTmpl() && !$first) {\n <button\n gds-icon-button\n variant=\"primary\"\n class=\"\n gds-background-none\n gds-min-height-0\n \"\n [attr.ariaLabel]=\"'Menu'\"\n [cdkMenuTriggerFor]=\"menu\"\n [cdkMenuPosition]=\"menuPosition\"\n #trigger=\"cdkMenuTriggerFor\"\n >\n <gds-icon\n key=\"filled-menu-more\"\n class=\"gds-icon-size-2xs\"\n />\n </button>\n <ng-template #menu>\n <gds-dropdown\n mobileCancelLabel=\"Cancel\"\n (click)=\"trigger.close()\"\n >\n <ng-container *ngTemplateOutlet=\"menuTmpl() ?? null; context: { $implicit: item }\" />\n </gds-dropdown>\n </ng-template>\n }\n </div>\n </div>\n </li>\n }\n </ol>\n </div>\n}\n", styles: ["@layer design-system{:host{display:flex;flex-direction:column;height:100%;background:var(--gds-palette-background-hover);overflow:hidden}:host .item-content{overflow:hidden}}\n"] }]
|
|
7623
7852
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], connectorType: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectorType", required: false }] }], suppressCloseBtn: [{ type: i0.Input, args: [{ isSignal: true, alias: "suppressCloseBtn", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], itemHovered: [{ type: i0.Output, args: ["itemHovered"] }], contentTmpl: [{ type: i0.ContentChild, args: ['contentTmpl', { isSignal: true }] }], menuTmpl: [{ type: i0.ContentChild, args: ['menuTmpl', { isSignal: true }] }] } });
|
|
7624
7853
|
|
|
7625
7854
|
class StylableButtonComponent {
|
|
@@ -7639,6 +7868,7 @@ class GdsChatExpandableListComponent {
|
|
|
7639
7868
|
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
7640
7869
|
displayLimit = input(1, { ...(ngDevMode ? { debugName: "displayLimit" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
7641
7870
|
onlyEmitExpandedEvent = input(false, { ...(ngDevMode ? { debugName: "onlyEmitExpandedEvent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
7871
|
+
expandAriaLabel = input('Show additional items', ...(ngDevMode ? [{ debugName: "expandAriaLabel" }] : /* istanbul ignore next */ []));
|
|
7642
7872
|
expandClicked = output();
|
|
7643
7873
|
expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
|
|
7644
7874
|
hiddenCount = computed(() => this.items().length - this.displayLimit(), ...(ngDevMode ? [{ debugName: "hiddenCount" }] : /* istanbul ignore next */ []));
|
|
@@ -7653,12 +7883,12 @@ class GdsChatExpandableListComponent {
|
|
|
7653
7883
|
this.expanded.set(true);
|
|
7654
7884
|
}
|
|
7655
7885
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsChatExpandableListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7656
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsChatExpandableListComponent, isStandalone: true, selector: "dl[gds-chat-expandable-list]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, displayLimit: { classPropertyName: "displayLimit", publicName: "displayLimit", isSignal: true, isRequired: false, transformFunction: null }, onlyEmitExpandedEvent: { classPropertyName: "onlyEmitExpandedEvent", publicName: "onlyEmitExpandedEvent", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandClicked: "expandClicked", expanded: "expandedChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"dt\">\n <dt class=\"gds-display-none\"></dt>\n</ng-content>\n@for (item of displayItems(); track $index) {\n <dd class=\"gds-expandable-list_item\">\n <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item, index: $index }\" />\n @if ($last && showExpandAction()) {\n <gds-stylable-button\n (click)=\"expand()\"\n class=\"gds-expandable-list_action\"\n >\n <span\n gds-badge\n [attr.aria-label]=\"
|
|
7886
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsChatExpandableListComponent, isStandalone: true, selector: "dl[gds-chat-expandable-list]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, displayLimit: { classPropertyName: "displayLimit", publicName: "displayLimit", isSignal: true, isRequired: false, transformFunction: null }, onlyEmitExpandedEvent: { classPropertyName: "onlyEmitExpandedEvent", publicName: "onlyEmitExpandedEvent", isSignal: true, isRequired: false, transformFunction: null }, expandAriaLabel: { classPropertyName: "expandAriaLabel", publicName: "expandAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandClicked: "expandClicked", expanded: "expandedChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"dt\">\n <dt class=\"gds-display-none\"></dt>\n</ng-content>\n@for (item of displayItems(); track $index) {\n <dd class=\"gds-expandable-list_item\">\n <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item, index: $index }\" />\n @if ($last && showExpandAction()) {\n <gds-stylable-button\n (click)=\"expand()\"\n class=\"gds-expandable-list_action\"\n >\n <span\n gds-badge\n [attr.aria-label]=\"expandAriaLabel()\"\n >\n +{{ hiddenCount() }}\n </span>\n </gds-stylable-button>\n }\n </dd>\n}\n<ng-content select=\"[trailing]\" />\n", styles: ["@layer design-system{:host{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gds-spacing-2xs)}:host .gds-expandable-list_item{display:flex;align-items:center;min-width:0}:host .gds-expandable-list_action{margin-inline-start:var(--gds-spacing-2xs)}}\n"], dependencies: [{ kind: "component", type: GdsBadgeComponent, selector: "span[gds-badge]", inputs: ["icon", "tooltip", "tooltipInteractive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StylableButtonComponent, selector: "gds-stylable-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7657
7887
|
}
|
|
7658
7888
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsChatExpandableListComponent, decorators: [{
|
|
7659
7889
|
type: Component,
|
|
7660
|
-
args: [{ selector: 'dl[gds-chat-expandable-list]', imports: [GdsBadgeComponent, NgTemplateOutlet, StylableButtonComponent
|
|
7661
|
-
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], displayLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayLimit", required: false }] }], onlyEmitExpandedEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyEmitExpandedEvent", required: false }] }], expandClicked: [{ type: i0.Output, args: ["expandClicked"] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
|
|
7890
|
+
args: [{ selector: 'dl[gds-chat-expandable-list]', imports: [GdsBadgeComponent, NgTemplateOutlet, StylableButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"dt\">\n <dt class=\"gds-display-none\"></dt>\n</ng-content>\n@for (item of displayItems(); track $index) {\n <dd class=\"gds-expandable-list_item\">\n <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item, index: $index }\" />\n @if ($last && showExpandAction()) {\n <gds-stylable-button\n (click)=\"expand()\"\n class=\"gds-expandable-list_action\"\n >\n <span\n gds-badge\n [attr.aria-label]=\"expandAriaLabel()\"\n >\n +{{ hiddenCount() }}\n </span>\n </gds-stylable-button>\n }\n </dd>\n}\n<ng-content select=\"[trailing]\" />\n", styles: ["@layer design-system{:host{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gds-spacing-2xs)}:host .gds-expandable-list_item{display:flex;align-items:center;min-width:0}:host .gds-expandable-list_action{margin-inline-start:var(--gds-spacing-2xs)}}\n"] }]
|
|
7891
|
+
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], displayLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayLimit", required: false }] }], onlyEmitExpandedEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyEmitExpandedEvent", required: false }] }], expandAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandAriaLabel", required: false }] }], expandClicked: [{ type: i0.Output, args: ["expandClicked"] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
|
|
7662
7892
|
|
|
7663
7893
|
class GdsMessageInputComponent {
|
|
7664
7894
|
mode = input('type', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
@@ -7666,9 +7896,9 @@ class GdsMessageInputComponent {
|
|
|
7666
7896
|
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
7667
7897
|
suppressClearOnSubmit = input(false, { ...(ngDevMode ? { debugName: "suppressClearOnSubmit" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
7668
7898
|
enableIcon = input(false, { ...(ngDevMode ? { debugName: "enableIcon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
7669
|
-
textareaAriaLabel = input('
|
|
7670
|
-
sendButtonAriaLabel = input('
|
|
7671
|
-
cancelButtonAriaLabel = input('
|
|
7899
|
+
textareaAriaLabel = input('Message input', ...(ngDevMode ? [{ debugName: "textareaAriaLabel" }] : /* istanbul ignore next */ []));
|
|
7900
|
+
sendButtonAriaLabel = input('Send message', ...(ngDevMode ? [{ debugName: "sendButtonAriaLabel" }] : /* istanbul ignore next */ []));
|
|
7901
|
+
cancelButtonAriaLabel = input('Cancel message', ...(ngDevMode ? [{ debugName: "cancelButtonAriaLabel" }] : /* istanbul ignore next */ []));
|
|
7672
7902
|
sent = output();
|
|
7673
7903
|
canceled = output();
|
|
7674
7904
|
changed = output();
|
|
@@ -7728,7 +7958,7 @@ class GdsMessageInputComponent {
|
|
|
7728
7958
|
this.textarea().nativeElement.focus();
|
|
7729
7959
|
}
|
|
7730
7960
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsMessageInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7731
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsMessageInputComponent, isStandalone: true, selector: "gds-message-input", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, suppressClearOnSubmit: { classPropertyName: "suppressClearOnSubmit", publicName: "suppressClearOnSubmit", isSignal: true, isRequired: false, transformFunction: null }, enableIcon: { classPropertyName: "enableIcon", publicName: "enableIcon", isSignal: true, isRequired: false, transformFunction: null }, textareaAriaLabel: { classPropertyName: "textareaAriaLabel", publicName: "textareaAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, sendButtonAriaLabel: { classPropertyName: "sendButtonAriaLabel", publicName: "sendButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonAriaLabel: { classPropertyName: "cancelButtonAriaLabel", publicName: "cancelButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sent: "sent", canceled: "canceled", changed: "changed", value: "valueChange" }, host: { properties: { "attr.aria-disabled": "disabled()", "class.gds-background-disabled": "disabled()", "class.gds-padding-block-end-2xs": "hasChildren()" }, classAttribute: "\n gds-display-flex\n gds-align-items-center\n gds-border\n gds-border-color-default\n gds-radius-lg\n gds-padding-xs\n gds-padding-inline-2xs\n gds-background-white\n gds-position-relative\n gds-overflow-hidden\n\n gds-mobile-radius-sm\n gds-mobile-padding-0\n " }, viewQueries: [{ propertyName: "textarea", first: true, predicate: GdsNativeTextareaDirective, descendants: true, isSignal: true }, { propertyName: "slot", first: true, predicate: ["slot"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-xs\n gds-width-100-parent\n\">\n <gds-auto-growing-text-area\n class=\"\n gds-mobile-padding-block-2xs\n gds-mobile-text-input-mobile\n gds-padding-block-3xs\n gds-padding-inline-2xs\n gds-text-input\n gds-text-primary\n textarea\n \"\n [ngClass]=\"{ 'gds-padding-inline-end-md': !hasChildren() }\"\n [maxRows]=\"8\"\n >\n <textarea\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n rows=\"1\"\n (input)=\"handleChange($event)\"\n (keydown.enter)=\"handleSubmit($event)\"\n [attr.aria-label]=\"textareaAriaLabel()
|
|
7961
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsMessageInputComponent, isStandalone: true, selector: "gds-message-input", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, suppressClearOnSubmit: { classPropertyName: "suppressClearOnSubmit", publicName: "suppressClearOnSubmit", isSignal: true, isRequired: false, transformFunction: null }, enableIcon: { classPropertyName: "enableIcon", publicName: "enableIcon", isSignal: true, isRequired: false, transformFunction: null }, textareaAriaLabel: { classPropertyName: "textareaAriaLabel", publicName: "textareaAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, sendButtonAriaLabel: { classPropertyName: "sendButtonAriaLabel", publicName: "sendButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonAriaLabel: { classPropertyName: "cancelButtonAriaLabel", publicName: "cancelButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sent: "sent", canceled: "canceled", changed: "changed", value: "valueChange" }, host: { properties: { "attr.aria-disabled": "disabled()", "class.gds-background-disabled": "disabled()", "class.gds-padding-block-end-2xs": "hasChildren()" }, classAttribute: "\n gds-display-flex\n gds-align-items-center\n gds-border\n gds-border-color-default\n gds-radius-lg\n gds-padding-xs\n gds-padding-inline-2xs\n gds-background-white\n gds-position-relative\n gds-overflow-hidden\n\n gds-mobile-radius-sm\n gds-mobile-padding-0\n " }, viewQueries: [{ propertyName: "textarea", first: true, predicate: GdsNativeTextareaDirective, descendants: true, isSignal: true }, { propertyName: "slot", first: true, predicate: ["slot"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-xs\n gds-width-100-parent\n\">\n <gds-auto-growing-text-area\n class=\"\n gds-mobile-padding-block-2xs\n gds-mobile-text-input-mobile\n gds-padding-block-3xs\n gds-padding-inline-2xs\n gds-text-input\n gds-text-primary\n textarea\n \"\n [ngClass]=\"{ 'gds-padding-inline-end-md': !hasChildren() }\"\n [maxRows]=\"8\"\n >\n <textarea\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n rows=\"1\"\n (input)=\"handleChange($event)\"\n (keydown.enter)=\"handleSubmit($event)\"\n [attr.aria-label]=\"textareaAriaLabel()\"\n >{{ value() }}</textarea\n >\n </gds-auto-growing-text-area>\n <div\n #slot\n class=\"gds-display-contents\"\n [ngClass]=\"{ 'gds-display-none': !hasChildren() }\"\n >\n <ng-content />\n </div>\n</div>\n<button\n gds-icon-button\n class=\"\n gds-align-self-end\n gds-background-none\n gds-margin-block-end-0\n gds-mobile-right-0\n gds-padding-0\n gds-right-2xs\n trailing-icon\n \"\n variant=\"primary\"\n [disabled]=\"disabled() && !enableIcon()\"\n (clicked)=\"handleSubmit()\"\n (mouseenter)=\"iconHoveringChanged($event)\"\n (mouseleave)=\"iconHoveringChanged($event)\"\n [attr.aria-label]=\"iconAriaLabel()\"\n>\n <gds-icon\n [key]=\"icon()\"\n class=\"\n gds-icon-size-xs\n gds-mobile-icon-size-2xs\n \"\n />\n</button>\n", styles: ["@layer design-system{:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--gds-palette-border-selected);border-radius:var(--gds-borderRadius-xs)}:is(body[isMobile=true]) :host .textarea{--placeholder-color: var(--gds-palette-text-default-placeholder)}:is(body[isMobile=true]) :host .trailing-icon:focus-visible{outline-offset:calc(var(--gds-spacing-3xs) * -1)}:host[aria-disabled=true]{cursor:not-allowed}:host .trailing-icon{border-color:transparent;box-sizing:content-box}}\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: GdsAutoGrowingTextareaComponent, selector: "gds-auto-growing-text-area", inputs: ["maxRows"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: GdsNativeTextareaDirective, selector: "textarea" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7732
7962
|
}
|
|
7733
7963
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsMessageInputComponent, decorators: [{
|
|
7734
7964
|
type: Component,
|
|
@@ -7737,8 +7967,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
7737
7967
|
GdsIconButtonComponent,
|
|
7738
7968
|
GdsAutoGrowingTextareaComponent,
|
|
7739
7969
|
NgClass,
|
|
7740
|
-
GdsNativeTextareaDirective
|
|
7741
|
-
TranslatePipe
|
|
7970
|
+
GdsNativeTextareaDirective
|
|
7742
7971
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
7743
7972
|
'[attr.aria-disabled]': 'disabled()',
|
|
7744
7973
|
class: `
|
|
@@ -7758,7 +7987,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
7758
7987
|
`,
|
|
7759
7988
|
'[class.gds-background-disabled]': 'disabled()',
|
|
7760
7989
|
'[class.gds-padding-block-end-2xs]': 'hasChildren()'
|
|
7761
|
-
}, template: "<div class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-xs\n gds-width-100-parent\n\">\n <gds-auto-growing-text-area\n class=\"\n gds-mobile-padding-block-2xs\n gds-mobile-text-input-mobile\n gds-padding-block-3xs\n gds-padding-inline-2xs\n gds-text-input\n gds-text-primary\n textarea\n \"\n [ngClass]=\"{ 'gds-padding-inline-end-md': !hasChildren() }\"\n [maxRows]=\"8\"\n >\n <textarea\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n rows=\"1\"\n (input)=\"handleChange($event)\"\n (keydown.enter)=\"handleSubmit($event)\"\n [attr.aria-label]=\"textareaAriaLabel()
|
|
7990
|
+
}, template: "<div class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-xs\n gds-width-100-parent\n\">\n <gds-auto-growing-text-area\n class=\"\n gds-mobile-padding-block-2xs\n gds-mobile-text-input-mobile\n gds-padding-block-3xs\n gds-padding-inline-2xs\n gds-text-input\n gds-text-primary\n textarea\n \"\n [ngClass]=\"{ 'gds-padding-inline-end-md': !hasChildren() }\"\n [maxRows]=\"8\"\n >\n <textarea\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n rows=\"1\"\n (input)=\"handleChange($event)\"\n (keydown.enter)=\"handleSubmit($event)\"\n [attr.aria-label]=\"textareaAriaLabel()\"\n >{{ value() }}</textarea\n >\n </gds-auto-growing-text-area>\n <div\n #slot\n class=\"gds-display-contents\"\n [ngClass]=\"{ 'gds-display-none': !hasChildren() }\"\n >\n <ng-content />\n </div>\n</div>\n<button\n gds-icon-button\n class=\"\n gds-align-self-end\n gds-background-none\n gds-margin-block-end-0\n gds-mobile-right-0\n gds-padding-0\n gds-right-2xs\n trailing-icon\n \"\n variant=\"primary\"\n [disabled]=\"disabled() && !enableIcon()\"\n (clicked)=\"handleSubmit()\"\n (mouseenter)=\"iconHoveringChanged($event)\"\n (mouseleave)=\"iconHoveringChanged($event)\"\n [attr.aria-label]=\"iconAriaLabel()\"\n>\n <gds-icon\n [key]=\"icon()\"\n class=\"\n gds-icon-size-xs\n gds-mobile-icon-size-2xs\n \"\n />\n</button>\n", styles: ["@layer design-system{:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--gds-palette-border-selected);border-radius:var(--gds-borderRadius-xs)}:is(body[isMobile=true]) :host .textarea{--placeholder-color: var(--gds-palette-text-default-placeholder)}:is(body[isMobile=true]) :host .trailing-icon:focus-visible{outline-offset:calc(var(--gds-spacing-3xs) * -1)}:host[aria-disabled=true]{cursor:not-allowed}:host .trailing-icon{border-color:transparent;box-sizing:content-box}}\n"] }]
|
|
7762
7991
|
}], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], suppressClearOnSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "suppressClearOnSubmit", required: false }] }], enableIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableIcon", required: false }] }], textareaAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "textareaAriaLabel", required: false }] }], sendButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sendButtonAriaLabel", required: false }] }], cancelButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonAriaLabel", required: false }] }], sent: [{ type: i0.Output, args: ["sent"] }], canceled: [{ type: i0.Output, args: ["canceled"] }], changed: [{ type: i0.Output, args: ["changed"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], textarea: [{ type: i0.ViewChild, args: [i0.forwardRef(() => GdsNativeTextareaDirective), { isSignal: true }] }], slot: [{ type: i0.ViewChild, args: ['slot', { isSignal: true }] }] } });
|
|
7763
7992
|
|
|
7764
7993
|
class GdsChatPromptComponent {
|
|
@@ -8061,16 +8290,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
8061
8290
|
}]
|
|
8062
8291
|
}], 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"] }] } });
|
|
8063
8292
|
|
|
8064
|
-
const provideToaster = (customOptions = {}) => {
|
|
8065
|
-
const defaultOptions = {
|
|
8066
|
-
toastComponent: GdsToastComponent,
|
|
8067
|
-
timeOut: 5000,
|
|
8068
|
-
positionClass: 'toast-top-left',
|
|
8069
|
-
preventDuplicates: true
|
|
8070
|
-
};
|
|
8071
|
-
return provideToastr({ ...defaultOptions, ...customOptions });
|
|
8072
|
-
};
|
|
8073
|
-
|
|
8074
8293
|
const OPERATING_SYSTEM = {
|
|
8075
8294
|
windows: 'windows',
|
|
8076
8295
|
mac: 'mac',
|
|
@@ -8132,7 +8351,7 @@ class GdsModule {
|
|
|
8132
8351
|
switch (env) {
|
|
8133
8352
|
case 'local':
|
|
8134
8353
|
case 'dev':
|
|
8135
|
-
cdnUrl = 'https://cdn.cortoaws.com';
|
|
8354
|
+
cdnUrl = 'https://cdn.dev.cortoaws.com';
|
|
8136
8355
|
break;
|
|
8137
8356
|
case 'test':
|
|
8138
8357
|
cdnUrl = 'https://cdn.test.cortoaws.com';
|
|
@@ -8229,5 +8448,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
8229
8448
|
* Generated bundle index. Do not edit.
|
|
8230
8449
|
*/
|
|
8231
8450
|
|
|
8232
|
-
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 };
|
|
8451
|
+
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 };
|
|
8233
8452
|
//# sourceMappingURL=corto-ai-gds-angular.mjs.map
|