@guildofgleks/ui 0.0.1 → 0.2.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/LICENSE +21 -0
- package/README.md +192 -64
- package/fesm2022/guildofgleks-ui.mjs +1019 -911
- package/fesm2022/guildofgleks-ui.mjs.map +1 -1
- package/package.json +19 -2
- package/src/styles/fonts.css +16 -17
- package/src/styles/index.css +17 -3
- package/src/styles/theme.css +943 -0
- package/src/styles/typography.css +15 -15
- package/src/styles/utilities.css +33 -27
- package/types/guildofgleks-ui.d.ts +421 -161
- package/src/styles/tokens.scss +0 -82
|
@@ -1,24 +1,31 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, ChangeDetectionStrategy, Component, output, computed, inject, DestroyRef, TemplateRef, Directive,
|
|
2
|
+
import { input, ChangeDetectionStrategy, Component, output, computed, inject, DestroyRef, TemplateRef, Directive, model, contentChild, ElementRef, signal, effect, untracked, forwardRef, InjectionToken, Injectable, Injector, viewChild, afterNextRender, PLATFORM_ID, ApplicationRef, contentChildren, linkedSignal } from '@angular/core';
|
|
3
3
|
import { Subject, timer } from 'rxjs';
|
|
4
4
|
import { throttle } from 'rxjs/operators';
|
|
5
|
-
import { takeUntilDestroyed
|
|
5
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
6
6
|
import { NgTemplateOutlet, DOCUMENT, NgComponentOutlet, isPlatformBrowser } from '@angular/common';
|
|
7
|
+
import { DomSanitizer } from '@angular/platform-browser';
|
|
7
8
|
import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
|
|
8
9
|
|
|
9
10
|
class SpinnerComponent {
|
|
10
11
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
11
12
|
overlay = input(false, ...(ngDevMode ? [{ debugName: "overlay" }] : /* istanbul ignore next */ []));
|
|
12
13
|
ariaLabel = input('Loading', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
14
|
+
/**
|
|
15
|
+
* `runic` and `ring` are built-in presets. Use `custom` to render your own
|
|
16
|
+
* markup via content projection — it inherits the size wrapper, overlay
|
|
17
|
+
* behaviour, and `--gog-spinner-color` theming, but the visuals are yours.
|
|
18
|
+
*/
|
|
19
|
+
variant = input('runic', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
13
20
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SpinnerComponent, isStandalone: true, selector: "gog-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "gog-inline-center" }, ngImport: i0, template: "@if (overlay()) {\n <div class=\"gog-spinner__overlay gog-flex-center\">\n <div class=\"gog-spinner__wrap gog-contained-layout gog-spinner__wrap--{{ size() }}\">\n <ng-container *ngTemplateOutlet=\"spinnerTpl\" />\n </div>\n </div>\n} @else {\n <div class=\"gog-spinner__wrap gog-contained-layout gog-spinner__wrap--{{ size() }}\">\n <ng-container *ngTemplateOutlet=\"spinnerTpl\" />\n </div>\n}\n\n<ng-template #spinnerTpl>\n <svg class=\"gog-spinner__svg\" viewBox=\"0 0 64 64\" fill=\"none\" aria-hidden=\"true\">\n
|
|
21
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SpinnerComponent, isStandalone: true, selector: "gog-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "gog-inline-center" }, ngImport: i0, template: "@if (overlay()) {\n <div class=\"gog-spinner__overlay gog-flex-center\">\n <div class=\"gog-spinner__wrap gog-contained-layout gog-spinner__wrap--{{ size() }}\">\n <ng-container *ngTemplateOutlet=\"spinnerTpl\" />\n </div>\n </div>\n} @else {\n <div class=\"gog-spinner__wrap gog-contained-layout gog-spinner__wrap--{{ size() }}\">\n <ng-container *ngTemplateOutlet=\"spinnerTpl\" />\n </div>\n}\n\n<ng-template #spinnerTpl>\n @switch (variant()) {\n @case ('ring') {\n <span class=\"gog-spinner__ring\" aria-hidden=\"true\"></span>\n }\n @case ('custom') {\n <ng-content />\n }\n @default {\n <svg class=\"gog-spinner__svg\" viewBox=\"0 0 64 64\" fill=\"none\" aria-hidden=\"true\">\n <!-- Static dim track -->\n <circle class=\"gog-spinner__track\" cx=\"32\" cy=\"32\" r=\"26\" stroke-width=\"1.5\" />\n\n <!-- Outer arc \u2014 rotates clockwise, long segment -->\n <circle\n class=\"gog-spinner__arc-outer\"\n cx=\"32\"\n cy=\"32\"\n r=\"26\"\n stroke-width=\"2.5\"\n stroke-linecap=\"butt\"\n />\n\n <!-- Inner arc \u2014 rotates counter-clockwise, short segment -->\n <circle\n class=\"gog-spinner__arc-inner\"\n cx=\"32\"\n cy=\"32\"\n r=\"18\"\n stroke-width=\"1.5\"\n stroke-linecap=\"butt\"\n />\n\n <!-- Rotating diamond ticks group \u2014 single transform on <g> works correctly -->\n <g class=\"gog-spinner__ticks\">\n <polygon points=\"32,3 34,6 32,9 30,6\" class=\"gog-spinner__diamond\" />\n <polygon points=\"32,55 34,58 32,61 30,58\" class=\"gog-spinner__diamond\" />\n <polygon points=\"3,32 6,30 9,32 6,34\" class=\"gog-spinner__diamond\" />\n <polygon points=\"55,32 58,30 61,32 58,34\" class=\"gog-spinner__diamond\" />\n </g>\n\n <!-- Inner rune \u2014 glow pulse only, no transform -->\n <text\n class=\"gog-spinner__rune-wrap gog-spinner__rune\"\n x=\"32\"\n y=\"32\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n >\n \u2726\n </text>\n </svg>\n }\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-spinner__overlay{position:fixed;inset:0;z-index:var(--gog-spinner-overlay-z);background:var(--gog-spinner-overlay-bg);-webkit-backdrop-filter:blur(var(--gog-spinner-overlay-blur));backdrop-filter:blur(var(--gog-spinner-overlay-blur));animation:gog-spinner-fade-in var(--gog-spinner-overlay-fade-duration) var(--gog-easing)}.gog-spinner__wrap{flex-shrink:0}.gog-spinner__wrap--xsm{width:var(--gog-spinner-size-xsm);height:var(--gog-spinner-size-xsm)}.gog-spinner__wrap--sm{width:var(--gog-spinner-size-sm);height:var(--gog-spinner-size-sm)}.gog-spinner__wrap--md{width:var(--gog-spinner-size-md);height:var(--gog-spinner-size-md)}.gog-spinner__wrap--lg{width:var(--gog-spinner-size-lg);height:var(--gog-spinner-size-lg)}.gog-spinner__wrap--slg{width:var(--gog-spinner-size-slg);height:var(--gog-spinner-size-slg)}.gog-spinner__svg{width:100%;height:100%;overflow:visible}.gog-spinner__track{stroke:var(--gog-spinner-color, var(--gog-spinner-track-color));opacity:var(--gog-spinner-track-opacity)}.gog-spinner__arc-outer{stroke:var(--gog-spinner-color, var(--gog-spinner-arc-outer-color));stroke-dasharray:var(--gog-spinner-arc-outer-dash);transform-origin:32px 32px;animation:gog-spin-cw var(--gog-spinner-spin-duration) linear infinite,gog-arc-outer-pulse var(--gog-spinner-pulse-duration) ease-in-out infinite;filter:drop-shadow(0 0 var(--gog-spinner-arc-outer-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)))}.gog-spinner__arc-inner{stroke:var(--gog-spinner-color, var(--gog-spinner-arc-inner-color));stroke-dasharray:var(--gog-spinner-arc-inner-dash);transform-origin:32px 32px;animation:gog-spin-ccw var(--gog-spinner-spin-slow-duration) linear infinite,gog-arc-inner-pulse var(--gog-spinner-pulse-duration) ease-in-out infinite;filter:drop-shadow(0 0 var(--gog-spinner-arc-inner-glow) var(--gog-spinner-color, var(--gog-spinner-arc-inner-color)));opacity:var(--gog-spinner-arc-inner-opacity)}.gog-spinner__ticks{transform-origin:32px 32px;animation:gog-spin-ccw var(--gog-spinner-ticks-duration) linear infinite}.gog-spinner__diamond{fill:var(--gog-spinner-color, var(--gog-spinner-diamond-color));opacity:var(--gog-spinner-diamond-opacity);filter:drop-shadow(0 0 var(--gog-spinner-diamond-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)))}.gog-spinner__rune-wrap{animation:gog-rune-pulse var(--gog-spinner-pulse-duration) ease-in-out infinite;filter:drop-shadow(0 0 var(--gog-spinner-rune-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)))}.gog-spinner__rune{font-family:var(--gog-spinner-rune-font-family);fill:var(--gog-spinner-color, var(--gog-spinner-rune-color));font-size:var(--gog-spinner-rune-size)}.gog-spinner__wrap--xsm .gog-spinner__arc-inner,.gog-spinner__wrap--sm .gog-spinner__arc-inner{stroke-width:var(--gog-spinner-arc-inner-stroke-compact)}.gog-spinner__ring{display:block;box-sizing:border-box;width:100%;height:100%;padding:var(--gog-spinner-ring-padding);border-radius:50%;background:var(--gog-spinner-color, var(--gog-spinner-arc-outer-color));-webkit-mask:var(--gog-spinner-ring-mask);mask:var(--gog-spinner-ring-mask);-webkit-mask-composite:source-out;mask-composite:subtract;animation:gog-spin-cw var(--gog-spinner-ring-duration) infinite linear;filter:drop-shadow(0 0 var(--gog-spinner-ring-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)));--gog-spinner-ring-mask: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box}@keyframes gog-spin-cw{to{transform:rotate(360deg)}}@keyframes gog-spin-ccw{to{transform:rotate(-360deg)}}@keyframes gog-arc-outer-pulse{0%,to{opacity:1}50%{opacity:var(--gog-spinner-arc-outer-pulse-opacity)}}@keyframes gog-arc-inner-pulse{0%,to{opacity:var(--gog-spinner-arc-inner-opacity)}50%{opacity:var(--gog-spinner-arc-inner-pulse-opacity)}}@keyframes gog-rune-pulse{0%,to{opacity:1}50%{opacity:var(--gog-spinner-rune-pulse-opacity)}}@keyframes gog-spinner-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.gog-spinner__arc-outer,.gog-spinner__arc-inner,.gog-spinner__ticks,.gog-spinner__rune-wrap,.gog-spinner__ring{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
15
22
|
}
|
|
16
23
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
17
24
|
type: Component,
|
|
18
25
|
args: [{ selector: 'gog-spinner', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
19
26
|
class: 'gog-inline-center',
|
|
20
|
-
}, template: "@if (overlay()) {\n <div class=\"gog-spinner__overlay gog-flex-center\">\n <div class=\"gog-spinner__wrap gog-contained-layout gog-spinner__wrap--{{ size() }}\">\n <ng-container *ngTemplateOutlet=\"spinnerTpl\" />\n </div>\n </div>\n} @else {\n <div class=\"gog-spinner__wrap gog-contained-layout gog-spinner__wrap--{{ size() }}\">\n <ng-container *ngTemplateOutlet=\"spinnerTpl\" />\n </div>\n}\n\n<ng-template #spinnerTpl>\n <svg class=\"gog-spinner__svg\" viewBox=\"0 0 64 64\" fill=\"none\" aria-hidden=\"true\">\n
|
|
21
|
-
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], overlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlay", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
27
|
+
}, template: "@if (overlay()) {\n <div class=\"gog-spinner__overlay gog-flex-center\">\n <div class=\"gog-spinner__wrap gog-contained-layout gog-spinner__wrap--{{ size() }}\">\n <ng-container *ngTemplateOutlet=\"spinnerTpl\" />\n </div>\n </div>\n} @else {\n <div class=\"gog-spinner__wrap gog-contained-layout gog-spinner__wrap--{{ size() }}\">\n <ng-container *ngTemplateOutlet=\"spinnerTpl\" />\n </div>\n}\n\n<ng-template #spinnerTpl>\n @switch (variant()) {\n @case ('ring') {\n <span class=\"gog-spinner__ring\" aria-hidden=\"true\"></span>\n }\n @case ('custom') {\n <ng-content />\n }\n @default {\n <svg class=\"gog-spinner__svg\" viewBox=\"0 0 64 64\" fill=\"none\" aria-hidden=\"true\">\n <!-- Static dim track -->\n <circle class=\"gog-spinner__track\" cx=\"32\" cy=\"32\" r=\"26\" stroke-width=\"1.5\" />\n\n <!-- Outer arc \u2014 rotates clockwise, long segment -->\n <circle\n class=\"gog-spinner__arc-outer\"\n cx=\"32\"\n cy=\"32\"\n r=\"26\"\n stroke-width=\"2.5\"\n stroke-linecap=\"butt\"\n />\n\n <!-- Inner arc \u2014 rotates counter-clockwise, short segment -->\n <circle\n class=\"gog-spinner__arc-inner\"\n cx=\"32\"\n cy=\"32\"\n r=\"18\"\n stroke-width=\"1.5\"\n stroke-linecap=\"butt\"\n />\n\n <!-- Rotating diamond ticks group \u2014 single transform on <g> works correctly -->\n <g class=\"gog-spinner__ticks\">\n <polygon points=\"32,3 34,6 32,9 30,6\" class=\"gog-spinner__diamond\" />\n <polygon points=\"32,55 34,58 32,61 30,58\" class=\"gog-spinner__diamond\" />\n <polygon points=\"3,32 6,30 9,32 6,34\" class=\"gog-spinner__diamond\" />\n <polygon points=\"55,32 58,30 61,32 58,34\" class=\"gog-spinner__diamond\" />\n </g>\n\n <!-- Inner rune \u2014 glow pulse only, no transform -->\n <text\n class=\"gog-spinner__rune-wrap gog-spinner__rune\"\n x=\"32\"\n y=\"32\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n >\n \u2726\n </text>\n </svg>\n }\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-spinner__overlay{position:fixed;inset:0;z-index:var(--gog-spinner-overlay-z);background:var(--gog-spinner-overlay-bg);-webkit-backdrop-filter:blur(var(--gog-spinner-overlay-blur));backdrop-filter:blur(var(--gog-spinner-overlay-blur));animation:gog-spinner-fade-in var(--gog-spinner-overlay-fade-duration) var(--gog-easing)}.gog-spinner__wrap{flex-shrink:0}.gog-spinner__wrap--xsm{width:var(--gog-spinner-size-xsm);height:var(--gog-spinner-size-xsm)}.gog-spinner__wrap--sm{width:var(--gog-spinner-size-sm);height:var(--gog-spinner-size-sm)}.gog-spinner__wrap--md{width:var(--gog-spinner-size-md);height:var(--gog-spinner-size-md)}.gog-spinner__wrap--lg{width:var(--gog-spinner-size-lg);height:var(--gog-spinner-size-lg)}.gog-spinner__wrap--slg{width:var(--gog-spinner-size-slg);height:var(--gog-spinner-size-slg)}.gog-spinner__svg{width:100%;height:100%;overflow:visible}.gog-spinner__track{stroke:var(--gog-spinner-color, var(--gog-spinner-track-color));opacity:var(--gog-spinner-track-opacity)}.gog-spinner__arc-outer{stroke:var(--gog-spinner-color, var(--gog-spinner-arc-outer-color));stroke-dasharray:var(--gog-spinner-arc-outer-dash);transform-origin:32px 32px;animation:gog-spin-cw var(--gog-spinner-spin-duration) linear infinite,gog-arc-outer-pulse var(--gog-spinner-pulse-duration) ease-in-out infinite;filter:drop-shadow(0 0 var(--gog-spinner-arc-outer-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)))}.gog-spinner__arc-inner{stroke:var(--gog-spinner-color, var(--gog-spinner-arc-inner-color));stroke-dasharray:var(--gog-spinner-arc-inner-dash);transform-origin:32px 32px;animation:gog-spin-ccw var(--gog-spinner-spin-slow-duration) linear infinite,gog-arc-inner-pulse var(--gog-spinner-pulse-duration) ease-in-out infinite;filter:drop-shadow(0 0 var(--gog-spinner-arc-inner-glow) var(--gog-spinner-color, var(--gog-spinner-arc-inner-color)));opacity:var(--gog-spinner-arc-inner-opacity)}.gog-spinner__ticks{transform-origin:32px 32px;animation:gog-spin-ccw var(--gog-spinner-ticks-duration) linear infinite}.gog-spinner__diamond{fill:var(--gog-spinner-color, var(--gog-spinner-diamond-color));opacity:var(--gog-spinner-diamond-opacity);filter:drop-shadow(0 0 var(--gog-spinner-diamond-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)))}.gog-spinner__rune-wrap{animation:gog-rune-pulse var(--gog-spinner-pulse-duration) ease-in-out infinite;filter:drop-shadow(0 0 var(--gog-spinner-rune-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)))}.gog-spinner__rune{font-family:var(--gog-spinner-rune-font-family);fill:var(--gog-spinner-color, var(--gog-spinner-rune-color));font-size:var(--gog-spinner-rune-size)}.gog-spinner__wrap--xsm .gog-spinner__arc-inner,.gog-spinner__wrap--sm .gog-spinner__arc-inner{stroke-width:var(--gog-spinner-arc-inner-stroke-compact)}.gog-spinner__ring{display:block;box-sizing:border-box;width:100%;height:100%;padding:var(--gog-spinner-ring-padding);border-radius:50%;background:var(--gog-spinner-color, var(--gog-spinner-arc-outer-color));-webkit-mask:var(--gog-spinner-ring-mask);mask:var(--gog-spinner-ring-mask);-webkit-mask-composite:source-out;mask-composite:subtract;animation:gog-spin-cw var(--gog-spinner-ring-duration) infinite linear;filter:drop-shadow(0 0 var(--gog-spinner-ring-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)));--gog-spinner-ring-mask: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box}@keyframes gog-spin-cw{to{transform:rotate(360deg)}}@keyframes gog-spin-ccw{to{transform:rotate(-360deg)}}@keyframes gog-arc-outer-pulse{0%,to{opacity:1}50%{opacity:var(--gog-spinner-arc-outer-pulse-opacity)}}@keyframes gog-arc-inner-pulse{0%,to{opacity:var(--gog-spinner-arc-inner-opacity)}50%{opacity:var(--gog-spinner-arc-inner-pulse-opacity)}}@keyframes gog-rune-pulse{0%,to{opacity:1}50%{opacity:var(--gog-spinner-rune-pulse-opacity)}}@keyframes gog-spinner-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.gog-spinner__arc-outer,.gog-spinner__arc-inner,.gog-spinner__ticks,.gog-spinner__rune-wrap,.gog-spinner__ring{animation:none}}\n"] }]
|
|
28
|
+
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], overlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlay", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
22
29
|
|
|
23
30
|
class ButtonComponent {
|
|
24
31
|
variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
@@ -26,11 +33,35 @@ class ButtonComponent {
|
|
|
26
33
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
27
34
|
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
|
|
28
35
|
type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
29
|
-
debounce = input(300, ...(ngDevMode ? [{ debugName: "debounce" }] : /* istanbul ignore next */ []));
|
|
30
36
|
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
37
|
+
/**
|
|
38
|
+
* Minimum time, in ms, between accepted clicks. This is a spam/double-click
|
|
39
|
+
* guard, not a delay before the first click fires: the first click in a
|
|
40
|
+
* window is emitted immediately (leading edge), and any further clicks
|
|
41
|
+
* within `debounce` ms are silently dropped until the window elapses.
|
|
42
|
+
*/
|
|
43
|
+
debounce = input(300, ...(ngDevMode ? [{ debugName: "debounce" }] : /* istanbul ignore next */ []));
|
|
44
|
+
/**
|
|
45
|
+
* Accessible name for the button, forwarded to the native <button>.
|
|
46
|
+
* Setting `aria-label` directly on <gog-button> in a template does NOT
|
|
47
|
+
* work — that attribute lands on the custom element host, not on the
|
|
48
|
+
* actual interactive <button> inside it, so assistive tech never sees it.
|
|
49
|
+
* Use this input instead, especially for icon-only buttons.
|
|
50
|
+
*/
|
|
51
|
+
ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
31
52
|
gogClick = output();
|
|
53
|
+
/** Fully non-interactive: excluded from tab order via the native `disabled` attribute. */
|
|
54
|
+
isNativeDisabled = computed(() => this.disabled(), ...(ngDevMode ? [{ debugName: "isNativeDisabled" }] : /* istanbul ignore next */ []));
|
|
55
|
+
/** Logically blocked from activating (disabled OR loading), used to guard click handling. */
|
|
32
56
|
isDisabled = computed(() => this.disabled() || this.loading(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
33
|
-
|
|
57
|
+
static SPINNER_SIZE_BY_BUTTON_SIZE = {
|
|
58
|
+
xsm: 'sm',
|
|
59
|
+
sm: 'sm',
|
|
60
|
+
md: 'sm',
|
|
61
|
+
lg: 'md',
|
|
62
|
+
slg: 'lg',
|
|
63
|
+
};
|
|
64
|
+
spinnerSize = computed(() => ButtonComponent.SPINNER_SIZE_BY_BUTTON_SIZE[this.size()], ...(ngDevMode ? [{ debugName: "spinnerSize" }] : /* istanbul ignore next */ []));
|
|
34
65
|
destroyRef = inject(DestroyRef);
|
|
35
66
|
click$ = new Subject();
|
|
36
67
|
constructor() {
|
|
@@ -44,12 +75,104 @@ class ButtonComponent {
|
|
|
44
75
|
this.click$.next(event);
|
|
45
76
|
}
|
|
46
77
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
47
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ButtonComponent, isStandalone: true, selector: "gog-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null },
|
|
78
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ButtonComponent, isStandalone: true, selector: "gog-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogClick: "gogClick" }, host: { properties: { "class.gog-host--full-width": "fullWidth()" } }, ngImport: i0, template: "<button\n (click)=\"onClick($event)\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n [attr.aria-disabled]=\"isDisabled() && !isNativeDisabled() ? 'true' : null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.disabled]=\"isNativeDisabled() ? true : null\"\n [class.gog-btn--ghost]=\"variant() === 'ghost'\"\n [class.gog-btn--xsm]=\"size() === 'xsm'\"\n [class.gog-btn--sm]=\"size() === 'sm'\"\n [class.gog-btn--md]=\"size() === 'md'\"\n [class.gog-btn--lg]=\"size() === 'lg'\"\n [class.gog-btn--slg]=\"size() === 'slg'\"\n [class.gog-btn--loading]=\"loading()\"\n [class.gog-btn--outline]=\"variant() === 'outline'\"\n [class.gog-btn--primary]=\"variant() === 'primary'\"\n [class.gog-btn--secondary]=\"variant() === 'secondary'\"\n [class.gog-cursor-not-allowed]=\"isDisabled()\"\n [class.gog-cursor-pointer]=\"!isDisabled()\"\n [class.gog-cursor-wait]=\"loading()\"\n [type]=\"type()\"\n class=\"gog-btn gog-inline-center gog-contained-layout\"\n>\n @if (loading()) {\n <gog-spinner [size]=\"spinnerSize()\" aria-hidden=\"true\" class=\"gog-btn__spinner\" />\n }\n\n <span [class.gog-btn__content--hidden]=\"loading()\" class=\"gog-btn__content\">\n <ng-content></ng-content>\n </span>\n</button>\n", styles: [".gog-btn{--gog-spinner-color: var( --gog-btn-spinner-color, var(--gog-btn-variant-spinner-color, var(--gog-btn-primary-spinner-color)) );gap:var(--gog-btn-gap);border:var(--gog-btn-border-width) var(--gog-btn-border-style) var(--gog-btn-border, var(--gog-btn-variant-border, var(--gog-btn-primary-border)));border-radius:var(--gog-btn-radius);padding:var(--gog-btn-padding, var(--gog-btn-size-padding, var(--gog-btn-md-padding)));font-family:var(--gog-btn-font-family);font-weight:var(--gog-btn-font-weight);font-size:var(--gog-btn-font-size, var(--gog-btn-size-font-size, var(--gog-btn-md-font-size)));letter-spacing:var(--gog-btn-letter-spacing);text-transform:var(--gog-btn-text-transform);line-height:var(--gog-btn-line-height);background-color:var(--gog-btn-bg, var(--gog-btn-variant-bg, var(--gog-btn-primary-bg)));color:var(--gog-btn-color, var(--gog-btn-variant-color, var(--gog-btn-primary-color)));box-shadow:var(--gog-btn-shadow, var(--gog-btn-variant-shadow, var(--gog-btn-primary-shadow)));cursor:pointer;transition:background-color var(--gog-btn-transition-duration) var(--gog-easing),box-shadow var(--gog-btn-transition-duration) var(--gog-easing),color var(--gog-btn-transition-duration) var(--gog-easing)}.gog-btn:focus-visible{outline:var(--gog-btn-focus-ring-width) solid var(--gog-btn-hover-bg, var(--gog-btn-variant-hover-bg, var(--gog-btn-primary-hover-bg)));outline-offset:var(--gog-btn-focus-ring-offset)}.gog-btn:hover:not(:disabled){background-color:var(--gog-btn-hover-bg, var(--gog-btn-variant-hover-bg, var(--gog-btn-primary-hover-bg)));color:var(--gog-btn-hover-color, var(--gog-btn-variant-hover-color, var(--gog-btn-primary-hover-color)));box-shadow:var(--gog-btn-hover-shadow, var(--gog-btn-variant-hover-shadow, var(--gog-btn-primary-hover-shadow)))}.gog-btn:active:not(:disabled){transform:scale(var(--gog-btn-active-scale))}@media(prefers-reduced-motion:reduce){.gog-btn{transition:none}.gog-btn:active:not(:disabled){transform:none}}.gog-btn:disabled{opacity:var(--gog-btn-disabled-opacity);cursor:not-allowed}.gog-btn--primary{--gog-btn-variant-bg: var(--gog-btn-primary-bg);--gog-btn-variant-color: var(--gog-btn-primary-color);--gog-btn-variant-border: var(--gog-btn-primary-border);--gog-btn-variant-shadow: var(--gog-btn-primary-shadow);--gog-btn-variant-hover-bg: var(--gog-btn-primary-hover-bg);--gog-btn-variant-hover-color: var(--gog-btn-primary-hover-color);--gog-btn-variant-hover-shadow: var(--gog-btn-primary-hover-shadow);--gog-btn-variant-spinner-color: var(--gog-btn-primary-spinner-color)}.gog-btn--secondary{--gog-btn-variant-bg: var(--gog-btn-secondary-bg);--gog-btn-variant-color: var(--gog-btn-secondary-color);--gog-btn-variant-border: var(--gog-btn-secondary-border);--gog-btn-variant-shadow: var(--gog-btn-secondary-shadow);--gog-btn-variant-hover-bg: var(--gog-btn-secondary-hover-bg);--gog-btn-variant-hover-color: var(--gog-btn-secondary-hover-color);--gog-btn-variant-hover-shadow: var(--gog-btn-secondary-hover-shadow);--gog-btn-variant-spinner-color: var(--gog-btn-secondary-spinner-color)}.gog-btn--outline{--gog-btn-variant-bg: var(--gog-btn-outline-bg);--gog-btn-variant-color: var(--gog-btn-outline-color);--gog-btn-variant-border: var(--gog-btn-outline-border);--gog-btn-variant-shadow: var(--gog-btn-outline-shadow);--gog-btn-variant-hover-bg: var(--gog-btn-outline-hover-bg);--gog-btn-variant-hover-color: var(--gog-btn-outline-hover-color);--gog-btn-variant-hover-shadow: var(--gog-btn-outline-hover-shadow);--gog-btn-variant-spinner-color: var(--gog-btn-outline-spinner-color)}.gog-btn--ghost{--gog-btn-variant-bg: var(--gog-btn-ghost-bg);--gog-btn-variant-color: var(--gog-btn-ghost-color);--gog-btn-variant-border: var(--gog-btn-ghost-border);--gog-btn-variant-shadow: var(--gog-btn-ghost-shadow);--gog-btn-variant-hover-bg: var(--gog-btn-ghost-hover-bg);--gog-btn-variant-hover-color: var(--gog-btn-ghost-hover-color);--gog-btn-variant-hover-shadow: var(--gog-btn-ghost-hover-shadow);--gog-btn-variant-spinner-color: var(--gog-btn-ghost-spinner-color)}.gog-btn--xsm{--gog-btn-size-padding: var(--gog-btn-xsm-padding);--gog-btn-size-font-size: var(--gog-btn-xsm-font-size)}.gog-btn--sm{--gog-btn-size-padding: var(--gog-btn-sm-padding);--gog-btn-size-font-size: var(--gog-btn-sm-font-size)}.gog-btn--md{--gog-btn-size-padding: var(--gog-btn-md-padding);--gog-btn-size-font-size: var(--gog-btn-md-font-size)}.gog-btn--lg{--gog-btn-size-padding: var(--gog-btn-lg-padding);--gog-btn-size-font-size: var(--gog-btn-lg-font-size)}.gog-btn--slg{--gog-btn-size-padding: var(--gog-btn-slg-padding);--gog-btn-size-font-size: var(--gog-btn-slg-font-size)}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-btn{width:100%}.gog-btn--loading{position:relative;pointer-events:none;opacity:var(--gog-btn-loading-opacity)}.gog-btn__content--hidden{visibility:hidden}.gog-btn__spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:var(--gog-btn-spinner-max-size);max-height:var(--gog-btn-spinner-max-size)}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
48
79
|
}
|
|
49
80
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
50
81
|
type: Component,
|
|
51
|
-
args: [{ selector: 'gog-button', imports: [SpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush,
|
|
52
|
-
|
|
82
|
+
args: [{ selector: 'gog-button', imports: [SpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
83
|
+
// Drives the :host(.gog-host--full-width) rules in the stylesheet — without this
|
|
84
|
+
// binding the `fullWidth` input has no visible effect.
|
|
85
|
+
'[class.gog-host--full-width]': 'fullWidth()',
|
|
86
|
+
}, template: "<button\n (click)=\"onClick($event)\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n [attr.aria-disabled]=\"isDisabled() && !isNativeDisabled() ? 'true' : null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.disabled]=\"isNativeDisabled() ? true : null\"\n [class.gog-btn--ghost]=\"variant() === 'ghost'\"\n [class.gog-btn--xsm]=\"size() === 'xsm'\"\n [class.gog-btn--sm]=\"size() === 'sm'\"\n [class.gog-btn--md]=\"size() === 'md'\"\n [class.gog-btn--lg]=\"size() === 'lg'\"\n [class.gog-btn--slg]=\"size() === 'slg'\"\n [class.gog-btn--loading]=\"loading()\"\n [class.gog-btn--outline]=\"variant() === 'outline'\"\n [class.gog-btn--primary]=\"variant() === 'primary'\"\n [class.gog-btn--secondary]=\"variant() === 'secondary'\"\n [class.gog-cursor-not-allowed]=\"isDisabled()\"\n [class.gog-cursor-pointer]=\"!isDisabled()\"\n [class.gog-cursor-wait]=\"loading()\"\n [type]=\"type()\"\n class=\"gog-btn gog-inline-center gog-contained-layout\"\n>\n @if (loading()) {\n <gog-spinner [size]=\"spinnerSize()\" aria-hidden=\"true\" class=\"gog-btn__spinner\" />\n }\n\n <span [class.gog-btn__content--hidden]=\"loading()\" class=\"gog-btn__content\">\n <ng-content></ng-content>\n </span>\n</button>\n", styles: [".gog-btn{--gog-spinner-color: var( --gog-btn-spinner-color, var(--gog-btn-variant-spinner-color, var(--gog-btn-primary-spinner-color)) );gap:var(--gog-btn-gap);border:var(--gog-btn-border-width) var(--gog-btn-border-style) var(--gog-btn-border, var(--gog-btn-variant-border, var(--gog-btn-primary-border)));border-radius:var(--gog-btn-radius);padding:var(--gog-btn-padding, var(--gog-btn-size-padding, var(--gog-btn-md-padding)));font-family:var(--gog-btn-font-family);font-weight:var(--gog-btn-font-weight);font-size:var(--gog-btn-font-size, var(--gog-btn-size-font-size, var(--gog-btn-md-font-size)));letter-spacing:var(--gog-btn-letter-spacing);text-transform:var(--gog-btn-text-transform);line-height:var(--gog-btn-line-height);background-color:var(--gog-btn-bg, var(--gog-btn-variant-bg, var(--gog-btn-primary-bg)));color:var(--gog-btn-color, var(--gog-btn-variant-color, var(--gog-btn-primary-color)));box-shadow:var(--gog-btn-shadow, var(--gog-btn-variant-shadow, var(--gog-btn-primary-shadow)));cursor:pointer;transition:background-color var(--gog-btn-transition-duration) var(--gog-easing),box-shadow var(--gog-btn-transition-duration) var(--gog-easing),color var(--gog-btn-transition-duration) var(--gog-easing)}.gog-btn:focus-visible{outline:var(--gog-btn-focus-ring-width) solid var(--gog-btn-hover-bg, var(--gog-btn-variant-hover-bg, var(--gog-btn-primary-hover-bg)));outline-offset:var(--gog-btn-focus-ring-offset)}.gog-btn:hover:not(:disabled){background-color:var(--gog-btn-hover-bg, var(--gog-btn-variant-hover-bg, var(--gog-btn-primary-hover-bg)));color:var(--gog-btn-hover-color, var(--gog-btn-variant-hover-color, var(--gog-btn-primary-hover-color)));box-shadow:var(--gog-btn-hover-shadow, var(--gog-btn-variant-hover-shadow, var(--gog-btn-primary-hover-shadow)))}.gog-btn:active:not(:disabled){transform:scale(var(--gog-btn-active-scale))}@media(prefers-reduced-motion:reduce){.gog-btn{transition:none}.gog-btn:active:not(:disabled){transform:none}}.gog-btn:disabled{opacity:var(--gog-btn-disabled-opacity);cursor:not-allowed}.gog-btn--primary{--gog-btn-variant-bg: var(--gog-btn-primary-bg);--gog-btn-variant-color: var(--gog-btn-primary-color);--gog-btn-variant-border: var(--gog-btn-primary-border);--gog-btn-variant-shadow: var(--gog-btn-primary-shadow);--gog-btn-variant-hover-bg: var(--gog-btn-primary-hover-bg);--gog-btn-variant-hover-color: var(--gog-btn-primary-hover-color);--gog-btn-variant-hover-shadow: var(--gog-btn-primary-hover-shadow);--gog-btn-variant-spinner-color: var(--gog-btn-primary-spinner-color)}.gog-btn--secondary{--gog-btn-variant-bg: var(--gog-btn-secondary-bg);--gog-btn-variant-color: var(--gog-btn-secondary-color);--gog-btn-variant-border: var(--gog-btn-secondary-border);--gog-btn-variant-shadow: var(--gog-btn-secondary-shadow);--gog-btn-variant-hover-bg: var(--gog-btn-secondary-hover-bg);--gog-btn-variant-hover-color: var(--gog-btn-secondary-hover-color);--gog-btn-variant-hover-shadow: var(--gog-btn-secondary-hover-shadow);--gog-btn-variant-spinner-color: var(--gog-btn-secondary-spinner-color)}.gog-btn--outline{--gog-btn-variant-bg: var(--gog-btn-outline-bg);--gog-btn-variant-color: var(--gog-btn-outline-color);--gog-btn-variant-border: var(--gog-btn-outline-border);--gog-btn-variant-shadow: var(--gog-btn-outline-shadow);--gog-btn-variant-hover-bg: var(--gog-btn-outline-hover-bg);--gog-btn-variant-hover-color: var(--gog-btn-outline-hover-color);--gog-btn-variant-hover-shadow: var(--gog-btn-outline-hover-shadow);--gog-btn-variant-spinner-color: var(--gog-btn-outline-spinner-color)}.gog-btn--ghost{--gog-btn-variant-bg: var(--gog-btn-ghost-bg);--gog-btn-variant-color: var(--gog-btn-ghost-color);--gog-btn-variant-border: var(--gog-btn-ghost-border);--gog-btn-variant-shadow: var(--gog-btn-ghost-shadow);--gog-btn-variant-hover-bg: var(--gog-btn-ghost-hover-bg);--gog-btn-variant-hover-color: var(--gog-btn-ghost-hover-color);--gog-btn-variant-hover-shadow: var(--gog-btn-ghost-hover-shadow);--gog-btn-variant-spinner-color: var(--gog-btn-ghost-spinner-color)}.gog-btn--xsm{--gog-btn-size-padding: var(--gog-btn-xsm-padding);--gog-btn-size-font-size: var(--gog-btn-xsm-font-size)}.gog-btn--sm{--gog-btn-size-padding: var(--gog-btn-sm-padding);--gog-btn-size-font-size: var(--gog-btn-sm-font-size)}.gog-btn--md{--gog-btn-size-padding: var(--gog-btn-md-padding);--gog-btn-size-font-size: var(--gog-btn-md-font-size)}.gog-btn--lg{--gog-btn-size-padding: var(--gog-btn-lg-padding);--gog-btn-size-font-size: var(--gog-btn-lg-font-size)}.gog-btn--slg{--gog-btn-size-padding: var(--gog-btn-slg-padding);--gog-btn-size-font-size: var(--gog-btn-slg-font-size)}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-btn{width:100%}.gog-btn--loading{position:relative;pointer-events:none;opacity:var(--gog-btn-loading-opacity)}.gog-btn__content--hidden{visibility:hidden}.gog-btn__spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:var(--gog-btn-spinner-max-size);max-height:var(--gog-btn-spinner-max-size)}\n"] }]
|
|
87
|
+
}], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], gogClick: [{ type: i0.Output, args: ["gogClick"] }] } });
|
|
88
|
+
|
|
89
|
+
const ROVING_FOCUS_KEYS = ['ArrowDown', 'ArrowUp', 'Home', 'End'];
|
|
90
|
+
function isRovingFocusKey(key) {
|
|
91
|
+
return ROVING_FOCUS_KEYS.includes(key);
|
|
92
|
+
}
|
|
93
|
+
function nextRovingFocusIndex(key, currentIndex, count) {
|
|
94
|
+
const lastIndex = count - 1;
|
|
95
|
+
switch (key) {
|
|
96
|
+
case 'Home':
|
|
97
|
+
return 0;
|
|
98
|
+
case 'End':
|
|
99
|
+
return lastIndex;
|
|
100
|
+
case 'ArrowDown':
|
|
101
|
+
return (currentIndex + 1) % count;
|
|
102
|
+
case 'ArrowUp':
|
|
103
|
+
return (currentIndex - 1 + count) % count;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
/**
|
|
107
|
+
* Arrow/Home/End navigation across a roving-tabindex-style list of focusable elements.
|
|
108
|
+
* `event.currentTarget` must be one of `items`. Returns false (and leaves the event
|
|
109
|
+
* untouched) for any other key, or when `items` doesn't contain the current target,
|
|
110
|
+
* so callers can safely invoke this unconditionally from a keydown handler.
|
|
111
|
+
*/
|
|
112
|
+
function handleRovingFocusKeydown(event, items) {
|
|
113
|
+
if (!isRovingFocusKey(event.key) || items.length === 0) {
|
|
114
|
+
return false;
|
|
115
|
+
}
|
|
116
|
+
const current = event.currentTarget;
|
|
117
|
+
const index = items.indexOf(current);
|
|
118
|
+
if (index === -1) {
|
|
119
|
+
return false;
|
|
120
|
+
}
|
|
121
|
+
event.preventDefault();
|
|
122
|
+
const nextIndex = nextRovingFocusIndex(event.key, index, items.length);
|
|
123
|
+
items[nextIndex]?.focus();
|
|
124
|
+
return true;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
const ICON_DEFS = {
|
|
128
|
+
check: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>`,
|
|
129
|
+
close: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`,
|
|
130
|
+
'chevron-up': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-up-icon lucide-chevron-up"><path d="m18 15-6-6-6 6"/></svg>`,
|
|
131
|
+
'chevron-down': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>`,
|
|
132
|
+
sort: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-up-icon lucide-arrow-down-up"><path d="m3 16 4 4 4-4"/><path d="M7 20V4"/><path d="m21 8-4-4-4 4"/><path d="M17 4v16"/></svg>`,
|
|
133
|
+
'sort-up': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-narrow-wide-icon lucide-arrow-up-narrow-wide"><path d="m3 8 4-4 4 4"/><path d="M7 4v16"/><path d="M11 12h4"/><path d="M11 16h7"/><path d="M11 20h10"/></svg>`,
|
|
134
|
+
'sort-down': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-wide-narrow-icon lucide-arrow-down-wide-narrow"><path d="m3 16 4 4 4-4"/><path d="M7 20V4"/><path d="M11 4h10"/><path d="M11 8h7"/><path d="M11 12h4"/></svg>`,
|
|
135
|
+
success: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>`,
|
|
136
|
+
error: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bug-icon lucide-bug"><path d="M12 20v-9"/><path d="M14 7a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4z"/><path d="M14.12 3.88 16 2"/><path d="M21 21a4 4 0 0 0-3.81-4"/><path d="M21 5a4 4 0 0 1-3.55 3.97"/><path d="M22 13h-4"/><path d="M3 21a4 4 0 0 1 3.81-4"/><path d="M3 5a4 4 0 0 0 3.55 3.97"/><path d="M6 13H2"/><path d="m8 2 1.88 1.88"/><path d="M9 7.13V6a3 3 0 1 1 6 0v1.13"/></svg>`,
|
|
137
|
+
warning: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert-icon lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>`,
|
|
138
|
+
info: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info-icon lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>`,
|
|
139
|
+
checkbox: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-icon lucide-square"><rect width="18" height="18" x="3" y="3" rx="2"/></svg>`,
|
|
140
|
+
'checkbox-checked': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>`,
|
|
141
|
+
eye: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-icon lucide-eye"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>`,
|
|
142
|
+
'eye-off': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-off-icon lucide-eye-off"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>`,
|
|
143
|
+
};
|
|
144
|
+
|
|
145
|
+
class IconComponent {
|
|
146
|
+
sanitizer = inject(DomSanitizer);
|
|
147
|
+
name = input('close', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
148
|
+
template = input(null, ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
|
|
149
|
+
title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
150
|
+
ariaHidden = input(true, ...(ngDevMode ? [{ debugName: "ariaHidden" }] : /* istanbul ignore next */ []));
|
|
151
|
+
ariaLabel = computed(() => this.ariaHidden() ? null : this.title() || this.name(), ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
152
|
+
iconSvg = computed(() => this.sanitizer.bypassSecurityTrustHtml(ICON_DEFS[this.name()]), ...(ngDevMode ? [{ debugName: "iconSvg" }] : /* istanbul ignore next */ []));
|
|
153
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
154
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: IconComponent, isStandalone: true, selector: "gog-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "ariaHidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-hidden": "ariaHidden() ? \"true\" : null", "attr.aria-label": "ariaHidden() ? null : ariaLabel()" }, classAttribute: "gog-icon" }, ngImport: i0, template: `
|
|
155
|
+
@if (template(); as iconTpl) {
|
|
156
|
+
<ng-container *ngTemplateOutlet="iconTpl" />
|
|
157
|
+
} @else {
|
|
158
|
+
<span [innerHTML]="iconSvg()"></span>
|
|
159
|
+
}
|
|
160
|
+
`, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0}:host ::ng-deep svg{width:var(--gog-icon-size, var(--gog-icon-fallback-size));height:var(--gog-icon-size, var(--gog-icon-fallback-size));display:block;color:currentColor}:host ::ng-deep svg path,:host ::ng-deep svg circle,:host ::ng-deep svg rect{stroke-width:var(--gog-icon-stroke-width)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
161
|
+
}
|
|
162
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconComponent, decorators: [{
|
|
163
|
+
type: Component,
|
|
164
|
+
args: [{ selector: 'gog-icon', imports: [NgTemplateOutlet], template: `
|
|
165
|
+
@if (template(); as iconTpl) {
|
|
166
|
+
<ng-container *ngTemplateOutlet="iconTpl" />
|
|
167
|
+
} @else {
|
|
168
|
+
<span [innerHTML]="iconSvg()"></span>
|
|
169
|
+
}
|
|
170
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
171
|
+
class: 'gog-icon',
|
|
172
|
+
'[attr.aria-hidden]': 'ariaHidden() ? "true" : null',
|
|
173
|
+
'[attr.aria-label]': 'ariaHidden() ? null : ariaLabel()',
|
|
174
|
+
}, styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0}:host ::ng-deep svg{width:var(--gog-icon-size, var(--gog-icon-fallback-size));height:var(--gog-icon-size, var(--gog-icon-fallback-size));display:block;color:currentColor}:host ::ng-deep svg path,:host ::ng-deep svg circle,:host ::ng-deep svg rect{stroke-width:var(--gog-icon-stroke-width)}\n"] }]
|
|
175
|
+
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], ariaHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaHidden", required: false }] }] } });
|
|
53
176
|
|
|
54
177
|
class GogAccordionContentDirective {
|
|
55
178
|
templateRef = inject(TemplateRef);
|
|
@@ -85,31 +208,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
85
208
|
}]
|
|
86
209
|
}] });
|
|
87
210
|
class AccordionComponent {
|
|
88
|
-
|
|
211
|
+
static nextUid = 0;
|
|
89
212
|
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
90
213
|
size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
91
214
|
expandFirst = input(false, ...(ngDevMode ? [{ debugName: "expandFirst" }] : /* istanbul ignore next */ []));
|
|
92
215
|
multi = input(false, ...(ngDevMode ? [{ debugName: "multi" }] : /* istanbul ignore next */ []));
|
|
93
216
|
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
94
217
|
showChevron = input(true, ...(ngDevMode ? [{ debugName: "showChevron" }] : /* istanbul ignore next */ []));
|
|
218
|
+
/**
|
|
219
|
+
* When set, wraps each header button in `role="heading"` with this `aria-level`,
|
|
220
|
+
* so screen-reader users navigating by headings can find accordion sections.
|
|
221
|
+
* Left unset by default since not every accordion instance represents document structure
|
|
222
|
+
* (e.g. one nested inside a card).
|
|
223
|
+
*/
|
|
224
|
+
headingLevel = input(undefined, ...(ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []));
|
|
225
|
+
/**
|
|
226
|
+
* Two-way bindable set of currently open item ids. Exposed as a model so consumers
|
|
227
|
+
* can drive the accordion externally (e.g. `[(openIds)]="mySet"`) instead of only
|
|
228
|
+
* reacting to the `gogToggle` output.
|
|
229
|
+
*/
|
|
230
|
+
openIds = model(new Set(), ...(ngDevMode ? [{ debugName: "openIds" }] : /* istanbul ignore next */ []));
|
|
95
231
|
gogToggle = output();
|
|
96
232
|
headerTpl = contentChild(GogAccordionHeaderDirective, ...(ngDevMode ? [{ debugName: "headerTpl" }] : /* istanbul ignore next */ []));
|
|
97
233
|
chevronTpl = contentChild(GogAccordionChevronDirective, ...(ngDevMode ? [{ debugName: "chevronTpl" }] : /* istanbul ignore next */ []));
|
|
98
234
|
contentTpl = contentChild(GogAccordionContentDirective, ...(ngDevMode ? [{ debugName: "contentTpl" }] : /* istanbul ignore next */ []));
|
|
99
|
-
|
|
235
|
+
/**
|
|
236
|
+
* Unique per-instance id prefix. Prevents duplicate DOM ids (and therefore broken
|
|
237
|
+
* aria-controls/aria-labelledby wiring) when several accordions render on the same
|
|
238
|
+
* page and their items happen to share `id` values (e.g. ids coming straight from a DB).
|
|
239
|
+
*/
|
|
240
|
+
uid = `gog-acc-${AccordionComponent.nextUid++}`;
|
|
241
|
+
host = inject((ElementRef));
|
|
242
|
+
/**
|
|
243
|
+
* Tracks whether the expandFirst auto-open has already run, independently of
|
|
244
|
+
* `openIds` itself. Reading `openIds().size` directly inside the effect would
|
|
245
|
+
* re-subscribe the effect to every future toggle (since `openIds()` gets read
|
|
246
|
+
* on every run once `expandFirst` is true), causing pointless re-evaluation
|
|
247
|
+
* on each click and re-opening the first item if `items` is later replaced
|
|
248
|
+
* with a new array reference after the user closed everything by hand.
|
|
249
|
+
*/
|
|
250
|
+
autoExpanded = signal(false, ...(ngDevMode ? [{ debugName: "autoExpanded" }] : /* istanbul ignore next */ []));
|
|
100
251
|
constructor() {
|
|
101
252
|
effect(() => {
|
|
102
253
|
const items = this.items();
|
|
103
|
-
if (!this.expandFirst() || items.length === 0 || this.
|
|
254
|
+
if (!this.expandFirst() || items.length === 0 || untracked(this.autoExpanded)) {
|
|
104
255
|
return;
|
|
105
256
|
}
|
|
106
257
|
this.openIds.set(new Set([items[0].id]));
|
|
258
|
+
this.autoExpanded.set(true);
|
|
107
259
|
});
|
|
108
260
|
}
|
|
109
261
|
isOpen(id) {
|
|
110
262
|
return this.openIds().has(id);
|
|
111
263
|
}
|
|
112
264
|
toggle(item) {
|
|
265
|
+
if (item.disabled) {
|
|
266
|
+
return;
|
|
267
|
+
}
|
|
113
268
|
const id = item.id;
|
|
114
269
|
const current = this.openIds();
|
|
115
270
|
const next = new Set(current);
|
|
@@ -124,233 +279,49 @@ class AccordionComponent {
|
|
|
124
279
|
this.openIds.set(next);
|
|
125
280
|
this.gogToggle.emit({ item, open: next.has(id) });
|
|
126
281
|
}
|
|
127
|
-
onHeaderKeydown(event
|
|
128
|
-
const keys = ['ArrowDown', 'ArrowUp', 'Home', 'End'];
|
|
129
|
-
if (!keys.includes(event.key)) {
|
|
130
|
-
return;
|
|
131
|
-
}
|
|
282
|
+
onHeaderKeydown(event) {
|
|
132
283
|
const host = this.host.nativeElement;
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
event.preventDefault();
|
|
138
|
-
const lastIndex = headers.length - 1;
|
|
139
|
-
const nextIndex = event.key === 'Home'
|
|
140
|
-
? 0
|
|
141
|
-
: event.key === 'End'
|
|
142
|
-
? lastIndex
|
|
143
|
-
: event.key === 'ArrowDown'
|
|
144
|
-
? (index + 1) % headers.length
|
|
145
|
-
: (index - 1 + headers.length) % headers.length;
|
|
146
|
-
headers[nextIndex]?.focus();
|
|
284
|
+
// Disabled headers are excluded so arrow/Home/End navigation skips over them,
|
|
285
|
+
// matching the WAI-ARIA expectation that non-interactive controls aren't focus stops.
|
|
286
|
+
const headers = Array.from(host.querySelectorAll('.gog-accordion__header:not([disabled])'));
|
|
287
|
+
handleRovingFocusKeydown(event, headers);
|
|
147
288
|
}
|
|
148
289
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
149
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AccordionComponent, isStandalone: true, selector: "gog-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, expandFirst: { classPropertyName: "expandFirst", publicName: "expandFirst", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showChevron: { classPropertyName: "showChevron", publicName: "showChevron", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogToggle: "gogToggle" }, host: { classAttribute: "gog-accordion-host" }, queries: [{ propertyName: "headerTpl", first: true, predicate: GogAccordionHeaderDirective, descendants: true, isSignal: true }, { propertyName: "chevronTpl", first: true, predicate: GogAccordionChevronDirective, descendants: true, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: GogAccordionContentDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n class=\"gog-accordion gog-contained-layout\"\r\n [class.gog-accordion--md]=\"size() === 'md'\"\r\n [class.gog-accordion--sm]=\"size() === 'sm'\"\r\n [class.gog-accordion--loading]=\"loading()\"\r\n>\r\n @if (loading()) {\r\n @for (item of items(); track item.id) {\r\n <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\r\n <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\r\n <span class=\"gog-accordion__skeleton-line\"></span>\r\n </div>\r\n </div>\r\n }\r\n } @else {\r\n @for (item of items(); track item.id) {\r\n <div class=\"gog-accordion__item\" [class.gog-accordion__item--open]=\"isOpen(item.id)\">\r\n <button\r\n [id]=\"'gog-acc-btn-' + item.id\"\r\n class=\"gog-accordion__header font-heading\"\r\n [class.gog-accordion__header--chevronless]=\"!showChevron()\"\r\n [class.gog-accordion__header--open]=\"isOpen(item.id)\"\r\n [attr.aria-expanded]=\"isOpen(item.id)\"\r\n [attr.aria-controls]=\"'gog-acc-body-' + item.id\"\r\n (click)=\"toggle(item)\"\r\n (keydown)=\"onHeaderKeydown($event, $index)\"\r\n type=\"button\"\r\n >\r\n <span class=\"gog-accordion__header-content\">\r\n @if (headerTpl(); as tpl) {\r\n <ng-container\r\n *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item, open: isOpen(item.id) }\"\r\n />\r\n } @else {\r\n <span class=\"gog-accordion__title\">{{ item.title }}</span>\r\n }\r\n </span>\r\n @if (showChevron()) {\r\n <span class=\"gog-accordion__chevron\" aria-hidden=\"true\">\r\n @if (chevronTpl(); as tpl) {\r\n <ng-container\r\n *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item, open: isOpen(item.id) }\"\r\n />\r\n } @else {\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <polyline points=\"6 9 12 15 18 9\"></polyline>\r\n </svg>\r\n }\r\n </span>\r\n }\r\n </button>\r\n\r\n <div\r\n [id]=\"'gog-acc-body-' + item.id\"\r\n class=\"gog-accordion__body font-body\"\r\n [class.gog-accordion__body--open]=\"isOpen(item.id)\"\r\n role=\"region\"\r\n [attr.aria-labelledby]=\"'gog-acc-btn-' + item.id\"\r\n [attr.aria-hidden]=\"!isOpen(item.id)\"\r\n [attr.inert]=\"!isOpen(item.id) ? '' : null\"\r\n >\r\n <div class=\"gog-accordion__body-inner\">\r\n @if (contentTpl(); as tpl) {\r\n <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item }\" />\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n</div>\r\n", styles: [".gog-accordion{--gog-accordion-border-color: var(--accent-dim);--gog-accordion-text-color: var(--text-color);--gog-accordion-accent-color: var(--accent-color);--gog-accordion-hover-bg: color-mix(in srgb, var(--accent-dim) 10%, transparent);--gog-accordion-hover-ring: color-mix(in srgb, var(--accent-color) 30%, transparent);--gog-accordion-body-color: var(--text-color);--gog-accordion-skeleton-start: var(--accent-dim);--gog-accordion-skeleton-mid: color-mix(in srgb, var(--accent-dim) 50%, transparent);--gog-accordion-skeleton-end: var(--accent-dim);--gog-accordion-radius: var(--radius);--gog-accordion-body-radius: var(--radius);--gog-accordion-body-padding-y: 12px;--gog-accordion-body-padding-x: 16px;--gog-accordion-body-radius-skeleton: 2px;display:flex;flex-direction:column;width:100%}.gog-accordion__item{border-bottom:var(--control-border-width, 1px) var(--control-border-style, solid) var(--gog-accordion-border-color)}.gog-accordion__item:first-child{border-top:var(--control-border-width, 1px) var(--control-border-style, solid) var(--gog-accordion-border-color)}.gog-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px var(--gog-accordion-body-padding-x);gap:12px;background:transparent;border:none;color:var(--gog-accordion-text-color);text-align:left;cursor:pointer;text-transform:uppercase;letter-spacing:.8px;font-size:var(--text-sm);transition:color .15s ease,background-color .15s ease}.gog-accordion__header:hover{color:var(--gog-accordion-accent-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:focus-visible{outline:3px solid var(--gog-accordion-hover-ring);outline-offset:-3px}.gog-accordion__header--open{color:var(--gog-accordion-accent-color)}.gog-accordion__title{flex:1}.gog-accordion__header-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}.gog-accordion__chevron{flex-shrink:0;width:16px;height:16px;color:var(--gog-accordion-border-color);transition:transform .2s ease,color .15s ease}.gog-accordion__chevron svg{width:100%;height:100%;display:block}.gog-accordion__header--open .gog-accordion__chevron{transform:rotate(180deg);color:var(--gog-accordion-accent-color)}.gog-accordion__body{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;border-top:var(--control-border-width, 1px) var(--control-border-style, solid) var(--accent-dim);transition:grid-template-rows .2s ease,opacity .18s ease}.gog-accordion__body--open{grid-template-rows:1fr;opacity:1}.gog-accordion__body-inner{min-height:0;overflow:hidden;padding:0 var(--gog-accordion-body-padding-x);color:var(--gog-accordion-body-color);font-size:var(--text-md);line-height:1.6;transform:translateY(-2px);transition:transform .18s ease,padding .2s ease}.gog-accordion__body--open .gog-accordion__body-inner{padding-top:var(--gog-accordion-body-padding-y);padding-bottom:calc(var(--gog-accordion-body-padding-y) + 4px);transform:translateY(0)}.gog-accordion--md .gog-accordion__header{padding:10px 14px;font-size:var(--text-xs)}.gog-accordion--md .gog-accordion__header-content{gap:2px}.gog-accordion--md .gog-accordion__body-inner{padding-left:14px;padding-right:14px;font-size:var(--text-sm)}.gog-accordion--md .gog-accordion__body--open .gog-accordion__body-inner{padding-top:8px;padding-bottom:12px}.gog-accordion--md .gog-accordion__chevron{width:14px;height:14px}.gog-accordion--sm .gog-accordion__header{padding:6px 10px;font-size:var(--text-xs);letter-spacing:.4px}.gog-accordion--sm .gog-accordion__header-content{gap:2px}.gog-accordion--sm .gog-accordion__body-inner{padding-left:10px;padding-right:10px;font-size:var(--text-xs);line-height:1.5}.gog-accordion--sm .gog-accordion__body--open .gog-accordion__body-inner{padding-top:6px;padding-bottom:8px}.gog-accordion--sm .gog-accordion__chevron{width:12px;height:12px}.gog-accordion__header--skeleton{cursor:default;pointer-events:none}.gog-accordion__skeleton-line{display:block;height:12px;width:55%;border-radius:var(--gog-accordion-body-radius-skeleton);background:linear-gradient(90deg,var(--gog-accordion-skeleton-start) 25%,var(--gog-accordion-skeleton-mid) 50%,var(--gog-accordion-skeleton-end) 75%);background-size:200% 100%;animation:gog-accordion-shimmer 1.4s infinite}@keyframes gog-accordion-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}.gog-accordion__skeleton-line{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
290
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AccordionComponent, isStandalone: true, selector: "gog-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, expandFirst: { classPropertyName: "expandFirst", publicName: "expandFirst", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showChevron: { classPropertyName: "showChevron", publicName: "showChevron", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, openIds: { classPropertyName: "openIds", publicName: "openIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openIds: "openIdsChange", gogToggle: "gogToggle" }, host: { classAttribute: "gog-accordion-host" }, queries: [{ propertyName: "headerTpl", first: true, predicate: GogAccordionHeaderDirective, descendants: true, isSignal: true }, { propertyName: "chevronTpl", first: true, predicate: GogAccordionChevronDirective, descendants: true, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: GogAccordionContentDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n [class.gog-accordion--loading]=\"loading()\"\n [class.gog-accordion--slg]=\"size() === 'slg'\"\n [class.gog-accordion--md]=\"size() === 'md'\"\n [class.gog-accordion--sm]=\"size() === 'sm'\"\n [class.gog-accordion--xsm]=\"size() === 'xsm'\"\n class=\"gog-accordion gog-contained-layout\"\n>\n @if (loading()) {\n @for (item of items(); track item.id) {\n <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\n <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\n <span class=\"gog-accordion__skeleton-line\"></span>\n </div>\n </div>\n }\n } @else {\n @for (item of items(); track item.id) {\n <div\n class=\"gog-accordion__item\"\n [class.gog-accordion__item--open]=\"isOpen(item.id)\"\n [class.gog-accordion__item--disabled]=\"item.disabled\"\n >\n <ng-template #headerButton>\n <button\n [id]=\"uid + '-btn-' + item.id\"\n class=\"gog-accordion__header\"\n [class.gog-accordion__header--chevronless]=\"!showChevron()\"\n [class.gog-accordion__header--open]=\"isOpen(item.id)\"\n [attr.aria-expanded]=\"isOpen(item.id)\"\n [attr.aria-controls]=\"uid + '-body-' + item.id\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [disabled]=\"item.disabled || null\"\n (click)=\"toggle(item)\"\n (keydown)=\"onHeaderKeydown($event)\"\n type=\"button\"\n >\n <span class=\"gog-accordion__header-content\">\n @if (headerTpl(); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"\n tpl.templateRef;\n context: { $implicit: item, open: isOpen(item.id) }\n \"\n />\n } @else {\n <span class=\"gog-accordion__title\">{{ item.title }}</span>\n }\n </span>\n @if (showChevron()) {\n <span class=\"gog-accordion__chevron\" aria-hidden=\"true\">\n @if (chevronTpl(); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"\n tpl.templateRef;\n context: { $implicit: item, open: isOpen(item.id) }\n \"\n />\n } @else {\n <gog-icon name=\"chevron-down\" />\n }\n </span>\n }\n </button>\n </ng-template>\n\n @if (headingLevel(); as level) {\n <div role=\"heading\" [attr.aria-level]=\"level\" class=\"gog-accordion__heading\">\n <ng-container [ngTemplateOutlet]=\"headerButton\" />\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"headerButton\" />\n }\n\n <div\n [id]=\"uid + '-body-' + item.id\"\n class=\"gog-accordion__body\"\n [class.gog-accordion__body--open]=\"isOpen(item.id)\"\n role=\"region\"\n [attr.aria-labelledby]=\"uid + '-btn-' + item.id\"\n [attr.aria-hidden]=\"!isOpen(item.id)\"\n [attr.inert]=\"!isOpen(item.id) ? '' : null\"\n >\n <div class=\"gog-accordion__body-inner\">\n @if (contentTpl(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item }\" />\n }\n </div>\n </div>\n </div>\n }\n }\n</div>\n", styles: ["@charset \"UTF-8\";.gog-accordion{display:flex;flex-direction:column;width:100%}.gog-accordion__item{border-bottom:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color)}.gog-accordion__item:first-child{border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);border-top-left-radius:var(--gog-accordion-radius);border-top-right-radius:var(--gog-accordion-radius)}.gog-accordion__item:last-child{border-bottom-left-radius:var(--gog-accordion-radius);border-bottom-right-radius:var(--gog-accordion-radius);overflow:hidden}.gog-accordion__item--disabled .gog-accordion__header{cursor:not-allowed;opacity:var(--gog-accordion-disabled-opacity)}.gog-accordion__item--disabled .gog-accordion__header:hover{color:var(--gog-accordion-text-color);background-color:var(--gog-accordion-header-bg)}.gog-accordion__heading{display:contents}.gog-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--gog-accordion-padding-y, var(--gog-accordion-size-padding-y, var(--gog-accordion-lg-padding-y))) var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));gap:var(--gog-accordion-header-gap);background:var(--gog-accordion-header-bg);border:none;color:var(--gog-accordion-text-color);text-align:left;cursor:pointer;font-family:var(--gog-accordion-font-family);text-transform:var(--gog-accordion-header-text-transform);letter-spacing:var(--gog-accordion-letter-spacing, var(--gog-accordion-size-letter-spacing, var(--gog-accordion-lg-letter-spacing)));font-size:var(--gog-accordion-font-size, var(--gog-accordion-size-font-size, var(--gog-accordion-lg-font-size)));transition:color var(--gog-accordion-transition-duration) var(--gog-easing),background-color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header:hover{color:var(--gog-accordion-accent-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:focus-visible{outline:var(--gog-accordion-focus-ring-width) solid var(--gog-accordion-hover-ring);outline-offset:calc(var(--gog-accordion-focus-ring-width) * -1)}.gog-accordion__header--open{color:var(--gog-accordion-accent-color)}.gog-accordion__title{flex:1}.gog-accordion__header-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--gog-accordion-content-gap, var(--gog-accordion-size-content-gap, var(--gog-accordion-lg-content-gap)));min-width:0}.gog-accordion__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));height:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));font-size:var(--gog-accordion-chevron-font-size, var(--gog-accordion-size-chevron-font-size, var(--gog-accordion-lg-chevron-font-size)));color:var(--gog-accordion-border-color);transition:transform var(--gog-accordion-chevron-transition-duration) var(--gog-easing),color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron{transform:rotate(180deg);color:var(--gog-accordion-accent-color)}.gog-accordion__body{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);transition:grid-template-rows var(--gog-accordion-body-transition-duration) var(--gog-easing),opacity var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open{grid-template-rows:1fr;opacity:1}.gog-accordion__body-inner{min-height:0;overflow:hidden;border-bottom-left-radius:var(--gog-accordion-body-radius);border-bottom-right-radius:var(--gog-accordion-body-radius);padding:0 var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));background:var(--gog-accordion-body-bg);color:var(--gog-accordion-body-color);font-family:var(--gog-accordion-body-font-family);font-size:var(--gog-accordion-body-font-size, var(--gog-accordion-size-body-font-size, var(--gog-accordion-lg-body-font-size)));line-height:var(--gog-accordion-size-body-line-height, var(--gog-accordion-lg-body-line-height));transform:translateY(var(--gog-accordion-body-lift));transition:transform var(--gog-accordion-body-transition-duration) var(--gog-easing),padding var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open .gog-accordion__body-inner{padding-top:var(--gog-accordion-body-padding-top, var(--gog-accordion-size-body-padding-top, var(--gog-accordion-lg-body-padding-top)));padding-bottom:var(--gog-accordion-body-padding-bottom, var(--gog-accordion-size-body-padding-bottom, var(--gog-accordion-lg-body-padding-bottom)));transform:translateY(0)}.gog-accordion--slg{--gog-accordion-size-padding-y: var(--gog-accordion-slg-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-slg-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-slg-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-slg-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-slg-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-slg-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-slg-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-slg-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-slg-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-slg-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-slg-chevron-font-size)}.gog-accordion--md{--gog-accordion-size-padding-y: var(--gog-accordion-md-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-md-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-md-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-md-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-md-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-md-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-md-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-md-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-md-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-md-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-md-chevron-font-size)}.gog-accordion--sm{--gog-accordion-size-padding-y: var(--gog-accordion-sm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-sm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-sm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-sm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-sm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-sm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-sm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-sm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-sm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-sm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-sm-chevron-font-size)}.gog-accordion--xsm{--gog-accordion-size-padding-y: var(--gog-accordion-xsm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-xsm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-xsm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-xsm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-xsm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-xsm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-xsm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-xsm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-xsm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-xsm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-xsm-chevron-font-size)}.gog-accordion__header--skeleton{cursor:default;pointer-events:none}.gog-accordion__skeleton-line{display:block;height:var(--gog-accordion-skeleton-height);width:var(--gog-accordion-skeleton-width);border-radius:var(--gog-accordion-skeleton-radius);background:linear-gradient(90deg,var(--gog-accordion-skeleton-start) 25%,var(--gog-accordion-skeleton-mid) 50%,var(--gog-accordion-skeleton-end) 75%);background-size:200% 100%;animation:gog-accordion-shimmer var(--gog-accordion-skeleton-duration) infinite}@keyframes gog-accordion-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}.gog-accordion__skeleton-line{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
150
291
|
}
|
|
151
292
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
152
293
|
type: Component,
|
|
153
|
-
args: [{ selector: 'gog-accordion', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
294
|
+
args: [{ selector: 'gog-accordion', imports: [NgTemplateOutlet, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
154
295
|
class: 'gog-accordion-host',
|
|
155
|
-
}, template: "<div\r\n class=\"gog-accordion gog-contained-layout\"\r\n [class.gog-accordion--md]=\"size() === 'md'\"\r\n [class.gog-accordion--sm]=\"size() === 'sm'\"\r\n [class.gog-accordion--loading]=\"loading()\"\r\n>\r\n @if (loading()) {\r\n @for (item of items(); track item.id) {\r\n <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\r\n <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\r\n <span class=\"gog-accordion__skeleton-line\"></span>\r\n </div>\r\n </div>\r\n }\r\n } @else {\r\n @for (item of items(); track item.id) {\r\n <div class=\"gog-accordion__item\" [class.gog-accordion__item--open]=\"isOpen(item.id)\">\r\n <button\r\n [id]=\"'gog-acc-btn-' + item.id\"\r\n class=\"gog-accordion__header font-heading\"\r\n [class.gog-accordion__header--chevronless]=\"!showChevron()\"\r\n [class.gog-accordion__header--open]=\"isOpen(item.id)\"\r\n [attr.aria-expanded]=\"isOpen(item.id)\"\r\n [attr.aria-controls]=\"'gog-acc-body-' + item.id\"\r\n (click)=\"toggle(item)\"\r\n (keydown)=\"onHeaderKeydown($event, $index)\"\r\n type=\"button\"\r\n >\r\n <span class=\"gog-accordion__header-content\">\r\n @if (headerTpl(); as tpl) {\r\n <ng-container\r\n *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item, open: isOpen(item.id) }\"\r\n />\r\n } @else {\r\n <span class=\"gog-accordion__title\">{{ item.title }}</span>\r\n }\r\n </span>\r\n @if (showChevron()) {\r\n <span class=\"gog-accordion__chevron\" aria-hidden=\"true\">\r\n @if (chevronTpl(); as tpl) {\r\n <ng-container\r\n *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item, open: isOpen(item.id) }\"\r\n />\r\n } @else {\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <polyline points=\"6 9 12 15 18 9\"></polyline>\r\n </svg>\r\n }\r\n </span>\r\n }\r\n </button>\r\n\r\n <div\r\n [id]=\"'gog-acc-body-' + item.id\"\r\n class=\"gog-accordion__body font-body\"\r\n [class.gog-accordion__body--open]=\"isOpen(item.id)\"\r\n role=\"region\"\r\n [attr.aria-labelledby]=\"'gog-acc-btn-' + item.id\"\r\n [attr.aria-hidden]=\"!isOpen(item.id)\"\r\n [attr.inert]=\"!isOpen(item.id) ? '' : null\"\r\n >\r\n <div class=\"gog-accordion__body-inner\">\r\n @if (contentTpl(); as tpl) {\r\n <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item }\" />\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n</div>\r\n", styles: [".gog-accordion{--gog-accordion-border-color: var(--accent-dim);--gog-accordion-text-color: var(--text-color);--gog-accordion-accent-color: var(--accent-color);--gog-accordion-hover-bg: color-mix(in srgb, var(--accent-dim) 10%, transparent);--gog-accordion-hover-ring: color-mix(in srgb, var(--accent-color) 30%, transparent);--gog-accordion-body-color: var(--text-color);--gog-accordion-skeleton-start: var(--accent-dim);--gog-accordion-skeleton-mid: color-mix(in srgb, var(--accent-dim) 50%, transparent);--gog-accordion-skeleton-end: var(--accent-dim);--gog-accordion-radius: var(--radius);--gog-accordion-body-radius: var(--radius);--gog-accordion-body-padding-y: 12px;--gog-accordion-body-padding-x: 16px;--gog-accordion-body-radius-skeleton: 2px;display:flex;flex-direction:column;width:100%}.gog-accordion__item{border-bottom:var(--control-border-width, 1px) var(--control-border-style, solid) var(--gog-accordion-border-color)}.gog-accordion__item:first-child{border-top:var(--control-border-width, 1px) var(--control-border-style, solid) var(--gog-accordion-border-color)}.gog-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px var(--gog-accordion-body-padding-x);gap:12px;background:transparent;border:none;color:var(--gog-accordion-text-color);text-align:left;cursor:pointer;text-transform:uppercase;letter-spacing:.8px;font-size:var(--text-sm);transition:color .15s ease,background-color .15s ease}.gog-accordion__header:hover{color:var(--gog-accordion-accent-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:focus-visible{outline:3px solid var(--gog-accordion-hover-ring);outline-offset:-3px}.gog-accordion__header--open{color:var(--gog-accordion-accent-color)}.gog-accordion__title{flex:1}.gog-accordion__header-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}.gog-accordion__chevron{flex-shrink:0;width:16px;height:16px;color:var(--gog-accordion-border-color);transition:transform .2s ease,color .15s ease}.gog-accordion__chevron svg{width:100%;height:100%;display:block}.gog-accordion__header--open .gog-accordion__chevron{transform:rotate(180deg);color:var(--gog-accordion-accent-color)}.gog-accordion__body{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;border-top:var(--control-border-width, 1px) var(--control-border-style, solid) var(--accent-dim);transition:grid-template-rows .2s ease,opacity .18s ease}.gog-accordion__body--open{grid-template-rows:1fr;opacity:1}.gog-accordion__body-inner{min-height:0;overflow:hidden;padding:0 var(--gog-accordion-body-padding-x);color:var(--gog-accordion-body-color);font-size:var(--text-md);line-height:1.6;transform:translateY(-2px);transition:transform .18s ease,padding .2s ease}.gog-accordion__body--open .gog-accordion__body-inner{padding-top:var(--gog-accordion-body-padding-y);padding-bottom:calc(var(--gog-accordion-body-padding-y) + 4px);transform:translateY(0)}.gog-accordion--md .gog-accordion__header{padding:10px 14px;font-size:var(--text-xs)}.gog-accordion--md .gog-accordion__header-content{gap:2px}.gog-accordion--md .gog-accordion__body-inner{padding-left:14px;padding-right:14px;font-size:var(--text-sm)}.gog-accordion--md .gog-accordion__body--open .gog-accordion__body-inner{padding-top:8px;padding-bottom:12px}.gog-accordion--md .gog-accordion__chevron{width:14px;height:14px}.gog-accordion--sm .gog-accordion__header{padding:6px 10px;font-size:var(--text-xs);letter-spacing:.4px}.gog-accordion--sm .gog-accordion__header-content{gap:2px}.gog-accordion--sm .gog-accordion__body-inner{padding-left:10px;padding-right:10px;font-size:var(--text-xs);line-height:1.5}.gog-accordion--sm .gog-accordion__body--open .gog-accordion__body-inner{padding-top:6px;padding-bottom:8px}.gog-accordion--sm .gog-accordion__chevron{width:12px;height:12px}.gog-accordion__header--skeleton{cursor:default;pointer-events:none}.gog-accordion__skeleton-line{display:block;height:12px;width:55%;border-radius:var(--gog-accordion-body-radius-skeleton);background:linear-gradient(90deg,var(--gog-accordion-skeleton-start) 25%,var(--gog-accordion-skeleton-mid) 50%,var(--gog-accordion-skeleton-end) 75%);background-size:200% 100%;animation:gog-accordion-shimmer 1.4s infinite}@keyframes gog-accordion-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}.gog-accordion__skeleton-line{animation:none}}\n"] }]
|
|
156
|
-
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], expandFirst: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandFirst", required: false }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChevron", required: false }] }], gogToggle: [{ type: i0.Output, args: ["gogToggle"] }], headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionHeaderDirective), { isSignal: true }] }], chevronTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionChevronDirective), { isSignal: true }] }], contentTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionContentDirective), { isSignal: true }] }] } });
|
|
157
|
-
|
|
158
|
-
class IconComponent {
|
|
159
|
-
name = input('close', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
160
|
-
template = input(null, ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
|
|
161
|
-
title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
162
|
-
ariaHidden = input(true, ...(ngDevMode ? [{ debugName: "ariaHidden" }] : /* istanbul ignore next */ []));
|
|
163
|
-
ariaLabel = computed(() => (this.ariaHidden() ? null : this.title() || this.name()), ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
164
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
165
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: IconComponent, isStandalone: true, selector: "gog-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "ariaHidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-hidden": "ariaHidden() ? \"true\" : null", "attr.aria-label": "ariaHidden() ? null : ariaLabel()" }, classAttribute: "gog-icon" }, ngImport: i0, template: `
|
|
166
|
-
@if (template(); as iconTpl) {
|
|
167
|
-
<ng-container *ngTemplateOutlet="iconTpl" />
|
|
168
|
-
} @else {
|
|
169
|
-
<svg
|
|
170
|
-
class="gog-icon__svg"
|
|
171
|
-
viewBox="0 0 16 16"
|
|
172
|
-
fill="none"
|
|
173
|
-
aria-hidden="true"
|
|
174
|
-
focusable="false"
|
|
175
|
-
>
|
|
176
|
-
@switch (name()) {
|
|
177
|
-
@case ('check') {
|
|
178
|
-
<path
|
|
179
|
-
d="M3 8.5L6.5 12L13 4"
|
|
180
|
-
stroke="currentColor"
|
|
181
|
-
stroke-width="2"
|
|
182
|
-
stroke-linecap="round"
|
|
183
|
-
stroke-linejoin="round"
|
|
184
|
-
/>
|
|
185
|
-
}
|
|
186
|
-
@case ('close') {
|
|
187
|
-
<path
|
|
188
|
-
d="M4 4L12 12M12 4L4 12"
|
|
189
|
-
stroke="currentColor"
|
|
190
|
-
stroke-width="2"
|
|
191
|
-
stroke-linecap="round"
|
|
192
|
-
/>
|
|
193
|
-
}
|
|
194
|
-
@case ('chevron-up') {
|
|
195
|
-
<path
|
|
196
|
-
d="M4 10L8 6L12 10"
|
|
197
|
-
stroke="currentColor"
|
|
198
|
-
stroke-width="2"
|
|
199
|
-
stroke-linecap="round"
|
|
200
|
-
stroke-linejoin="round"
|
|
201
|
-
/>
|
|
202
|
-
}
|
|
203
|
-
@case ('chevron-down') {
|
|
204
|
-
<path
|
|
205
|
-
d="M4 6L8 10L12 6"
|
|
206
|
-
stroke="currentColor"
|
|
207
|
-
stroke-width="2"
|
|
208
|
-
stroke-linecap="round"
|
|
209
|
-
stroke-linejoin="round"
|
|
210
|
-
/>
|
|
211
|
-
}
|
|
212
|
-
@case ('sort-up') {
|
|
213
|
-
<path d="M8 3L4.5 6.5H11.5L8 3Z" fill="currentColor" />
|
|
214
|
-
}
|
|
215
|
-
@case ('sort-down') {
|
|
216
|
-
<path d="M8 13L11.5 9.5H4.5L8 13Z" fill="currentColor" />
|
|
217
|
-
}
|
|
218
|
-
@case ('sort') {
|
|
219
|
-
<path d="M5 5.5H11M5 8H11M5 10.5H11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
|
220
|
-
}
|
|
221
|
-
@case ('success') {
|
|
222
|
-
<path
|
|
223
|
-
d="M3 8.5L6.2 11.7L13 4.9"
|
|
224
|
-
stroke="currentColor"
|
|
225
|
-
stroke-width="1.8"
|
|
226
|
-
stroke-linecap="round"
|
|
227
|
-
stroke-linejoin="round"
|
|
228
|
-
/>
|
|
229
|
-
}
|
|
230
|
-
@case ('error') {
|
|
231
|
-
<path d="M4 4L12 12M12 4L4 12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
|
|
232
|
-
}
|
|
233
|
-
@case ('warning') {
|
|
234
|
-
<path d="M8 3L14 13H2L8 3Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
|
|
235
|
-
<path d="M8 6V9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
|
236
|
-
<circle cx="8" cy="11.5" r="0.75" fill="currentColor" />
|
|
237
|
-
}
|
|
238
|
-
@case ('info') {
|
|
239
|
-
<circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5" />
|
|
240
|
-
<path d="M8 7V11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
|
241
|
-
<circle cx="8" cy="5.25" r="0.75" fill="currentColor" />
|
|
242
|
-
}
|
|
243
|
-
}
|
|
244
|
-
</svg>
|
|
245
|
-
}
|
|
246
|
-
`, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0}.gog-icon__svg{width:var(--gog-icon-size, 1em);height:var(--gog-icon-size, 1em);display:block;color:currentColor}.gog-icon__svg path,.gog-icon__svg circle{stroke-width:var(--gog-icon-stroke-width, 2)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
247
|
-
}
|
|
248
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconComponent, decorators: [{
|
|
249
|
-
type: Component,
|
|
250
|
-
args: [{ selector: 'gog-icon', imports: [NgTemplateOutlet], template: `
|
|
251
|
-
@if (template(); as iconTpl) {
|
|
252
|
-
<ng-container *ngTemplateOutlet="iconTpl" />
|
|
253
|
-
} @else {
|
|
254
|
-
<svg
|
|
255
|
-
class="gog-icon__svg"
|
|
256
|
-
viewBox="0 0 16 16"
|
|
257
|
-
fill="none"
|
|
258
|
-
aria-hidden="true"
|
|
259
|
-
focusable="false"
|
|
260
|
-
>
|
|
261
|
-
@switch (name()) {
|
|
262
|
-
@case ('check') {
|
|
263
|
-
<path
|
|
264
|
-
d="M3 8.5L6.5 12L13 4"
|
|
265
|
-
stroke="currentColor"
|
|
266
|
-
stroke-width="2"
|
|
267
|
-
stroke-linecap="round"
|
|
268
|
-
stroke-linejoin="round"
|
|
269
|
-
/>
|
|
270
|
-
}
|
|
271
|
-
@case ('close') {
|
|
272
|
-
<path
|
|
273
|
-
d="M4 4L12 12M12 4L4 12"
|
|
274
|
-
stroke="currentColor"
|
|
275
|
-
stroke-width="2"
|
|
276
|
-
stroke-linecap="round"
|
|
277
|
-
/>
|
|
278
|
-
}
|
|
279
|
-
@case ('chevron-up') {
|
|
280
|
-
<path
|
|
281
|
-
d="M4 10L8 6L12 10"
|
|
282
|
-
stroke="currentColor"
|
|
283
|
-
stroke-width="2"
|
|
284
|
-
stroke-linecap="round"
|
|
285
|
-
stroke-linejoin="round"
|
|
286
|
-
/>
|
|
287
|
-
}
|
|
288
|
-
@case ('chevron-down') {
|
|
289
|
-
<path
|
|
290
|
-
d="M4 6L8 10L12 6"
|
|
291
|
-
stroke="currentColor"
|
|
292
|
-
stroke-width="2"
|
|
293
|
-
stroke-linecap="round"
|
|
294
|
-
stroke-linejoin="round"
|
|
295
|
-
/>
|
|
296
|
-
}
|
|
297
|
-
@case ('sort-up') {
|
|
298
|
-
<path d="M8 3L4.5 6.5H11.5L8 3Z" fill="currentColor" />
|
|
299
|
-
}
|
|
300
|
-
@case ('sort-down') {
|
|
301
|
-
<path d="M8 13L11.5 9.5H4.5L8 13Z" fill="currentColor" />
|
|
302
|
-
}
|
|
303
|
-
@case ('sort') {
|
|
304
|
-
<path d="M5 5.5H11M5 8H11M5 10.5H11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
|
305
|
-
}
|
|
306
|
-
@case ('success') {
|
|
307
|
-
<path
|
|
308
|
-
d="M3 8.5L6.2 11.7L13 4.9"
|
|
309
|
-
stroke="currentColor"
|
|
310
|
-
stroke-width="1.8"
|
|
311
|
-
stroke-linecap="round"
|
|
312
|
-
stroke-linejoin="round"
|
|
313
|
-
/>
|
|
314
|
-
}
|
|
315
|
-
@case ('error') {
|
|
316
|
-
<path d="M4 4L12 12M12 4L4 12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
|
|
317
|
-
}
|
|
318
|
-
@case ('warning') {
|
|
319
|
-
<path d="M8 3L14 13H2L8 3Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
|
|
320
|
-
<path d="M8 6V9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
|
321
|
-
<circle cx="8" cy="11.5" r="0.75" fill="currentColor" />
|
|
322
|
-
}
|
|
323
|
-
@case ('info') {
|
|
324
|
-
<circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5" />
|
|
325
|
-
<path d="M8 7V11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
|
326
|
-
<circle cx="8" cy="5.25" r="0.75" fill="currentColor" />
|
|
327
|
-
}
|
|
328
|
-
}
|
|
329
|
-
</svg>
|
|
330
|
-
}
|
|
331
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
332
|
-
class: 'gog-icon',
|
|
333
|
-
'[attr.aria-hidden]': 'ariaHidden() ? "true" : null',
|
|
334
|
-
'[attr.aria-label]': 'ariaHidden() ? null : ariaLabel()',
|
|
335
|
-
}, styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0}.gog-icon__svg{width:var(--gog-icon-size, 1em);height:var(--gog-icon-size, 1em);display:block;color:currentColor}.gog-icon__svg path,.gog-icon__svg circle{stroke-width:var(--gog-icon-stroke-width, 2)}\n"] }]
|
|
336
|
-
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], ariaHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaHidden", required: false }] }] } });
|
|
296
|
+
}, template: "<div\n [class.gog-accordion--loading]=\"loading()\"\n [class.gog-accordion--slg]=\"size() === 'slg'\"\n [class.gog-accordion--md]=\"size() === 'md'\"\n [class.gog-accordion--sm]=\"size() === 'sm'\"\n [class.gog-accordion--xsm]=\"size() === 'xsm'\"\n class=\"gog-accordion gog-contained-layout\"\n>\n @if (loading()) {\n @for (item of items(); track item.id) {\n <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\n <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\n <span class=\"gog-accordion__skeleton-line\"></span>\n </div>\n </div>\n }\n } @else {\n @for (item of items(); track item.id) {\n <div\n class=\"gog-accordion__item\"\n [class.gog-accordion__item--open]=\"isOpen(item.id)\"\n [class.gog-accordion__item--disabled]=\"item.disabled\"\n >\n <ng-template #headerButton>\n <button\n [id]=\"uid + '-btn-' + item.id\"\n class=\"gog-accordion__header\"\n [class.gog-accordion__header--chevronless]=\"!showChevron()\"\n [class.gog-accordion__header--open]=\"isOpen(item.id)\"\n [attr.aria-expanded]=\"isOpen(item.id)\"\n [attr.aria-controls]=\"uid + '-body-' + item.id\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [disabled]=\"item.disabled || null\"\n (click)=\"toggle(item)\"\n (keydown)=\"onHeaderKeydown($event)\"\n type=\"button\"\n >\n <span class=\"gog-accordion__header-content\">\n @if (headerTpl(); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"\n tpl.templateRef;\n context: { $implicit: item, open: isOpen(item.id) }\n \"\n />\n } @else {\n <span class=\"gog-accordion__title\">{{ item.title }}</span>\n }\n </span>\n @if (showChevron()) {\n <span class=\"gog-accordion__chevron\" aria-hidden=\"true\">\n @if (chevronTpl(); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"\n tpl.templateRef;\n context: { $implicit: item, open: isOpen(item.id) }\n \"\n />\n } @else {\n <gog-icon name=\"chevron-down\" />\n }\n </span>\n }\n </button>\n </ng-template>\n\n @if (headingLevel(); as level) {\n <div role=\"heading\" [attr.aria-level]=\"level\" class=\"gog-accordion__heading\">\n <ng-container [ngTemplateOutlet]=\"headerButton\" />\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"headerButton\" />\n }\n\n <div\n [id]=\"uid + '-body-' + item.id\"\n class=\"gog-accordion__body\"\n [class.gog-accordion__body--open]=\"isOpen(item.id)\"\n role=\"region\"\n [attr.aria-labelledby]=\"uid + '-btn-' + item.id\"\n [attr.aria-hidden]=\"!isOpen(item.id)\"\n [attr.inert]=\"!isOpen(item.id) ? '' : null\"\n >\n <div class=\"gog-accordion__body-inner\">\n @if (contentTpl(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item }\" />\n }\n </div>\n </div>\n </div>\n }\n }\n</div>\n", styles: ["@charset \"UTF-8\";.gog-accordion{display:flex;flex-direction:column;width:100%}.gog-accordion__item{border-bottom:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color)}.gog-accordion__item:first-child{border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);border-top-left-radius:var(--gog-accordion-radius);border-top-right-radius:var(--gog-accordion-radius)}.gog-accordion__item:last-child{border-bottom-left-radius:var(--gog-accordion-radius);border-bottom-right-radius:var(--gog-accordion-radius);overflow:hidden}.gog-accordion__item--disabled .gog-accordion__header{cursor:not-allowed;opacity:var(--gog-accordion-disabled-opacity)}.gog-accordion__item--disabled .gog-accordion__header:hover{color:var(--gog-accordion-text-color);background-color:var(--gog-accordion-header-bg)}.gog-accordion__heading{display:contents}.gog-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--gog-accordion-padding-y, var(--gog-accordion-size-padding-y, var(--gog-accordion-lg-padding-y))) var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));gap:var(--gog-accordion-header-gap);background:var(--gog-accordion-header-bg);border:none;color:var(--gog-accordion-text-color);text-align:left;cursor:pointer;font-family:var(--gog-accordion-font-family);text-transform:var(--gog-accordion-header-text-transform);letter-spacing:var(--gog-accordion-letter-spacing, var(--gog-accordion-size-letter-spacing, var(--gog-accordion-lg-letter-spacing)));font-size:var(--gog-accordion-font-size, var(--gog-accordion-size-font-size, var(--gog-accordion-lg-font-size)));transition:color var(--gog-accordion-transition-duration) var(--gog-easing),background-color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header:hover{color:var(--gog-accordion-accent-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:focus-visible{outline:var(--gog-accordion-focus-ring-width) solid var(--gog-accordion-hover-ring);outline-offset:calc(var(--gog-accordion-focus-ring-width) * -1)}.gog-accordion__header--open{color:var(--gog-accordion-accent-color)}.gog-accordion__title{flex:1}.gog-accordion__header-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--gog-accordion-content-gap, var(--gog-accordion-size-content-gap, var(--gog-accordion-lg-content-gap)));min-width:0}.gog-accordion__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));height:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));font-size:var(--gog-accordion-chevron-font-size, var(--gog-accordion-size-chevron-font-size, var(--gog-accordion-lg-chevron-font-size)));color:var(--gog-accordion-border-color);transition:transform var(--gog-accordion-chevron-transition-duration) var(--gog-easing),color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron{transform:rotate(180deg);color:var(--gog-accordion-accent-color)}.gog-accordion__body{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);transition:grid-template-rows var(--gog-accordion-body-transition-duration) var(--gog-easing),opacity var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open{grid-template-rows:1fr;opacity:1}.gog-accordion__body-inner{min-height:0;overflow:hidden;border-bottom-left-radius:var(--gog-accordion-body-radius);border-bottom-right-radius:var(--gog-accordion-body-radius);padding:0 var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));background:var(--gog-accordion-body-bg);color:var(--gog-accordion-body-color);font-family:var(--gog-accordion-body-font-family);font-size:var(--gog-accordion-body-font-size, var(--gog-accordion-size-body-font-size, var(--gog-accordion-lg-body-font-size)));line-height:var(--gog-accordion-size-body-line-height, var(--gog-accordion-lg-body-line-height));transform:translateY(var(--gog-accordion-body-lift));transition:transform var(--gog-accordion-body-transition-duration) var(--gog-easing),padding var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open .gog-accordion__body-inner{padding-top:var(--gog-accordion-body-padding-top, var(--gog-accordion-size-body-padding-top, var(--gog-accordion-lg-body-padding-top)));padding-bottom:var(--gog-accordion-body-padding-bottom, var(--gog-accordion-size-body-padding-bottom, var(--gog-accordion-lg-body-padding-bottom)));transform:translateY(0)}.gog-accordion--slg{--gog-accordion-size-padding-y: var(--gog-accordion-slg-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-slg-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-slg-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-slg-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-slg-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-slg-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-slg-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-slg-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-slg-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-slg-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-slg-chevron-font-size)}.gog-accordion--md{--gog-accordion-size-padding-y: var(--gog-accordion-md-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-md-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-md-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-md-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-md-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-md-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-md-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-md-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-md-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-md-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-md-chevron-font-size)}.gog-accordion--sm{--gog-accordion-size-padding-y: var(--gog-accordion-sm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-sm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-sm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-sm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-sm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-sm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-sm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-sm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-sm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-sm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-sm-chevron-font-size)}.gog-accordion--xsm{--gog-accordion-size-padding-y: var(--gog-accordion-xsm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-xsm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-xsm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-xsm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-xsm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-xsm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-xsm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-xsm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-xsm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-xsm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-xsm-chevron-font-size)}.gog-accordion__header--skeleton{cursor:default;pointer-events:none}.gog-accordion__skeleton-line{display:block;height:var(--gog-accordion-skeleton-height);width:var(--gog-accordion-skeleton-width);border-radius:var(--gog-accordion-skeleton-radius);background:linear-gradient(90deg,var(--gog-accordion-skeleton-start) 25%,var(--gog-accordion-skeleton-mid) 50%,var(--gog-accordion-skeleton-end) 75%);background-size:200% 100%;animation:gog-accordion-shimmer var(--gog-accordion-skeleton-duration) infinite}@keyframes gog-accordion-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}.gog-accordion__skeleton-line{animation:none}}\n"] }]
|
|
297
|
+
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], expandFirst: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandFirst", required: false }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChevron", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], openIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openIds", required: false }] }, { type: i0.Output, args: ["openIdsChange"] }], gogToggle: [{ type: i0.Output, args: ["gogToggle"] }], headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionHeaderDirective), { isSignal: true }] }], chevronTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionChevronDirective), { isSignal: true }] }], contentTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionContentDirective), { isSignal: true }] }] } });
|
|
337
298
|
|
|
338
|
-
const GOG_CHECKABLE_CONTROL_PADDING = 'var(--control-checkbox-padding, 6px)';
|
|
299
|
+
const GOG_CHECKABLE_CONTROL_PADDING = 'var(--gog-control-checkbox-padding, 6px)';
|
|
339
300
|
const GOG_CHECKABLE_CONTROL_SIZE_MAP = {
|
|
301
|
+
xsm: {
|
|
302
|
+
boxSize: 'var(--gog-control-checkbox-box-size-xsm, 12px)',
|
|
303
|
+
labelSize: 'var(--gog-control-checkbox-label-size-xsm, 0.6875rem)',
|
|
304
|
+
indicatorSize: 'var(--gog-control-checkbox-icon-size-xsm, 10px)',
|
|
305
|
+
},
|
|
340
306
|
sm: {
|
|
341
|
-
boxSize: 'var(--control-checkbox-box-size-sm, 18px)',
|
|
342
|
-
labelSize: 'var(--control-checkbox-label-size-sm, 0.8125rem)',
|
|
343
|
-
indicatorSize: 'var(--control-checkbox-icon-size-sm, 12px)',
|
|
307
|
+
boxSize: 'var(--gog-control-checkbox-box-size-sm, 18px)',
|
|
308
|
+
labelSize: 'var(--gog-control-checkbox-label-size-sm, 0.8125rem)',
|
|
309
|
+
indicatorSize: 'var(--gog-control-checkbox-icon-size-sm, 12px)',
|
|
344
310
|
},
|
|
345
311
|
md: {
|
|
346
|
-
boxSize: 'var(--control-checkbox-box-size-md, 24px)',
|
|
347
|
-
labelSize: 'var(--control-checkbox-label-size-md, 0.9375rem)',
|
|
348
|
-
indicatorSize: 'var(--control-checkbox-icon-size-md, 14px)',
|
|
312
|
+
boxSize: 'var(--gog-control-checkbox-box-size-md, 24px)',
|
|
313
|
+
labelSize: 'var(--gog-control-checkbox-label-size-md, 0.9375rem)',
|
|
314
|
+
indicatorSize: 'var(--gog-control-checkbox-icon-size-md, 14px)',
|
|
349
315
|
},
|
|
350
316
|
lg: {
|
|
351
|
-
boxSize: 'var(--control-checkbox-box-size-lg, 32px)',
|
|
352
|
-
labelSize: 'var(--control-checkbox-label-size-lg, 1.0625rem)',
|
|
353
|
-
indicatorSize: 'var(--control-checkbox-icon-size-lg, 18px)',
|
|
317
|
+
boxSize: 'var(--gog-control-checkbox-box-size-lg, 32px)',
|
|
318
|
+
labelSize: 'var(--gog-control-checkbox-label-size-lg, 1.0625rem)',
|
|
319
|
+
indicatorSize: 'var(--gog-control-checkbox-icon-size-lg, 18px)',
|
|
320
|
+
},
|
|
321
|
+
slg: {
|
|
322
|
+
boxSize: 'var(--gog-control-checkbox-box-size-slg, 40px)',
|
|
323
|
+
labelSize: 'var(--gog-control-checkbox-label-size-slg, 1.1875rem)',
|
|
324
|
+
indicatorSize: 'var(--gog-control-checkbox-icon-size-slg, 22px)',
|
|
354
325
|
},
|
|
355
326
|
};
|
|
356
327
|
|
|
@@ -361,17 +332,21 @@ class CheckboxComponent {
|
|
|
361
332
|
indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
|
|
362
333
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
363
334
|
checkIconTemplate = input(null, ...(ngDevMode ? [{ debugName: "checkIconTemplate" }] : /* istanbul ignore next */ []));
|
|
364
|
-
/**
|
|
335
|
+
/**
|
|
336
|
+
* Two-way bindable checked state: `[(checked)]="signal"`.
|
|
337
|
+
* This is the same state Angular Forms drives via `writeValue`/`registerOnChange`
|
|
338
|
+
* when the component is used with `formControlName`/`[formControl]`/`ngModel`.
|
|
339
|
+
* Don't wire both a form directive AND `[(checked)]` to the same instance —
|
|
340
|
+
* pick one, otherwise you end up with two competing sources of truth.
|
|
341
|
+
*/
|
|
365
342
|
checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
366
|
-
cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
|
|
367
|
-
isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
368
343
|
controlSize = computed(() => GOG_CHECKABLE_CONTROL_SIZE_MAP[this.size()], ...(ngDevMode ? [{ debugName: "controlSize" }] : /* istanbul ignore next */ []));
|
|
369
344
|
boxSize = computed(() => this.controlSize().boxSize, ...(ngDevMode ? [{ debugName: "boxSize" }] : /* istanbul ignore next */ []));
|
|
370
345
|
checkboxPadding = GOG_CHECKABLE_CONTROL_PADDING;
|
|
371
346
|
labelSize = computed(() => this.controlSize().labelSize, ...(ngDevMode ? [{ debugName: "labelSize" }] : /* istanbul ignore next */ []));
|
|
372
347
|
iconSize = computed(() => this.controlSize().indicatorSize, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
|
|
373
|
-
|
|
374
|
-
|
|
348
|
+
cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
|
|
349
|
+
isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
375
350
|
writeValue(val) {
|
|
376
351
|
this.checked.set(val ?? false);
|
|
377
352
|
}
|
|
@@ -398,6 +373,8 @@ class CheckboxComponent {
|
|
|
398
373
|
return;
|
|
399
374
|
this.onTouched();
|
|
400
375
|
}
|
|
376
|
+
onCheckedChange = () => { };
|
|
377
|
+
onTouched = () => { };
|
|
401
378
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
402
379
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CheckboxComponent, isStandalone: true, selector: "gog-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checkIconTemplate: { classPropertyName: "checkIconTemplate", publicName: "checkIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "style.--gog-checkbox-box-size": "boxSize()", "style.--gog-checkbox-label-size": "labelSize()", "style.--gog-checkbox-icon-size": "iconSize()", "style.--gog-checkbox-padding": "checkboxPadding" } }, providers: [
|
|
403
380
|
{
|
|
@@ -405,7 +382,7 @@ class CheckboxComponent {
|
|
|
405
382
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
406
383
|
multi: true,
|
|
407
384
|
},
|
|
408
|
-
], ngImport: i0, template: "<label
|
|
385
|
+
], ngImport: i0, template: "<label [class.gog-checkbox--disabled]=\"isDisabled()\" class=\"gog-checkbox gog-contained-layout\">\n <input\n (blur)=\"onBlur()\"\n (change)=\"onInputChange($event)\"\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n [checked]=\"checked()\"\n [disabled]=\"isDisabled()\"\n [indeterminate]=\"indeterminate()\"\n class=\"gog-checkbox__input\"\n type=\"checkbox\"\n />\n\n <span\n [class.gog-checkbox__box--checked]=\"checked()\"\n [class.gog-checkbox__box--indeterminate]=\"indeterminate()\"\n class=\"gog-checkbox__box\"\n >\n @if (indeterminate()) {\n <span class=\"gog-checkbox__dash\" aria-hidden=\"true\"></span>\n } @else if (checked()) {\n <gog-icon [template]=\"checkIconTemplate()\" name=\"check\" />\n }\n </span>\n\n @if (label()) {\n <span class=\"gog-checkbox__label\">{{ label() }}</span>\n }\n</label>\n", styles: [".gog-checkbox{display:inline-flex;align-items:center;gap:var(--gog-checkbox-gap);padding:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}.gog-checkbox--disabled{opacity:var(--gog-checkbox-disabled-opacity);cursor:not-allowed}.gog-checkbox__input{position:absolute;top:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));left:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));margin:0;opacity:0;cursor:inherit}.gog-checkbox__box{display:flex;align-items:center;justify-content:center;width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));box-sizing:border-box;border:var(--gog-checkbox-border-width) var(--gog-checkbox-border-style) var(--gog-checkbox-border-color);border-radius:var(--gog-checkbox-radius);background-color:var(--gog-checkbox-bg);color:var(--gog-checkbox-icon-color);flex:0 0 auto;line-height:0;overflow:hidden;transition:border-color var(--gog-checkbox-transition-duration) var(--gog-easing),background-color var(--gog-checkbox-transition-duration) var(--gog-easing)}.gog-checkbox__box--checked,.gog-checkbox__box--indeterminate{border-color:var(--gog-checkbox-checked-border);background-color:var(--gog-checkbox-checked-bg)}.gog-checkbox__box gog-icon{display:block;font-size:var(--gog-checkbox-icon-size, var(--gog-control-checkbox-icon-size-md));line-height:1;pointer-events:none}.gog-checkbox__dash{width:calc(var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md)) * var(--gog-checkbox-dash-width-ratio));height:var(--gog-checkbox-dash-height);border-radius:var(--gog-checkbox-dash-radius);background-color:currentColor;pointer-events:none}.gog-checkbox__label{font-family:var(--gog-checkbox-font-family);font-size:var(--gog-checkbox-label-size, var(--gog-control-checkbox-label-size-md));line-height:var(--gog-checkbox-label-line-height);color:var(--gog-checkbox-label-color)}.gog-checkbox__input:focus-visible+.gog-checkbox__box{outline:var(--gog-checkbox-focus-ring-width) solid var(--gog-checkbox-focus-ring);outline-offset:var(--gog-checkbox-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.gog-checkbox__box{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
409
386
|
}
|
|
410
387
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
411
388
|
type: Component,
|
|
@@ -420,7 +397,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
420
397
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
421
398
|
multi: true,
|
|
422
399
|
},
|
|
423
|
-
], template: "<label
|
|
400
|
+
], template: "<label [class.gog-checkbox--disabled]=\"isDisabled()\" class=\"gog-checkbox gog-contained-layout\">\n <input\n (blur)=\"onBlur()\"\n (change)=\"onInputChange($event)\"\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n [checked]=\"checked()\"\n [disabled]=\"isDisabled()\"\n [indeterminate]=\"indeterminate()\"\n class=\"gog-checkbox__input\"\n type=\"checkbox\"\n />\n\n <span\n [class.gog-checkbox__box--checked]=\"checked()\"\n [class.gog-checkbox__box--indeterminate]=\"indeterminate()\"\n class=\"gog-checkbox__box\"\n >\n @if (indeterminate()) {\n <span class=\"gog-checkbox__dash\" aria-hidden=\"true\"></span>\n } @else if (checked()) {\n <gog-icon [template]=\"checkIconTemplate()\" name=\"check\" />\n }\n </span>\n\n @if (label()) {\n <span class=\"gog-checkbox__label\">{{ label() }}</span>\n }\n</label>\n", styles: [".gog-checkbox{display:inline-flex;align-items:center;gap:var(--gog-checkbox-gap);padding:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}.gog-checkbox--disabled{opacity:var(--gog-checkbox-disabled-opacity);cursor:not-allowed}.gog-checkbox__input{position:absolute;top:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));left:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));margin:0;opacity:0;cursor:inherit}.gog-checkbox__box{display:flex;align-items:center;justify-content:center;width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));box-sizing:border-box;border:var(--gog-checkbox-border-width) var(--gog-checkbox-border-style) var(--gog-checkbox-border-color);border-radius:var(--gog-checkbox-radius);background-color:var(--gog-checkbox-bg);color:var(--gog-checkbox-icon-color);flex:0 0 auto;line-height:0;overflow:hidden;transition:border-color var(--gog-checkbox-transition-duration) var(--gog-easing),background-color var(--gog-checkbox-transition-duration) var(--gog-easing)}.gog-checkbox__box--checked,.gog-checkbox__box--indeterminate{border-color:var(--gog-checkbox-checked-border);background-color:var(--gog-checkbox-checked-bg)}.gog-checkbox__box gog-icon{display:block;font-size:var(--gog-checkbox-icon-size, var(--gog-control-checkbox-icon-size-md));line-height:1;pointer-events:none}.gog-checkbox__dash{width:calc(var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md)) * var(--gog-checkbox-dash-width-ratio));height:var(--gog-checkbox-dash-height);border-radius:var(--gog-checkbox-dash-radius);background-color:currentColor;pointer-events:none}.gog-checkbox__label{font-family:var(--gog-checkbox-font-family);font-size:var(--gog-checkbox-label-size, var(--gog-control-checkbox-label-size-md));line-height:var(--gog-checkbox-label-line-height);color:var(--gog-checkbox-label-color)}.gog-checkbox__input:focus-visible+.gog-checkbox__box{outline:var(--gog-checkbox-focus-ring-width) solid var(--gog-checkbox-focus-ring);outline-offset:var(--gog-checkbox-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.gog-checkbox__box{transition:none}}\n"] }]
|
|
424
401
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], checkIconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkIconTemplate", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
|
|
425
402
|
|
|
426
403
|
const DIALOG_DATA = new InjectionToken('DIALOG_DATA');
|
|
@@ -438,11 +415,11 @@ class ConfirmationDialogComponent {
|
|
|
438
415
|
this.ref.close(false);
|
|
439
416
|
}
|
|
440
417
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
441
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ConfirmationDialogComponent, isStandalone: true, selector: "gog-confirmation-dialog", ngImport: i0, template: "<div\n class=\"confirm-dialog\"\n [attr.aria-labelledby]=\"'confirm-title-' + instanceId\"\n [attr.aria-describedby]=\"'confirm-desc-' + instanceId\"\n>\n <h3 [id]=\"'confirm-title-' + instanceId\" class=\"confirm-dialog__title heading-md\">\n {{ data.title }}\n </h3>\n <p [id]=\"'confirm-desc-' + instanceId\" class=\"confirm-dialog__description body-sm\">\n {{ data.description }}\n </p>\n <div class=\"confirm-dialog__actions\">\n <gog-button variant=\"ghost\" type=\"button\" (gogClick)=\"cancel()\">{{
|
|
418
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ConfirmationDialogComponent, isStandalone: true, selector: "gog-confirmation-dialog", ngImport: i0, template: "<div\n class=\"confirm-dialog\"\n [attr.aria-labelledby]=\"'confirm-title-' + instanceId\"\n [attr.aria-describedby]=\"'confirm-desc-' + instanceId\"\n>\n <h3 [id]=\"'confirm-title-' + instanceId\" class=\"confirm-dialog__title heading-md\">\n {{ data.title }}\n </h3>\n <p [id]=\"'confirm-desc-' + instanceId\" class=\"confirm-dialog__description body-sm\">\n {{ data.description }}\n </p>\n <div class=\"confirm-dialog__actions\">\n <gog-button variant=\"ghost\" type=\"button\" (gogClick)=\"cancel()\">{{\n data.cancelText\n }}</gog-button>\n <gog-button variant=\"primary\" type=\"button\" (gogClick)=\"confirm()\">{{\n data.confirmText\n }}</gog-button>\n </div>\n</div>\n", styles: [":host{display:block;contain:layout style}.confirm-dialog{display:flex;flex-direction:column;gap:var(--gog-confirm-gap);min-width:var(--gog-confirm-min-width);max-width:var(--gog-confirm-max-width);color:var(--gog-confirm-color)}.confirm-dialog__title{margin:0}.confirm-dialog__description{margin:0;color:var(--gog-confirm-description-color)}.confirm-dialog__actions{display:flex;justify-content:flex-end;gap:var(--gog-confirm-actions-gap);margin-top:var(--gog-confirm-actions-offset)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
442
419
|
}
|
|
443
420
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
|
|
444
421
|
type: Component,
|
|
445
|
-
args: [{ selector: 'gog-confirmation-dialog', imports: [ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"confirm-dialog\"\n [attr.aria-labelledby]=\"'confirm-title-' + instanceId\"\n [attr.aria-describedby]=\"'confirm-desc-' + instanceId\"\n>\n <h3 [id]=\"'confirm-title-' + instanceId\" class=\"confirm-dialog__title heading-md\">\n {{ data.title }}\n </h3>\n <p [id]=\"'confirm-desc-' + instanceId\" class=\"confirm-dialog__description body-sm\">\n {{ data.description }}\n </p>\n <div class=\"confirm-dialog__actions\">\n <gog-button variant=\"ghost\" type=\"button\" (gogClick)=\"cancel()\">{{
|
|
422
|
+
args: [{ selector: 'gog-confirmation-dialog', imports: [ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"confirm-dialog\"\n [attr.aria-labelledby]=\"'confirm-title-' + instanceId\"\n [attr.aria-describedby]=\"'confirm-desc-' + instanceId\"\n>\n <h3 [id]=\"'confirm-title-' + instanceId\" class=\"confirm-dialog__title heading-md\">\n {{ data.title }}\n </h3>\n <p [id]=\"'confirm-desc-' + instanceId\" class=\"confirm-dialog__description body-sm\">\n {{ data.description }}\n </p>\n <div class=\"confirm-dialog__actions\">\n <gog-button variant=\"ghost\" type=\"button\" (gogClick)=\"cancel()\">{{\n data.cancelText\n }}</gog-button>\n <gog-button variant=\"primary\" type=\"button\" (gogClick)=\"confirm()\">{{\n data.confirmText\n }}</gog-button>\n </div>\n</div>\n", styles: [":host{display:block;contain:layout style}.confirm-dialog{display:flex;flex-direction:column;gap:var(--gog-confirm-gap);min-width:var(--gog-confirm-min-width);max-width:var(--gog-confirm-max-width);color:var(--gog-confirm-color)}.confirm-dialog__title{margin:0}.confirm-dialog__description{margin:0;color:var(--gog-confirm-description-color)}.confirm-dialog__actions{display:flex;justify-content:flex-end;gap:var(--gog-confirm-actions-gap);margin-top:var(--gog-confirm-actions-offset)}\n"] }]
|
|
446
423
|
}] });
|
|
447
424
|
|
|
448
425
|
class DialogService {
|
|
@@ -470,7 +447,8 @@ class DialogService {
|
|
|
470
447
|
resolve: (result) => resolveAfterClosed(result),
|
|
471
448
|
};
|
|
472
449
|
if (config.modal !== false && this.modalDialogCount === 0) {
|
|
473
|
-
this.focusedBeforeOpen =
|
|
450
|
+
this.focusedBeforeOpen =
|
|
451
|
+
this.document.activeElement instanceof HTMLElement ? this.document.activeElement : null;
|
|
474
452
|
this.lockBodyScroll();
|
|
475
453
|
}
|
|
476
454
|
if (config.modal !== false) {
|
|
@@ -596,14 +574,14 @@ class DialogComponent {
|
|
|
596
574
|
return dialog.zIndex;
|
|
597
575
|
}
|
|
598
576
|
onBackdropPointerDown(event, dialog) {
|
|
599
|
-
if (
|
|
577
|
+
if (dialog.config.closable === false)
|
|
600
578
|
return;
|
|
601
579
|
if (event.target === event.currentTarget) {
|
|
602
580
|
this.backdropPress.add(dialog.id);
|
|
603
581
|
}
|
|
604
582
|
}
|
|
605
583
|
onBackdropPointerUp(event, dialog) {
|
|
606
|
-
if (
|
|
584
|
+
if (dialog.config.closable === false)
|
|
607
585
|
return;
|
|
608
586
|
const shouldClose = this.backdropPress.has(dialog.id) && event.target === event.currentTarget;
|
|
609
587
|
this.backdropPress.delete(dialog.id);
|
|
@@ -665,7 +643,8 @@ class DialogComponent {
|
|
|
665
643
|
return entry.id;
|
|
666
644
|
}
|
|
667
645
|
isDraggable(dialog) {
|
|
668
|
-
return dialog.config.draggable !== false &&
|
|
646
|
+
return (dialog.config.draggable !== false &&
|
|
647
|
+
(dialog.config.title !== undefined || dialog.config.closable !== false));
|
|
669
648
|
}
|
|
670
649
|
get dialogDocument() {
|
|
671
650
|
return this.host.nativeElement.ownerDocument;
|
|
@@ -689,11 +668,11 @@ class DialogComponent {
|
|
|
689
668
|
return rect.width > 0 && rect.height > 0;
|
|
690
669
|
}
|
|
691
670
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
692
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DialogComponent, isStandalone: true, selector: "gog-dialog", ngImport: i0, template: "@for (dialog of dialogService.dialogs(); track trackDialog($index, dialog)) {\n <div\n class=\"gog-dialog__backdrop\"\n [class.gog-dialog__backdrop--modal]=\"dialog.config.modal !== false\"\n [style.z-index]=\"panelZ(dialog)\"\n (pointerdown)=\"onBackdropPointerDown($event, dialog)\"\n (pointerup)=\"onBackdropPointerUp($event, dialog)\"\n (pointercancel)=\"onBackdropPointerUp($event, dialog)\"\n >\n <div\n #panel\n class=\"gog-dialog__panel\"\n [attr.data-dialog-id]=\"dialog.id\"\n [style.--dropdown-z]=\"panelZ(dialog) + 10\"\n [style.--gog-dialog-offset-x]=\"dialog.offsetX + 'px'\"\n [style.--gog-dialog-offset-y]=\"dialog.offsetY + 'px'\"\n [style.width]=\"dialog.config.width ?? 'auto'\"\n [style.max-width]=\"dialog.config.maxWidth ?? '90vw'\"\n [attr.role]=\"dialog.config.role ?? 'dialog'\"\n [attr.aria-modal]=\"dialog.config.modal === false ? null : 'true'\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"dialog.config.title ? getTitleId(dialog) : null\"\n (keydown)=\"onPanelKeydown($event, dialog, panel)\"\n >\n @if (dialog.config.title || dialog.config.closable !== false) {\n <div\n class=\"gog-dialog__header\"\n [class.gog-dialog__header--draggable]=\"isDraggable(dialog)\"\n (pointerdown)=\"startDrag($event, dialog)\"\n >\n @if (dialog.config.title) {\n <h2 [id]=\"getTitleId(dialog)\" class=\"gog-dialog__title
|
|
671
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DialogComponent, isStandalone: true, selector: "gog-dialog", ngImport: i0, template: "@for (dialog of dialogService.dialogs(); track trackDialog($index, dialog)) {\n <div\n class=\"gog-dialog__backdrop\"\n [class.gog-dialog__backdrop--modal]=\"dialog.config.modal !== false\"\n [style.z-index]=\"panelZ(dialog)\"\n (pointerdown)=\"onBackdropPointerDown($event, dialog)\"\n (pointerup)=\"onBackdropPointerUp($event, dialog)\"\n (pointercancel)=\"onBackdropPointerUp($event, dialog)\"\n >\n <div\n #panel\n class=\"gog-dialog__panel\"\n [attr.data-dialog-id]=\"dialog.id\"\n [style.--gog-dropdown-z]=\"panelZ(dialog) + 10\"\n [style.--gog-dialog-offset-x]=\"dialog.offsetX + 'px'\"\n [style.--gog-dialog-offset-y]=\"dialog.offsetY + 'px'\"\n [style.width]=\"dialog.config.width ?? 'auto'\"\n [style.max-width]=\"dialog.config.maxWidth ?? '90vw'\"\n [attr.role]=\"dialog.config.role ?? 'dialog'\"\n [attr.aria-modal]=\"dialog.config.modal === false ? null : 'true'\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"dialog.config.title ? getTitleId(dialog) : null\"\n (keydown)=\"onPanelKeydown($event, dialog, panel)\"\n >\n @if (dialog.config.title || dialog.config.closable !== false) {\n <div\n class=\"gog-dialog__header\"\n [class.gog-dialog__header--draggable]=\"isDraggable(dialog)\"\n (pointerdown)=\"startDrag($event, dialog)\"\n >\n @if (dialog.config.title) {\n <h2 [id]=\"getTitleId(dialog)\" class=\"gog-dialog__title\">\n {{ dialog.config.title }}\n </h2>\n }\n @if (dialog.config.closable !== false) {\n <button\n type=\"button\"\n class=\"gog-dialog__close gog-inline-center\"\n aria-label=\"Close dialog\"\n (click)=\"close(dialog)\"\n >\n <gog-icon\n [template]=\"dialog.config.closeIconTemplate ?? null\"\n [name]=\"dialog.config.closeIconName ?? 'close'\"\n />\n </button>\n }\n </div>\n }\n\n <div class=\"gog-dialog__body\">\n <ng-container *ngComponentOutlet=\"dialog.config.component; injector: getInjector(dialog)\" />\n </div>\n </div>\n </div>\n}\n", styles: [":host{display:contents}.gog-dialog__backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--gog-dialog-backdrop-padding);animation:gog-fade-in var(--gog-dialog-backdrop-fade-duration) var(--gog-easing)}.gog-dialog__backdrop--modal{background:var(--gog-dialog-backdrop-bg);-webkit-backdrop-filter:blur(var(--gog-dialog-backdrop-blur));backdrop-filter:blur(var(--gog-dialog-backdrop-blur))}.gog-dialog__panel{display:flex;flex-direction:column;background:var(--gog-dialog-bg);color:var(--gog-dialog-color);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-border);box-shadow:var(--gog-dialog-shadow);overflow:visible;max-height:var(--gog-dialog-max-height);animation:gog-slide-in var(--gog-dialog-enter-duration) var(--gog-easing);min-width:var(--gog-dialog-min-width);border-radius:var(--gog-dialog-radius);transform:translate3d(var(--gog-dialog-offset-x, 0px),var(--gog-dialog-offset-y, 0px),0)}.gog-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-dialog-header-padding);border-bottom:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-header-border-color);gap:var(--gog-dialog-header-gap);flex-shrink:0}.gog-dialog__header--draggable{cursor:move;touch-action:none;-webkit-user-select:none;user-select:none}.gog-dialog__title{margin:0;color:var(--gog-dialog-color);font-family:var(--gog-dialog-font-family)}.gog-dialog__close{justify-content:center;width:var(--gog-dialog-close-size);height:var(--gog-dialog-close-size);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) transparent;background:transparent;color:var(--gog-dialog-close-color);cursor:pointer;flex-shrink:0;padding:0;line-height:1;font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close gog-icon{font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close:hover{color:var(--gog-dialog-close-hover-color);border-color:var(--gog-dialog-close-hover-border);background:var(--gog-dialog-close-hover-bg)}.gog-dialog__close:focus-visible{outline:var(--gog-dialog-close-focus-ring-width) solid var(--gog-dialog-close-focus-ring);outline-offset:var(--gog-dialog-close-focus-ring-offset)}.gog-dialog__body{padding:var(--gog-dialog-body-padding);overflow-y:auto;flex:1;max-height:var(--gog-dialog-body-max-height)}@keyframes gog-fade-in{0%{opacity:0}to{opacity:1}}@keyframes gog-slide-in{0%{transform:translateY(var(--gog-dialog-enter-distance));opacity:0}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.gog-dialog__backdrop,.gog-dialog__panel,.gog-dialog__close{animation:none;transition:none}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
693
672
|
}
|
|
694
673
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DialogComponent, decorators: [{
|
|
695
674
|
type: Component,
|
|
696
|
-
args: [{ selector: 'gog-dialog', imports: [NgComponentOutlet, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (dialog of dialogService.dialogs(); track trackDialog($index, dialog)) {\n <div\n class=\"gog-dialog__backdrop\"\n [class.gog-dialog__backdrop--modal]=\"dialog.config.modal !== false\"\n [style.z-index]=\"panelZ(dialog)\"\n (pointerdown)=\"onBackdropPointerDown($event, dialog)\"\n (pointerup)=\"onBackdropPointerUp($event, dialog)\"\n (pointercancel)=\"onBackdropPointerUp($event, dialog)\"\n >\n <div\n #panel\n class=\"gog-dialog__panel\"\n [attr.data-dialog-id]=\"dialog.id\"\n [style.--dropdown-z]=\"panelZ(dialog) + 10\"\n [style.--gog-dialog-offset-x]=\"dialog.offsetX + 'px'\"\n [style.--gog-dialog-offset-y]=\"dialog.offsetY + 'px'\"\n [style.width]=\"dialog.config.width ?? 'auto'\"\n [style.max-width]=\"dialog.config.maxWidth ?? '90vw'\"\n [attr.role]=\"dialog.config.role ?? 'dialog'\"\n [attr.aria-modal]=\"dialog.config.modal === false ? null : 'true'\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"dialog.config.title ? getTitleId(dialog) : null\"\n (keydown)=\"onPanelKeydown($event, dialog, panel)\"\n >\n @if (dialog.config.title || dialog.config.closable !== false) {\n <div\n class=\"gog-dialog__header\"\n [class.gog-dialog__header--draggable]=\"isDraggable(dialog)\"\n (pointerdown)=\"startDrag($event, dialog)\"\n >\n @if (dialog.config.title) {\n <h2 [id]=\"getTitleId(dialog)\" class=\"gog-dialog__title
|
|
675
|
+
args: [{ selector: 'gog-dialog', imports: [NgComponentOutlet, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (dialog of dialogService.dialogs(); track trackDialog($index, dialog)) {\n <div\n class=\"gog-dialog__backdrop\"\n [class.gog-dialog__backdrop--modal]=\"dialog.config.modal !== false\"\n [style.z-index]=\"panelZ(dialog)\"\n (pointerdown)=\"onBackdropPointerDown($event, dialog)\"\n (pointerup)=\"onBackdropPointerUp($event, dialog)\"\n (pointercancel)=\"onBackdropPointerUp($event, dialog)\"\n >\n <div\n #panel\n class=\"gog-dialog__panel\"\n [attr.data-dialog-id]=\"dialog.id\"\n [style.--gog-dropdown-z]=\"panelZ(dialog) + 10\"\n [style.--gog-dialog-offset-x]=\"dialog.offsetX + 'px'\"\n [style.--gog-dialog-offset-y]=\"dialog.offsetY + 'px'\"\n [style.width]=\"dialog.config.width ?? 'auto'\"\n [style.max-width]=\"dialog.config.maxWidth ?? '90vw'\"\n [attr.role]=\"dialog.config.role ?? 'dialog'\"\n [attr.aria-modal]=\"dialog.config.modal === false ? null : 'true'\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"dialog.config.title ? getTitleId(dialog) : null\"\n (keydown)=\"onPanelKeydown($event, dialog, panel)\"\n >\n @if (dialog.config.title || dialog.config.closable !== false) {\n <div\n class=\"gog-dialog__header\"\n [class.gog-dialog__header--draggable]=\"isDraggable(dialog)\"\n (pointerdown)=\"startDrag($event, dialog)\"\n >\n @if (dialog.config.title) {\n <h2 [id]=\"getTitleId(dialog)\" class=\"gog-dialog__title\">\n {{ dialog.config.title }}\n </h2>\n }\n @if (dialog.config.closable !== false) {\n <button\n type=\"button\"\n class=\"gog-dialog__close gog-inline-center\"\n aria-label=\"Close dialog\"\n (click)=\"close(dialog)\"\n >\n <gog-icon\n [template]=\"dialog.config.closeIconTemplate ?? null\"\n [name]=\"dialog.config.closeIconName ?? 'close'\"\n />\n </button>\n }\n </div>\n }\n\n <div class=\"gog-dialog__body\">\n <ng-container *ngComponentOutlet=\"dialog.config.component; injector: getInjector(dialog)\" />\n </div>\n </div>\n </div>\n}\n", styles: [":host{display:contents}.gog-dialog__backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--gog-dialog-backdrop-padding);animation:gog-fade-in var(--gog-dialog-backdrop-fade-duration) var(--gog-easing)}.gog-dialog__backdrop--modal{background:var(--gog-dialog-backdrop-bg);-webkit-backdrop-filter:blur(var(--gog-dialog-backdrop-blur));backdrop-filter:blur(var(--gog-dialog-backdrop-blur))}.gog-dialog__panel{display:flex;flex-direction:column;background:var(--gog-dialog-bg);color:var(--gog-dialog-color);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-border);box-shadow:var(--gog-dialog-shadow);overflow:visible;max-height:var(--gog-dialog-max-height);animation:gog-slide-in var(--gog-dialog-enter-duration) var(--gog-easing);min-width:var(--gog-dialog-min-width);border-radius:var(--gog-dialog-radius);transform:translate3d(var(--gog-dialog-offset-x, 0px),var(--gog-dialog-offset-y, 0px),0)}.gog-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-dialog-header-padding);border-bottom:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-header-border-color);gap:var(--gog-dialog-header-gap);flex-shrink:0}.gog-dialog__header--draggable{cursor:move;touch-action:none;-webkit-user-select:none;user-select:none}.gog-dialog__title{margin:0;color:var(--gog-dialog-color);font-family:var(--gog-dialog-font-family)}.gog-dialog__close{justify-content:center;width:var(--gog-dialog-close-size);height:var(--gog-dialog-close-size);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) transparent;background:transparent;color:var(--gog-dialog-close-color);cursor:pointer;flex-shrink:0;padding:0;line-height:1;font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close gog-icon{font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close:hover{color:var(--gog-dialog-close-hover-color);border-color:var(--gog-dialog-close-hover-border);background:var(--gog-dialog-close-hover-bg)}.gog-dialog__close:focus-visible{outline:var(--gog-dialog-close-focus-ring-width) solid var(--gog-dialog-close-focus-ring);outline-offset:var(--gog-dialog-close-focus-ring-offset)}.gog-dialog__body{padding:var(--gog-dialog-body-padding);overflow-y:auto;flex:1;max-height:var(--gog-dialog-body-max-height)}@keyframes gog-fade-in{0%{opacity:0}to{opacity:1}}@keyframes gog-slide-in{0%{transform:translateY(var(--gog-dialog-enter-distance));opacity:0}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.gog-dialog__backdrop,.gog-dialog__panel,.gog-dialog__close{animation:none;transition:none}}\n"] }]
|
|
697
676
|
}], ctorParameters: () => [] });
|
|
698
677
|
|
|
699
678
|
class ToastComponent {
|
|
@@ -808,10 +787,10 @@ class ToastComponent {
|
|
|
808
787
|
}
|
|
809
788
|
}
|
|
810
789
|
prefersReducedMotion() {
|
|
811
|
-
return typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
790
|
+
return (typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
|
|
812
791
|
}
|
|
813
792
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
814
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ToastComponent, isStandalone: true, selector: "gog-toast", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null }, isFront: { classPropertyName: "isFront", publicName: "isFront", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "attr.role": "ariaRole()", "attr.aria-live": "ariaLive()", "attr.aria-atomic": "true" } }, viewQueries: [{ propertyName: "progressEl", first: true, predicate: ["progress"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"gog-toast\"\n [class.gog-toast--paused]=\"isPaused()\"\n [class.gog-toast--queued]=\"!isFront()\"\n [class.gog-toast--success]=\"toast().type === 'success'\"\n [class.gog-toast--error]=\"toast().type === 'error'\"\n [class.gog-toast--warning]=\"toast().type === 'warning'\"\n [class.gog-toast--info]=\"toast().type === 'info'\"\n [class.gog-toast--visible]=\"visible()\"\n [style.--toast-duration]=\"toast().duration + 'ms'\"\n (mouseenter)=\"pauseAutoDismiss()\"\n (mouseleave)=\"resumeAutoDismiss()\"\n (transitionend)=\"onTransitionEnd($event)\"\n>\n <div class=\"gog-toast__content\">\n <span class=\"gog-toast__icon\" aria-hidden=\"true\">\n <gog-icon [template]=\"toast().iconTemplate ?? null\" [name]=\"toast().iconName\" />\n </span>\n <div class=\"gog-toast__main\">\n <span class=\"gog-toast__message
|
|
793
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ToastComponent, isStandalone: true, selector: "gog-toast", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null }, isFront: { classPropertyName: "isFront", publicName: "isFront", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "attr.role": "ariaRole()", "attr.aria-live": "ariaLive()", "attr.aria-atomic": "true" } }, viewQueries: [{ propertyName: "progressEl", first: true, predicate: ["progress"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"gog-toast\"\n [class.gog-toast--paused]=\"isPaused()\"\n [class.gog-toast--queued]=\"!isFront()\"\n [class.gog-toast--success]=\"toast().type === 'success'\"\n [class.gog-toast--error]=\"toast().type === 'error'\"\n [class.gog-toast--warning]=\"toast().type === 'warning'\"\n [class.gog-toast--info]=\"toast().type === 'info'\"\n [class.gog-toast--visible]=\"visible()\"\n [style.--toast-duration]=\"toast().duration + 'ms'\"\n (mouseenter)=\"pauseAutoDismiss()\"\n (mouseleave)=\"resumeAutoDismiss()\"\n (transitionend)=\"onTransitionEnd($event)\"\n>\n <div class=\"gog-toast__content\">\n <span class=\"gog-toast__icon\" aria-hidden=\"true\">\n <gog-icon [template]=\"toast().iconTemplate ?? null\" [name]=\"toast().iconName\" />\n </span>\n <div class=\"gog-toast__main\">\n <span class=\"gog-toast__message\">{{ toast().message }}</span>\n @if (hasActions()) {\n <div class=\"gog-toast__actions\">\n @for (action of toast().actions; track action.label) {\n <gog-button\n class=\"gog-toast__action\"\n variant=\"ghost\"\n size=\"sm\"\n type=\"button\"\n (gogClick)=\"runAction(action)\"\n >\n @if (action.iconName || action.iconTemplate) {\n <gog-icon\n [template]=\"action.iconTemplate ?? null\"\n [name]=\"action.iconName ?? 'check'\"\n />\n }\n {{ action.label }}\n </gog-button>\n }\n </div>\n }\n </div>\n <gog-button\n class=\"gog-toast__close\"\n variant=\"ghost\"\n size=\"sm\"\n type=\"button\"\n aria-label=\"Close toast\"\n (gogClick)=\"close()\"\n >\n <gog-icon name=\"close\" />\n </gog-button>\n </div>\n @if (!toast().isSticky) {\n <span #progress class=\"gog-toast__progress\" aria-hidden=\"true\"></span>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-toast{--toast-border: var(--gog-toast-type-color, var(--gog-toast-border));--toast-icon-color: var(--gog-toast-type-color, var(--gog-toast-icon-color));--toast-enter-x: var(--gog-toast-enter-distance);--toast-progress-color: var(--toast-border);--toast-stack-depth: min(var(--toast-stack-index, 0), var(--gog-toast-stack-max-depth));--toast-stack-collapsed-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-peek) * var(--toast-stack-direction, 1) );--toast-stack-expanded-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-expanded-gap) * var(--toast-stack-direction, 1) );--toast-stack-y: calc( var(--toast-stack-collapsed-y) + (var(--toast-stack-expanded-y) - var(--toast-stack-collapsed-y)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-scale: calc( 1 - (var(--toast-stack-depth) * var(--gog-toast-stack-scale-step)) );--toast-stack-scale: calc( var(--toast-stack-collapsed-scale) + (1 - var(--toast-stack-collapsed-scale)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-opacity: max( var(--gog-toast-stack-min-opacity), calc(1 - (var(--toast-stack-depth) * var(--gog-toast-stack-opacity-step))) );--toast-stack-opacity: calc( var(--toast-stack-collapsed-opacity) + (1 - var(--toast-stack-collapsed-opacity)) * var(--toast-stack-expanded, 0) );position:relative;z-index:calc(var(--gog-toast-base-z) - var(--toast-stack-index, 0));display:block;padding:var(--gog-toast-padding);background:var(--gog-toast-bg);border-left:var(--gog-toast-accent-width) solid var(--toast-border);border-radius:var(--gog-toast-radius);color:var(--gog-toast-color);font-family:var(--gog-toast-font-family);box-shadow:var(--gog-toast-shadow);min-width:var(--gog-toast-min-width);max-width:var(--gog-toast-max-width);pointer-events:all;opacity:0;overflow:hidden;transform:translate3d(var(--toast-enter-x),var(--toast-stack-y),0) scale(var(--toast-stack-scale));transition:opacity var(--gog-toast-transition-duration) var(--gog-easing),transform var(--gog-toast-transition-duration) var(--gog-easing)}.gog-toast--visible{opacity:var(--toast-stack-opacity);transform:translate3d(0,var(--toast-stack-y),0) scale(var(--toast-stack-scale))}:host(.slide-left) .gog-toast{--toast-enter-x: calc(var(--gog-toast-enter-distance) * -1)}.gog-toast--success{--gog-toast-type-color: var(--gog-toast-success-color)}.gog-toast--error{--gog-toast-type-color: var(--gog-toast-error-color)}.gog-toast--warning{--gog-toast-type-color: var(--gog-toast-warning-color)}.gog-toast--info{--gog-toast-type-color: var(--gog-toast-info-color)}.gog-toast__icon{color:var(--toast-icon-color);font-size:var(--gog-toast-icon-size);line-height:var(--gog-toast-icon-line-height);flex-shrink:0}.gog-toast__icon gog-icon{font-size:var(--gog-toast-icon-size)}.gog-toast__content{display:flex;align-items:flex-start;gap:var(--gog-toast-content-gap)}.gog-toast__main{display:flex;flex:1;flex-direction:column;gap:var(--gog-toast-main-gap);min-width:0}.gog-toast__message{flex:1;font-size:var(--gog-toast-message-font-size);line-height:var(--gog-toast-message-line-height)}.gog-toast__actions{display:flex;flex-wrap:wrap;gap:var(--gog-toast-actions-gap)}.gog-toast__action{--gog-btn-padding: var(--gog-toast-action-padding);--gog-btn-font-size: var(--gog-toast-action-font-size)}.gog-toast__action gog-icon{font-size:var(--gog-toast-action-font-size)}.gog-toast__close{align-self:flex-start;flex-shrink:0;--gog-btn-padding: var(--gog-toast-close-padding);--gog-btn-font-size: var(--gog-toast-close-font-size)}.gog-toast__close gog-icon{font-size:var(--gog-toast-close-font-size)}.gog-toast__progress{position:absolute;right:0;bottom:0;left:0;height:var(--gog-toast-progress-height);background:color-mix(in srgb,var(--toast-progress-color) var(--gog-toast-progress-opacity),transparent);transform-origin:left center;animation:gog-toast-progress var(--toast-duration) linear forwards}.gog-toast--paused .gog-toast__progress,.gog-toast--queued .gog-toast__progress{animation-play-state:paused}@keyframes gog-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.gog-toast,.gog-toast__progress{transition:none;animation:none}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
815
794
|
}
|
|
816
795
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastComponent, decorators: [{
|
|
817
796
|
type: Component,
|
|
@@ -819,7 +798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
819
798
|
'[attr.role]': 'ariaRole()',
|
|
820
799
|
'[attr.aria-live]': 'ariaLive()',
|
|
821
800
|
'[attr.aria-atomic]': 'true',
|
|
822
|
-
}, template: "<div\n class=\"gog-toast\"\n [class.gog-toast--paused]=\"isPaused()\"\n [class.gog-toast--queued]=\"!isFront()\"\n [class.gog-toast--success]=\"toast().type === 'success'\"\n [class.gog-toast--error]=\"toast().type === 'error'\"\n [class.gog-toast--warning]=\"toast().type === 'warning'\"\n [class.gog-toast--info]=\"toast().type === 'info'\"\n [class.gog-toast--visible]=\"visible()\"\n [style.--toast-duration]=\"toast().duration + 'ms'\"\n (mouseenter)=\"pauseAutoDismiss()\"\n (mouseleave)=\"resumeAutoDismiss()\"\n (transitionend)=\"onTransitionEnd($event)\"\n>\n <div class=\"gog-toast__content\">\n <span class=\"gog-toast__icon\" aria-hidden=\"true\">\n <gog-icon [template]=\"toast().iconTemplate ?? null\" [name]=\"toast().iconName\" />\n </span>\n <div class=\"gog-toast__main\">\n <span class=\"gog-toast__message
|
|
801
|
+
}, template: "<div\n class=\"gog-toast\"\n [class.gog-toast--paused]=\"isPaused()\"\n [class.gog-toast--queued]=\"!isFront()\"\n [class.gog-toast--success]=\"toast().type === 'success'\"\n [class.gog-toast--error]=\"toast().type === 'error'\"\n [class.gog-toast--warning]=\"toast().type === 'warning'\"\n [class.gog-toast--info]=\"toast().type === 'info'\"\n [class.gog-toast--visible]=\"visible()\"\n [style.--toast-duration]=\"toast().duration + 'ms'\"\n (mouseenter)=\"pauseAutoDismiss()\"\n (mouseleave)=\"resumeAutoDismiss()\"\n (transitionend)=\"onTransitionEnd($event)\"\n>\n <div class=\"gog-toast__content\">\n <span class=\"gog-toast__icon\" aria-hidden=\"true\">\n <gog-icon [template]=\"toast().iconTemplate ?? null\" [name]=\"toast().iconName\" />\n </span>\n <div class=\"gog-toast__main\">\n <span class=\"gog-toast__message\">{{ toast().message }}</span>\n @if (hasActions()) {\n <div class=\"gog-toast__actions\">\n @for (action of toast().actions; track action.label) {\n <gog-button\n class=\"gog-toast__action\"\n variant=\"ghost\"\n size=\"sm\"\n type=\"button\"\n (gogClick)=\"runAction(action)\"\n >\n @if (action.iconName || action.iconTemplate) {\n <gog-icon\n [template]=\"action.iconTemplate ?? null\"\n [name]=\"action.iconName ?? 'check'\"\n />\n }\n {{ action.label }}\n </gog-button>\n }\n </div>\n }\n </div>\n <gog-button\n class=\"gog-toast__close\"\n variant=\"ghost\"\n size=\"sm\"\n type=\"button\"\n aria-label=\"Close toast\"\n (gogClick)=\"close()\"\n >\n <gog-icon name=\"close\" />\n </gog-button>\n </div>\n @if (!toast().isSticky) {\n <span #progress class=\"gog-toast__progress\" aria-hidden=\"true\"></span>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-toast{--toast-border: var(--gog-toast-type-color, var(--gog-toast-border));--toast-icon-color: var(--gog-toast-type-color, var(--gog-toast-icon-color));--toast-enter-x: var(--gog-toast-enter-distance);--toast-progress-color: var(--toast-border);--toast-stack-depth: min(var(--toast-stack-index, 0), var(--gog-toast-stack-max-depth));--toast-stack-collapsed-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-peek) * var(--toast-stack-direction, 1) );--toast-stack-expanded-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-expanded-gap) * var(--toast-stack-direction, 1) );--toast-stack-y: calc( var(--toast-stack-collapsed-y) + (var(--toast-stack-expanded-y) - var(--toast-stack-collapsed-y)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-scale: calc( 1 - (var(--toast-stack-depth) * var(--gog-toast-stack-scale-step)) );--toast-stack-scale: calc( var(--toast-stack-collapsed-scale) + (1 - var(--toast-stack-collapsed-scale)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-opacity: max( var(--gog-toast-stack-min-opacity), calc(1 - (var(--toast-stack-depth) * var(--gog-toast-stack-opacity-step))) );--toast-stack-opacity: calc( var(--toast-stack-collapsed-opacity) + (1 - var(--toast-stack-collapsed-opacity)) * var(--toast-stack-expanded, 0) );position:relative;z-index:calc(var(--gog-toast-base-z) - var(--toast-stack-index, 0));display:block;padding:var(--gog-toast-padding);background:var(--gog-toast-bg);border-left:var(--gog-toast-accent-width) solid var(--toast-border);border-radius:var(--gog-toast-radius);color:var(--gog-toast-color);font-family:var(--gog-toast-font-family);box-shadow:var(--gog-toast-shadow);min-width:var(--gog-toast-min-width);max-width:var(--gog-toast-max-width);pointer-events:all;opacity:0;overflow:hidden;transform:translate3d(var(--toast-enter-x),var(--toast-stack-y),0) scale(var(--toast-stack-scale));transition:opacity var(--gog-toast-transition-duration) var(--gog-easing),transform var(--gog-toast-transition-duration) var(--gog-easing)}.gog-toast--visible{opacity:var(--toast-stack-opacity);transform:translate3d(0,var(--toast-stack-y),0) scale(var(--toast-stack-scale))}:host(.slide-left) .gog-toast{--toast-enter-x: calc(var(--gog-toast-enter-distance) * -1)}.gog-toast--success{--gog-toast-type-color: var(--gog-toast-success-color)}.gog-toast--error{--gog-toast-type-color: var(--gog-toast-error-color)}.gog-toast--warning{--gog-toast-type-color: var(--gog-toast-warning-color)}.gog-toast--info{--gog-toast-type-color: var(--gog-toast-info-color)}.gog-toast__icon{color:var(--toast-icon-color);font-size:var(--gog-toast-icon-size);line-height:var(--gog-toast-icon-line-height);flex-shrink:0}.gog-toast__icon gog-icon{font-size:var(--gog-toast-icon-size)}.gog-toast__content{display:flex;align-items:flex-start;gap:var(--gog-toast-content-gap)}.gog-toast__main{display:flex;flex:1;flex-direction:column;gap:var(--gog-toast-main-gap);min-width:0}.gog-toast__message{flex:1;font-size:var(--gog-toast-message-font-size);line-height:var(--gog-toast-message-line-height)}.gog-toast__actions{display:flex;flex-wrap:wrap;gap:var(--gog-toast-actions-gap)}.gog-toast__action{--gog-btn-padding: var(--gog-toast-action-padding);--gog-btn-font-size: var(--gog-toast-action-font-size)}.gog-toast__action gog-icon{font-size:var(--gog-toast-action-font-size)}.gog-toast__close{align-self:flex-start;flex-shrink:0;--gog-btn-padding: var(--gog-toast-close-padding);--gog-btn-font-size: var(--gog-toast-close-font-size)}.gog-toast__close gog-icon{font-size:var(--gog-toast-close-font-size)}.gog-toast__progress{position:absolute;right:0;bottom:0;left:0;height:var(--gog-toast-progress-height);background:color-mix(in srgb,var(--toast-progress-color) var(--gog-toast-progress-opacity),transparent);transform-origin:left center;animation:gog-toast-progress var(--toast-duration) linear forwards}.gog-toast--paused .gog-toast__progress,.gog-toast--queued .gog-toast__progress{animation-play-state:paused}@keyframes gog-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.gog-toast,.gog-toast__progress{transition:none;animation:none}}\n"] }]
|
|
823
802
|
}], ctorParameters: () => [], propDecorators: { toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: true }] }], isFront: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFront", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], progressEl: [{ type: i0.ViewChild, args: ['progress', { isSignal: true }] }] } });
|
|
824
803
|
|
|
825
804
|
const DEFAULT_DURATION = 4000;
|
|
@@ -907,8 +886,17 @@ class ToastService {
|
|
|
907
886
|
// Actions carry closures that can't be compared by value, so only their
|
|
908
887
|
// label/icon "shape" is used — this lets repeated calls with equivalent
|
|
909
888
|
// actions (e.g. a fresh "Undo" callback each time) still dedupe correctly.
|
|
910
|
-
const actionsSignature = actions
|
|
911
|
-
|
|
889
|
+
const actionsSignature = actions
|
|
890
|
+
.map((action) => `${action.label}:${action.iconName ?? ''}`)
|
|
891
|
+
.join(',');
|
|
892
|
+
return [
|
|
893
|
+
message,
|
|
894
|
+
type,
|
|
895
|
+
iconName,
|
|
896
|
+
position,
|
|
897
|
+
iconTemplate ? 'template' : 'default',
|
|
898
|
+
actionsSignature,
|
|
899
|
+
].join('|');
|
|
912
900
|
}
|
|
913
901
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
914
902
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastService, providedIn: 'root' });
|
|
@@ -951,6 +939,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
951
939
|
args: [{ selector: 'gog-toast-container', imports: [ToastComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (group of groups(); track trackGroup($index, group)) {\n <div class=\"gog-toast-container gog-toast-container--{{ group.position }}\">\n @for (toast of group.toasts; track trackToast($index, toast); let toastIndex = $index) {\n <gog-toast\n [toast]=\"toast\"\n [isFront]=\"toastIndex === 0\"\n [class.slide-left]=\"isLeft(group.position)\"\n [style.--toast-stack-index]=\"toastIndex\"\n (dismissed)=\"dismiss($event)\"\n />\n }\n </div>\n}\n", styles: [":host{display:contents}.gog-toast-container{position:fixed;z-index:var(--gog-toast-z-index);display:grid;padding:var(--gog-toast-stack-padding);pointer-events:none;max-width:var(--gog-toast-max-width)}.gog-toast-container>gog-toast{grid-column:1;grid-row:1}.gog-toast-container--top-right{top:0;right:0;justify-items:end}.gog-toast-container--top-left{top:0;left:0;justify-items:start}.gog-toast-container--bottom-right{bottom:0;right:0;justify-items:end}.gog-toast-container--bottom-left{bottom:0;left:0;justify-items:start}.gog-toast-container--top-left,.gog-toast-container--top-right{align-items:start;--toast-stack-direction: 1}.gog-toast-container--bottom-left,.gog-toast-container--bottom-right{align-items:end;--toast-stack-direction: -1}.gog-toast-container:hover{--toast-stack-expanded: 1}\n"] }]
|
|
952
940
|
}], propDecorators: { maxVisiblePerPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisiblePerPosition", required: false }] }] } });
|
|
953
941
|
|
|
942
|
+
/**
|
|
943
|
+
* Shared error-visibility state for the library's form controls. A plain class rather than
|
|
944
|
+
* a base class or directive so it drops into components that can't share a base class
|
|
945
|
+
* (`gog-inputfield`, `gog-slider`) as well as ones that already do (`GogDropdownBase`).
|
|
946
|
+
* Each consumer owns its own instance and wires `check()` into its own `ngDoCheck`.
|
|
947
|
+
*/
|
|
948
|
+
class GogErrorState {
|
|
949
|
+
errorMessage;
|
|
950
|
+
errorDisplay;
|
|
951
|
+
ngControl;
|
|
952
|
+
controlTouched = signal(false, ...(ngDevMode ? [{ debugName: "controlTouched" }] : /* istanbul ignore next */ []));
|
|
953
|
+
controlInvalid = signal(false, ...(ngDevMode ? [{ debugName: "controlInvalid" }] : /* istanbul ignore next */ []));
|
|
954
|
+
constructor(errorMessage, errorDisplay, ngControl) {
|
|
955
|
+
this.errorMessage = errorMessage;
|
|
956
|
+
this.errorDisplay = errorDisplay;
|
|
957
|
+
this.ngControl = ngControl;
|
|
958
|
+
}
|
|
959
|
+
hasError = computed(() => {
|
|
960
|
+
if (this.errorDisplay() === 'auto' && this.ngControl) {
|
|
961
|
+
return this.controlTouched() && this.controlInvalid();
|
|
962
|
+
}
|
|
963
|
+
return !!this.errorMessage();
|
|
964
|
+
}, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
965
|
+
visibleError = computed(() => (this.hasError() ? this.errorMessage() : ''), ...(ngDevMode ? [{ debugName: "visibleError" }] : /* istanbul ignore next */ []));
|
|
966
|
+
/**
|
|
967
|
+
* `NgControl` exposes validity as plain properties, and has no change notification for
|
|
968
|
+
* `touched` at all — `statusChanges` fires only on validity transitions, never on
|
|
969
|
+
* `markAsTouched()` — while its `control` does not exist yet during construction, so
|
|
970
|
+
* subscribing early would miss it regardless. Mirroring on each check sidesteps both;
|
|
971
|
+
* re-setting a signal to its current value notifies nothing, so the common case costs two
|
|
972
|
+
* comparisons.
|
|
973
|
+
*/
|
|
974
|
+
check() {
|
|
975
|
+
const control = this.ngControl?.control;
|
|
976
|
+
if (!control)
|
|
977
|
+
return;
|
|
978
|
+
this.controlTouched.set(control.touched);
|
|
979
|
+
this.controlInvalid.set(control.invalid);
|
|
980
|
+
}
|
|
981
|
+
}
|
|
982
|
+
|
|
954
983
|
class InputfieldComponent {
|
|
955
984
|
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
956
985
|
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
@@ -958,6 +987,8 @@ class InputfieldComponent {
|
|
|
958
987
|
/** Defaults to 'current-password' for password fields, 'off' otherwise */
|
|
959
988
|
autocomplete = input('', ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
|
|
960
989
|
errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
990
|
+
/** See `GogErrorDisplay`. Defaults to `'manual'`, matching every other control in the library. */
|
|
991
|
+
errorDisplay = input('manual', ...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
|
|
961
992
|
name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
962
993
|
inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
963
994
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
@@ -978,18 +1009,46 @@ class InputfieldComponent {
|
|
|
978
1009
|
iconStartLabel = input('', ...(ngDevMode ? [{ debugName: "iconStartLabel" }] : /* istanbul ignore next */ []));
|
|
979
1010
|
/** aria-label for the end icon button (required when iconEndFn is set) */
|
|
980
1011
|
iconEndLabel = input('', ...(ngDevMode ? [{ debugName: "iconEndLabel" }] : /* istanbul ignore next */ []));
|
|
1012
|
+
/** aria-label for the reveal-password button, shown when `type` is `'password'` */
|
|
1013
|
+
showPasswordLabel = input('Show password', ...(ngDevMode ? [{ debugName: "showPasswordLabel" }] : /* istanbul ignore next */ []));
|
|
1014
|
+
/** aria-label for the hide-password button, shown once the password is revealed */
|
|
1015
|
+
hidePasswordLabel = input('Hide password', ...(ngDevMode ? [{ debugName: "hidePasswordLabel" }] : /* istanbul ignore next */ []));
|
|
981
1016
|
/** Two-way bindable value: `[(value)]="signal"` or `[value]` / `(valueChange)`. */
|
|
982
1017
|
value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1018
|
+
ngControl = inject(NgControl, { optional: true, self: true });
|
|
983
1019
|
cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
|
|
1020
|
+
errorState = new GogErrorState(this.errorMessage, this.errorDisplay, this.ngControl);
|
|
1021
|
+
passwordVisible = signal(false, ...(ngDevMode ? [{ debugName: "passwordVisible" }] : /* istanbul ignore next */ []));
|
|
984
1022
|
isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
1023
|
+
isPasswordField = computed(() => this.type() === 'password', ...(ngDevMode ? [{ debugName: "isPasswordField" }] : /* istanbul ignore next */ []));
|
|
1024
|
+
effectiveType = computed(() => this.isPasswordField() && this.passwordVisible() ? 'text' : this.type(), ...(ngDevMode ? [{ debugName: "effectiveType" }] : /* istanbul ignore next */ []));
|
|
985
1025
|
effectiveAutocomplete = computed(() => this.autocomplete() || (this.type() === 'password' ? 'current-password' : 'off'), ...(ngDevMode ? [{ debugName: "effectiveAutocomplete" }] : /* istanbul ignore next */ []));
|
|
986
|
-
hasError =
|
|
1026
|
+
hasError = this.errorState.hasError;
|
|
1027
|
+
visibleError = this.errorState.visibleError;
|
|
987
1028
|
hasIconStart = computed(() => !!this.iconStartTemplate() || !!this.iconStart(), ...(ngDevMode ? [{ debugName: "hasIconStart" }] : /* istanbul ignore next */ []));
|
|
988
|
-
hasIconEnd = computed(() => !!this.iconEndTemplate() || !!this.iconEnd(), ...(ngDevMode ? [{ debugName: "hasIconEnd" }] : /* istanbul ignore next */ []));
|
|
989
1029
|
hasIconStartAction = computed(() => !!this.iconStartFn(), ...(ngDevMode ? [{ debugName: "hasIconStartAction" }] : /* istanbul ignore next */ []));
|
|
990
|
-
|
|
1030
|
+
/** For password fields the trailing icon is always the built-in show/hide toggle. */
|
|
1031
|
+
effectiveIconEnd = computed(() => this.isPasswordField() ? (this.passwordVisible() ? 'eye-off' : 'eye') : this.iconEnd(), ...(ngDevMode ? [{ debugName: "effectiveIconEnd" }] : /* istanbul ignore next */ []));
|
|
1032
|
+
effectiveIconEndLabel = computed(() => this.isPasswordField()
|
|
1033
|
+
? this.passwordVisible()
|
|
1034
|
+
? this.hidePasswordLabel()
|
|
1035
|
+
: this.showPasswordLabel()
|
|
1036
|
+
: this.iconEndLabel(), ...(ngDevMode ? [{ debugName: "effectiveIconEndLabel" }] : /* istanbul ignore next */ []));
|
|
1037
|
+
hasIconEnd = computed(() => !!this.iconEndTemplate() || !!this.effectiveIconEnd(), ...(ngDevMode ? [{ debugName: "hasIconEnd" }] : /* istanbul ignore next */ []));
|
|
1038
|
+
hasIconEndAction = computed(() => this.isPasswordField() || !!this.iconEndFn(), ...(ngDevMode ? [{ debugName: "hasIconEndAction" }] : /* istanbul ignore next */ []));
|
|
991
1039
|
_onChange = () => { };
|
|
992
1040
|
_onTouched = () => { };
|
|
1041
|
+
constructor() {
|
|
1042
|
+
// Registering through NgControl instead of NG_VALUE_ACCESSOR keeps `this.ngControl`
|
|
1043
|
+
// available for `hasError` — providing NG_VALUE_ACCESSOR on the component while also
|
|
1044
|
+
// injecting NgControl would be a dependency cycle.
|
|
1045
|
+
if (this.ngControl) {
|
|
1046
|
+
this.ngControl.valueAccessor = this;
|
|
1047
|
+
}
|
|
1048
|
+
}
|
|
1049
|
+
ngDoCheck() {
|
|
1050
|
+
this.errorState.check();
|
|
1051
|
+
}
|
|
993
1052
|
writeValue(val) {
|
|
994
1053
|
this.value.set(val ?? '');
|
|
995
1054
|
}
|
|
@@ -1006,6 +1065,10 @@ class InputfieldComponent {
|
|
|
1006
1065
|
this.iconStartFn()?.();
|
|
1007
1066
|
}
|
|
1008
1067
|
onIconEndClick() {
|
|
1068
|
+
if (this.isPasswordField()) {
|
|
1069
|
+
this.passwordVisible.update((visible) => !visible);
|
|
1070
|
+
return;
|
|
1071
|
+
}
|
|
1009
1072
|
this.iconEndFn()?.();
|
|
1010
1073
|
}
|
|
1011
1074
|
onInput(event) {
|
|
@@ -1017,24 +1080,12 @@ class InputfieldComponent {
|
|
|
1017
1080
|
this._onTouched();
|
|
1018
1081
|
}
|
|
1019
1082
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: InputfieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1020
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: InputfieldComponent, isStandalone: true, selector: "gog-inputfield", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, iconStartTemplate: { classPropertyName: "iconStartTemplate", publicName: "iconStartTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconEndTemplate: { classPropertyName: "iconEndTemplate", publicName: "iconEndTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconStartFn: { classPropertyName: "iconStartFn", publicName: "iconStartFn", isSignal: true, isRequired: false, transformFunction: null }, iconEndFn: { classPropertyName: "iconEndFn", publicName: "iconEndFn", isSignal: true, isRequired: false, transformFunction: null }, iconStartLabel: { classPropertyName: "iconStartLabel", publicName: "iconStartLabel", isSignal: true, isRequired: false, transformFunction: null }, iconEndLabel: { classPropertyName: "iconEndLabel", publicName: "iconEndLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
|
|
1021
|
-
{
|
|
1022
|
-
provide: NG_VALUE_ACCESSOR,
|
|
1023
|
-
useExisting: forwardRef(() => InputfieldComponent),
|
|
1024
|
-
multi: true,
|
|
1025
|
-
},
|
|
1026
|
-
], ngImport: i0, template: "<div\n class=\"gog-input-wrapper gog-contained-layout\"\n [class.gog-input-wrapper--sm]=\"size() === 'sm'\"\n [class.gog-input-wrapper--lg]=\"size() === 'lg'\"\n [class.gog-input-wrapper--icon-start]=\"hasIconStart()\"\n [class.gog-input-wrapper--icon-end]=\"hasIconEnd()\"\n>\n @if (label()) {\n <label class=\"gog-input__label font-heading\" [attr.for]=\"inputId() || null\">{{\n label()\n }}</label>\n }\n <div class=\"gog-input__field-container\">\n @if (hasIconStart()) {\n @if (hasIconStartAction()) {\n <button\n type=\"button\"\n class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__icon--action\"\n [attr.aria-label]=\"iconStartLabel() || null\"\n (click)=\"onIconStartClick()\"\n >\n <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n </button>\n } @else {\n <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\n <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n </span>\n }\n }\n <input\n class=\"gog-input__field font-body\"\n [class.gog-input__field--error]=\"hasError()\"\n [attr.id]=\"inputId() || null\"\n [type]=\"type()\"\n [attr.name]=\"name() || null\"\n [placeholder]=\"placeholder()\"\n [value]=\"value()\"\n [disabled]=\"isDisabled()\"\n [autocomplete]=\"effectiveAutocomplete()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n @if (hasIconEnd()) {\n @if (hasIconEndAction()) {\n <button\n type=\"button\"\n class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action\"\n [attr.aria-label]=\"iconEndLabel() || null\"\n (click)=\"onIconEndClick()\"\n >\n <gog-icon [template]=\"iconEndTemplate()\" [name]=\"iconEnd() || 'check'\" />\n </button>\n } @else {\n <span class=\"gog-input__icon gog-inline-center gog-input__icon--end\" aria-hidden=\"true\">\n <gog-icon [template]=\"iconEndTemplate()\" [name]=\"iconEnd() || 'check'\" />\n </span>\n }\n }\n </div>\n @if (hasError() && errorMessage()) {\n <span\n class=\"gog-input__error font-body\"\n [attr.id]=\"inputId() ? inputId() + '-error' : null\"\n role=\"alert\"\n >{{ errorMessage() }}</span\n >\n }\n</div>\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{--gog-input-gap: 4px;--gog-input-label-color: var(--accent-color);--gog-input-field-bg: var(--surface-color);--gog-input-field-border: var(--accent-dim);--gog-input-field-color: var(--text-color);--gog-input-placeholder-color: var(--muted-text-color);--gog-input-focus-border: var(--accent-color);--gog-input-focus-ring: color-mix(in srgb, var(--accent-color) 25%, transparent);--gog-input-error-color: var(--danger-color);--gog-input-icon-color: var(--muted-text-color);--gog-input-icon-hover-color: var(--accent-color);display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}.gog-input__label{font-size:var(--text-sm);color:var(--gog-input-label-color);text-transform:uppercase;letter-spacing:1px}.gog-input__field-container{position:relative;display:flex;align-items:center}.gog-input__field{--gog-input-padding-y: var(--control-padding-y, 10px);--gog-input-pl: var(--control-padding-x, 14px);--gog-input-pr: var(--control-padding-x, 14px);--gog-input-font: var(--text-md);width:100%;padding:var(--gog-input-padding-y) var(--gog-input-pr) var(--gog-input-padding-y) var(--gog-input-pl);font-size:var(--gog-input-font);color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-input-field-border);border-radius:var(--radius);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.gog-input-wrapper--sm .gog-input__field{--gog-input-padding-y: 6px;--gog-input-pl: 10px;--gog-input-pr: 10px;--gog-input-font: var(--text-sm)}.gog-input-wrapper--lg .gog-input__field{--gog-input-padding-y: 14px;--gog-input-pl: 18px;--gog-input-pr: 18px;--gog-input-font: var(--text-lg)}.gog-input-wrapper--icon-start .gog-input__field{--gog-input-pl: 36px}.gog-input-wrapper--icon-end .gog-input__field{--gog-input-pr: 36px}.gog-input-wrapper--sm.gog-input-wrapper--icon-start .gog-input__field{--gog-input-pl: 30px}.gog-input-wrapper--sm.gog-input-wrapper--icon-end .gog-input__field{--gog-input-pr: 30px}.gog-input-wrapper--lg.gog-input-wrapper--icon-start .gog-input__field{--gog-input-pl: 44px}.gog-input-wrapper--lg.gog-input-wrapper--icon-end .gog-input__field{--gog-input-pr: 44px}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:0 0 8px var(--gog-input-focus-ring)}.gog-input__field:focus-visible{outline:3px solid var(--gog-input-focus-border);outline-offset:2px}.gog-input__field:disabled{opacity:.4;cursor:not-allowed}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__icon{position:absolute;color:var(--gog-input-icon-color);font-size:var(--text-md);pointer-events:none;line-height:1}.gog-input__icon--action{padding:0;background:none;border:none;cursor:pointer;pointer-events:auto;border-radius:var(--gog-input-icon-action-radius, 4px);color:var(--gog-input-icon-color);transition:color .15s ease}.gog-input__icon--action:hover{color:var(--gog-input-icon-hover-color)}.gog-input__icon--action:focus-visible{outline:2px solid var(--gog-input-icon-hover-color);outline-offset:2px}.gog-input__icon--start{left:var(--control-icon-offset, 10px)}.gog-input__icon--end{right:var(--control-icon-offset, 10px)}.gog-input-wrapper--sm .gog-input__icon{font-size:var(--text-sm)}.gog-input-wrapper--sm .gog-input__icon--start{left:8px}.gog-input-wrapper--sm .gog-input__icon--end{right:8px}.gog-input-wrapper--lg .gog-input__icon{font-size:var(--text-lg)}.gog-input-wrapper--lg .gog-input__icon--start{left:14px}.gog-input-wrapper--lg .gog-input__icon--end{right:14px}.gog-input__error{font-size:var(--text-xs, 12px);color:var(--gog-input-error-color);margin-top:2px}@media(prefers-reduced-motion:reduce){.gog-input__field{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1083
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: InputfieldComponent, isStandalone: true, selector: "gog-inputfield", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, iconStartTemplate: { classPropertyName: "iconStartTemplate", publicName: "iconStartTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconEndTemplate: { classPropertyName: "iconEndTemplate", publicName: "iconEndTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconStartFn: { classPropertyName: "iconStartFn", publicName: "iconStartFn", isSignal: true, isRequired: false, transformFunction: null }, iconEndFn: { classPropertyName: "iconEndFn", publicName: "iconEndFn", isSignal: true, isRequired: false, transformFunction: null }, iconStartLabel: { classPropertyName: "iconStartLabel", publicName: "iconStartLabel", isSignal: true, isRequired: false, transformFunction: null }, iconEndLabel: { classPropertyName: "iconEndLabel", publicName: "iconEndLabel", isSignal: true, isRequired: false, transformFunction: null }, showPasswordLabel: { classPropertyName: "showPasswordLabel", publicName: "showPasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, hidePasswordLabel: { classPropertyName: "hidePasswordLabel", publicName: "hidePasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<div\n class=\"gog-input-wrapper gog-contained-layout\"\n [class.gog-input-wrapper--xsm]=\"size() === 'xsm'\"\n [class.gog-input-wrapper--sm]=\"size() === 'sm'\"\n [class.gog-input-wrapper--lg]=\"size() === 'lg'\"\n [class.gog-input-wrapper--slg]=\"size() === 'slg'\"\n [class.gog-input-wrapper--icon-start]=\"hasIconStart()\"\n [class.gog-input-wrapper--icon-end]=\"hasIconEnd()\"\n>\n @if (label()) {\n <label class=\"gog-input__label\" [attr.for]=\"inputId() || null\">{{ label() }}</label>\n }\n <div class=\"gog-input__field-container\">\n @if (hasIconStart()) {\n @if (hasIconStartAction()) {\n <button\n type=\"button\"\n class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__icon--action\"\n [attr.aria-label]=\"iconStartLabel() || null\"\n (click)=\"onIconStartClick()\"\n >\n <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n </button>\n } @else {\n <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\n <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n </span>\n }\n }\n <input\n class=\"gog-input__field\"\n [class.gog-input__field--error]=\"hasError()\"\n [attr.id]=\"inputId() || null\"\n [type]=\"effectiveType()\"\n [attr.name]=\"name() || null\"\n [placeholder]=\"placeholder()\"\n [value]=\"value()\"\n [disabled]=\"isDisabled()\"\n [autocomplete]=\"effectiveAutocomplete()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n @if (hasIconEnd()) {\n @if (hasIconEndAction()) {\n <button\n type=\"button\"\n class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action\"\n [attr.aria-label]=\"effectiveIconEndLabel() || null\"\n (click)=\"onIconEndClick()\"\n >\n <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\n </button>\n } @else {\n <span class=\"gog-input__icon gog-inline-center gog-input__icon--end\" aria-hidden=\"true\">\n <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\n </span>\n }\n }\n </div>\n @if (visibleError()) {\n <span\n class=\"gog-input__error\"\n [attr.id]=\"inputId() ? inputId() + '-error' : null\"\n role=\"alert\"\n >{{ visibleError() }}</span\n >\n }\n</div>\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field-container{position:relative;display:flex;align-items:center}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pr, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size);--gog-input-size-icon-offset: var(--gog-field-xsm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-xsm-icon-inset)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size);--gog-input-size-icon-offset: var(--gog-field-sm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-sm-icon-inset)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size);--gog-input-size-icon-offset: var(--gog-field-lg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-lg-icon-inset)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size);--gog-input-size-icon-offset: var(--gog-field-slg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-slg-icon-inset)}.gog-input-wrapper--icon-start .gog-input__field{--gog-input-pl: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--icon-end .gog-input__field{--gog-input-pr: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__icon{position:absolute;color:var(--gog-input-icon-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));pointer-events:none;line-height:1}.gog-input__icon--action{padding:0;background:none;border:none;cursor:pointer;pointer-events:auto;border-radius:var(--gog-input-icon-action-radius);color:var(--gog-input-icon-color);transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__icon--action:hover{color:var(--gog-input-icon-hover-color)}.gog-input__icon--action:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__icon--start{left:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__icon--end{right:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}@media(prefers-reduced-motion:reduce){.gog-input__field{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1027
1084
|
}
|
|
1028
1085
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: InputfieldComponent, decorators: [{
|
|
1029
1086
|
type: Component,
|
|
1030
|
-
args: [{ selector: 'gog-inputfield', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1031
|
-
|
|
1032
|
-
provide: NG_VALUE_ACCESSOR,
|
|
1033
|
-
useExisting: forwardRef(() => InputfieldComponent),
|
|
1034
|
-
multi: true,
|
|
1035
|
-
},
|
|
1036
|
-
], template: "<div\n class=\"gog-input-wrapper gog-contained-layout\"\n [class.gog-input-wrapper--sm]=\"size() === 'sm'\"\n [class.gog-input-wrapper--lg]=\"size() === 'lg'\"\n [class.gog-input-wrapper--icon-start]=\"hasIconStart()\"\n [class.gog-input-wrapper--icon-end]=\"hasIconEnd()\"\n>\n @if (label()) {\n <label class=\"gog-input__label font-heading\" [attr.for]=\"inputId() || null\">{{\n label()\n }}</label>\n }\n <div class=\"gog-input__field-container\">\n @if (hasIconStart()) {\n @if (hasIconStartAction()) {\n <button\n type=\"button\"\n class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__icon--action\"\n [attr.aria-label]=\"iconStartLabel() || null\"\n (click)=\"onIconStartClick()\"\n >\n <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n </button>\n } @else {\n <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\n <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n </span>\n }\n }\n <input\n class=\"gog-input__field font-body\"\n [class.gog-input__field--error]=\"hasError()\"\n [attr.id]=\"inputId() || null\"\n [type]=\"type()\"\n [attr.name]=\"name() || null\"\n [placeholder]=\"placeholder()\"\n [value]=\"value()\"\n [disabled]=\"isDisabled()\"\n [autocomplete]=\"effectiveAutocomplete()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n @if (hasIconEnd()) {\n @if (hasIconEndAction()) {\n <button\n type=\"button\"\n class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action\"\n [attr.aria-label]=\"iconEndLabel() || null\"\n (click)=\"onIconEndClick()\"\n >\n <gog-icon [template]=\"iconEndTemplate()\" [name]=\"iconEnd() || 'check'\" />\n </button>\n } @else {\n <span class=\"gog-input__icon gog-inline-center gog-input__icon--end\" aria-hidden=\"true\">\n <gog-icon [template]=\"iconEndTemplate()\" [name]=\"iconEnd() || 'check'\" />\n </span>\n }\n }\n </div>\n @if (hasError() && errorMessage()) {\n <span\n class=\"gog-input__error font-body\"\n [attr.id]=\"inputId() ? inputId() + '-error' : null\"\n role=\"alert\"\n >{{ errorMessage() }}</span\n >\n }\n</div>\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{--gog-input-gap: 4px;--gog-input-label-color: var(--accent-color);--gog-input-field-bg: var(--surface-color);--gog-input-field-border: var(--accent-dim);--gog-input-field-color: var(--text-color);--gog-input-placeholder-color: var(--muted-text-color);--gog-input-focus-border: var(--accent-color);--gog-input-focus-ring: color-mix(in srgb, var(--accent-color) 25%, transparent);--gog-input-error-color: var(--danger-color);--gog-input-icon-color: var(--muted-text-color);--gog-input-icon-hover-color: var(--accent-color);display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}.gog-input__label{font-size:var(--text-sm);color:var(--gog-input-label-color);text-transform:uppercase;letter-spacing:1px}.gog-input__field-container{position:relative;display:flex;align-items:center}.gog-input__field{--gog-input-padding-y: var(--control-padding-y, 10px);--gog-input-pl: var(--control-padding-x, 14px);--gog-input-pr: var(--control-padding-x, 14px);--gog-input-font: var(--text-md);width:100%;padding:var(--gog-input-padding-y) var(--gog-input-pr) var(--gog-input-padding-y) var(--gog-input-pl);font-size:var(--gog-input-font);color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-input-field-border);border-radius:var(--radius);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.gog-input-wrapper--sm .gog-input__field{--gog-input-padding-y: 6px;--gog-input-pl: 10px;--gog-input-pr: 10px;--gog-input-font: var(--text-sm)}.gog-input-wrapper--lg .gog-input__field{--gog-input-padding-y: 14px;--gog-input-pl: 18px;--gog-input-pr: 18px;--gog-input-font: var(--text-lg)}.gog-input-wrapper--icon-start .gog-input__field{--gog-input-pl: 36px}.gog-input-wrapper--icon-end .gog-input__field{--gog-input-pr: 36px}.gog-input-wrapper--sm.gog-input-wrapper--icon-start .gog-input__field{--gog-input-pl: 30px}.gog-input-wrapper--sm.gog-input-wrapper--icon-end .gog-input__field{--gog-input-pr: 30px}.gog-input-wrapper--lg.gog-input-wrapper--icon-start .gog-input__field{--gog-input-pl: 44px}.gog-input-wrapper--lg.gog-input-wrapper--icon-end .gog-input__field{--gog-input-pr: 44px}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:0 0 8px var(--gog-input-focus-ring)}.gog-input__field:focus-visible{outline:3px solid var(--gog-input-focus-border);outline-offset:2px}.gog-input__field:disabled{opacity:.4;cursor:not-allowed}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__icon{position:absolute;color:var(--gog-input-icon-color);font-size:var(--text-md);pointer-events:none;line-height:1}.gog-input__icon--action{padding:0;background:none;border:none;cursor:pointer;pointer-events:auto;border-radius:var(--gog-input-icon-action-radius, 4px);color:var(--gog-input-icon-color);transition:color .15s ease}.gog-input__icon--action:hover{color:var(--gog-input-icon-hover-color)}.gog-input__icon--action:focus-visible{outline:2px solid var(--gog-input-icon-hover-color);outline-offset:2px}.gog-input__icon--start{left:var(--control-icon-offset, 10px)}.gog-input__icon--end{right:var(--control-icon-offset, 10px)}.gog-input-wrapper--sm .gog-input__icon{font-size:var(--text-sm)}.gog-input-wrapper--sm .gog-input__icon--start{left:8px}.gog-input-wrapper--sm .gog-input__icon--end{right:8px}.gog-input-wrapper--lg .gog-input__icon{font-size:var(--text-lg)}.gog-input-wrapper--lg .gog-input__icon--start{left:14px}.gog-input-wrapper--lg .gog-input__icon--end{right:14px}.gog-input__error{font-size:var(--text-xs, 12px);color:var(--gog-input-error-color);margin-top:2px}@media(prefers-reduced-motion:reduce){.gog-input__field{transition:none}}\n"] }]
|
|
1037
|
-
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStart", required: false }] }], iconEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEnd", required: false }] }], iconStartTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartTemplate", required: false }] }], iconEndTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndTemplate", required: false }] }], iconStartFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartFn", required: false }] }], iconEndFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndFn", required: false }] }], iconStartLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartLabel", required: false }] }], iconEndLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
1087
|
+
args: [{ selector: 'gog-inputfield', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"gog-input-wrapper gog-contained-layout\"\n [class.gog-input-wrapper--xsm]=\"size() === 'xsm'\"\n [class.gog-input-wrapper--sm]=\"size() === 'sm'\"\n [class.gog-input-wrapper--lg]=\"size() === 'lg'\"\n [class.gog-input-wrapper--slg]=\"size() === 'slg'\"\n [class.gog-input-wrapper--icon-start]=\"hasIconStart()\"\n [class.gog-input-wrapper--icon-end]=\"hasIconEnd()\"\n>\n @if (label()) {\n <label class=\"gog-input__label\" [attr.for]=\"inputId() || null\">{{ label() }}</label>\n }\n <div class=\"gog-input__field-container\">\n @if (hasIconStart()) {\n @if (hasIconStartAction()) {\n <button\n type=\"button\"\n class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__icon--action\"\n [attr.aria-label]=\"iconStartLabel() || null\"\n (click)=\"onIconStartClick()\"\n >\n <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n </button>\n } @else {\n <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\n <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n </span>\n }\n }\n <input\n class=\"gog-input__field\"\n [class.gog-input__field--error]=\"hasError()\"\n [attr.id]=\"inputId() || null\"\n [type]=\"effectiveType()\"\n [attr.name]=\"name() || null\"\n [placeholder]=\"placeholder()\"\n [value]=\"value()\"\n [disabled]=\"isDisabled()\"\n [autocomplete]=\"effectiveAutocomplete()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n @if (hasIconEnd()) {\n @if (hasIconEndAction()) {\n <button\n type=\"button\"\n class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action\"\n [attr.aria-label]=\"effectiveIconEndLabel() || null\"\n (click)=\"onIconEndClick()\"\n >\n <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\n </button>\n } @else {\n <span class=\"gog-input__icon gog-inline-center gog-input__icon--end\" aria-hidden=\"true\">\n <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\n </span>\n }\n }\n </div>\n @if (visibleError()) {\n <span\n class=\"gog-input__error\"\n [attr.id]=\"inputId() ? inputId() + '-error' : null\"\n role=\"alert\"\n >{{ visibleError() }}</span\n >\n }\n</div>\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field-container{position:relative;display:flex;align-items:center}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pr, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size);--gog-input-size-icon-offset: var(--gog-field-xsm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-xsm-icon-inset)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size);--gog-input-size-icon-offset: var(--gog-field-sm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-sm-icon-inset)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size);--gog-input-size-icon-offset: var(--gog-field-lg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-lg-icon-inset)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size);--gog-input-size-icon-offset: var(--gog-field-slg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-slg-icon-inset)}.gog-input-wrapper--icon-start .gog-input__field{--gog-input-pl: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--icon-end .gog-input__field{--gog-input-pr: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__icon{position:absolute;color:var(--gog-input-icon-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));pointer-events:none;line-height:1}.gog-input__icon--action{padding:0;background:none;border:none;cursor:pointer;pointer-events:auto;border-radius:var(--gog-input-icon-action-radius);color:var(--gog-input-icon-color);transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__icon--action:hover{color:var(--gog-input-icon-hover-color)}.gog-input__icon--action:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__icon--start{left:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__icon--end{right:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}@media(prefers-reduced-motion:reduce){.gog-input__field{transition:none}}\n"] }]
|
|
1088
|
+
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStart", required: false }] }], iconEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEnd", required: false }] }], iconStartTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartTemplate", required: false }] }], iconEndTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndTemplate", required: false }] }], iconStartFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartFn", required: false }] }], iconEndFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndFn", required: false }] }], iconStartLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartLabel", required: false }] }], iconEndLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndLabel", required: false }] }], showPasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordLabel", required: false }] }], hidePasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePasswordLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
1038
1089
|
|
|
1039
1090
|
class ChipComponent {
|
|
1040
1091
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
@@ -1055,6 +1106,7 @@ class ChipComponent {
|
|
|
1055
1106
|
`gog-chip--${this.shape()}`,
|
|
1056
1107
|
this.removable() ? 'gog-chip--removable' : null,
|
|
1057
1108
|
this.disabled() ? 'gog-chip--disabled' : 'gog-chip--interactive',
|
|
1109
|
+
this.clickable() ? 'gog-chip--clickable' : null,
|
|
1058
1110
|
this.avatarUrl() ? 'gog-chip--has-avatar' : null,
|
|
1059
1111
|
this.iconName() ? 'gog-chip--has-icon' : null,
|
|
1060
1112
|
]
|
|
@@ -1076,18 +1128,16 @@ class ChipComponent {
|
|
|
1076
1128
|
}
|
|
1077
1129
|
onRemoveClick(event) {
|
|
1078
1130
|
event.stopPropagation();
|
|
1079
|
-
if (this.disabled())
|
|
1080
|
-
return;
|
|
1081
1131
|
this.gogRemove.emit();
|
|
1082
1132
|
}
|
|
1083
1133
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1084
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ChipComponent, isStandalone: true, selector: "gog-chip", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, removeAriaLabel: { classPropertyName: "removeAriaLabel", publicName: "removeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: true, isRequired: false, transformFunction: null }, avatarAlt: { classPropertyName: "avatarAlt", publicName: "avatarAlt", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogClick: "gogClick", gogRemove: "gogRemove" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div\n class=\"gog-chip__surface\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.role]=\"isInteractive() ? 'button' : null\"\n [attr.tabindex]=\"isInteractive() ? 0 : null\"\n [style.cursor]=\"isInteractive() ? 'pointer' : 'default'\"\n (click)=\"onChipClick($event)\"\n (keydown)=\"onKeydown($event)\"\n>\n @if (avatarUrl()) {\n <img class=\"gog-chip__avatar\" [src]=\"avatarUrl()\" [alt]=\"avatarAlt()\" />\n }\n\n @if (iconName()) {\n <gog-icon class=\"gog-chip__icon\" [ariaHidden]=\"true\" [name]=\"iconName() ?? 'check'\" />\n }\n\n <span class=\"gog-chip__content\">\n <ng-content></ng-content>\n </span>\n\n @if (removable()) {\n <button\n class=\"gog-chip__remove\"\n type=\"button\"\n [attr.aria-label]=\"removeAriaLabel()\"\n
|
|
1134
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ChipComponent, isStandalone: true, selector: "gog-chip", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, removeAriaLabel: { classPropertyName: "removeAriaLabel", publicName: "removeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: true, isRequired: false, transformFunction: null }, avatarAlt: { classPropertyName: "avatarAlt", publicName: "avatarAlt", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogClick: "gogClick", gogRemove: "gogRemove" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div\n class=\"gog-chip__surface\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.role]=\"isInteractive() ? 'button' : null\"\n [attr.tabindex]=\"isInteractive() ? 0 : null\"\n [style.cursor]=\"isInteractive() ? 'pointer' : 'default'\"\n (click)=\"onChipClick($event)\"\n (keydown)=\"onKeydown($event)\"\n>\n @if (avatarUrl()) {\n <img class=\"gog-chip__avatar\" [src]=\"avatarUrl()\" [alt]=\"avatarAlt()\" />\n }\n\n @if (iconName()) {\n <gog-icon class=\"gog-chip__icon\" [ariaHidden]=\"true\" [name]=\"iconName() ?? 'check'\" />\n }\n\n <span class=\"gog-chip__content\">\n <ng-content></ng-content>\n </span>\n\n @if (removable() && !disabled()) {\n <button\n class=\"gog-chip__remove\"\n type=\"button\"\n [attr.aria-label]=\"removeAriaLabel()\"\n (click)=\"onRemoveClick($event)\"\n >\n <gog-icon name=\"close\" />\n </button>\n }\n</div>\n", styles: [":host{display:inline-flex;max-width:100%;contain:layout style}.gog-chip__surface{display:inline-flex;align-items:center;gap:var(--gog-chip-gap, var(--gog-chip-size-gap, var(--gog-chip-md-gap)));box-sizing:border-box;width:fit-content;max-width:100%;overflow:hidden;padding:var(--gog-chip-padding-block, var(--gog-chip-size-padding-block, var(--gog-chip-md-padding-block))) var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline)));border:var(--gog-chip-border-width) var(--gog-chip-border-style) var(--gog-chip-border);border-radius:var(--gog-chip-radius);background-color:var(--gog-chip-bg);color:var(--gog-chip-color);font-family:var(--gog-chip-font-family);font-size:var(--gog-chip-font-size, var(--gog-chip-size-font-size, var(--gog-chip-md-font-size)));font-weight:var(--gog-chip-font-weight);line-height:var(--gog-chip-line-height);white-space:nowrap;-webkit-user-select:none;user-select:none}.gog-chip__surface:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--clickable) .gog-chip__surface:hover:not([aria-disabled=true]){background-color:var(--gog-chip-hover-bg)}.gog-chip__surface[aria-disabled=true]{opacity:var(--gog-chip-disabled-opacity);pointer-events:none}.gog-chip__content{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:var(--gog-chip-line-height)}.gog-chip__avatar{width:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));height:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));border-radius:50%;object-fit:cover;flex-shrink:0}.gog-chip__icon{flex-shrink:0;font-size:var(--gog-chip-icon-size, var(--gog-chip-size-icon-size, var(--gog-chip-md-icon-size)))}.gog-chip__remove{display:inline-grid;place-items:center;width:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));height:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));padding:0;border:0;border-radius:50%;background:transparent;color:var(--gog-chip-remove-color);font-size:var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size)));cursor:pointer;flex-shrink:0}.gog-chip__remove:hover:not(:disabled){color:var(--gog-chip-remove-hover-color)}.gog-chip__remove:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--xsm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-xsm-font-size);--gog-chip-size-padding-block: var(--gog-chip-xsm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-xsm-padding-inline);--gog-chip-size-gap: var(--gog-chip-xsm-gap);--gog-chip-size-avatar-size: var(--gog-chip-xsm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-xsm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-xsm-remove-size)}:host(.gog-chip--sm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-sm-font-size);--gog-chip-size-padding-block: var(--gog-chip-sm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-sm-padding-inline);--gog-chip-size-gap: var(--gog-chip-sm-gap);--gog-chip-size-avatar-size: var(--gog-chip-sm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-sm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-sm-remove-size)}:host(.gog-chip--md) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-md-font-size);--gog-chip-size-padding-block: var(--gog-chip-md-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-md-padding-inline);--gog-chip-size-gap: var(--gog-chip-md-gap);--gog-chip-size-avatar-size: var(--gog-chip-md-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-md-icon-size);--gog-chip-size-remove-size: var(--gog-chip-md-remove-size)}:host(.gog-chip--lg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-lg-font-size);--gog-chip-size-padding-block: var(--gog-chip-lg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-lg-padding-inline);--gog-chip-size-gap: var(--gog-chip-lg-gap);--gog-chip-size-avatar-size: var(--gog-chip-lg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-lg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-lg-remove-size)}:host(.gog-chip--slg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-slg-font-size);--gog-chip-size-padding-block: var(--gog-chip-slg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-slg-padding-inline);--gog-chip-size-gap: var(--gog-chip-slg-gap);--gog-chip-size-avatar-size: var(--gog-chip-slg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-slg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-slg-remove-size)}:host(.gog-chip--pill) .gog-chip__surface{border-radius:var(--gog-chip-pill-radius)}:host(.gog-chip--rounded) .gog-chip__surface{border-radius:var(--gog-chip-radius)}:host(.gog-chip--has-avatar) .gog-chip__surface{padding-left:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-avatar-inset-ratio))}:host(.gog-chip--removable) .gog-chip__surface{padding-right:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-remove-inset-ratio))}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1085
1135
|
}
|
|
1086
1136
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChipComponent, decorators: [{
|
|
1087
1137
|
type: Component,
|
|
1088
1138
|
args: [{ selector: 'gog-chip', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1089
1139
|
'[class]': 'hostClasses()',
|
|
1090
|
-
}, template: "<div\n class=\"gog-chip__surface\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.role]=\"isInteractive() ? 'button' : null\"\n [attr.tabindex]=\"isInteractive() ? 0 : null\"\n [style.cursor]=\"isInteractive() ? 'pointer' : 'default'\"\n (click)=\"onChipClick($event)\"\n (keydown)=\"onKeydown($event)\"\n>\n @if (avatarUrl()) {\n <img class=\"gog-chip__avatar\" [src]=\"avatarUrl()\" [alt]=\"avatarAlt()\" />\n }\n\n @if (iconName()) {\n <gog-icon class=\"gog-chip__icon\" [ariaHidden]=\"true\" [name]=\"iconName() ?? 'check'\" />\n }\n\n <span class=\"gog-chip__content\">\n <ng-content></ng-content>\n </span>\n\n @if (removable()) {\n <button\n class=\"gog-chip__remove\"\n type=\"button\"\n [attr.aria-label]=\"removeAriaLabel()\"\n
|
|
1140
|
+
}, template: "<div\n class=\"gog-chip__surface\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.role]=\"isInteractive() ? 'button' : null\"\n [attr.tabindex]=\"isInteractive() ? 0 : null\"\n [style.cursor]=\"isInteractive() ? 'pointer' : 'default'\"\n (click)=\"onChipClick($event)\"\n (keydown)=\"onKeydown($event)\"\n>\n @if (avatarUrl()) {\n <img class=\"gog-chip__avatar\" [src]=\"avatarUrl()\" [alt]=\"avatarAlt()\" />\n }\n\n @if (iconName()) {\n <gog-icon class=\"gog-chip__icon\" [ariaHidden]=\"true\" [name]=\"iconName() ?? 'check'\" />\n }\n\n <span class=\"gog-chip__content\">\n <ng-content></ng-content>\n </span>\n\n @if (removable() && !disabled()) {\n <button\n class=\"gog-chip__remove\"\n type=\"button\"\n [attr.aria-label]=\"removeAriaLabel()\"\n (click)=\"onRemoveClick($event)\"\n >\n <gog-icon name=\"close\" />\n </button>\n }\n</div>\n", styles: [":host{display:inline-flex;max-width:100%;contain:layout style}.gog-chip__surface{display:inline-flex;align-items:center;gap:var(--gog-chip-gap, var(--gog-chip-size-gap, var(--gog-chip-md-gap)));box-sizing:border-box;width:fit-content;max-width:100%;overflow:hidden;padding:var(--gog-chip-padding-block, var(--gog-chip-size-padding-block, var(--gog-chip-md-padding-block))) var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline)));border:var(--gog-chip-border-width) var(--gog-chip-border-style) var(--gog-chip-border);border-radius:var(--gog-chip-radius);background-color:var(--gog-chip-bg);color:var(--gog-chip-color);font-family:var(--gog-chip-font-family);font-size:var(--gog-chip-font-size, var(--gog-chip-size-font-size, var(--gog-chip-md-font-size)));font-weight:var(--gog-chip-font-weight);line-height:var(--gog-chip-line-height);white-space:nowrap;-webkit-user-select:none;user-select:none}.gog-chip__surface:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--clickable) .gog-chip__surface:hover:not([aria-disabled=true]){background-color:var(--gog-chip-hover-bg)}.gog-chip__surface[aria-disabled=true]{opacity:var(--gog-chip-disabled-opacity);pointer-events:none}.gog-chip__content{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:var(--gog-chip-line-height)}.gog-chip__avatar{width:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));height:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));border-radius:50%;object-fit:cover;flex-shrink:0}.gog-chip__icon{flex-shrink:0;font-size:var(--gog-chip-icon-size, var(--gog-chip-size-icon-size, var(--gog-chip-md-icon-size)))}.gog-chip__remove{display:inline-grid;place-items:center;width:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));height:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));padding:0;border:0;border-radius:50%;background:transparent;color:var(--gog-chip-remove-color);font-size:var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size)));cursor:pointer;flex-shrink:0}.gog-chip__remove:hover:not(:disabled){color:var(--gog-chip-remove-hover-color)}.gog-chip__remove:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--xsm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-xsm-font-size);--gog-chip-size-padding-block: var(--gog-chip-xsm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-xsm-padding-inline);--gog-chip-size-gap: var(--gog-chip-xsm-gap);--gog-chip-size-avatar-size: var(--gog-chip-xsm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-xsm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-xsm-remove-size)}:host(.gog-chip--sm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-sm-font-size);--gog-chip-size-padding-block: var(--gog-chip-sm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-sm-padding-inline);--gog-chip-size-gap: var(--gog-chip-sm-gap);--gog-chip-size-avatar-size: var(--gog-chip-sm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-sm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-sm-remove-size)}:host(.gog-chip--md) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-md-font-size);--gog-chip-size-padding-block: var(--gog-chip-md-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-md-padding-inline);--gog-chip-size-gap: var(--gog-chip-md-gap);--gog-chip-size-avatar-size: var(--gog-chip-md-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-md-icon-size);--gog-chip-size-remove-size: var(--gog-chip-md-remove-size)}:host(.gog-chip--lg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-lg-font-size);--gog-chip-size-padding-block: var(--gog-chip-lg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-lg-padding-inline);--gog-chip-size-gap: var(--gog-chip-lg-gap);--gog-chip-size-avatar-size: var(--gog-chip-lg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-lg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-lg-remove-size)}:host(.gog-chip--slg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-slg-font-size);--gog-chip-size-padding-block: var(--gog-chip-slg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-slg-padding-inline);--gog-chip-size-gap: var(--gog-chip-slg-gap);--gog-chip-size-avatar-size: var(--gog-chip-slg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-slg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-slg-remove-size)}:host(.gog-chip--pill) .gog-chip__surface{border-radius:var(--gog-chip-pill-radius)}:host(.gog-chip--rounded) .gog-chip__surface{border-radius:var(--gog-chip-radius)}:host(.gog-chip--has-avatar) .gog-chip__surface{padding-left:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-avatar-inset-ratio))}:host(.gog-chip--removable) .gog-chip__surface{padding-right:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-remove-inset-ratio))}\n"] }]
|
|
1091
1141
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], removeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeAriaLabel", required: false }] }], avatarUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarUrl", required: false }] }], avatarAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarAlt", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], gogClick: [{ type: i0.Output, args: ["gogClick"] }], gogRemove: [{ type: i0.Output, args: ["gogRemove"] }] } });
|
|
1092
1142
|
|
|
1093
1143
|
class TagComponent {
|
|
@@ -1097,16 +1147,84 @@ class TagComponent {
|
|
|
1097
1147
|
iconName = input(null, ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
|
|
1098
1148
|
iconTemplate = input(null, ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
|
|
1099
1149
|
hasIcon = computed(() => this.iconTemplate() !== null || this.iconName() !== null, ...(ngDevMode ? [{ debugName: "hasIcon" }] : /* istanbul ignore next */ []));
|
|
1150
|
+
hostClasses = computed(() => [
|
|
1151
|
+
'gog-tag',
|
|
1152
|
+
`gog-tag--${this.variant()}`,
|
|
1153
|
+
`gog-tag--${this.size()}`,
|
|
1154
|
+
`gog-tag--${this.shape()}`,
|
|
1155
|
+
this.hasIcon() ? 'gog-tag--has-icon' : null,
|
|
1156
|
+
]
|
|
1157
|
+
.filter((className) => className !== null)
|
|
1158
|
+
.join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
1100
1159
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1101
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TagComponent, isStandalone: true, selector: "gog-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "
|
|
1160
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TagComponent, isStandalone: true, selector: "gog-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "@if (hasIcon()) {\n <gog-icon\n class=\"gog-tag__icon\"\n [ariaHidden]=\"true\"\n [name]=\"iconName() ?? 'info'\"\n [template]=\"iconTemplate()\"\n />\n}\n\n<span class=\"gog-tag__content\">\n <ng-content></ng-content>\n</span>\n", styles: [":host{--gog-tag-resolved-color: var( --gog-tag-accent, var(--gog-tag-variant-color, var(--gog-tag-default-color)) );display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:fit-content;max-width:100%;padding:var(--gog-tag-padding-block, var(--gog-tag-size-padding-block, var(--gog-tag-md-padding-block))) var(--gog-tag-padding-inline, var(--gog-tag-size-padding-inline, var(--gog-tag-md-padding-inline)));border:var(--gog-tag-border-width) var(--gog-tag-border-style) var(--gog-tag-border, var(--gog-tag-resolved-color));border-radius:var(--gog-tag-radius);background-color:var(--gog-tag-bg, color-mix(in srgb, var(--gog-tag-resolved-color) var(--gog-tag-bg-mix), var(--gog-tag-bg-base)));box-shadow:inset 0 0 0 var(--gog-tag-inner-border-width) var(--gog-tag-border, var(--gog-tag-resolved-color));color:var(--gog-tag-color, color-mix(in srgb, var(--gog-tag-resolved-color) var(--gog-tag-color-mix), var(--gog-tag-color-base)));font-family:var(--gog-tag-font-family);font-size:var(--gog-tag-font-size, var(--gog-tag-size-font-size, var(--gog-tag-md-font-size)));font-weight:var(--gog-tag-font-weight);line-height:var(--gog-tag-line-height);white-space:nowrap;gap:var(--gog-tag-gap, var(--gog-tag-size-gap, var(--gog-tag-md-gap)))}:host(.gog-tag--success){--gog-tag-variant-color: var(--gog-tag-success-color)}:host(.gog-tag--danger){--gog-tag-variant-color: var(--gog-tag-danger-color)}:host(.gog-tag--warning){--gog-tag-variant-color: var(--gog-tag-warning-color)}:host(.gog-tag--info){--gog-tag-variant-color: var(--gog-tag-info-color)}:host(.gog-tag--xsm){--gog-tag-size-font-size: var(--gog-tag-xsm-font-size);--gog-tag-size-padding-block: var(--gog-tag-xsm-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-xsm-padding-inline);--gog-tag-size-gap: var(--gog-tag-xsm-gap);--gog-tag-size-icon-size: var(--gog-tag-xsm-icon-size)}:host(.gog-tag--sm){--gog-tag-size-font-size: var(--gog-tag-sm-font-size);--gog-tag-size-padding-block: var(--gog-tag-sm-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-sm-padding-inline);--gog-tag-size-gap: var(--gog-tag-sm-gap);--gog-tag-size-icon-size: var(--gog-tag-sm-icon-size)}:host(.gog-tag--md){--gog-tag-size-font-size: var(--gog-tag-md-font-size);--gog-tag-size-padding-block: var(--gog-tag-md-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-md-padding-inline);--gog-tag-size-gap: var(--gog-tag-md-gap);--gog-tag-size-icon-size: var(--gog-tag-md-icon-size)}:host(.gog-tag--lg){--gog-tag-size-font-size: var(--gog-tag-lg-font-size);--gog-tag-size-padding-block: var(--gog-tag-lg-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-lg-padding-inline);--gog-tag-size-gap: var(--gog-tag-lg-gap);--gog-tag-size-icon-size: var(--gog-tag-lg-icon-size)}:host(.gog-tag--slg){--gog-tag-size-font-size: var(--gog-tag-slg-font-size);--gog-tag-size-padding-block: var(--gog-tag-slg-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-slg-padding-inline);--gog-tag-size-gap: var(--gog-tag-slg-gap);--gog-tag-size-icon-size: var(--gog-tag-slg-icon-size)}:host(.gog-tag--rounded){border-radius:var(--gog-tag-radius)}:host(.gog-tag--pill){border-radius:var(--gog-tag-pill-radius)}.gog-tag__content{min-width:0}.gog-tag__icon{flex-shrink:0;font-size:var(--gog-tag-icon-size, var(--gog-tag-size-icon-size, var(--gog-tag-md-icon-size)))}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1102
1161
|
}
|
|
1103
1162
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TagComponent, decorators: [{
|
|
1104
1163
|
type: Component,
|
|
1105
1164
|
args: [{ selector: 'gog-tag', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1106
|
-
'[class]': '
|
|
1107
|
-
}, template: "@if (hasIcon()) {\n <gog-icon\n class=\"gog-tag__icon\"\n [ariaHidden]=\"true\"\n [name]=\"iconName() ?? 'info'\"\n [template]=\"iconTemplate()\"\n />\n}\n\n<span class=\"gog-tag__content\">\n <ng-content></ng-content>\n</span>\n", styles: [":host{--gog-tag-
|
|
1165
|
+
'[class]': 'hostClasses()',
|
|
1166
|
+
}, template: "@if (hasIcon()) {\n <gog-icon\n class=\"gog-tag__icon\"\n [ariaHidden]=\"true\"\n [name]=\"iconName() ?? 'info'\"\n [template]=\"iconTemplate()\"\n />\n}\n\n<span class=\"gog-tag__content\">\n <ng-content></ng-content>\n</span>\n", styles: [":host{--gog-tag-resolved-color: var( --gog-tag-accent, var(--gog-tag-variant-color, var(--gog-tag-default-color)) );display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:fit-content;max-width:100%;padding:var(--gog-tag-padding-block, var(--gog-tag-size-padding-block, var(--gog-tag-md-padding-block))) var(--gog-tag-padding-inline, var(--gog-tag-size-padding-inline, var(--gog-tag-md-padding-inline)));border:var(--gog-tag-border-width) var(--gog-tag-border-style) var(--gog-tag-border, var(--gog-tag-resolved-color));border-radius:var(--gog-tag-radius);background-color:var(--gog-tag-bg, color-mix(in srgb, var(--gog-tag-resolved-color) var(--gog-tag-bg-mix), var(--gog-tag-bg-base)));box-shadow:inset 0 0 0 var(--gog-tag-inner-border-width) var(--gog-tag-border, var(--gog-tag-resolved-color));color:var(--gog-tag-color, color-mix(in srgb, var(--gog-tag-resolved-color) var(--gog-tag-color-mix), var(--gog-tag-color-base)));font-family:var(--gog-tag-font-family);font-size:var(--gog-tag-font-size, var(--gog-tag-size-font-size, var(--gog-tag-md-font-size)));font-weight:var(--gog-tag-font-weight);line-height:var(--gog-tag-line-height);white-space:nowrap;gap:var(--gog-tag-gap, var(--gog-tag-size-gap, var(--gog-tag-md-gap)))}:host(.gog-tag--success){--gog-tag-variant-color: var(--gog-tag-success-color)}:host(.gog-tag--danger){--gog-tag-variant-color: var(--gog-tag-danger-color)}:host(.gog-tag--warning){--gog-tag-variant-color: var(--gog-tag-warning-color)}:host(.gog-tag--info){--gog-tag-variant-color: var(--gog-tag-info-color)}:host(.gog-tag--xsm){--gog-tag-size-font-size: var(--gog-tag-xsm-font-size);--gog-tag-size-padding-block: var(--gog-tag-xsm-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-xsm-padding-inline);--gog-tag-size-gap: var(--gog-tag-xsm-gap);--gog-tag-size-icon-size: var(--gog-tag-xsm-icon-size)}:host(.gog-tag--sm){--gog-tag-size-font-size: var(--gog-tag-sm-font-size);--gog-tag-size-padding-block: var(--gog-tag-sm-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-sm-padding-inline);--gog-tag-size-gap: var(--gog-tag-sm-gap);--gog-tag-size-icon-size: var(--gog-tag-sm-icon-size)}:host(.gog-tag--md){--gog-tag-size-font-size: var(--gog-tag-md-font-size);--gog-tag-size-padding-block: var(--gog-tag-md-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-md-padding-inline);--gog-tag-size-gap: var(--gog-tag-md-gap);--gog-tag-size-icon-size: var(--gog-tag-md-icon-size)}:host(.gog-tag--lg){--gog-tag-size-font-size: var(--gog-tag-lg-font-size);--gog-tag-size-padding-block: var(--gog-tag-lg-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-lg-padding-inline);--gog-tag-size-gap: var(--gog-tag-lg-gap);--gog-tag-size-icon-size: var(--gog-tag-lg-icon-size)}:host(.gog-tag--slg){--gog-tag-size-font-size: var(--gog-tag-slg-font-size);--gog-tag-size-padding-block: var(--gog-tag-slg-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-slg-padding-inline);--gog-tag-size-gap: var(--gog-tag-slg-gap);--gog-tag-size-icon-size: var(--gog-tag-slg-icon-size)}:host(.gog-tag--rounded){border-radius:var(--gog-tag-radius)}:host(.gog-tag--pill){border-radius:var(--gog-tag-pill-radius)}.gog-tag__content{min-width:0}.gog-tag__icon{flex-shrink:0;font-size:var(--gog-tag-icon-size, var(--gog-tag-size-icon-size, var(--gog-tag-md-icon-size)))}\n"] }]
|
|
1108
1167
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }] } });
|
|
1109
1168
|
|
|
1169
|
+
/**
|
|
1170
|
+
* Renders a template into `document.body` while keeping it wired to the declaring
|
|
1171
|
+
* component: the view is stamped with that component's style encapsulation and reads
|
|
1172
|
+
* its signals directly.
|
|
1173
|
+
*
|
|
1174
|
+
* That is the whole point of doing it this way rather than with a second, portal-only
|
|
1175
|
+
* component: one `<ng-template>` can serve both the inline and the appended-to-body
|
|
1176
|
+
* dropdown, so the option markup exists once and cannot drift between the two modes,
|
|
1177
|
+
* and selection state needs no manual field-syncing to stay in step.
|
|
1178
|
+
*/
|
|
1179
|
+
class GogDropdownOverlay {
|
|
1180
|
+
appRef;
|
|
1181
|
+
document;
|
|
1182
|
+
hostEl = null;
|
|
1183
|
+
viewRef = null;
|
|
1184
|
+
constructor(appRef, document) {
|
|
1185
|
+
this.appRef = appRef;
|
|
1186
|
+
this.document = document;
|
|
1187
|
+
}
|
|
1188
|
+
/** The `<body>` child holding the rendered panel, or null while detached. */
|
|
1189
|
+
get hostElement() {
|
|
1190
|
+
return this.hostEl;
|
|
1191
|
+
}
|
|
1192
|
+
get isAttached() {
|
|
1193
|
+
return this.viewRef !== null;
|
|
1194
|
+
}
|
|
1195
|
+
attach(template, themeSource = null) {
|
|
1196
|
+
this.detach();
|
|
1197
|
+
this.hostEl = this.document.createElement('div');
|
|
1198
|
+
this.hostEl.classList.add('gog-overlay-host');
|
|
1199
|
+
// `data-theme` can be scoped to any subtree, not just `:root` (see the themes
|
|
1200
|
+
// showcase page), so the host has to copy it from wherever the trigger actually
|
|
1201
|
+
// sits rather than assume the document-wide theme applies.
|
|
1202
|
+
const themedAncestor = themeSource?.closest('[data-theme]');
|
|
1203
|
+
const theme = themedAncestor?.getAttribute('data-theme');
|
|
1204
|
+
if (theme) {
|
|
1205
|
+
this.hostEl.setAttribute('data-theme', theme);
|
|
1206
|
+
}
|
|
1207
|
+
this.document.body.appendChild(this.hostEl);
|
|
1208
|
+
this.viewRef = template.createEmbeddedView({});
|
|
1209
|
+
// Attached as its own change-detection root so signal reads inside the panel still
|
|
1210
|
+
// mark it dirty even though its DOM no longer sits under the declaring component.
|
|
1211
|
+
this.appRef.attachView(this.viewRef);
|
|
1212
|
+
for (const node of this.viewRef.rootNodes) {
|
|
1213
|
+
this.hostEl.appendChild(node);
|
|
1214
|
+
}
|
|
1215
|
+
this.viewRef.detectChanges();
|
|
1216
|
+
}
|
|
1217
|
+
detach() {
|
|
1218
|
+
if (this.viewRef) {
|
|
1219
|
+
this.appRef.detachView(this.viewRef);
|
|
1220
|
+
this.viewRef.destroy();
|
|
1221
|
+
this.viewRef = null;
|
|
1222
|
+
}
|
|
1223
|
+
this.hostEl?.remove();
|
|
1224
|
+
this.hostEl = null;
|
|
1225
|
+
}
|
|
1226
|
+
}
|
|
1227
|
+
|
|
1110
1228
|
const DEFAULT_GAP = 8;
|
|
1111
1229
|
const DEFAULT_VIEWPORT_PADDING = 8;
|
|
1112
1230
|
function resolveDropdownDirection(direction, triggerRect, panelHeight, viewportHeight, gap = DEFAULT_GAP, viewportPadding = DEFAULT_VIEWPORT_PADDING) {
|
|
@@ -1126,14 +1244,19 @@ function resolveDropdownDirection(direction, triggerRect, panelHeight, viewportH
|
|
|
1126
1244
|
function resolveDropdownPlacement(direction, triggerRect, panelHeight, viewportHeight, gap = DEFAULT_GAP, viewportPadding = DEFAULT_VIEWPORT_PADDING) {
|
|
1127
1245
|
const resolvedDirection = resolveDropdownDirection(direction, triggerRect, panelHeight, viewportHeight, gap, viewportPadding);
|
|
1128
1246
|
if (resolvedDirection === 'up') {
|
|
1129
|
-
const
|
|
1130
|
-
const actualHeight = Math.min(panelHeight,
|
|
1247
|
+
const availableSpace = Math.max(0, triggerRect.top - gap - viewportPadding);
|
|
1248
|
+
const actualHeight = Math.min(panelHeight, availableSpace || panelHeight);
|
|
1131
1249
|
return {
|
|
1132
1250
|
direction: resolvedDirection,
|
|
1133
1251
|
top: Math.max(viewportPadding, triggerRect.top - gap - actualHeight),
|
|
1134
1252
|
left: triggerRect.left,
|
|
1135
1253
|
width: triggerRect.width,
|
|
1136
|
-
|
|
1254
|
+
// Must match actualHeight, not availableSpace: `top` above was computed assuming
|
|
1255
|
+
// the panel is actualHeight tall, so this is what goes into the panel's CSS
|
|
1256
|
+
// max-height too. Returning the full availableSpace here let real content taller
|
|
1257
|
+
// than actualHeight (but still under availableSpace) render past its computed
|
|
1258
|
+
// top and cover the trigger it's supposed to sit above.
|
|
1259
|
+
maxHeight: actualHeight,
|
|
1137
1260
|
};
|
|
1138
1261
|
}
|
|
1139
1262
|
const maxHeight = Math.max(0, viewportHeight - triggerRect.bottom - gap - viewportPadding);
|
|
@@ -1145,136 +1268,181 @@ function resolveDropdownPlacement(direction, triggerRect, panelHeight, viewportH
|
|
|
1145
1268
|
maxHeight,
|
|
1146
1269
|
};
|
|
1147
1270
|
}
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GogSelectDropdownPortal, isStandalone: true, selector: "gog-select-dropdown-portal", ngImport: i0, template: `
|
|
1165
|
-
<div
|
|
1166
|
-
[id]="listboxId"
|
|
1167
|
-
class="gog-select__dropdown gog-select__dropdown--portal"
|
|
1168
|
-
[style.top.px]="top"
|
|
1169
|
-
[style.left.px]="left"
|
|
1170
|
-
[style.width.px]="width"
|
|
1171
|
-
[style.max-height.px]="maxHeight"
|
|
1172
|
-
[style.z-index]="zIndex"
|
|
1173
|
-
role="listbox"
|
|
1174
|
-
>
|
|
1175
|
-
@for (option of options; track option.id) {
|
|
1176
|
-
<button
|
|
1177
|
-
type="button"
|
|
1178
|
-
class="gog-select__option font-body"
|
|
1179
|
-
role="option"
|
|
1180
|
-
[attr.aria-selected]="isSelected(option.id)"
|
|
1181
|
-
[attr.aria-disabled]="option.disabled ?? false"
|
|
1182
|
-
[class.gog-select__option--selected]="isSelected(option.id)"
|
|
1183
|
-
[class.gog-select__option--disabled]="option.disabled ?? false"
|
|
1184
|
-
(click)="onSelect(option, $event)"
|
|
1185
|
-
>
|
|
1186
|
-
<span class="gog-select__option-mark" aria-hidden="true">
|
|
1187
|
-
@if (isSelected(option.id)) {
|
|
1188
|
-
<gog-icon name="check" />
|
|
1189
|
-
}
|
|
1190
|
-
</span>
|
|
1191
|
-
<span class="gog-select__option-label">{{ option.name }}</span>
|
|
1192
|
-
</button>
|
|
1193
|
-
}
|
|
1194
|
-
</div>
|
|
1195
|
-
`, isInline: true, styles: [":host{display:block}.gog-select{--gog-select-gap: 4px;--gog-select-label-color: var(--accent-color);--gog-select-field-bg: var(--surface-color);--gog-select-field-border: var(--accent-dim);--gog-select-field-color: var(--text-color);--gog-select-focus-border: var(--accent-color);--gog-select-focus-ring: color-mix(in srgb, var(--accent-color) 25%, transparent);--gog-select-error-color: var(--danger-color);--gog-select-chevron-color: var(--accent-color);--gog-select-option-hover-bg: color-mix(in srgb, var(--accent-color) 10%, transparent);--gog-select-option-selected-color: var(--accent-color);--gog-select-disabled-opacity: .4;display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-size:var(--text-sm);color:var(--gog-select-label-color);text-transform:uppercase;letter-spacing:1px;cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{--gog-select-control-padding-y: var(--control-padding-y, 10px);--gog-select-control-padding-x: var(--control-padding-x, 14px);width:100%;min-height:44px;padding:var(--gog-select-control-padding-y) 40px var(--gog-select-control-padding-y) var(--gog-select-control-padding-x);display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--text-md);color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-select-field-border);border-radius:var(--radius);outline:none;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:0 0 8px var(--gog-select-focus-ring)}.gog-select__control:focus-visible{outline:3px solid var(--gog-select-focus-border);outline-offset:2px}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.gog-select__value--placeholder{color:var(--muted-text-color)}.gog-select__chevron{width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:.875rem}.gog-select__dropdown{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:var(--dropdown-z, 300);background-color:var(--surface-color);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-select-field-border);border-radius:var(--radius);max-height:260px;overflow-y:auto;box-shadow:var(--panel-shadow)}.gog-select__dropdown--up{top:auto;bottom:calc(100% + 2px)}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:10px;padding:var(--control-padding-y, 10px) var(--gog-select-control-padding-x);border:0;background:transparent;text-align:left;font:inherit;color:var(--text-color);cursor:pointer;transition:background-color .12s ease}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:.5;cursor:not-allowed}.gog-select__option:focus-visible{outline:3px solid var(--gog-select-focus-border);outline-offset:-3px}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0}.gog-select__option-mark gog-icon{font-size:.875rem}.gog-select__error{font-size:var(--text-xs);color:var(--gog-select-error-color)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1271
|
+
/**
|
|
1272
|
+
* Resolves a CSS length to pixels for the placement math. Only `px`, `%` and `vh` can be
|
|
1273
|
+
* resolved without laying out the DOM — `%` and `vh` are taken relative to the viewport
|
|
1274
|
+
* height, which is exactly what a `position: fixed` panel's height resolves against in CSS.
|
|
1275
|
+
* Any other unit (`rem`, `em`, `auto`, a bare number, …) returns null: the caller falls back
|
|
1276
|
+
* to its own estimate for the up/down decision, while the original string is still written
|
|
1277
|
+
* to the panel's `style.max-height` as-is — only the direction heuristic loses precision.
|
|
1278
|
+
*/
|
|
1279
|
+
function resolveCssLengthPx(value, viewportHeight) {
|
|
1280
|
+
const match = /^(-?[\d.]+)(px|%|vh)$/.exec(value.trim());
|
|
1281
|
+
if (!match)
|
|
1282
|
+
return null;
|
|
1283
|
+
const amount = Number.parseFloat(match[1]);
|
|
1284
|
+
if (!Number.isFinite(amount))
|
|
1285
|
+
return null;
|
|
1286
|
+
return match[2] === 'px' ? amount : (amount / 100) * viewportHeight;
|
|
1196
1287
|
}
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
(click)="onSelect(option, $event)"
|
|
1220
|
-
>
|
|
1221
|
-
<span class="gog-select__option-mark" aria-hidden="true">
|
|
1222
|
-
@if (isSelected(option.id)) {
|
|
1223
|
-
<gog-icon name="check" />
|
|
1224
|
-
}
|
|
1225
|
-
</span>
|
|
1226
|
-
<span class="gog-select__option-label">{{ option.name }}</span>
|
|
1227
|
-
</button>
|
|
1228
|
-
}
|
|
1229
|
-
</div>
|
|
1230
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.gog-select{--gog-select-gap: 4px;--gog-select-label-color: var(--accent-color);--gog-select-field-bg: var(--surface-color);--gog-select-field-border: var(--accent-dim);--gog-select-field-color: var(--text-color);--gog-select-focus-border: var(--accent-color);--gog-select-focus-ring: color-mix(in srgb, var(--accent-color) 25%, transparent);--gog-select-error-color: var(--danger-color);--gog-select-chevron-color: var(--accent-color);--gog-select-option-hover-bg: color-mix(in srgb, var(--accent-color) 10%, transparent);--gog-select-option-selected-color: var(--accent-color);--gog-select-disabled-opacity: .4;display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-size:var(--text-sm);color:var(--gog-select-label-color);text-transform:uppercase;letter-spacing:1px;cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{--gog-select-control-padding-y: var(--control-padding-y, 10px);--gog-select-control-padding-x: var(--control-padding-x, 14px);width:100%;min-height:44px;padding:var(--gog-select-control-padding-y) 40px var(--gog-select-control-padding-y) var(--gog-select-control-padding-x);display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--text-md);color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-select-field-border);border-radius:var(--radius);outline:none;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:0 0 8px var(--gog-select-focus-ring)}.gog-select__control:focus-visible{outline:3px solid var(--gog-select-focus-border);outline-offset:2px}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.gog-select__value--placeholder{color:var(--muted-text-color)}.gog-select__chevron{width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:.875rem}.gog-select__dropdown{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:var(--dropdown-z, 300);background-color:var(--surface-color);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-select-field-border);border-radius:var(--radius);max-height:260px;overflow-y:auto;box-shadow:var(--panel-shadow)}.gog-select__dropdown--up{top:auto;bottom:calc(100% + 2px)}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:10px;padding:var(--control-padding-y, 10px) var(--gog-select-control-padding-x);border:0;background:transparent;text-align:left;font:inherit;color:var(--text-color);cursor:pointer;transition:background-color .12s ease}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:.5;cursor:not-allowed}.gog-select__option:focus-visible{outline:3px solid var(--gog-select-focus-border);outline-offset:-3px}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0}.gog-select__option-mark gog-icon{font-size:.875rem}.gog-select__error{font-size:var(--text-xs);color:var(--gog-select-error-color)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option{transition:none}}\n"] }]
|
|
1231
|
-
}] });
|
|
1232
|
-
class SelectComponent {
|
|
1233
|
-
static nextId = 0;
|
|
1234
|
-
generatedId = `gog-select-${++SelectComponent.nextId}`;
|
|
1235
|
-
generatedListboxId = `gog-select-listbox-${SelectComponent.nextId}`;
|
|
1236
|
-
inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
1288
|
+
|
|
1289
|
+
/** Gap between the trigger and the panel. */
|
|
1290
|
+
const PANEL_GAP = 2;
|
|
1291
|
+
/** Smallest allowed gap between the panel and the viewport edge. */
|
|
1292
|
+
const VIEWPORT_PADDING = 8;
|
|
1293
|
+
/** Used only if a subclass's `panelMaxHeightToken` isn't declared anywhere in the cascade. */
|
|
1294
|
+
const FALLBACK_MAX_PANEL_HEIGHT = 260;
|
|
1295
|
+
/** Used only if a subclass's `optionHeightToken` isn't declared anywhere in the cascade. */
|
|
1296
|
+
const FALLBACK_OPTION_HEIGHT = 40;
|
|
1297
|
+
/** Must match the `var(--gog-dropdown-z, …)` fallback in the component stylesheets. */
|
|
1298
|
+
const DEFAULT_PANEL_Z_INDEX = 300;
|
|
1299
|
+
/**
|
|
1300
|
+
* Shared behaviour for the listbox-style controls: open/close, placement, the
|
|
1301
|
+
* append-to-body overlay, click-outside, keyboard navigation and `ControlValueAccessor`
|
|
1302
|
+
* plumbing. Subclasses supply only what actually differs — the value type, the panel
|
|
1303
|
+
* markup, and the BEM class names used to find the trigger and the options.
|
|
1304
|
+
*
|
|
1305
|
+
* Exported because it appears in the public type signatures of the components that
|
|
1306
|
+
* extend it; it is not meant to be used or subclassed by consumers.
|
|
1307
|
+
*/
|
|
1308
|
+
class GogDropdownBase {
|
|
1309
|
+
static nextUid = 0;
|
|
1237
1310
|
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1238
1311
|
ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1239
1312
|
placeholder = input('Select...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1240
1313
|
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
1241
1314
|
errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
1315
|
+
/** See `GogErrorDisplay`. Defaults to `'manual'`, matching every other control in the library. */
|
|
1316
|
+
errorDisplay = input('manual', ...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
|
|
1317
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1242
1318
|
dropdownDirection = input('auto', ...(ngDevMode ? [{ debugName: "dropdownDirection" }] : /* istanbul ignore next */ []));
|
|
1319
|
+
/**
|
|
1320
|
+
* Explicit stacking order for the panel. Left unset the panel falls back to the
|
|
1321
|
+
* stylesheet's `--gog-dropdown-z`, so the default lives in CSS where a consumer can
|
|
1322
|
+
* retheme it, rather than being baked into the component.
|
|
1323
|
+
*/
|
|
1243
1324
|
dropdownZIndex = input(null, ...(ngDevMode ? [{ debugName: "dropdownZIndex" }] : /* istanbul ignore next */ []));
|
|
1325
|
+
/**
|
|
1326
|
+
* Fixed panel width as any CSS length (`'320px'`, `'40ch'`, `'100%'`, …), applied only
|
|
1327
|
+
* when `appendToBody` is set. Left unset the panel matches the trigger's width, same as
|
|
1328
|
+
* the inline panel already does via CSS.
|
|
1329
|
+
*/
|
|
1330
|
+
dropdownWidth = input(null, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : /* istanbul ignore next */ []));
|
|
1331
|
+
/**
|
|
1332
|
+
* Fixed panel max-height as any CSS length, applied only when `appendToBody` is set.
|
|
1333
|
+
* `px`, `%` and `vh` also feed the up/down placement math (see `resolveCssLengthPx`); any
|
|
1334
|
+
* other unit still renders correctly but is invisible to that heuristic, so the panel may
|
|
1335
|
+
* pick the "wrong" side close to a viewport edge. Left unset the panel keeps the existing
|
|
1336
|
+
* viewport-derived, auto-flipping height.
|
|
1337
|
+
*/
|
|
1338
|
+
dropdownMaxHeight = input(null, ...(ngDevMode ? [{ debugName: "dropdownMaxHeight" }] : /* istanbul ignore next */ []));
|
|
1244
1339
|
appendToBody = input(false, ...(ngDevMode ? [{ debugName: "appendToBody" }] : /* istanbul ignore next */ []));
|
|
1245
1340
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1246
1341
|
chevronTemplate = input(null, ...(ngDevMode ? [{ debugName: "chevronTemplate" }] : /* istanbul ignore next */ []));
|
|
1247
|
-
/** Two-way bindable selected value: `[(value)]="signal"`. */
|
|
1248
|
-
value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1249
1342
|
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
1250
|
-
|
|
1251
|
-
|
|
1343
|
+
/**
|
|
1344
|
+
* Spacing tokens feeding the height estimate. Overridable so each control keeps the
|
|
1345
|
+
* `--gog-<block>-*` names it already exposes to consumers for theming.
|
|
1346
|
+
*/
|
|
1347
|
+
optionGapToken = '--gog-dropdown-option-gap';
|
|
1348
|
+
optionsPaddingToken = '--gog-dropdown-options-padding';
|
|
1349
|
+
/** Keep in sync with the real `max-height` on the subclass's `__dropdown` block. */
|
|
1350
|
+
panelMaxHeightToken = '--gog-dropdown-panel-max-height';
|
|
1351
|
+
/** Estimated row height fed into the placement math; not a real layout property. */
|
|
1352
|
+
optionHeightToken = '--gog-dropdown-option-height';
|
|
1353
|
+
/** Unique per-instance suffix, so several dropdowns on a page can't collide on DOM ids. */
|
|
1354
|
+
uid = ++GogDropdownBase.nextUid;
|
|
1252
1355
|
elRef = inject((ElementRef));
|
|
1356
|
+
isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
|
|
1357
|
+
document = inject(DOCUMENT);
|
|
1253
1358
|
appRef = inject(ApplicationRef);
|
|
1254
|
-
envInjector = inject(EnvironmentInjector);
|
|
1255
1359
|
destroyRef = inject(DestroyRef);
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1360
|
+
ngControl = inject(NgControl, { optional: true, self: true });
|
|
1361
|
+
overlay = new GogDropdownOverlay(this.appRef, this.document);
|
|
1362
|
+
cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
|
|
1363
|
+
errorState = new GogErrorState(this.errorMessage, this.errorDisplay, this.ngControl);
|
|
1259
1364
|
isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
|
|
1365
|
+
dropdownDirectionState = signal('down', ...(ngDevMode ? [{ debugName: "dropdownDirectionState" }] : /* istanbul ignore next */ []));
|
|
1366
|
+
panelPlacement = signal(null, ...(ngDevMode ? [{ debugName: "panelPlacement" }] : /* istanbul ignore next */ []));
|
|
1367
|
+
/**
|
|
1368
|
+
* Stacking order to write onto the panel, or null to leave it to the stylesheet.
|
|
1369
|
+
*
|
|
1370
|
+
* Only needed when appending to `<body>`: an inline panel inherits `--gog-dropdown-z` from
|
|
1371
|
+
* its surroundings — which is how a dropdown inside a dialog ends up above the dialog —
|
|
1372
|
+
* but an appended one sits outside that subtree and inherits nothing, so the value has
|
|
1373
|
+
* to be resolved from the trigger and written out explicitly.
|
|
1374
|
+
*/
|
|
1375
|
+
panelZIndex = signal(null, ...(ngDevMode ? [{ debugName: "panelZIndex" }] : /* istanbul ignore next */ []));
|
|
1376
|
+
/** `dropdownWidth`, or the trigger-derived width from `panelPlacement`, as a CSS value. */
|
|
1377
|
+
resolvedPanelWidth = computed(() => {
|
|
1378
|
+
const width = this.panelPlacement()?.width;
|
|
1379
|
+
return this.dropdownWidth() ?? (width != null ? `${width}px` : null);
|
|
1380
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedPanelWidth" }] : /* istanbul ignore next */ []));
|
|
1381
|
+
/** `dropdownMaxHeight`, or the viewport-derived max-height from `panelPlacement`. */
|
|
1382
|
+
resolvedPanelMaxHeight = computed(() => {
|
|
1383
|
+
const maxHeight = this.panelPlacement()?.maxHeight;
|
|
1384
|
+
return this.dropdownMaxHeight() ?? (maxHeight != null ? `${maxHeight}px` : null);
|
|
1385
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedPanelMaxHeight" }] : /* istanbul ignore next */ []));
|
|
1386
|
+
hasError = this.errorState.hasError;
|
|
1387
|
+
visibleError = this.errorState.visibleError;
|
|
1388
|
+
/** Measured once per open rather than per scroll tick — see `refreshPanelMetrics`. */
|
|
1389
|
+
optionGap = 0;
|
|
1390
|
+
optionsPadding = 0;
|
|
1391
|
+
maxPanelHeight = FALLBACK_MAX_PANEL_HEIGHT;
|
|
1392
|
+
optionHeight = FALLBACK_OPTION_HEIGHT;
|
|
1393
|
+
repositionFrame = null;
|
|
1394
|
+
onChangeFn = () => { };
|
|
1395
|
+
onTouchedFn = () => { };
|
|
1267
1396
|
constructor() {
|
|
1268
|
-
|
|
1397
|
+
// Registering through NgControl instead of NG_VALUE_ACCESSOR keeps `this.ngControl`
|
|
1398
|
+
// available for `hasError` — providing NG_VALUE_ACCESSOR on the component while also
|
|
1399
|
+
// injecting NgControl would be a dependency cycle.
|
|
1400
|
+
if (this.ngControl) {
|
|
1401
|
+
this.ngControl.valueAccessor = this;
|
|
1402
|
+
}
|
|
1403
|
+
this.destroyRef.onDestroy(() => this.overlay.detach());
|
|
1404
|
+
this.bindWhileOpen();
|
|
1405
|
+
}
|
|
1406
|
+
/**
|
|
1407
|
+
* Binds the click-outside and reposition listeners only for as long as the panel is
|
|
1408
|
+
* open. Bound permanently — as host listeners were — every dropdown on the page runs a
|
|
1409
|
+
* handler on every document click and every scroll frame, whether or not it is showing
|
|
1410
|
+
* anything.
|
|
1411
|
+
*/
|
|
1412
|
+
bindWhileOpen() {
|
|
1413
|
+
effect((onCleanup) => {
|
|
1414
|
+
if (!this.isOpen() || !this.isBrowser)
|
|
1415
|
+
return;
|
|
1416
|
+
const onDocumentClick = (event) => this.closeIfClickedOutside(event);
|
|
1417
|
+
const onReflow = () => this.scheduleReposition();
|
|
1418
|
+
// Capture phase: scroll does not bubble, so a bubble-phase listener on window would
|
|
1419
|
+
// miss scrolling inside a nested container — which is exactly the case appendToBody
|
|
1420
|
+
// exists for. Passive: these handlers never call preventDefault.
|
|
1421
|
+
this.document.addEventListener('click', onDocumentClick);
|
|
1422
|
+
window.addEventListener('scroll', onReflow, { passive: true, capture: true });
|
|
1423
|
+
window.addEventListener('resize', onReflow, { passive: true });
|
|
1424
|
+
onCleanup(() => {
|
|
1425
|
+
this.document.removeEventListener('click', onDocumentClick);
|
|
1426
|
+
window.removeEventListener('scroll', onReflow, { capture: true });
|
|
1427
|
+
window.removeEventListener('resize', onReflow);
|
|
1428
|
+
if (this.repositionFrame !== null) {
|
|
1429
|
+
cancelAnimationFrame(this.repositionFrame);
|
|
1430
|
+
this.repositionFrame = null;
|
|
1431
|
+
}
|
|
1432
|
+
});
|
|
1433
|
+
});
|
|
1434
|
+
}
|
|
1435
|
+
ngDoCheck() {
|
|
1436
|
+
this.errorState.check();
|
|
1269
1437
|
}
|
|
1270
1438
|
writeValue(val) {
|
|
1271
|
-
this.value.set(val ??
|
|
1439
|
+
this.value.set(val ?? this.emptyValue);
|
|
1272
1440
|
}
|
|
1273
1441
|
registerOnChange(fn) {
|
|
1274
|
-
this.
|
|
1442
|
+
this.onChangeFn = fn;
|
|
1275
1443
|
}
|
|
1276
1444
|
registerOnTouched(fn) {
|
|
1277
|
-
this.
|
|
1445
|
+
this.onTouchedFn = fn;
|
|
1278
1446
|
}
|
|
1279
1447
|
setDisabledState(isDisabled) {
|
|
1280
1448
|
this.cvaDisabled.set(isDisabled);
|
|
@@ -1285,516 +1453,289 @@ class SelectComponent {
|
|
|
1285
1453
|
toggle() {
|
|
1286
1454
|
if (this.isDisabled())
|
|
1287
1455
|
return;
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
if (next) {
|
|
1291
|
-
this.openDropdown();
|
|
1456
|
+
if (this.isOpen()) {
|
|
1457
|
+
this.close();
|
|
1292
1458
|
}
|
|
1293
1459
|
else {
|
|
1294
|
-
this.
|
|
1460
|
+
this.open();
|
|
1461
|
+
}
|
|
1462
|
+
}
|
|
1463
|
+
open() {
|
|
1464
|
+
if (this.isDisabled() || this.isOpen())
|
|
1465
|
+
return;
|
|
1466
|
+
this.isOpen.set(true);
|
|
1467
|
+
this.refreshPanelMetrics();
|
|
1468
|
+
this.updatePlacement();
|
|
1469
|
+
if (this.appendToBody()) {
|
|
1470
|
+
this.attachOverlay();
|
|
1295
1471
|
}
|
|
1296
1472
|
}
|
|
1297
1473
|
close() {
|
|
1298
1474
|
if (!this.isOpen())
|
|
1299
1475
|
return;
|
|
1300
1476
|
this.isOpen.set(false);
|
|
1301
|
-
this.
|
|
1477
|
+
this.overlay.detach();
|
|
1478
|
+
// Closing is this control's equivalent of a blur, which is when a form control is
|
|
1479
|
+
// conventionally considered touched.
|
|
1480
|
+
this.markTouched();
|
|
1302
1481
|
}
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1482
|
+
/** Writes a new selection out to both the model and the attached form control. */
|
|
1483
|
+
commitValue(next) {
|
|
1484
|
+
this.value.set(next);
|
|
1485
|
+
this.onChangeFn(next);
|
|
1486
|
+
this.markTouched();
|
|
1487
|
+
}
|
|
1488
|
+
markTouched() {
|
|
1489
|
+
this.onTouchedFn();
|
|
1490
|
+
}
|
|
1491
|
+
closeIfClickedOutside(event) {
|
|
1306
1492
|
const target = event.target;
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1493
|
+
if (!target)
|
|
1494
|
+
return;
|
|
1495
|
+
const inside = this.elRef.nativeElement.contains(target) ||
|
|
1496
|
+
(this.overlay.hostElement?.contains(target) ?? false);
|
|
1497
|
+
if (!inside) {
|
|
1310
1498
|
this.close();
|
|
1311
1499
|
}
|
|
1312
1500
|
}
|
|
1313
|
-
|
|
1501
|
+
/**
|
|
1502
|
+
* Coalesces bursts of scroll/resize events into one reposition per frame. Placement
|
|
1503
|
+
* reads layout, so running it per event is what makes a scroll janky.
|
|
1504
|
+
*/
|
|
1505
|
+
scheduleReposition() {
|
|
1506
|
+
if (this.repositionFrame !== null)
|
|
1507
|
+
return;
|
|
1508
|
+
this.repositionFrame = requestAnimationFrame(() => {
|
|
1509
|
+
this.repositionFrame = null;
|
|
1510
|
+
if (this.isOpen()) {
|
|
1511
|
+
this.updatePlacement();
|
|
1512
|
+
}
|
|
1513
|
+
});
|
|
1514
|
+
}
|
|
1515
|
+
/** Jumps from the trigger into the option list on ArrowDown/ArrowUp while open. */
|
|
1516
|
+
onTriggerArrowKeydown(event) {
|
|
1314
1517
|
if (!this.isOpen())
|
|
1315
1518
|
return;
|
|
1316
|
-
|
|
1317
|
-
|
|
1519
|
+
event.preventDefault();
|
|
1520
|
+
const options = this.enabledOptionElements();
|
|
1521
|
+
if (options.length === 0)
|
|
1318
1522
|
return;
|
|
1319
|
-
|
|
1320
|
-
|
|
1523
|
+
const index = event.key === 'ArrowUp' ? options.length - 1 : 0;
|
|
1524
|
+
options[index]?.focus();
|
|
1321
1525
|
}
|
|
1322
|
-
|
|
1323
|
-
event.
|
|
1324
|
-
|
|
1325
|
-
|
|
1526
|
+
onOptionKeydown(event) {
|
|
1527
|
+
if (event.key === 'Escape') {
|
|
1528
|
+
event.preventDefault();
|
|
1529
|
+
this.close();
|
|
1530
|
+
this.focusTrigger();
|
|
1326
1531
|
return;
|
|
1327
1532
|
}
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
if (this.appendToBody()) {
|
|
1336
|
-
this.openPortal();
|
|
1533
|
+
if (event.key === 'Tab') {
|
|
1534
|
+
// Deliberately not prevented: closing and handing focus back to the trigger lets
|
|
1535
|
+
// the browser's own Tab handling continue from there, so focus lands on whatever
|
|
1536
|
+
// follows the control. Without this, tabbing out of an appended panel would jump
|
|
1537
|
+
// to the end of the document, since that is where the panel's DOM lives.
|
|
1538
|
+
this.close();
|
|
1539
|
+
this.focusTrigger();
|
|
1337
1540
|
return;
|
|
1338
1541
|
}
|
|
1339
|
-
this.
|
|
1542
|
+
handleRovingFocusKeydown(event, this.enabledOptionElements());
|
|
1340
1543
|
}
|
|
1341
|
-
|
|
1342
|
-
|
|
1544
|
+
focusTrigger() {
|
|
1545
|
+
this.elRef.nativeElement
|
|
1546
|
+
.querySelector(`.${this.triggerClass}`)
|
|
1547
|
+
?.focus();
|
|
1343
1548
|
}
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
const placement = resolveDropdownPlacement(this.dropdownDirection(), this.elRef.nativeElement.getBoundingClientRect(), this.estimatePanelHeight(), window.innerHeight, 2, 8);
|
|
1348
|
-
this.dropdownDirectionState.set(placement.direction);
|
|
1549
|
+
/** Extra chrome stacked above the options (e.g. a select-all row), in px. */
|
|
1550
|
+
extraPanelHeight() {
|
|
1551
|
+
return 0;
|
|
1349
1552
|
}
|
|
1350
|
-
|
|
1553
|
+
enabledOptionElements() {
|
|
1554
|
+
const scope = this.overlay.hostElement ?? this.elRef.nativeElement;
|
|
1555
|
+
return Array.from(scope.querySelectorAll(`.${this.optionClass}:not([aria-disabled="true"])`));
|
|
1556
|
+
}
|
|
1557
|
+
attachOverlay() {
|
|
1351
1558
|
if (!this.isBrowser)
|
|
1352
1559
|
return;
|
|
1353
|
-
this.
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
this.
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
1361
|
-
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
|
|
1369
|
-
|
|
1370
|
-
updatePortalPosition() {
|
|
1371
|
-
if (!this.portalRef || !this.isBrowser)
|
|
1560
|
+
const template = this.panelTemplate();
|
|
1561
|
+
if (!template)
|
|
1562
|
+
return;
|
|
1563
|
+
this.overlay.attach(template, this.elRef.nativeElement);
|
|
1564
|
+
}
|
|
1565
|
+
/**
|
|
1566
|
+
* Reads the spacing tokens that feed the height estimate. Done once per open instead of
|
|
1567
|
+
* on every scroll tick, because `getComputedStyle` forces a style recalculation and the
|
|
1568
|
+
* tokens cannot change while the panel is on screen.
|
|
1569
|
+
*/
|
|
1570
|
+
refreshPanelMetrics() {
|
|
1571
|
+
if (!this.isBrowser) {
|
|
1572
|
+
this.optionGap = 0;
|
|
1573
|
+
this.optionsPadding = 0;
|
|
1574
|
+
this.maxPanelHeight = FALLBACK_MAX_PANEL_HEIGHT;
|
|
1575
|
+
this.optionHeight = FALLBACK_OPTION_HEIGHT;
|
|
1576
|
+
this.panelZIndex.set(null);
|
|
1372
1577
|
return;
|
|
1373
|
-
const placement = resolveDropdownPlacement(this.dropdownDirection(), this.elRef.nativeElement.getBoundingClientRect(), this.estimatePanelHeight(), window.innerHeight, 2, 8);
|
|
1374
|
-
const inst = this.portalRef.instance;
|
|
1375
|
-
inst.direction = placement.direction;
|
|
1376
|
-
inst.top = placement.top;
|
|
1377
|
-
inst.left = placement.left;
|
|
1378
|
-
inst.width = placement.width;
|
|
1379
|
-
inst.maxHeight = placement.maxHeight;
|
|
1380
|
-
inst.zIndex = this.dropdownZIndex() ?? 300;
|
|
1381
|
-
this.portalRef.changeDetectorRef.detectChanges();
|
|
1382
|
-
}
|
|
1383
|
-
destroyPortal() {
|
|
1384
|
-
if (this.portalRef) {
|
|
1385
|
-
this.appRef.detachView(this.portalRef.hostView);
|
|
1386
|
-
this.portalRef.destroy();
|
|
1387
|
-
this.portalRef = null;
|
|
1388
1578
|
}
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1579
|
+
const styles = getComputedStyle(this.elRef.nativeElement);
|
|
1580
|
+
this.optionGap = readPx(styles.getPropertyValue(this.optionGapToken), 0);
|
|
1581
|
+
this.optionsPadding = readPx(styles.getPropertyValue(this.optionsPaddingToken), 0);
|
|
1582
|
+
this.maxPanelHeight = readPx(styles.getPropertyValue(this.panelMaxHeightToken), FALLBACK_MAX_PANEL_HEIGHT);
|
|
1583
|
+
this.optionHeight = readPx(styles.getPropertyValue(this.optionHeightToken), FALLBACK_OPTION_HEIGHT);
|
|
1584
|
+
this.panelZIndex.set(this.appendToBody() ? this.resolvePanelZIndex(styles) : null);
|
|
1585
|
+
}
|
|
1586
|
+
/**
|
|
1587
|
+
* Rough height, used only to choose up/down and to cap `max-height` before the panel
|
|
1588
|
+
* has been laid out. Deliberately an estimate: measuring would require rendering the
|
|
1589
|
+
* panel first, which is what we are trying to position. A resolvable `dropdownMaxHeight`
|
|
1590
|
+
* replaces the row-count guess outright, since it is exact rather than estimated.
|
|
1591
|
+
*/
|
|
1592
|
+
estimatePanelHeight() {
|
|
1593
|
+
const custom = this.dropdownMaxHeight();
|
|
1594
|
+
if (custom) {
|
|
1595
|
+
const resolved = resolveCssLengthPx(custom, window.innerHeight);
|
|
1596
|
+
if (resolved !== null)
|
|
1597
|
+
return resolved;
|
|
1392
1598
|
}
|
|
1599
|
+
const count = Math.max(this.options().length, 1);
|
|
1600
|
+
const rows = count * this.optionHeight + Math.max(count - 1, 0) * this.optionGap;
|
|
1601
|
+
return Math.min(rows + this.optionsPadding * 2 + this.extraPanelHeight(), this.maxPanelHeight);
|
|
1393
1602
|
}
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1603
|
+
/**
|
|
1604
|
+
* The trigger's own rect, not the whole component's — a label above it or an error
|
|
1605
|
+
* message below it sit in normal document flow and are not part of what the panel needs
|
|
1606
|
+
* to clear. This also keeps `appendToBody` placement consistent with the inline panel,
|
|
1607
|
+
* which is already positioned purely relative to the trigger via CSS.
|
|
1608
|
+
*/
|
|
1609
|
+
triggerRect() {
|
|
1610
|
+
const host = this.elRef.nativeElement;
|
|
1611
|
+
const trigger = host.querySelector(`.${this.triggerClass}`) ?? host;
|
|
1612
|
+
return trigger.getBoundingClientRect();
|
|
1613
|
+
}
|
|
1614
|
+
/** The stacking order the panel would have had if it were still inside the subtree. */
|
|
1615
|
+
resolvePanelZIndex(triggerStyles) {
|
|
1616
|
+
const inherited = triggerStyles.getPropertyValue('--gog-dropdown-z').trim();
|
|
1617
|
+
if (inherited) {
|
|
1618
|
+
return readPx(inherited, DEFAULT_PANEL_Z_INDEX);
|
|
1619
|
+
}
|
|
1620
|
+
// Not every DOM implementation resolves inherited custom properties through
|
|
1621
|
+
// getComputedStyle (jsdom does not), so also look for an inline declaration up the
|
|
1622
|
+
// tree — which is exactly how gog-dialog hands its stacking order to nested dropdowns.
|
|
1623
|
+
for (let el = this.elRef.nativeElement; el; el = el.parentElement) {
|
|
1624
|
+
const declared = el.style.getPropertyValue('--gog-dropdown-z').trim();
|
|
1625
|
+
if (declared) {
|
|
1626
|
+
return readPx(declared, DEFAULT_PANEL_Z_INDEX);
|
|
1627
|
+
}
|
|
1628
|
+
}
|
|
1629
|
+
return DEFAULT_PANEL_Z_INDEX;
|
|
1630
|
+
}
|
|
1631
|
+
updatePlacement() {
|
|
1632
|
+
if (!this.isBrowser)
|
|
1633
|
+
return;
|
|
1634
|
+
const placement = resolveDropdownPlacement(this.dropdownDirection(), this.triggerRect(), this.estimatePanelHeight(), window.innerHeight, PANEL_GAP, VIEWPORT_PADDING);
|
|
1635
|
+
this.dropdownDirectionState.set(placement.direction);
|
|
1636
|
+
this.panelPlacement.set(placement);
|
|
1637
|
+
}
|
|
1638
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogDropdownBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1639
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: GogDropdownBase, isStandalone: true, inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dropdownDirection: { classPropertyName: "dropdownDirection", publicName: "dropdownDirection", isSignal: true, isRequired: false, transformFunction: null }, dropdownZIndex: { classPropertyName: "dropdownZIndex", publicName: "dropdownZIndex", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: true, isRequired: false, transformFunction: null }, dropdownMaxHeight: { classPropertyName: "dropdownMaxHeight", publicName: "dropdownMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, chevronTemplate: { classPropertyName: "chevronTemplate", publicName: "chevronTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
1640
|
+
}
|
|
1641
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogDropdownBase, decorators: [{
|
|
1642
|
+
type: Directive
|
|
1643
|
+
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dropdownDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownDirection", required: false }] }], dropdownZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownZIndex", required: false }] }], dropdownWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownWidth", required: false }] }], dropdownMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownMaxHeight", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], chevronTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevronTemplate", required: false }] }] } });
|
|
1644
|
+
function readPx(raw, fallback) {
|
|
1645
|
+
const parsed = Number.parseFloat(raw.trim());
|
|
1646
|
+
return Number.isFinite(parsed) ? parsed : fallback;
|
|
1402
1647
|
}
|
|
1403
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, decorators: [{
|
|
1404
|
-
type: Component,
|
|
1405
|
-
args: [{ selector: 'gog-select', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1406
|
-
'(document:click)': 'onDocumentClick($event)',
|
|
1407
|
-
'(window:scroll)': 'onScrollOrResize()',
|
|
1408
|
-
'(window:resize)': 'onScrollOrResize()',
|
|
1409
|
-
}, providers: [
|
|
1410
|
-
{
|
|
1411
|
-
provide: NG_VALUE_ACCESSOR,
|
|
1412
|
-
useExisting: forwardRef(() => SelectComponent),
|
|
1413
|
-
multi: true,
|
|
1414
|
-
},
|
|
1415
|
-
], template: "<div\r\n class=\"gog-select gog-contained-layout\"\r\n [class.gog-select--disabled]=\"isDisabled()\"\r\n [class.gog-select--open]=\"isOpen()\"\r\n>\r\n @if (label()) {\r\n <label class=\"gog-select__label font-heading\" [attr.for]=\"triggerId()\">{{ label() }}</label>\r\n }\r\n\r\n <div class=\"gog-select__field\">\r\n <button\r\n type=\"button\"\r\n class=\"gog-select__control font-body\"\r\n [id]=\"triggerId()\"\r\n [disabled]=\"isDisabled()\"\r\n [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n [attr.aria-controls]=\"listboxId()\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.aria-haspopup]=\"'listbox'\"\r\n [attr.aria-invalid]=\"hasError()\"\r\n [attr.aria-describedby]=\"errorId()\"\r\n (click)=\"toggle()\"\r\n (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n (keydown.escape)=\"close()\"\r\n >\r\n <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\r\n {{ selectedOption()?.name || placeholder() }}\r\n </span>\r\n\r\n <span class=\"gog-select__chevron\" aria-hidden=\"true\">\r\n <gog-icon [template]=\"chevronTemplate()\" name=\"chevron-down\" />\r\n </span>\r\n </button>\r\n\r\n @if (isOpen() && !appendToBody()) {\r\n <div\r\n [id]=\"listboxId()\"\r\n class=\"gog-select__dropdown\"\r\n [class.gog-select__dropdown--up]=\"dropdownDirectionState() === 'up'\"\r\n [style.z-index]=\"dropdownZIndex() ?? null\"\r\n role=\"listbox\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n @for (option of options(); track option.id) {\r\n <button\r\n type=\"button\"\r\n class=\"gog-select__option font-body\"\r\n role=\"option\"\r\n [attr.aria-selected]=\"selectedOption()?.id === option.id\"\r\n [attr.aria-disabled]=\"option.disabled ?? false\"\r\n [class.gog-select__option--selected]=\"selectedOption()?.id === option.id\"\r\n [class.gog-select__option--disabled]=\"option.disabled ?? false\"\r\n (click)=\"selectOption(option, $event)\"\r\n >\r\n <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\r\n @if (selectedOption()?.id === option.id) {\r\n <gog-icon name=\"check\" />\r\n }\r\n </span>\r\n <span class=\"gog-select__option-label\">{{ option.name }}</span>\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (hasError()) {\r\n <span class=\"gog-select__error font-body\" [attr.id]=\"errorId()\" role=\"alert\">\r\n {{ errorMessage() }}\r\n </span>\r\n }\r\n</div>\r\n", styles: [":host{display:block}.gog-select{--gog-select-gap: 4px;--gog-select-label-color: var(--accent-color);--gog-select-field-bg: var(--surface-color);--gog-select-field-border: var(--accent-dim);--gog-select-field-color: var(--text-color);--gog-select-focus-border: var(--accent-color);--gog-select-focus-ring: color-mix(in srgb, var(--accent-color) 25%, transparent);--gog-select-error-color: var(--danger-color);--gog-select-chevron-color: var(--accent-color);--gog-select-option-hover-bg: color-mix(in srgb, var(--accent-color) 10%, transparent);--gog-select-option-selected-color: var(--accent-color);--gog-select-disabled-opacity: .4;display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-size:var(--text-sm);color:var(--gog-select-label-color);text-transform:uppercase;letter-spacing:1px;cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{--gog-select-control-padding-y: var(--control-padding-y, 10px);--gog-select-control-padding-x: var(--control-padding-x, 14px);width:100%;min-height:44px;padding:var(--gog-select-control-padding-y) 40px var(--gog-select-control-padding-y) var(--gog-select-control-padding-x);display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--text-md);color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-select-field-border);border-radius:var(--radius);outline:none;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:0 0 8px var(--gog-select-focus-ring)}.gog-select__control:focus-visible{outline:3px solid var(--gog-select-focus-border);outline-offset:2px}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.gog-select__value--placeholder{color:var(--muted-text-color)}.gog-select__chevron{width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:.875rem}.gog-select__dropdown{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:var(--dropdown-z, 300);background-color:var(--surface-color);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-select-field-border);border-radius:var(--radius);max-height:260px;overflow-y:auto;box-shadow:var(--panel-shadow)}.gog-select__dropdown--up{top:auto;bottom:calc(100% + 2px)}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:10px;padding:var(--control-padding-y, 10px) var(--gog-select-control-padding-x);border:0;background:transparent;text-align:left;font:inherit;color:var(--text-color);cursor:pointer;transition:background-color .12s ease}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:.5;cursor:not-allowed}.gog-select__option:focus-visible{outline:3px solid var(--gog-select-focus-border);outline-offset:-3px}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0}.gog-select__option-mark gog-icon{font-size:.875rem}.gog-select__error{font-size:var(--text-xs);color:var(--gog-select-error-color)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option{transition:none}}\n"] }]
|
|
1416
|
-
}], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], dropdownDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownDirection", required: false }] }], dropdownZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownZIndex", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], chevronTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevronTemplate", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
1417
1648
|
|
|
1418
|
-
class
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1649
|
+
class SelectComponent extends GogDropdownBase {
|
|
1650
|
+
inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
1651
|
+
/** Two-way bindable selected value: `[(value)]="signal"`. */
|
|
1652
|
+
value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1653
|
+
panelTemplate = viewChild('panelTpl', ...(ngDevMode ? [{ debugName: "panelTemplate" }] : /* istanbul ignore next */ []));
|
|
1654
|
+
emptyValue = null;
|
|
1655
|
+
optionClass = 'gog-select__option';
|
|
1656
|
+
triggerClass = 'gog-select__control';
|
|
1657
|
+
optionGapToken = '--gog-select-option-gap';
|
|
1658
|
+
panelMaxHeightToken = '--gog-select-panel-max-height';
|
|
1659
|
+
optionHeightToken = '--gog-select-option-height';
|
|
1660
|
+
triggerId = computed(() => this.inputId() || `gog-select-${this.uid}`, ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
|
|
1661
|
+
listboxId = computed(() => `${this.triggerId()}-listbox`, ...(ngDevMode ? [{ debugName: "listboxId" }] : /* istanbul ignore next */ []));
|
|
1662
|
+
labelId = computed(() => `${this.triggerId()}-label`, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
|
|
1663
|
+
errorId = computed(() => this.hasError() ? `${this.triggerId()}-error` : null, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
1664
|
+
selectedOption = computed(() => this.options().find((option) => String(option.id) === String(this.value())) ?? null, ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
|
|
1432
1665
|
isSelected(id) {
|
|
1433
|
-
return this.
|
|
1434
|
-
}
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
[style.z-index]="zIndex"
|
|
1445
|
-
role="listbox"
|
|
1446
|
-
aria-multiselectable="true"
|
|
1447
|
-
>
|
|
1448
|
-
@if (showControls) {
|
|
1449
|
-
<div class="gog-ms__controls">
|
|
1450
|
-
<gog-button variant="ghost" size="sm" (click)="onSelectAll($event)">Select all</gog-button>
|
|
1451
|
-
<gog-button variant="ghost" size="sm" (click)="onClearAll($event)">Clear</gog-button>
|
|
1452
|
-
</div>
|
|
1453
|
-
}
|
|
1454
|
-
<div class="gog-ms__options">
|
|
1455
|
-
@for (option of options; track option.id) {
|
|
1456
|
-
<button
|
|
1457
|
-
type="button"
|
|
1458
|
-
class="gog-ms__option font-body"
|
|
1459
|
-
role="option"
|
|
1460
|
-
[attr.aria-selected]="isSelected(option.id)"
|
|
1461
|
-
[class.gog-ms__option--selected]="isSelected(option.id)"
|
|
1462
|
-
(click)="onToggle(option, $event)"
|
|
1463
|
-
>
|
|
1464
|
-
<span class="gog-ms__option-mark" aria-hidden="true">
|
|
1465
|
-
<svg viewBox="0 0 16 16" fill="none" focusable="false" aria-hidden="true">
|
|
1466
|
-
<rect
|
|
1467
|
-
x="2.5"
|
|
1468
|
-
y="2.5"
|
|
1469
|
-
width="11"
|
|
1470
|
-
height="11"
|
|
1471
|
-
rx="2"
|
|
1472
|
-
[attr.fill]="isSelected(option.id) ? 'currentColor' : 'none'"
|
|
1473
|
-
stroke="currentColor"
|
|
1474
|
-
stroke-width="1.5"
|
|
1475
|
-
/>
|
|
1476
|
-
@if (isSelected(option.id)) {
|
|
1477
|
-
<path
|
|
1478
|
-
d="M4 8L6.75 10.75L12 5.5"
|
|
1479
|
-
stroke="var(--gog-ms-checkbox-checked-color)"
|
|
1480
|
-
stroke-width="1.75"
|
|
1481
|
-
stroke-linecap="round"
|
|
1482
|
-
stroke-linejoin="round"
|
|
1483
|
-
/>
|
|
1484
|
-
}
|
|
1485
|
-
</svg>
|
|
1486
|
-
</span>
|
|
1487
|
-
{{ option.name }}
|
|
1488
|
-
</button>
|
|
1489
|
-
}
|
|
1490
|
-
</div>
|
|
1491
|
-
</div>
|
|
1492
|
-
`, isInline: true, styles: [".gog-ms-wrapper{--gog-ms-gap: 4px;--gog-ms-option-gap: 4px;--gog-ms-options-padding: 4px;--gog-ms-label-color: var(--accent-color);--gog-ms-field-bg: var(--surface-color);--gog-ms-field-border: var(--accent-dim);--gog-ms-field-color: var(--text-color);--gog-ms-value-color: var(--text-color);--gog-ms-placeholder-color: var(--muted-text-color);--gog-ms-focus-border: var(--accent-color);--gog-ms-focus-ring: color-mix(in srgb, var(--accent-color) 25%, transparent);--gog-ms-error-color: var(--danger-color);--gog-ms-border-color: var(--accent-color);--gog-ms-panel-bg: var(--surface-color);--gog-ms-panel-border: var(--accent-color);--gog-ms-panel-shadow: 0 8px 24px rgba(0, 0, 0, .3);--gog-ms-option-hover-bg: color-mix(in srgb, var(--accent-color) 10%, transparent);--gog-ms-checkbox-border: var(--accent-dim);--gog-ms-checkbox-bg: var(--background-color);--gog-ms-checkbox-checked-bg: var(--accent-color);--gog-ms-checkbox-checked-color: var(--primary-color);--gog-ms-disabled-opacity: .4;display:flex;flex-direction:column;gap:var(--gog-ms-gap);position:relative;width:100%}.gog-ms__label{font-size:var(--text-sm);color:var(--gog-ms-label-color);text-transform:uppercase;letter-spacing:1px;cursor:pointer}.gog-ms{--gog-ms-padding-y: var(--control-padding-y, 10px);--gog-ms-padding-x: var(--control-padding-x, 14px);display:flex;align-items:center;justify-content:space-between;padding:var(--gog-ms-padding-y) var(--gog-ms-padding-x);background-color:var(--gog-ms-field-bg);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-ms-field-border);border-radius:var(--radius);color:var(--gog-ms-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color .15s ease,box-shadow .15s ease;min-height:44px}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-ms-focus-border)}.gog-ms:focus-visible{outline:3px solid var(--gog-ms-focus-ring);outline-offset:2px}.gog-ms--open{border-color:var(--gog-ms-border-color);box-shadow:0 0 8px var(--gog-ms-focus-ring)}.gog-ms--disabled{opacity:var(--gog-ms-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-ms-error-color)}.gog-ms__value{font-size:var(--text-md);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-ms-value-color)}.gog-ms__value--placeholder{color:var(--gog-ms-placeholder-color)}.gog-ms__actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.gog-ms__clear{width:1rem;height:1rem;padding:0;border:0;border-radius:var(--gog-ms-clear-radius, 2px);background:transparent;color:var(--gog-ms-placeholder-color);line-height:1;cursor:pointer;transition:color .15s ease}.gog-ms__clear gog-icon{font-size:.7rem}.gog-ms__clear:hover{color:var(--gog-ms-field-color)}.gog-ms__clear:focus-visible{outline:3px solid var(--gog-ms-focus-ring);outline-offset:2px}.gog-ms__arrow{color:var(--gog-ms-border-color);transition:transform .2s ease;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem}.gog-ms__arrow gog-icon{font-size:.875rem}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:var(--dropdown-z, 300);background-color:var(--gog-ms-panel-bg);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-ms-panel-border);border-radius:var(--radius);max-height:260px;overflow-y:auto;box-shadow:var(--panel-shadow)}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + 2px)}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-ms__controls{display:flex;gap:4px;padding:6px 10px;border-bottom:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-ms-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-ms-options-padding);gap:var(--gog-ms-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:10px;padding:var(--control-padding-y, 10px) var(--gog-ms-padding-x);border:0;background:transparent;text-align:left;font:inherit;font-size:var(--text-md);cursor:pointer;border-radius:calc(var(--radius) - 2px);transition:background-color .12s ease;color:var(--text-color)}.gog-ms__option:hover{background-color:var(--gog-ms-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-ms-border-color)}.gog-ms__option:focus-visible{outline:3px solid var(--gog-ms-focus-ring);outline-offset:-3px}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;color:var(--gog-ms-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-ms-checkbox-checked-bg)}.gog-ms__option-mark svg{width:18px;height:18px}.gog-ms__error{font-size:var(--text-xs);color:var(--gog-ms-error-color);margin-top:2px}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark{transition:none}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "debounce", "loading"], outputs: ["gogClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1666
|
+
return this.selectedOption()?.id === id;
|
|
1667
|
+
}
|
|
1668
|
+
selectOption(option, event) {
|
|
1669
|
+
event.preventDefault();
|
|
1670
|
+
event.stopPropagation();
|
|
1671
|
+
if (option.disabled)
|
|
1672
|
+
return;
|
|
1673
|
+
this.commitValue(option.id);
|
|
1674
|
+
this.close();
|
|
1675
|
+
}
|
|
1676
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1677
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SelectComponent, isStandalone: true, selector: "gog-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\n Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n context, which traps the panel's z-index inside it and lets whatever follows on the page\n paint over the open dropdown.\n-->\n<div\n class=\"gog-select\"\n [class.gog-select--disabled]=\"isDisabled()\"\n [class.gog-select--open]=\"isOpen()\"\n [class.gog-select--xsm]=\"size() === 'xsm'\"\n [class.gog-select--sm]=\"size() === 'sm'\"\n [class.gog-select--lg]=\"size() === 'lg'\"\n [class.gog-select--slg]=\"size() === 'slg'\"\n>\n <!--\n Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\n not a labelable element, so `for` pointing at it is silently ignored by browsers and\n assistive tech alike.\n -->\n @if (label()) {\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\n }\n\n <div class=\"gog-select__field\">\n <button\n type=\"button\"\n class=\"gog-select__control\"\n [id]=\"triggerId()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-describedby]=\"errorId()\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle(); $event.preventDefault()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n (keydown.escape)=\"close()\"\n (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n >\n <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\n {{ selectedOption()?.name || placeholder() }}\n </span>\n\n <span class=\"gog-select__chevron\" aria-hidden=\"true\">\n <gog-icon [template]=\"chevronTemplate()\" name=\"chevron-down\" />\n </span>\n </button>\n\n @if (isOpen() && !appendToBody()) {\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n }\n </div>\n\n @if (hasError()) {\n <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\n {{ visibleError() }}\n </span>\n }\n</div>\n\n<!--\n One template for both render modes. When `appendToBody` is set it is stamped into\n <body> by the overlay, which is why the portal-only modifier and the resolved\n coordinates are applied conditionally: outside the component's subtree the panel can\n no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n <div\n [id]=\"listboxId()\"\n class=\"gog-select__dropdown\"\n [class.gog-select__dropdown--up]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\n [class.gog-select__dropdown--portal]=\"appendToBody()\"\n [class.gog-select__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\n [class.gog-select__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\n [class.gog-select__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\n [class.gog-select__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\n [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\n [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\n [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\n [style.max-height]=\"appendToBody() ? resolvedPanelMaxHeight() : null\"\n [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n (click)=\"$event.stopPropagation()\"\n >\n @for (option of options(); track option.id) {\n <!--\n tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\n focus is moved between options with the arrow keys, not by tabbing through every\n one of them. Programmatic .focus() still works on a negative tabindex.\n -->\n <button\n type=\"button\"\n class=\"gog-select__option\"\n role=\"option\"\n tabindex=\"-1\"\n [attr.aria-selected]=\"isSelected(option.id)\"\n [attr.aria-disabled]=\"option.disabled ?? false\"\n [class.gog-select__option--selected]=\"isSelected(option.id)\"\n [class.gog-select__option--disabled]=\"option.disabled ?? false\"\n (click)=\"selectOption(option, $event)\"\n (keydown)=\"onOptionKeydown($event)\"\n >\n <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\n @if (isSelected(option.id)) {\n <gog-icon name=\"check\" />\n }\n </span>\n <span class=\"gog-select__option-label\">{{ option.name }}</span>\n </button>\n }\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-chevron-inset) var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);max-height:var(--gog-select-panel-max-height);overflow-y:auto;box-shadow:var(--gog-select-panel-shadow)}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1493
1678
|
}
|
|
1494
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type:
|
|
1679
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, decorators: [{
|
|
1495
1680
|
type: Component,
|
|
1496
|
-
args: [{ selector: 'gog-multiselect-dropdown-portal', imports: [ButtonComponent], template: `
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
[style.width.px]="width"
|
|
1503
|
-
[style.max-height.px]="maxHeight"
|
|
1504
|
-
[style.z-index]="zIndex"
|
|
1505
|
-
role="listbox"
|
|
1506
|
-
aria-multiselectable="true"
|
|
1507
|
-
>
|
|
1508
|
-
@if (showControls) {
|
|
1509
|
-
<div class="gog-ms__controls">
|
|
1510
|
-
<gog-button variant="ghost" size="sm" (click)="onSelectAll($event)">Select all</gog-button>
|
|
1511
|
-
<gog-button variant="ghost" size="sm" (click)="onClearAll($event)">Clear</gog-button>
|
|
1512
|
-
</div>
|
|
1513
|
-
}
|
|
1514
|
-
<div class="gog-ms__options">
|
|
1515
|
-
@for (option of options; track option.id) {
|
|
1516
|
-
<button
|
|
1517
|
-
type="button"
|
|
1518
|
-
class="gog-ms__option font-body"
|
|
1519
|
-
role="option"
|
|
1520
|
-
[attr.aria-selected]="isSelected(option.id)"
|
|
1521
|
-
[class.gog-ms__option--selected]="isSelected(option.id)"
|
|
1522
|
-
(click)="onToggle(option, $event)"
|
|
1523
|
-
>
|
|
1524
|
-
<span class="gog-ms__option-mark" aria-hidden="true">
|
|
1525
|
-
<svg viewBox="0 0 16 16" fill="none" focusable="false" aria-hidden="true">
|
|
1526
|
-
<rect
|
|
1527
|
-
x="2.5"
|
|
1528
|
-
y="2.5"
|
|
1529
|
-
width="11"
|
|
1530
|
-
height="11"
|
|
1531
|
-
rx="2"
|
|
1532
|
-
[attr.fill]="isSelected(option.id) ? 'currentColor' : 'none'"
|
|
1533
|
-
stroke="currentColor"
|
|
1534
|
-
stroke-width="1.5"
|
|
1535
|
-
/>
|
|
1536
|
-
@if (isSelected(option.id)) {
|
|
1537
|
-
<path
|
|
1538
|
-
d="M4 8L6.75 10.75L12 5.5"
|
|
1539
|
-
stroke="var(--gog-ms-checkbox-checked-color)"
|
|
1540
|
-
stroke-width="1.75"
|
|
1541
|
-
stroke-linecap="round"
|
|
1542
|
-
stroke-linejoin="round"
|
|
1543
|
-
/>
|
|
1544
|
-
}
|
|
1545
|
-
</svg>
|
|
1546
|
-
</span>
|
|
1547
|
-
{{ option.name }}
|
|
1548
|
-
</button>
|
|
1549
|
-
}
|
|
1550
|
-
</div>
|
|
1551
|
-
</div>
|
|
1552
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".gog-ms-wrapper{--gog-ms-gap: 4px;--gog-ms-option-gap: 4px;--gog-ms-options-padding: 4px;--gog-ms-label-color: var(--accent-color);--gog-ms-field-bg: var(--surface-color);--gog-ms-field-border: var(--accent-dim);--gog-ms-field-color: var(--text-color);--gog-ms-value-color: var(--text-color);--gog-ms-placeholder-color: var(--muted-text-color);--gog-ms-focus-border: var(--accent-color);--gog-ms-focus-ring: color-mix(in srgb, var(--accent-color) 25%, transparent);--gog-ms-error-color: var(--danger-color);--gog-ms-border-color: var(--accent-color);--gog-ms-panel-bg: var(--surface-color);--gog-ms-panel-border: var(--accent-color);--gog-ms-panel-shadow: 0 8px 24px rgba(0, 0, 0, .3);--gog-ms-option-hover-bg: color-mix(in srgb, var(--accent-color) 10%, transparent);--gog-ms-checkbox-border: var(--accent-dim);--gog-ms-checkbox-bg: var(--background-color);--gog-ms-checkbox-checked-bg: var(--accent-color);--gog-ms-checkbox-checked-color: var(--primary-color);--gog-ms-disabled-opacity: .4;display:flex;flex-direction:column;gap:var(--gog-ms-gap);position:relative;width:100%}.gog-ms__label{font-size:var(--text-sm);color:var(--gog-ms-label-color);text-transform:uppercase;letter-spacing:1px;cursor:pointer}.gog-ms{--gog-ms-padding-y: var(--control-padding-y, 10px);--gog-ms-padding-x: var(--control-padding-x, 14px);display:flex;align-items:center;justify-content:space-between;padding:var(--gog-ms-padding-y) var(--gog-ms-padding-x);background-color:var(--gog-ms-field-bg);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-ms-field-border);border-radius:var(--radius);color:var(--gog-ms-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color .15s ease,box-shadow .15s ease;min-height:44px}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-ms-focus-border)}.gog-ms:focus-visible{outline:3px solid var(--gog-ms-focus-ring);outline-offset:2px}.gog-ms--open{border-color:var(--gog-ms-border-color);box-shadow:0 0 8px var(--gog-ms-focus-ring)}.gog-ms--disabled{opacity:var(--gog-ms-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-ms-error-color)}.gog-ms__value{font-size:var(--text-md);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-ms-value-color)}.gog-ms__value--placeholder{color:var(--gog-ms-placeholder-color)}.gog-ms__actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.gog-ms__clear{width:1rem;height:1rem;padding:0;border:0;border-radius:var(--gog-ms-clear-radius, 2px);background:transparent;color:var(--gog-ms-placeholder-color);line-height:1;cursor:pointer;transition:color .15s ease}.gog-ms__clear gog-icon{font-size:.7rem}.gog-ms__clear:hover{color:var(--gog-ms-field-color)}.gog-ms__clear:focus-visible{outline:3px solid var(--gog-ms-focus-ring);outline-offset:2px}.gog-ms__arrow{color:var(--gog-ms-border-color);transition:transform .2s ease;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem}.gog-ms__arrow gog-icon{font-size:.875rem}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:var(--dropdown-z, 300);background-color:var(--gog-ms-panel-bg);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-ms-panel-border);border-radius:var(--radius);max-height:260px;overflow-y:auto;box-shadow:var(--panel-shadow)}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + 2px)}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-ms__controls{display:flex;gap:4px;padding:6px 10px;border-bottom:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-ms-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-ms-options-padding);gap:var(--gog-ms-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:10px;padding:var(--control-padding-y, 10px) var(--gog-ms-padding-x);border:0;background:transparent;text-align:left;font:inherit;font-size:var(--text-md);cursor:pointer;border-radius:calc(var(--radius) - 2px);transition:background-color .12s ease;color:var(--text-color)}.gog-ms__option:hover{background-color:var(--gog-ms-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-ms-border-color)}.gog-ms__option:focus-visible{outline:3px solid var(--gog-ms-focus-ring);outline-offset:-3px}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;color:var(--gog-ms-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-ms-checkbox-checked-bg)}.gog-ms__option-mark svg{width:18px;height:18px}.gog-ms__error{font-size:var(--text-xs);color:var(--gog-ms-error-color);margin-top:2px}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark{transition:none}}\n"] }]
|
|
1553
|
-
}] });
|
|
1554
|
-
class MultiselectComponent {
|
|
1555
|
-
static nextId = 0;
|
|
1556
|
-
instanceId = ++MultiselectComponent.nextId;
|
|
1557
|
-
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1558
|
-
ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1559
|
-
placeholder = input('Select...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1560
|
-
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
1561
|
-
errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
1681
|
+
args: [{ selector: 'gog-select', imports: [IconComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n context, which traps the panel's z-index inside it and lets whatever follows on the page\n paint over the open dropdown.\n-->\n<div\n class=\"gog-select\"\n [class.gog-select--disabled]=\"isDisabled()\"\n [class.gog-select--open]=\"isOpen()\"\n [class.gog-select--xsm]=\"size() === 'xsm'\"\n [class.gog-select--sm]=\"size() === 'sm'\"\n [class.gog-select--lg]=\"size() === 'lg'\"\n [class.gog-select--slg]=\"size() === 'slg'\"\n>\n <!--\n Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\n not a labelable element, so `for` pointing at it is silently ignored by browsers and\n assistive tech alike.\n -->\n @if (label()) {\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\n }\n\n <div class=\"gog-select__field\">\n <button\n type=\"button\"\n class=\"gog-select__control\"\n [id]=\"triggerId()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-describedby]=\"errorId()\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle(); $event.preventDefault()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n (keydown.escape)=\"close()\"\n (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n >\n <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\n {{ selectedOption()?.name || placeholder() }}\n </span>\n\n <span class=\"gog-select__chevron\" aria-hidden=\"true\">\n <gog-icon [template]=\"chevronTemplate()\" name=\"chevron-down\" />\n </span>\n </button>\n\n @if (isOpen() && !appendToBody()) {\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n }\n </div>\n\n @if (hasError()) {\n <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\n {{ visibleError() }}\n </span>\n }\n</div>\n\n<!--\n One template for both render modes. When `appendToBody` is set it is stamped into\n <body> by the overlay, which is why the portal-only modifier and the resolved\n coordinates are applied conditionally: outside the component's subtree the panel can\n no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n <div\n [id]=\"listboxId()\"\n class=\"gog-select__dropdown\"\n [class.gog-select__dropdown--up]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\n [class.gog-select__dropdown--portal]=\"appendToBody()\"\n [class.gog-select__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\n [class.gog-select__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\n [class.gog-select__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\n [class.gog-select__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\n [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\n [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\n [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\n [style.max-height]=\"appendToBody() ? resolvedPanelMaxHeight() : null\"\n [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n (click)=\"$event.stopPropagation()\"\n >\n @for (option of options(); track option.id) {\n <!--\n tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\n focus is moved between options with the arrow keys, not by tabbing through every\n one of them. Programmatic .focus() still works on a negative tabindex.\n -->\n <button\n type=\"button\"\n class=\"gog-select__option\"\n role=\"option\"\n tabindex=\"-1\"\n [attr.aria-selected]=\"isSelected(option.id)\"\n [attr.aria-disabled]=\"option.disabled ?? false\"\n [class.gog-select__option--selected]=\"isSelected(option.id)\"\n [class.gog-select__option--disabled]=\"option.disabled ?? false\"\n (click)=\"selectOption(option, $event)\"\n (keydown)=\"onOptionKeydown($event)\"\n >\n <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\n @if (isSelected(option.id)) {\n <gog-icon name=\"check\" />\n }\n </span>\n <span class=\"gog-select__option-label\">{{ option.name }}</span>\n </button>\n }\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-chevron-inset) var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);max-height:var(--gog-select-panel-max-height);overflow-y:auto;box-shadow:var(--gog-select-panel-shadow)}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option{transition:none}}\n"] }]
|
|
1682
|
+
}], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTpl', { isSignal: true }] }] } });
|
|
1683
|
+
|
|
1684
|
+
/** Height of the select-all/clear row, included in the panel height estimate. */
|
|
1685
|
+
const CONTROLS_ROW_HEIGHT = 38;
|
|
1686
|
+
class MultiselectComponent extends GogDropdownBase {
|
|
1562
1687
|
showControls = input(false, ...(ngDevMode ? [{ debugName: "showControls" }] : /* istanbul ignore next */ []));
|
|
1563
|
-
|
|
1564
|
-
|
|
1565
|
-
appendToBody = input(false, ...(ngDevMode ? [{ debugName: "appendToBody" }] : /* istanbul ignore next */ []));
|
|
1566
|
-
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1567
|
-
chevronTemplate = input(null, ...(ngDevMode ? [{ debugName: "chevronTemplate" }] : /* istanbul ignore next */ []));
|
|
1688
|
+
/** Where the "select all"/"clear" row sits relative to the option list. Sticky either way. */
|
|
1689
|
+
controlsPosition = input('top', ...(ngDevMode ? [{ debugName: "controlsPosition" }] : /* istanbul ignore next */ []));
|
|
1568
1690
|
clearIconTemplate = input(null, ...(ngDevMode ? [{ debugName: "clearIconTemplate" }] : /* istanbul ignore next */ []));
|
|
1569
1691
|
/** Two-way bindable selected ids: `[(value)]="signal"`. */
|
|
1570
1692
|
value = model([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
_touched = signal(false, ...(ngDevMode ? [{ debugName: "_touched" }] : /* istanbul ignore next */ []));
|
|
1582
|
-
formStatus = this.ngControl?.statusChanges
|
|
1583
|
-
? toSignal(this.ngControl.statusChanges, { initialValue: this.ngControl.status ?? 'VALID' })
|
|
1584
|
-
: signal('VALID');
|
|
1585
|
-
hasError = computed(() => {
|
|
1586
|
-
if (this.ngControl) {
|
|
1587
|
-
return this._touched() && this.formStatus() === 'INVALID';
|
|
1588
|
-
}
|
|
1589
|
-
return !!this.errorMessage() && this.value().length === 0;
|
|
1590
|
-
}, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
1591
|
-
visibleError = computed(() => (this.hasError() ? this.errorMessage() : ''), ...(ngDevMode ? [{ debugName: "visibleError" }] : /* istanbul ignore next */ []));
|
|
1592
|
-
portalHost = null;
|
|
1593
|
-
portalRef = null;
|
|
1693
|
+
panelTemplate = viewChild('panelTpl', ...(ngDevMode ? [{ debugName: "panelTemplate" }] : /* istanbul ignore next */ []));
|
|
1694
|
+
emptyValue = [];
|
|
1695
|
+
optionClass = 'gog-ms__option';
|
|
1696
|
+
triggerClass = 'gog-ms';
|
|
1697
|
+
optionGapToken = '--gog-ms-option-gap';
|
|
1698
|
+
optionsPaddingToken = '--gog-ms-options-padding';
|
|
1699
|
+
panelMaxHeightToken = '--gog-ms-panel-max-height';
|
|
1700
|
+
optionHeightToken = '--gog-ms-option-height';
|
|
1701
|
+
listboxId = computed(() => `gog-ms-listbox-${this.uid}`, ...(ngDevMode ? [{ debugName: "listboxId" }] : /* istanbul ignore next */ []));
|
|
1702
|
+
labelId = computed(() => `gog-ms-label-${this.uid}`, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
|
|
1594
1703
|
selectedNames = computed(() => this.value()
|
|
1595
|
-
.map((id) => this.options().find((
|
|
1704
|
+
.map((id) => this.options().find((option) => option.id === id)?.name)
|
|
1596
1705
|
.filter(Boolean)
|
|
1597
1706
|
.join(', '), ...(ngDevMode ? [{ debugName: "selectedNames" }] : /* istanbul ignore next */ []));
|
|
1598
|
-
_onChange = () => { };
|
|
1599
|
-
_onTouched = () => { };
|
|
1600
|
-
constructor() {
|
|
1601
|
-
if (this.ngControl) {
|
|
1602
|
-
this.ngControl.valueAccessor = this;
|
|
1603
|
-
}
|
|
1604
|
-
this.destroyRef.onDestroy(() => this.destroyPortal());
|
|
1605
|
-
}
|
|
1606
|
-
onDocumentClick(e) {
|
|
1607
|
-
const inside = this.elRef.nativeElement.contains(e.target) ||
|
|
1608
|
-
(this.portalHost?.contains(e.target) ?? false);
|
|
1609
|
-
if (!inside) {
|
|
1610
|
-
this.isOpen.set(false);
|
|
1611
|
-
if (this.appendToBody())
|
|
1612
|
-
this.destroyPortal();
|
|
1613
|
-
}
|
|
1614
|
-
}
|
|
1615
|
-
onScrollOrResize() {
|
|
1616
|
-
if (!this.isOpen())
|
|
1617
|
-
return;
|
|
1618
|
-
if (this.appendToBody()) {
|
|
1619
|
-
this.updatePortalPosition();
|
|
1620
|
-
return;
|
|
1621
|
-
}
|
|
1622
|
-
this.updateInlineDirection();
|
|
1623
|
-
}
|
|
1624
|
-
writeValue(val) {
|
|
1625
|
-
this.value.set(val ?? []);
|
|
1626
|
-
}
|
|
1627
|
-
registerOnChange(fn) {
|
|
1628
|
-
this._onChange = fn;
|
|
1629
|
-
}
|
|
1630
|
-
registerOnTouched(fn) {
|
|
1631
|
-
this._onTouched = fn;
|
|
1632
|
-
}
|
|
1633
|
-
setDisabledState(isDisabled) {
|
|
1634
|
-
this.cvaDisabled.set(isDisabled);
|
|
1635
|
-
}
|
|
1636
1707
|
isSelected(id) {
|
|
1637
1708
|
return this.value().includes(id);
|
|
1638
1709
|
}
|
|
1639
|
-
|
|
1640
|
-
|
|
1710
|
+
toggleOption(option, event) {
|
|
1711
|
+
event.stopPropagation();
|
|
1712
|
+
if (option.disabled)
|
|
1641
1713
|
return;
|
|
1642
|
-
const next = !this.isOpen();
|
|
1643
|
-
this.isOpen.set(next);
|
|
1644
|
-
if (this.appendToBody()) {
|
|
1645
|
-
if (next)
|
|
1646
|
-
this.openPortal();
|
|
1647
|
-
else
|
|
1648
|
-
this.destroyPortal();
|
|
1649
|
-
}
|
|
1650
|
-
else if (next) {
|
|
1651
|
-
this.updateInlineDirection();
|
|
1652
|
-
}
|
|
1653
|
-
}
|
|
1654
|
-
toggleOption(option, e) {
|
|
1655
|
-
e.stopPropagation();
|
|
1656
|
-
this.applyToggle(option.id);
|
|
1657
|
-
if (this.appendToBody() && this.portalRef) {
|
|
1658
|
-
this.portalRef.instance.selectedIds = [...this.value()];
|
|
1659
|
-
this.portalRef.changeDetectorRef.detectChanges();
|
|
1660
|
-
}
|
|
1661
|
-
}
|
|
1662
|
-
applyToggle(id) {
|
|
1663
1714
|
const current = this.value();
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
|
|
1667
|
-
this._onTouched();
|
|
1668
|
-
this._touched.set(true);
|
|
1715
|
+
this.commitValue(this.isSelected(option.id)
|
|
1716
|
+
? current.filter((id) => id !== option.id)
|
|
1717
|
+
: [...current, option.id]);
|
|
1669
1718
|
}
|
|
1670
|
-
selectAll(
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
|
|
1675
|
-
this._onTouched();
|
|
1676
|
-
this._touched.set(true);
|
|
1677
|
-
if (this.appendToBody() && this.portalRef) {
|
|
1678
|
-
this.portalRef.instance.selectedIds = [...all];
|
|
1679
|
-
this.portalRef.changeDetectorRef.detectChanges();
|
|
1680
|
-
}
|
|
1681
|
-
}
|
|
1682
|
-
clearAll(e) {
|
|
1683
|
-
e.stopPropagation();
|
|
1684
|
-
this.value.set([]);
|
|
1685
|
-
this._onChange([]);
|
|
1686
|
-
this._onTouched();
|
|
1687
|
-
this._touched.set(true);
|
|
1688
|
-
if (this.appendToBody() && this.portalRef) {
|
|
1689
|
-
this.portalRef.instance.selectedIds = [];
|
|
1690
|
-
this.portalRef.changeDetectorRef.detectChanges();
|
|
1691
|
-
}
|
|
1692
|
-
}
|
|
1693
|
-
clearTrigger(e) {
|
|
1694
|
-
e.stopPropagation();
|
|
1695
|
-
this.value.set([]);
|
|
1696
|
-
this._onChange([]);
|
|
1697
|
-
this._onTouched();
|
|
1698
|
-
this._touched.set(true);
|
|
1699
|
-
}
|
|
1700
|
-
close() {
|
|
1701
|
-
if (!this.isOpen())
|
|
1702
|
-
return;
|
|
1703
|
-
this.isOpen.set(false);
|
|
1704
|
-
if (this.appendToBody())
|
|
1705
|
-
this.destroyPortal();
|
|
1706
|
-
}
|
|
1707
|
-
estimatePanelHeight() {
|
|
1708
|
-
const controlsHeight = this.showControls() ? 38 : 0;
|
|
1709
|
-
const optionsCount = Math.max(this.options().length, 1);
|
|
1710
|
-
const optionsPadding = this.getOptionPadding() * 2;
|
|
1711
|
-
const optionGap = this.getOptionGap();
|
|
1712
|
-
const optionsHeight = optionsCount * 40 + Math.max(optionsCount - 1, 0) * optionGap + optionsPadding;
|
|
1713
|
-
return Math.min(optionsHeight + controlsHeight, 260);
|
|
1714
|
-
}
|
|
1715
|
-
getOptionGap() {
|
|
1716
|
-
if (!this.isBrowser) {
|
|
1717
|
-
return 4;
|
|
1718
|
-
}
|
|
1719
|
-
const gap = getComputedStyle(this.elRef.nativeElement).getPropertyValue('--gog-ms-option-gap').trim();
|
|
1720
|
-
const parsedGap = Number.parseFloat(gap);
|
|
1721
|
-
return Number.isFinite(parsedGap) ? parsedGap : 4;
|
|
1722
|
-
}
|
|
1723
|
-
getOptionPadding() {
|
|
1724
|
-
if (!this.isBrowser) {
|
|
1725
|
-
return 4;
|
|
1726
|
-
}
|
|
1727
|
-
const padding = getComputedStyle(this.elRef.nativeElement)
|
|
1728
|
-
.getPropertyValue('--gog-ms-options-padding')
|
|
1729
|
-
.trim();
|
|
1730
|
-
const parsedPadding = Number.parseFloat(padding);
|
|
1731
|
-
return Number.isFinite(parsedPadding) ? parsedPadding : 4;
|
|
1732
|
-
}
|
|
1733
|
-
updateInlineDirection() {
|
|
1734
|
-
if (!this.isBrowser)
|
|
1735
|
-
return;
|
|
1736
|
-
const placement = resolveDropdownPlacement(this.dropdownDirection(), this.elRef.nativeElement.getBoundingClientRect(), this.estimatePanelHeight(), window.innerHeight, 2, 8);
|
|
1737
|
-
this.dropdownDirectionState.set(placement.direction);
|
|
1719
|
+
selectAll(event) {
|
|
1720
|
+
event.stopPropagation();
|
|
1721
|
+
this.commitValue(this.options()
|
|
1722
|
+
.filter((option) => !option.disabled)
|
|
1723
|
+
.map((option) => option.id));
|
|
1738
1724
|
}
|
|
1739
|
-
|
|
1740
|
-
|
|
1741
|
-
|
|
1742
|
-
this.destroyPortal();
|
|
1743
|
-
this.portalHost = document.createElement('div');
|
|
1744
|
-
document.body.appendChild(this.portalHost);
|
|
1745
|
-
this.portalRef = createComponent(GogMultiselectDropdownPortal, {
|
|
1746
|
-
environmentInjector: this.envInjector,
|
|
1747
|
-
hostElement: this.portalHost,
|
|
1748
|
-
});
|
|
1749
|
-
const inst = this.portalRef.instance;
|
|
1750
|
-
inst.options = this.options();
|
|
1751
|
-
inst.selectedIds = [...this.value()];
|
|
1752
|
-
inst.showControls = this.showControls();
|
|
1753
|
-
inst.listboxId = `gog-ms-listbox-${this.instanceId}`;
|
|
1754
|
-
inst.zIndex = this.dropdownZIndex() ?? 9999;
|
|
1755
|
-
inst.direction = this.dropdownDirectionState();
|
|
1756
|
-
inst.maxHeight = this.estimatePanelHeight();
|
|
1757
|
-
inst.onToggle = (o, e) => this.toggleOption(o, e);
|
|
1758
|
-
inst.onSelectAll = (e) => this.selectAll(e);
|
|
1759
|
-
inst.onClearAll = (e) => this.clearAll(e);
|
|
1760
|
-
this.updatePortalPosition();
|
|
1761
|
-
this.appRef.attachView(this.portalRef.hostView);
|
|
1762
|
-
this.portalRef.changeDetectorRef.detectChanges();
|
|
1763
|
-
}
|
|
1764
|
-
updatePortalPosition() {
|
|
1765
|
-
if (!this.portalRef || !this.isBrowser)
|
|
1766
|
-
return;
|
|
1767
|
-
const placement = resolveDropdownPlacement(this.dropdownDirection(), this.elRef.nativeElement.getBoundingClientRect(), this.estimatePanelHeight(), window.innerHeight, 2, 8);
|
|
1768
|
-
this.portalRef.instance.direction = placement.direction;
|
|
1769
|
-
this.portalRef.instance.top = placement.top;
|
|
1770
|
-
this.portalRef.instance.left = placement.left;
|
|
1771
|
-
this.portalRef.instance.width = placement.width;
|
|
1772
|
-
this.portalRef.instance.maxHeight = placement.maxHeight;
|
|
1773
|
-
this.dropdownDirectionState.set(placement.direction);
|
|
1774
|
-
this.portalRef.changeDetectorRef.detectChanges();
|
|
1725
|
+
clearAll(event) {
|
|
1726
|
+
event.stopPropagation();
|
|
1727
|
+
this.commitValue([]);
|
|
1775
1728
|
}
|
|
1776
|
-
|
|
1777
|
-
|
|
1778
|
-
this.appRef.detachView(this.portalRef.hostView);
|
|
1779
|
-
this.portalRef.destroy();
|
|
1780
|
-
this.portalRef = null;
|
|
1781
|
-
}
|
|
1782
|
-
if (this.portalHost) {
|
|
1783
|
-
this.portalHost.remove();
|
|
1784
|
-
this.portalHost = null;
|
|
1785
|
-
}
|
|
1729
|
+
extraPanelHeight() {
|
|
1730
|
+
return this.showControls() ? CONTROLS_ROW_HEIGHT : 0;
|
|
1786
1731
|
}
|
|
1787
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiselectComponent, deps:
|
|
1788
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MultiselectComponent, isStandalone: true, selector: "gog-multiselect", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, dropdownDirection: { classPropertyName: "dropdownDirection", publicName: "dropdownDirection", isSignal: true, isRequired: false, transformFunction: null }, dropdownZIndex: { classPropertyName: "dropdownZIndex", publicName: "dropdownZIndex", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, chevronTemplate: { classPropertyName: "chevronTemplate", publicName: "chevronTemplate", isSignal: true, isRequired: false, transformFunction: null }, clearIconTemplate: { classPropertyName: "clearIconTemplate", publicName: "clearIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:scroll": "onScrollOrResize()", "window:resize": "onScrollOrResize()" } }, ngImport: i0, template: "<div class=\"gog-ms-wrapper gog-contained-layout\">\n @if (label()) {\n <label class=\"gog-ms__label font-heading\">{{ label() }}</label>\n }\n\n <div\n class=\"gog-ms\"\n role=\"combobox\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"'gog-ms-listbox-' + instanceId\"\n [attr.aria-disabled]=\"isDisabled()\"\n [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n [class.gog-ms--open]=\"isOpen()\"\n [class.gog-ms--disabled]=\"isDisabled()\"\n [class.gog-ms--error]=\"hasError()\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n (keydown.escape)=\"close()\"\n >\n <span class=\"gog-ms__value font-body\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\n {{ selectedNames() || placeholder() }}\n </span>\n\n <span class=\"gog-ms__actions\">\n @if (selectedNames()) {\n <button\n type=\"button\"\n type=\"button\"\n class=\"gog-ms__clear gog-inline-center\"\n (click)=\"clearTrigger($event)\"\n aria-label=\"Clear selection\"\n >\n <gog-icon [template]=\"clearIconTemplate()\" name=\"close\" />\n </button>\n }\n <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\n <gog-icon [template]=\"chevronTemplate()\" [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\" />\n </span>\n </span>\n </div>\n\n @if (isOpen()) {\n <div\n [id]=\"'gog-ms-listbox-' + instanceId\"\n class=\"gog-ms__dropdown\"\n [class.gog-ms__dropdown--up]=\"dropdownDirectionState() === 'up'\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [style.z-index]=\"dropdownZIndex() ?? null\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (showControls()) {\n <div class=\"gog-ms__controls\">\n <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">Select all</gog-button>\n <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">Clear</gog-button>\n </div>\n }\n <div class=\"gog-ms__options\">\n @for (option of options(); track option.id) {\n <button\n type=\"button\"\n class=\"gog-ms__option font-body\"\n role=\"option\"\n [attr.aria-selected]=\"isSelected(option.id)\"\n [class.gog-ms__option--selected]=\"isSelected(option.id)\"\n (click)=\"toggleOption(option, $event)\"\n >\n <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 16 16\" fill=\"none\" focusable=\"false\" aria-hidden=\"true\">\n <rect\n x=\"2.5\"\n y=\"2.5\"\n width=\"11\"\n height=\"11\"\n rx=\"2\"\n [attr.fill]=\"isSelected(option.id) ? 'currentColor' : 'none'\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n />\n @if (isSelected(option.id)) {\n <path\n d=\"M4 8L6.75 10.75L12 5.5\"\n stroke=\"var(--gog-ms-checkbox-checked-color)\"\n stroke-width=\"1.75\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n }\n </svg>\n </span>\n {{ option.name }}\n </button>\n }\n </div>\n </div>\n }\n\n @if (visibleError()) {\n <span class=\"gog-ms__error font-body\" role=\"alert\">{{ visibleError() }}</span>\n }\n</div>\n", styles: [".gog-ms-wrapper{--gog-ms-gap: 4px;--gog-ms-option-gap: 4px;--gog-ms-options-padding: 4px;--gog-ms-label-color: var(--accent-color);--gog-ms-field-bg: var(--surface-color);--gog-ms-field-border: var(--accent-dim);--gog-ms-field-color: var(--text-color);--gog-ms-value-color: var(--text-color);--gog-ms-placeholder-color: var(--muted-text-color);--gog-ms-focus-border: var(--accent-color);--gog-ms-focus-ring: color-mix(in srgb, var(--accent-color) 25%, transparent);--gog-ms-error-color: var(--danger-color);--gog-ms-border-color: var(--accent-color);--gog-ms-panel-bg: var(--surface-color);--gog-ms-panel-border: var(--accent-color);--gog-ms-panel-shadow: 0 8px 24px rgba(0, 0, 0, .3);--gog-ms-option-hover-bg: color-mix(in srgb, var(--accent-color) 10%, transparent);--gog-ms-checkbox-border: var(--accent-dim);--gog-ms-checkbox-bg: var(--background-color);--gog-ms-checkbox-checked-bg: var(--accent-color);--gog-ms-checkbox-checked-color: var(--primary-color);--gog-ms-disabled-opacity: .4;display:flex;flex-direction:column;gap:var(--gog-ms-gap);position:relative;width:100%}.gog-ms__label{font-size:var(--text-sm);color:var(--gog-ms-label-color);text-transform:uppercase;letter-spacing:1px;cursor:pointer}.gog-ms{--gog-ms-padding-y: var(--control-padding-y, 10px);--gog-ms-padding-x: var(--control-padding-x, 14px);display:flex;align-items:center;justify-content:space-between;padding:var(--gog-ms-padding-y) var(--gog-ms-padding-x);background-color:var(--gog-ms-field-bg);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-ms-field-border);border-radius:var(--radius);color:var(--gog-ms-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color .15s ease,box-shadow .15s ease;min-height:44px}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-ms-focus-border)}.gog-ms:focus-visible{outline:3px solid var(--gog-ms-focus-ring);outline-offset:2px}.gog-ms--open{border-color:var(--gog-ms-border-color);box-shadow:0 0 8px var(--gog-ms-focus-ring)}.gog-ms--disabled{opacity:var(--gog-ms-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-ms-error-color)}.gog-ms__value{font-size:var(--text-md);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-ms-value-color)}.gog-ms__value--placeholder{color:var(--gog-ms-placeholder-color)}.gog-ms__actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.gog-ms__clear{width:1rem;height:1rem;padding:0;border:0;border-radius:var(--gog-ms-clear-radius, 2px);background:transparent;color:var(--gog-ms-placeholder-color);line-height:1;cursor:pointer;transition:color .15s ease}.gog-ms__clear gog-icon{font-size:.7rem}.gog-ms__clear:hover{color:var(--gog-ms-field-color)}.gog-ms__clear:focus-visible{outline:3px solid var(--gog-ms-focus-ring);outline-offset:2px}.gog-ms__arrow{color:var(--gog-ms-border-color);transition:transform .2s ease;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem}.gog-ms__arrow gog-icon{font-size:.875rem}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:var(--dropdown-z, 300);background-color:var(--gog-ms-panel-bg);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-ms-panel-border);border-radius:var(--radius);max-height:260px;overflow-y:auto;box-shadow:var(--panel-shadow)}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + 2px)}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-ms__controls{display:flex;gap:4px;padding:6px 10px;border-bottom:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-ms-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-ms-options-padding);gap:var(--gog-ms-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:10px;padding:var(--control-padding-y, 10px) var(--gog-ms-padding-x);border:0;background:transparent;text-align:left;font:inherit;font-size:var(--text-md);cursor:pointer;border-radius:calc(var(--radius) - 2px);transition:background-color .12s ease;color:var(--text-color)}.gog-ms__option:hover{background-color:var(--gog-ms-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-ms-border-color)}.gog-ms__option:focus-visible{outline:3px solid var(--gog-ms-focus-ring);outline-offset:-3px}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;color:var(--gog-ms-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-ms-checkbox-checked-bg)}.gog-ms__option-mark svg{width:18px;height:18px}.gog-ms__error{font-size:var(--text-xs);color:var(--gog-ms-error-color);margin-top:2px}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark{transition:none}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "debounce", "loading"], outputs: ["gogClick"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1732
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiselectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1733
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MultiselectComponent, isStandalone: true, selector: "gog-multiselect", inputs: { showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, controlsPosition: { classPropertyName: "controlsPosition", publicName: "controlsPosition", isSignal: true, isRequired: false, transformFunction: null }, clearIconTemplate: { classPropertyName: "clearIconTemplate", publicName: "clearIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\n Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n context, which traps the panel's z-index inside it and lets whatever follows on the page\n paint over the open dropdown.\n-->\n<div\n class=\"gog-ms-wrapper\"\n [class.gog-ms-wrapper--xsm]=\"size() === 'xsm'\"\n [class.gog-ms-wrapper--sm]=\"size() === 'sm'\"\n [class.gog-ms-wrapper--lg]=\"size() === 'lg'\"\n [class.gog-ms-wrapper--slg]=\"size() === 'slg'\"\n>\n <!--\n Associated with aria-labelledby rather than `for`: the trigger is a div with\n role=\"combobox\", not a labelable element. Without this the trigger had no accessible\n name at all whenever `label` was set, because that also suppresses the aria-label.\n -->\n @if (label()) {\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\n }\n\n <div\n class=\"gog-ms\"\n role=\"combobox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-disabled]=\"isDisabled()\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n [class.gog-ms--open]=\"isOpen()\"\n [class.gog-ms--disabled]=\"isDisabled()\"\n [class.gog-ms--error]=\"hasError()\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle(); $event.preventDefault()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n (keydown.escape)=\"close()\"\n (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n >\n <span class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\n {{ selectedNames() || placeholder() }}\n </span>\n\n <span class=\"gog-ms__actions\">\n @if (selectedNames()) {\n <button\n type=\"button\"\n class=\"gog-ms__clear gog-inline-center\"\n (click)=\"clearAll($event)\"\n aria-label=\"Clear selection\"\n >\n <gog-icon [template]=\"clearIconTemplate()\" name=\"close\" />\n </button>\n }\n <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\n <gog-icon\n [template]=\"chevronTemplate()\"\n [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\n />\n </span>\n </span>\n </div>\n\n @if (isOpen() && !appendToBody()) {\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n }\n\n @if (visibleError()) {\n <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\n }\n</div>\n\n<!--\n One template for both render modes. When `appendToBody` is set it is stamped into\n <body> by the overlay, which is why the portal-only modifier and the resolved\n coordinates are applied conditionally: outside the component's subtree the panel can\n no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n <div\n [id]=\"listboxId()\"\n class=\"gog-ms__dropdown\"\n [class.gog-ms__dropdown--up]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\n [class.gog-ms__dropdown--portal]=\"appendToBody()\"\n [class.gog-ms__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\n [class.gog-ms__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\n [class.gog-ms__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\n [class.gog-ms__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\n [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\n [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\n [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\n [style.max-height]=\"appendToBody() ? resolvedPanelMaxHeight() : null\"\n [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (showControls() && controlsPosition() === 'top') {\n <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n }\n <div class=\"gog-ms__options\">\n @for (option of options(); track option.id) {\n <!--\n tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\n expects: focus moves between options with the arrow keys, not by tabbing\n through every one. Programmatic .focus() still works on a negative tabindex.\n -->\n <button\n type=\"button\"\n class=\"gog-ms__option\"\n role=\"option\"\n tabindex=\"-1\"\n [attr.aria-selected]=\"isSelected(option.id)\"\n [attr.aria-disabled]=\"option.disabled ?? false\"\n [class.gog-ms__option--selected]=\"isSelected(option.id)\"\n [class.gog-ms__option--disabled]=\"option.disabled ?? false\"\n (click)=\"toggleOption(option, $event)\"\n (keydown)=\"onOptionKeydown($event)\"\n >\n <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\n <gog-icon [name]=\"isSelected(option.id) ? 'checkbox-checked' : 'checkbox'\" />\n </span>\n {{ option.name }}\n </button>\n }\n </div>\n @if (showControls() && controlsPosition() === 'bottom') {\n <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n }\n </div>\n</ng-template>\n\n<ng-template #controlsRowTpl>\n <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\n <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">Select all</gog-button>\n <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">Clear</gog-button>\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-ms-gap);position:relative;width:100%}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-ms-size-padding-y: var(--gog-field-xsm-padding-y);--gog-ms-size-padding-x: var(--gog-field-xsm-padding-x);--gog-ms-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-ms-size-padding-y: var(--gog-field-sm-padding-y);--gog-ms-size-padding-x: var(--gog-field-sm-padding-x);--gog-ms-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-ms-size-padding-y: var(--gog-field-lg-padding-y);--gog-ms-size-padding-x: var(--gog-field-lg-padding-x);--gog-ms-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-ms-size-padding-y: var(--gog-field-slg-padding-y);--gog-ms-size-padding-x: var(--gog-field-slg-padding-x);--gog-ms-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-ms-label-font-family);font-size:var(--gog-ms-label-font-size);color:var(--gog-ms-label-color);text-transform:var(--gog-ms-label-text-transform);letter-spacing:var(--gog-ms-label-letter-spacing);cursor:pointer}.gog-ms{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-ms-field-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border);border-radius:var(--gog-ms-radius);color:var(--gog-ms-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-ms-transition-duration) var(--gog-easing),box-shadow var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-ms-focus-border)}.gog-ms:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-ms-border-color);box-shadow:var(--gog-ms-focus-glow)}.gog-ms--disabled{opacity:var(--gog-ms-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-ms-error-color)}.gog-ms__value{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-ms-value-color)}.gog-ms__value--placeholder{color:var(--gog-ms-placeholder-color)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-ms-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-ms-clear-radius);background:transparent;color:var(--gog-ms-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-ms-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-ms-border-color);transition:transform var(--gog-ms-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-ms-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);background-color:var(--gog-ms-panel-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-panel-border);border-radius:var(--gog-ms-radius);max-height:var(--gog-ms-panel-max-height);overflow-y:auto;box-shadow:var(--gog-ms-panel-shadow)}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-ms-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-ms__controls{position:sticky;top:0;z-index:1;display:flex;gap:var(--gog-ms-controls-gap);padding:var(--gog-ms-controls-padding);background-color:var(--gog-ms-panel-bg);border-bottom:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__controls--bottom{top:auto;bottom:0;border-bottom:0;border-top:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-ms-options-padding);gap:var(--gog-ms-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-ms-option-gap-inline);padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-ms-option-radius);transition:background-color var(--gog-ms-option-transition-duration) var(--gog-easing);color:var(--gog-ms-option-color)}.gog-ms__option--disabled{opacity:var(--gog-ms-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover{background-color:var(--gog-ms-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-ms-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:calc(var(--gog-ms-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));height:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-icon-ratio));color:var(--gog-ms-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-ms-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-error-font-size);color:var(--gog-ms-error-color);margin-top:var(--gog-ms-error-offset)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark{transition:none}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1789
1734
|
}
|
|
1790
1735
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiselectComponent, decorators: [{
|
|
1791
1736
|
type: Component,
|
|
1792
|
-
args: [{ selector: 'gog-multiselect', imports: [ButtonComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1793
|
-
|
|
1794
|
-
'(window:scroll)': 'onScrollOrResize()',
|
|
1795
|
-
'(window:resize)': 'onScrollOrResize()',
|
|
1796
|
-
}, template: "<div class=\"gog-ms-wrapper gog-contained-layout\">\n @if (label()) {\n <label class=\"gog-ms__label font-heading\">{{ label() }}</label>\n }\n\n <div\n class=\"gog-ms\"\n role=\"combobox\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"'gog-ms-listbox-' + instanceId\"\n [attr.aria-disabled]=\"isDisabled()\"\n [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n [class.gog-ms--open]=\"isOpen()\"\n [class.gog-ms--disabled]=\"isDisabled()\"\n [class.gog-ms--error]=\"hasError()\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n (keydown.escape)=\"close()\"\n >\n <span class=\"gog-ms__value font-body\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\n {{ selectedNames() || placeholder() }}\n </span>\n\n <span class=\"gog-ms__actions\">\n @if (selectedNames()) {\n <button\n type=\"button\"\n type=\"button\"\n class=\"gog-ms__clear gog-inline-center\"\n (click)=\"clearTrigger($event)\"\n aria-label=\"Clear selection\"\n >\n <gog-icon [template]=\"clearIconTemplate()\" name=\"close\" />\n </button>\n }\n <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\n <gog-icon [template]=\"chevronTemplate()\" [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\" />\n </span>\n </span>\n </div>\n\n @if (isOpen()) {\n <div\n [id]=\"'gog-ms-listbox-' + instanceId\"\n class=\"gog-ms__dropdown\"\n [class.gog-ms__dropdown--up]=\"dropdownDirectionState() === 'up'\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [style.z-index]=\"dropdownZIndex() ?? null\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (showControls()) {\n <div class=\"gog-ms__controls\">\n <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">Select all</gog-button>\n <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">Clear</gog-button>\n </div>\n }\n <div class=\"gog-ms__options\">\n @for (option of options(); track option.id) {\n <button\n type=\"button\"\n class=\"gog-ms__option font-body\"\n role=\"option\"\n [attr.aria-selected]=\"isSelected(option.id)\"\n [class.gog-ms__option--selected]=\"isSelected(option.id)\"\n (click)=\"toggleOption(option, $event)\"\n >\n <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 16 16\" fill=\"none\" focusable=\"false\" aria-hidden=\"true\">\n <rect\n x=\"2.5\"\n y=\"2.5\"\n width=\"11\"\n height=\"11\"\n rx=\"2\"\n [attr.fill]=\"isSelected(option.id) ? 'currentColor' : 'none'\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n />\n @if (isSelected(option.id)) {\n <path\n d=\"M4 8L6.75 10.75L12 5.5\"\n stroke=\"var(--gog-ms-checkbox-checked-color)\"\n stroke-width=\"1.75\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n }\n </svg>\n </span>\n {{ option.name }}\n </button>\n }\n </div>\n </div>\n }\n\n @if (visibleError()) {\n <span class=\"gog-ms__error font-body\" role=\"alert\">{{ visibleError() }}</span>\n }\n</div>\n", styles: [".gog-ms-wrapper{--gog-ms-gap: 4px;--gog-ms-option-gap: 4px;--gog-ms-options-padding: 4px;--gog-ms-label-color: var(--accent-color);--gog-ms-field-bg: var(--surface-color);--gog-ms-field-border: var(--accent-dim);--gog-ms-field-color: var(--text-color);--gog-ms-value-color: var(--text-color);--gog-ms-placeholder-color: var(--muted-text-color);--gog-ms-focus-border: var(--accent-color);--gog-ms-focus-ring: color-mix(in srgb, var(--accent-color) 25%, transparent);--gog-ms-error-color: var(--danger-color);--gog-ms-border-color: var(--accent-color);--gog-ms-panel-bg: var(--surface-color);--gog-ms-panel-border: var(--accent-color);--gog-ms-panel-shadow: 0 8px 24px rgba(0, 0, 0, .3);--gog-ms-option-hover-bg: color-mix(in srgb, var(--accent-color) 10%, transparent);--gog-ms-checkbox-border: var(--accent-dim);--gog-ms-checkbox-bg: var(--background-color);--gog-ms-checkbox-checked-bg: var(--accent-color);--gog-ms-checkbox-checked-color: var(--primary-color);--gog-ms-disabled-opacity: .4;display:flex;flex-direction:column;gap:var(--gog-ms-gap);position:relative;width:100%}.gog-ms__label{font-size:var(--text-sm);color:var(--gog-ms-label-color);text-transform:uppercase;letter-spacing:1px;cursor:pointer}.gog-ms{--gog-ms-padding-y: var(--control-padding-y, 10px);--gog-ms-padding-x: var(--control-padding-x, 14px);display:flex;align-items:center;justify-content:space-between;padding:var(--gog-ms-padding-y) var(--gog-ms-padding-x);background-color:var(--gog-ms-field-bg);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-ms-field-border);border-radius:var(--radius);color:var(--gog-ms-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color .15s ease,box-shadow .15s ease;min-height:44px}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-ms-focus-border)}.gog-ms:focus-visible{outline:3px solid var(--gog-ms-focus-ring);outline-offset:2px}.gog-ms--open{border-color:var(--gog-ms-border-color);box-shadow:0 0 8px var(--gog-ms-focus-ring)}.gog-ms--disabled{opacity:var(--gog-ms-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-ms-error-color)}.gog-ms__value{font-size:var(--text-md);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-ms-value-color)}.gog-ms__value--placeholder{color:var(--gog-ms-placeholder-color)}.gog-ms__actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.gog-ms__clear{width:1rem;height:1rem;padding:0;border:0;border-radius:var(--gog-ms-clear-radius, 2px);background:transparent;color:var(--gog-ms-placeholder-color);line-height:1;cursor:pointer;transition:color .15s ease}.gog-ms__clear gog-icon{font-size:.7rem}.gog-ms__clear:hover{color:var(--gog-ms-field-color)}.gog-ms__clear:focus-visible{outline:3px solid var(--gog-ms-focus-ring);outline-offset:2px}.gog-ms__arrow{color:var(--gog-ms-border-color);transition:transform .2s ease;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem}.gog-ms__arrow gog-icon{font-size:.875rem}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:var(--dropdown-z, 300);background-color:var(--gog-ms-panel-bg);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-ms-panel-border);border-radius:var(--radius);max-height:260px;overflow-y:auto;box-shadow:var(--panel-shadow)}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + 2px)}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-ms__controls{display:flex;gap:4px;padding:6px 10px;border-bottom:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-ms-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-ms-options-padding);gap:var(--gog-ms-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:10px;padding:var(--control-padding-y, 10px) var(--gog-ms-padding-x);border:0;background:transparent;text-align:left;font:inherit;font-size:var(--text-md);cursor:pointer;border-radius:calc(var(--radius) - 2px);transition:background-color .12s ease;color:var(--text-color)}.gog-ms__option:hover{background-color:var(--gog-ms-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-ms-border-color)}.gog-ms__option:focus-visible{outline:3px solid var(--gog-ms-focus-ring);outline-offset:-3px}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;color:var(--gog-ms-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-ms-checkbox-checked-bg)}.gog-ms__option-mark svg{width:18px;height:18px}.gog-ms__error{font-size:var(--text-xs);color:var(--gog-ms-error-color);margin-top:2px}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark{transition:none}}\n"] }]
|
|
1797
|
-
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], dropdownDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownDirection", required: false }] }], dropdownZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownZIndex", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], chevronTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevronTemplate", required: false }] }], clearIconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearIconTemplate", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
1737
|
+
args: [{ selector: 'gog-multiselect', imports: [ButtonComponent, IconComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n context, which traps the panel's z-index inside it and lets whatever follows on the page\n paint over the open dropdown.\n-->\n<div\n class=\"gog-ms-wrapper\"\n [class.gog-ms-wrapper--xsm]=\"size() === 'xsm'\"\n [class.gog-ms-wrapper--sm]=\"size() === 'sm'\"\n [class.gog-ms-wrapper--lg]=\"size() === 'lg'\"\n [class.gog-ms-wrapper--slg]=\"size() === 'slg'\"\n>\n <!--\n Associated with aria-labelledby rather than `for`: the trigger is a div with\n role=\"combobox\", not a labelable element. Without this the trigger had no accessible\n name at all whenever `label` was set, because that also suppresses the aria-label.\n -->\n @if (label()) {\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\n }\n\n <div\n class=\"gog-ms\"\n role=\"combobox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-disabled]=\"isDisabled()\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n [class.gog-ms--open]=\"isOpen()\"\n [class.gog-ms--disabled]=\"isDisabled()\"\n [class.gog-ms--error]=\"hasError()\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle(); $event.preventDefault()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n (keydown.escape)=\"close()\"\n (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n >\n <span class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\n {{ selectedNames() || placeholder() }}\n </span>\n\n <span class=\"gog-ms__actions\">\n @if (selectedNames()) {\n <button\n type=\"button\"\n class=\"gog-ms__clear gog-inline-center\"\n (click)=\"clearAll($event)\"\n aria-label=\"Clear selection\"\n >\n <gog-icon [template]=\"clearIconTemplate()\" name=\"close\" />\n </button>\n }\n <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\n <gog-icon\n [template]=\"chevronTemplate()\"\n [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\n />\n </span>\n </span>\n </div>\n\n @if (isOpen() && !appendToBody()) {\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n }\n\n @if (visibleError()) {\n <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\n }\n</div>\n\n<!--\n One template for both render modes. When `appendToBody` is set it is stamped into\n <body> by the overlay, which is why the portal-only modifier and the resolved\n coordinates are applied conditionally: outside the component's subtree the panel can\n no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n <div\n [id]=\"listboxId()\"\n class=\"gog-ms__dropdown\"\n [class.gog-ms__dropdown--up]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\n [class.gog-ms__dropdown--portal]=\"appendToBody()\"\n [class.gog-ms__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\n [class.gog-ms__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\n [class.gog-ms__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\n [class.gog-ms__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\n [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\n [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\n [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\n [style.max-height]=\"appendToBody() ? resolvedPanelMaxHeight() : null\"\n [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (showControls() && controlsPosition() === 'top') {\n <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n }\n <div class=\"gog-ms__options\">\n @for (option of options(); track option.id) {\n <!--\n tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\n expects: focus moves between options with the arrow keys, not by tabbing\n through every one. Programmatic .focus() still works on a negative tabindex.\n -->\n <button\n type=\"button\"\n class=\"gog-ms__option\"\n role=\"option\"\n tabindex=\"-1\"\n [attr.aria-selected]=\"isSelected(option.id)\"\n [attr.aria-disabled]=\"option.disabled ?? false\"\n [class.gog-ms__option--selected]=\"isSelected(option.id)\"\n [class.gog-ms__option--disabled]=\"option.disabled ?? false\"\n (click)=\"toggleOption(option, $event)\"\n (keydown)=\"onOptionKeydown($event)\"\n >\n <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\n <gog-icon [name]=\"isSelected(option.id) ? 'checkbox-checked' : 'checkbox'\" />\n </span>\n {{ option.name }}\n </button>\n }\n </div>\n @if (showControls() && controlsPosition() === 'bottom') {\n <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n }\n </div>\n</ng-template>\n\n<ng-template #controlsRowTpl>\n <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\n <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">Select all</gog-button>\n <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">Clear</gog-button>\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-ms-gap);position:relative;width:100%}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-ms-size-padding-y: var(--gog-field-xsm-padding-y);--gog-ms-size-padding-x: var(--gog-field-xsm-padding-x);--gog-ms-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-ms-size-padding-y: var(--gog-field-sm-padding-y);--gog-ms-size-padding-x: var(--gog-field-sm-padding-x);--gog-ms-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-ms-size-padding-y: var(--gog-field-lg-padding-y);--gog-ms-size-padding-x: var(--gog-field-lg-padding-x);--gog-ms-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-ms-size-padding-y: var(--gog-field-slg-padding-y);--gog-ms-size-padding-x: var(--gog-field-slg-padding-x);--gog-ms-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-ms-label-font-family);font-size:var(--gog-ms-label-font-size);color:var(--gog-ms-label-color);text-transform:var(--gog-ms-label-text-transform);letter-spacing:var(--gog-ms-label-letter-spacing);cursor:pointer}.gog-ms{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-ms-field-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border);border-radius:var(--gog-ms-radius);color:var(--gog-ms-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-ms-transition-duration) var(--gog-easing),box-shadow var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-ms-focus-border)}.gog-ms:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-ms-border-color);box-shadow:var(--gog-ms-focus-glow)}.gog-ms--disabled{opacity:var(--gog-ms-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-ms-error-color)}.gog-ms__value{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-ms-value-color)}.gog-ms__value--placeholder{color:var(--gog-ms-placeholder-color)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-ms-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-ms-clear-radius);background:transparent;color:var(--gog-ms-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-ms-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-ms-border-color);transition:transform var(--gog-ms-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-ms-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);background-color:var(--gog-ms-panel-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-panel-border);border-radius:var(--gog-ms-radius);max-height:var(--gog-ms-panel-max-height);overflow-y:auto;box-shadow:var(--gog-ms-panel-shadow)}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-ms-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-ms__controls{position:sticky;top:0;z-index:1;display:flex;gap:var(--gog-ms-controls-gap);padding:var(--gog-ms-controls-padding);background-color:var(--gog-ms-panel-bg);border-bottom:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__controls--bottom{top:auto;bottom:0;border-bottom:0;border-top:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-ms-options-padding);gap:var(--gog-ms-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-ms-option-gap-inline);padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-ms-option-radius);transition:background-color var(--gog-ms-option-transition-duration) var(--gog-easing);color:var(--gog-ms-option-color)}.gog-ms__option--disabled{opacity:var(--gog-ms-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover{background-color:var(--gog-ms-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-ms-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:calc(var(--gog-ms-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));height:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-icon-ratio));color:var(--gog-ms-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-ms-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-error-font-size);color:var(--gog-ms-error-color);margin-top:var(--gog-ms-error-offset)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark{transition:none}}\n"] }]
|
|
1738
|
+
}], propDecorators: { showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], controlsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlsPosition", required: false }] }], clearIconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearIconTemplate", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTpl', { isSignal: true }] }] } });
|
|
1798
1739
|
|
|
1799
1740
|
class SliderComponent {
|
|
1800
1741
|
static nextId = 0;
|
|
@@ -1806,11 +1747,15 @@ class SliderComponent {
|
|
|
1806
1747
|
showValue = input(true, ...(ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []));
|
|
1807
1748
|
showThumb = input(true, ...(ngDevMode ? [{ debugName: "showThumb" }] : /* istanbul ignore next */ []));
|
|
1808
1749
|
errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
1750
|
+
/** See `GogErrorDisplay`. Defaults to `'manual'`, matching every other control in the library. */
|
|
1751
|
+
errorDisplay = input('manual', ...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
|
|
1809
1752
|
ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1810
1753
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1811
1754
|
/** Two-way bindable value: `[(value)]="signal"`. */
|
|
1812
1755
|
value = model(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1756
|
+
ngControl = inject(NgControl, { optional: true, self: true });
|
|
1813
1757
|
cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
|
|
1758
|
+
errorState = new GogErrorState(this.errorMessage, this.errorDisplay, this.ngControl);
|
|
1814
1759
|
isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
1815
1760
|
clampedValue = computed(() => {
|
|
1816
1761
|
const value = this.value();
|
|
@@ -1824,9 +1769,22 @@ class SliderComponent {
|
|
|
1824
1769
|
}, ...(ngDevMode ? [{ debugName: "fillPercent" }] : /* istanbul ignore next */ []));
|
|
1825
1770
|
thumbPos = computed(() => `${this.fillPercent()}%`, ...(ngDevMode ? [{ debugName: "thumbPos" }] : /* istanbul ignore next */ []));
|
|
1826
1771
|
fillScale = computed(() => this.fillPercent() / 100, ...(ngDevMode ? [{ debugName: "fillScale" }] : /* istanbul ignore next */ []));
|
|
1827
|
-
|
|
1772
|
+
hasError = this.errorState.hasError;
|
|
1773
|
+
visibleError = this.errorState.visibleError;
|
|
1774
|
+
errorId = computed(() => (this.hasError() ? `${this.inputId}-error` : null), ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
1828
1775
|
onChange = () => { };
|
|
1829
1776
|
onTouched = () => { };
|
|
1777
|
+
constructor() {
|
|
1778
|
+
// Registering through NgControl instead of NG_VALUE_ACCESSOR keeps `this.ngControl`
|
|
1779
|
+
// available for `hasError` — providing NG_VALUE_ACCESSOR on the component while also
|
|
1780
|
+
// injecting NgControl would be a dependency cycle.
|
|
1781
|
+
if (this.ngControl) {
|
|
1782
|
+
this.ngControl.valueAccessor = this;
|
|
1783
|
+
}
|
|
1784
|
+
}
|
|
1785
|
+
ngDoCheck() {
|
|
1786
|
+
this.errorState.check();
|
|
1787
|
+
}
|
|
1830
1788
|
writeValue(val) {
|
|
1831
1789
|
const next = val ?? this.min();
|
|
1832
1790
|
this.value.set(Math.min(this.max(), Math.max(this.min(), next)));
|
|
@@ -1851,44 +1809,203 @@ class SliderComponent {
|
|
|
1851
1809
|
this.onTouched();
|
|
1852
1810
|
}
|
|
1853
1811
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1854
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SliderComponent, isStandalone: true, selector: "gog-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, showThumb: { classPropertyName: "showThumb", publicName: "showThumb", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "style.--thumb-pos": "thumbPos()", "style.--fill-scale": "fillScale()" } },
|
|
1855
|
-
{
|
|
1856
|
-
provide: NG_VALUE_ACCESSOR,
|
|
1857
|
-
useExisting: forwardRef(() => SliderComponent),
|
|
1858
|
-
multi: true,
|
|
1859
|
-
},
|
|
1860
|
-
], ngImport: i0, template: "<div\n class=\"gog-slider gog-contained-layout\"\n [class.gog-slider--disabled]=\"isDisabled()\"\n [class.gog-slider--thumb-hidden]=\"!showThumb()\"\n>\n <div class=\"gog-slider__header\">\n @if (label()) {\n <label [attr.for]=\"inputId\" class=\"gog-slider__label font-heading\">{{ label() }}</label>\n }\n\n @if (showValue()) {\n <span class=\"gog-slider__value font-mono\">{{ clampedValue() }}</span>\n }\n </div>\n\n <div class=\"gog-slider__track-container\">\n <div class=\"gog-slider__track\">\n <div class=\"gog-slider__fill\"></div>\n </div>\n\n @if (showThumb()) {\n <div class=\"gog-slider__thumb\" aria-hidden=\"true\"></div>\n }\n\n <input\n [id]=\"inputId\"\n class=\"gog-slider__input\"\n type=\"range\"\n [attr.aria-label]=\"label() ? null : ariaLabel() || 'Slider'\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"clampedValue()\"\n [attr.aria-invalid]=\"!!errorMessage()\"\n [attr.aria-describedby]=\"errorId()\"\n [min]=\"min()\"\n [max]=\"max()\"\n [step]=\"step()\"\n [value]=\"clampedValue()\"\n [disabled]=\"isDisabled()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n </div>\n\n <div class=\"gog-slider__range-labels font-mono\">\n <span>{{ min() }}</span>\n <span>{{ max() }}</span>\n </div>\n\n @if (errorMessage()) {\n <span class=\"gog-slider__error font-body\" [attr.id]=\"errorId()\" role=\"alert\">\n {{ errorMessage() }}\n </span>\n }\n</div>\n", styles: [":host{display:block}.gog-slider{--gog-slider-gap: 6px;--gog-slider-label-color: var(--accent-color);--gog-slider-value-color: var(--accent-color);--gog-slider-track-bg: var(--accent-dim);--gog-slider-fill-bg: var(--accent-color);--gog-slider-thumb-bg: var(--accent-color);--gog-slider-thumb-border: var(--background-color);--gog-slider-thumb-shadow: color-mix(in srgb, var(--accent-bright) 40%, transparent);--gog-slider-focus-ring: color-mix(in srgb, var(--accent-color) 30%, transparent);--gog-slider-range-color: var(--muted-text-color);--gog-slider-error-color: var(--danger-color);--gog-slider-disabled-opacity: .4;display:flex;flex-direction:column;gap:var(--gog-slider-gap);width:100%}.gog-slider--disabled{opacity:var(--gog-slider-disabled-opacity);pointer-events:none}.gog-slider--thumb-hidden .gog-slider__thumb{display:none}.gog-slider__header{display:flex;align-items:center;justify-content:space-between}.gog-slider__label{font-size:var(--text-sm);color:var(--gog-slider-label-color);text-transform:uppercase;letter-spacing:1px}.gog-slider__value{min-width:40px;font-size:var(--text-sm);color:var(--gog-slider-value-color);text-align:right}.gog-slider__track-container{position:relative;display:flex;align-items:center;height:20px}.gog-slider__track{position:absolute;inset-inline:0;height:4px;overflow:hidden;background-color:var(--gog-slider-track-bg);pointer-events:none}.gog-slider__fill{width:100%;height:100%;background-color:var(--gog-slider-fill-bg);transform:scaleX(var(--fill-scale, 0));transform-origin:left center;will-change:transform}.gog-slider__thumb{position:absolute;top:50%;left:var(--thumb-pos, 0%);width:16px;height:16px;border:2px solid var(--gog-slider-thumb-border);border-radius:50%;background-color:var(--gog-slider-thumb-bg);pointer-events:none;translate:-50% -50%;will-change:translate;box-shadow:0 0 6px var(--gog-slider-thumb-shadow)}.gog-slider__track-container:focus-within .gog-slider__thumb{box-shadow:0 0 0 3px var(--gog-slider-focus-ring),0 0 6px var(--gog-slider-thumb-shadow)}.gog-slider__input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;outline:none}.gog-slider__range-labels{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--gog-slider-range-color)}.gog-slider__error{font-size:var(--text-xs);color:var(--gog-slider-error-color)}@media(prefers-reduced-motion:reduce){.gog-slider__fill,.gog-slider__thumb{will-change:auto}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1812
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SliderComponent, isStandalone: true, selector: "gog-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, showThumb: { classPropertyName: "showThumb", publicName: "showThumb", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "style.--thumb-pos": "thumbPos()", "style.--fill-scale": "fillScale()" } }, ngImport: i0, template: "<div\n class=\"gog-slider gog-contained-layout\"\n [class.gog-slider--disabled]=\"isDisabled()\"\n [class.gog-slider--thumb-hidden]=\"!showThumb()\"\n>\n <div class=\"gog-slider__header\">\n @if (label()) {\n <label [attr.for]=\"inputId\" class=\"gog-slider__label\">{{ label() }}</label>\n }\n\n @if (showValue()) {\n <span class=\"gog-slider__value\">{{ clampedValue() }}</span>\n }\n </div>\n\n <div class=\"gog-slider__track-container\">\n <div class=\"gog-slider__track\">\n <div class=\"gog-slider__fill\"></div>\n </div>\n\n @if (showThumb()) {\n <div class=\"gog-slider__thumb\" aria-hidden=\"true\"></div>\n }\n\n <input\n [id]=\"inputId\"\n class=\"gog-slider__input\"\n type=\"range\"\n [attr.aria-label]=\"label() ? null : ariaLabel() || 'Slider'\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"clampedValue()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-describedby]=\"errorId()\"\n [min]=\"min()\"\n [max]=\"max()\"\n [step]=\"step()\"\n [value]=\"clampedValue()\"\n [disabled]=\"isDisabled()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n </div>\n\n <div class=\"gog-slider__range-labels\">\n <span>{{ min() }}</span>\n <span>{{ max() }}</span>\n </div>\n\n @if (hasError()) {\n <span class=\"gog-slider__error\" [attr.id]=\"errorId()\" role=\"alert\">\n {{ visibleError() }}\n </span>\n }\n</div>\n", styles: [":host{display:block}.gog-slider{display:flex;flex-direction:column;gap:var(--gog-slider-gap);width:100%}.gog-slider--disabled{opacity:var(--gog-slider-disabled-opacity);pointer-events:none}.gog-slider--thumb-hidden .gog-slider__thumb{display:none}.gog-slider__header{display:flex;align-items:center;justify-content:space-between}.gog-slider__label{font-family:var(--gog-slider-label-font-family);font-size:var(--gog-slider-label-font-size);color:var(--gog-slider-label-color);text-transform:var(--gog-slider-label-text-transform);letter-spacing:var(--gog-slider-label-letter-spacing)}.gog-slider__value{min-width:var(--gog-slider-value-min-width);font-family:var(--gog-slider-value-font-family);font-size:var(--gog-slider-value-font-size);color:var(--gog-slider-value-color);text-align:right}.gog-slider__track-container{position:relative;display:flex;align-items:center;height:var(--gog-slider-track-area-height)}.gog-slider__track{position:absolute;inset-inline:0;height:var(--gog-slider-track-height);border-radius:var(--gog-slider-track-radius);overflow:hidden;background-color:var(--gog-slider-track-bg);pointer-events:none}.gog-slider__fill{width:100%;height:100%;background-color:var(--gog-slider-fill-bg);transform:scaleX(var(--fill-scale, 0));transform-origin:left center;will-change:transform}.gog-slider__thumb{position:absolute;top:50%;left:var(--thumb-pos, 0%);width:var(--gog-slider-thumb-size);height:var(--gog-slider-thumb-size);border:var(--gog-slider-thumb-border-width) solid var(--gog-slider-thumb-border);border-radius:var(--gog-slider-thumb-radius);background-color:var(--gog-slider-thumb-bg);pointer-events:none;translate:-50% -50%;will-change:translate;box-shadow:0 0 var(--gog-slider-thumb-glow-size) var(--gog-slider-thumb-shadow)}.gog-slider__track-container:focus-within .gog-slider__thumb{box-shadow:0 0 0 var(--gog-slider-focus-ring-width) var(--gog-slider-focus-ring),0 0 var(--gog-slider-thumb-glow-size) var(--gog-slider-thumb-shadow)}.gog-slider__input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;outline:none}.gog-slider__range-labels{display:flex;justify-content:space-between;font-family:var(--gog-slider-value-font-family);font-size:var(--gog-slider-range-font-size);color:var(--gog-slider-range-color)}.gog-slider__error{font-family:var(--gog-slider-error-font-family);font-size:var(--gog-slider-error-font-size);color:var(--gog-slider-error-color)}@media(prefers-reduced-motion:reduce){.gog-slider__fill,.gog-slider__thumb{will-change:auto}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1861
1813
|
}
|
|
1862
1814
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SliderComponent, decorators: [{
|
|
1863
1815
|
type: Component,
|
|
1864
|
-
args: [{ selector: 'gog-slider', imports: [], changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1865
|
-
{
|
|
1866
|
-
provide: NG_VALUE_ACCESSOR,
|
|
1867
|
-
useExisting: forwardRef(() => SliderComponent),
|
|
1868
|
-
multi: true,
|
|
1869
|
-
},
|
|
1870
|
-
], host: {
|
|
1816
|
+
args: [{ selector: 'gog-slider', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1871
1817
|
'[style.--thumb-pos]': 'thumbPos()',
|
|
1872
1818
|
'[style.--fill-scale]': 'fillScale()',
|
|
1873
|
-
}, template: "<div\n class=\"gog-slider gog-contained-layout\"\n [class.gog-slider--disabled]=\"isDisabled()\"\n [class.gog-slider--thumb-hidden]=\"!showThumb()\"\n>\n <div class=\"gog-slider__header\">\n @if (label()) {\n <label [attr.for]=\"inputId\" class=\"gog-slider__label
|
|
1874
|
-
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], showThumb: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThumb", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
1819
|
+
}, template: "<div\n class=\"gog-slider gog-contained-layout\"\n [class.gog-slider--disabled]=\"isDisabled()\"\n [class.gog-slider--thumb-hidden]=\"!showThumb()\"\n>\n <div class=\"gog-slider__header\">\n @if (label()) {\n <label [attr.for]=\"inputId\" class=\"gog-slider__label\">{{ label() }}</label>\n }\n\n @if (showValue()) {\n <span class=\"gog-slider__value\">{{ clampedValue() }}</span>\n }\n </div>\n\n <div class=\"gog-slider__track-container\">\n <div class=\"gog-slider__track\">\n <div class=\"gog-slider__fill\"></div>\n </div>\n\n @if (showThumb()) {\n <div class=\"gog-slider__thumb\" aria-hidden=\"true\"></div>\n }\n\n <input\n [id]=\"inputId\"\n class=\"gog-slider__input\"\n type=\"range\"\n [attr.aria-label]=\"label() ? null : ariaLabel() || 'Slider'\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"clampedValue()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-describedby]=\"errorId()\"\n [min]=\"min()\"\n [max]=\"max()\"\n [step]=\"step()\"\n [value]=\"clampedValue()\"\n [disabled]=\"isDisabled()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n </div>\n\n <div class=\"gog-slider__range-labels\">\n <span>{{ min() }}</span>\n <span>{{ max() }}</span>\n </div>\n\n @if (hasError()) {\n <span class=\"gog-slider__error\" [attr.id]=\"errorId()\" role=\"alert\">\n {{ visibleError() }}\n </span>\n }\n</div>\n", styles: [":host{display:block}.gog-slider{display:flex;flex-direction:column;gap:var(--gog-slider-gap);width:100%}.gog-slider--disabled{opacity:var(--gog-slider-disabled-opacity);pointer-events:none}.gog-slider--thumb-hidden .gog-slider__thumb{display:none}.gog-slider__header{display:flex;align-items:center;justify-content:space-between}.gog-slider__label{font-family:var(--gog-slider-label-font-family);font-size:var(--gog-slider-label-font-size);color:var(--gog-slider-label-color);text-transform:var(--gog-slider-label-text-transform);letter-spacing:var(--gog-slider-label-letter-spacing)}.gog-slider__value{min-width:var(--gog-slider-value-min-width);font-family:var(--gog-slider-value-font-family);font-size:var(--gog-slider-value-font-size);color:var(--gog-slider-value-color);text-align:right}.gog-slider__track-container{position:relative;display:flex;align-items:center;height:var(--gog-slider-track-area-height)}.gog-slider__track{position:absolute;inset-inline:0;height:var(--gog-slider-track-height);border-radius:var(--gog-slider-track-radius);overflow:hidden;background-color:var(--gog-slider-track-bg);pointer-events:none}.gog-slider__fill{width:100%;height:100%;background-color:var(--gog-slider-fill-bg);transform:scaleX(var(--fill-scale, 0));transform-origin:left center;will-change:transform}.gog-slider__thumb{position:absolute;top:50%;left:var(--thumb-pos, 0%);width:var(--gog-slider-thumb-size);height:var(--gog-slider-thumb-size);border:var(--gog-slider-thumb-border-width) solid var(--gog-slider-thumb-border);border-radius:var(--gog-slider-thumb-radius);background-color:var(--gog-slider-thumb-bg);pointer-events:none;translate:-50% -50%;will-change:translate;box-shadow:0 0 var(--gog-slider-thumb-glow-size) var(--gog-slider-thumb-shadow)}.gog-slider__track-container:focus-within .gog-slider__thumb{box-shadow:0 0 0 var(--gog-slider-focus-ring-width) var(--gog-slider-focus-ring),0 0 var(--gog-slider-thumb-glow-size) var(--gog-slider-thumb-shadow)}.gog-slider__input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;outline:none}.gog-slider__range-labels{display:flex;justify-content:space-between;font-family:var(--gog-slider-value-font-family);font-size:var(--gog-slider-range-font-size);color:var(--gog-slider-range-color)}.gog-slider__error{font-family:var(--gog-slider-error-font-family);font-size:var(--gog-slider-error-font-size);color:var(--gog-slider-error-color)}@media(prefers-reduced-motion:reduce){.gog-slider__fill,.gog-slider__thumb{will-change:auto}}\n"] }]
|
|
1820
|
+
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], showThumb: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThumb", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
1821
|
+
|
|
1822
|
+
class SkeletonComponent {
|
|
1823
|
+
shape = input('text', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
|
|
1824
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1825
|
+
animation = input('pulse', ...(ngDevMode ? [{ debugName: "animation" }] : /* istanbul ignore next */ []));
|
|
1826
|
+
/** CSS width, e.g. '240px' or '60%'. Falls back to a shape/size default when unset. */
|
|
1827
|
+
width = input(null, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
1828
|
+
/** CSS height override. Ignored for `text`, whose lines size from `size` instead. */
|
|
1829
|
+
height = input(null, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
1830
|
+
/** Number of stacked lines when `shape="text"`. The last line renders shorter. */
|
|
1831
|
+
lines = input(1, ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
|
|
1832
|
+
rounded = input(true, ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
|
|
1833
|
+
ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1834
|
+
lineList = computed(() => {
|
|
1835
|
+
const count = Math.max(1, this.lines());
|
|
1836
|
+
return Array.from({ length: count }, (_, index) => count > 1 && index === count - 1);
|
|
1837
|
+
}, ...(ngDevMode ? [{ debugName: "lineList" }] : /* istanbul ignore next */ []));
|
|
1838
|
+
// Keeps a width-only override circular instead of an oval, since `circle` has no
|
|
1839
|
+
// independent height concept of its own.
|
|
1840
|
+
resolvedHeight = computed(() => {
|
|
1841
|
+
if (this.shape() === 'text') {
|
|
1842
|
+
return null;
|
|
1843
|
+
}
|
|
1844
|
+
if (this.shape() === 'circle') {
|
|
1845
|
+
return this.height() ?? this.width();
|
|
1846
|
+
}
|
|
1847
|
+
return this.height();
|
|
1848
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedHeight" }] : /* istanbul ignore next */ []));
|
|
1849
|
+
hostClasses = computed(() => [
|
|
1850
|
+
'gog-skeleton',
|
|
1851
|
+
`gog-skeleton--${this.shape()}`,
|
|
1852
|
+
`gog-skeleton--${this.size()}`,
|
|
1853
|
+
`gog-skeleton--${this.animation()}`,
|
|
1854
|
+
this.rounded() ? null : 'gog-skeleton--square',
|
|
1855
|
+
]
|
|
1856
|
+
.filter((className) => className !== null)
|
|
1857
|
+
.join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
1858
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1859
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SkeletonComponent, isStandalone: true, selector: "gog-skeleton", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "style.width": "width()", "style.height": "resolvedHeight()", "attr.role": "ariaLabel() ? \"status\" : null", "attr.aria-label": "ariaLabel()", "attr.aria-hidden": "ariaLabel() ? null : \"true\"" } }, ngImport: i0, template: "@switch (shape()) {\n @case ('text') {\n @for (isShort of lineList(); track $index) {\n <span\n class=\"gog-skeleton__bone gog-skeleton__line\"\n [class.gog-skeleton__line--short]=\"isShort\"\n ></span>\n }\n }\n @default {\n <span class=\"gog-skeleton__bone gog-skeleton__shape\"></span>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.gog-skeleton__bone{position:relative;display:block;overflow:hidden;background-color:var(--gog-skeleton-base);border-radius:var(--gog-skeleton-radius)}:host(.gog-skeleton--square) .gog-skeleton__bone{border-radius:var(--gog-skeleton-square-radius)}:host(.gog-skeleton--text){display:grid;gap:var(--gog-skeleton-line-gap)}.gog-skeleton__line{width:100%;height:var(--gog-skeleton-line-height, var(--gog-skeleton-line-height-md));border-radius:var(--gog-skeleton-line-radius)}:host(.gog-skeleton--square) .gog-skeleton__line{border-radius:var(--gog-skeleton-square-radius)}.gog-skeleton__line--short{width:var(--gog-skeleton-short-line-width)}:host(.gog-skeleton--text.gog-skeleton--xsm){--gog-skeleton-line-height: var(--gog-skeleton-line-height-xsm)}:host(.gog-skeleton--text.gog-skeleton--sm){--gog-skeleton-line-height: var(--gog-skeleton-line-height-sm)}:host(.gog-skeleton--text.gog-skeleton--md){--gog-skeleton-line-height: var(--gog-skeleton-line-height-md)}:host(.gog-skeleton--text.gog-skeleton--lg){--gog-skeleton-line-height: var(--gog-skeleton-line-height-lg)}:host(.gog-skeleton--text.gog-skeleton--slg){--gog-skeleton-line-height: var(--gog-skeleton-line-height-slg)}:host(.gog-skeleton--circle){display:inline-block;width:var(--gog-skeleton-circle-size, var(--gog-skeleton-circle-size-md));height:var(--gog-skeleton-circle-size, var(--gog-skeleton-circle-size-md))}:host(.gog-skeleton--circle) .gog-skeleton__shape{width:100%;height:100%;border-radius:50%}:host(.gog-skeleton--circle.gog-skeleton--xsm){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-xsm)}:host(.gog-skeleton--circle.gog-skeleton--sm){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-sm)}:host(.gog-skeleton--circle.gog-skeleton--md){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-md)}:host(.gog-skeleton--circle.gog-skeleton--lg){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-lg)}:host(.gog-skeleton--circle.gog-skeleton--slg){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-slg)}:host(.gog-skeleton--rect){display:block;width:100%;height:var(--gog-skeleton-rect-height, var(--gog-skeleton-rect-height-md))}:host(.gog-skeleton--rect) .gog-skeleton__shape{width:100%;height:100%}:host(.gog-skeleton--rect.gog-skeleton--xsm){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-xsm)}:host(.gog-skeleton--rect.gog-skeleton--sm){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-sm)}:host(.gog-skeleton--rect.gog-skeleton--md){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-md)}:host(.gog-skeleton--rect.gog-skeleton--lg){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-lg)}:host(.gog-skeleton--rect.gog-skeleton--slg){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-slg)}@keyframes gog-skeleton-pulse{0%,to{opacity:1}50%{opacity:var(--gog-skeleton-pulse-min-opacity)}}:host(.gog-skeleton--pulse) .gog-skeleton__bone{animation:gog-skeleton-pulse var(--gog-skeleton-pulse-duration) ease-in-out infinite}@keyframes gog-skeleton-wave{0%{transform:translate(-100%)}to{transform:translate(100%)}}:host(.gog-skeleton--wave) .gog-skeleton__bone:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--gog-skeleton-shine),transparent);animation:gog-skeleton-wave var(--gog-skeleton-wave-duration) ease-in-out infinite}@media(prefers-reduced-motion:reduce){.gog-skeleton__bone,.gog-skeleton__bone:after{animation:none!important}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1860
|
+
}
|
|
1861
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SkeletonComponent, decorators: [{
|
|
1862
|
+
type: Component,
|
|
1863
|
+
args: [{ selector: 'gog-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1864
|
+
'[class]': 'hostClasses()',
|
|
1865
|
+
'[style.width]': 'width()',
|
|
1866
|
+
'[style.height]': 'resolvedHeight()',
|
|
1867
|
+
// Decorative by default — a page can carry dozens of these while loading, and a
|
|
1868
|
+
// role="status" on every single bone would flood assistive tech with announcements.
|
|
1869
|
+
// Pass `ariaLabel` on the one instance that should actually speak for the loading state.
|
|
1870
|
+
'[attr.role]': 'ariaLabel() ? "status" : null',
|
|
1871
|
+
'[attr.aria-label]': 'ariaLabel()',
|
|
1872
|
+
'[attr.aria-hidden]': 'ariaLabel() ? null : "true"',
|
|
1873
|
+
}, template: "@switch (shape()) {\n @case ('text') {\n @for (isShort of lineList(); track $index) {\n <span\n class=\"gog-skeleton__bone gog-skeleton__line\"\n [class.gog-skeleton__line--short]=\"isShort\"\n ></span>\n }\n }\n @default {\n <span class=\"gog-skeleton__bone gog-skeleton__shape\"></span>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.gog-skeleton__bone{position:relative;display:block;overflow:hidden;background-color:var(--gog-skeleton-base);border-radius:var(--gog-skeleton-radius)}:host(.gog-skeleton--square) .gog-skeleton__bone{border-radius:var(--gog-skeleton-square-radius)}:host(.gog-skeleton--text){display:grid;gap:var(--gog-skeleton-line-gap)}.gog-skeleton__line{width:100%;height:var(--gog-skeleton-line-height, var(--gog-skeleton-line-height-md));border-radius:var(--gog-skeleton-line-radius)}:host(.gog-skeleton--square) .gog-skeleton__line{border-radius:var(--gog-skeleton-square-radius)}.gog-skeleton__line--short{width:var(--gog-skeleton-short-line-width)}:host(.gog-skeleton--text.gog-skeleton--xsm){--gog-skeleton-line-height: var(--gog-skeleton-line-height-xsm)}:host(.gog-skeleton--text.gog-skeleton--sm){--gog-skeleton-line-height: var(--gog-skeleton-line-height-sm)}:host(.gog-skeleton--text.gog-skeleton--md){--gog-skeleton-line-height: var(--gog-skeleton-line-height-md)}:host(.gog-skeleton--text.gog-skeleton--lg){--gog-skeleton-line-height: var(--gog-skeleton-line-height-lg)}:host(.gog-skeleton--text.gog-skeleton--slg){--gog-skeleton-line-height: var(--gog-skeleton-line-height-slg)}:host(.gog-skeleton--circle){display:inline-block;width:var(--gog-skeleton-circle-size, var(--gog-skeleton-circle-size-md));height:var(--gog-skeleton-circle-size, var(--gog-skeleton-circle-size-md))}:host(.gog-skeleton--circle) .gog-skeleton__shape{width:100%;height:100%;border-radius:50%}:host(.gog-skeleton--circle.gog-skeleton--xsm){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-xsm)}:host(.gog-skeleton--circle.gog-skeleton--sm){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-sm)}:host(.gog-skeleton--circle.gog-skeleton--md){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-md)}:host(.gog-skeleton--circle.gog-skeleton--lg){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-lg)}:host(.gog-skeleton--circle.gog-skeleton--slg){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-slg)}:host(.gog-skeleton--rect){display:block;width:100%;height:var(--gog-skeleton-rect-height, var(--gog-skeleton-rect-height-md))}:host(.gog-skeleton--rect) .gog-skeleton__shape{width:100%;height:100%}:host(.gog-skeleton--rect.gog-skeleton--xsm){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-xsm)}:host(.gog-skeleton--rect.gog-skeleton--sm){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-sm)}:host(.gog-skeleton--rect.gog-skeleton--md){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-md)}:host(.gog-skeleton--rect.gog-skeleton--lg){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-lg)}:host(.gog-skeleton--rect.gog-skeleton--slg){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-slg)}@keyframes gog-skeleton-pulse{0%,to{opacity:1}50%{opacity:var(--gog-skeleton-pulse-min-opacity)}}:host(.gog-skeleton--pulse) .gog-skeleton__bone{animation:gog-skeleton-pulse var(--gog-skeleton-pulse-duration) ease-in-out infinite}@keyframes gog-skeleton-wave{0%{transform:translate(-100%)}to{transform:translate(100%)}}:host(.gog-skeleton--wave) .gog-skeleton__bone:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--gog-skeleton-shine),transparent);animation:gog-skeleton-wave var(--gog-skeleton-wave-duration) ease-in-out infinite}@media(prefers-reduced-motion:reduce){.gog-skeleton__bone,.gog-skeleton__bone:after{animation:none!important}}\n"] }]
|
|
1874
|
+
}], propDecorators: { shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
1875
|
+
|
|
1876
|
+
class PaginatorComponent {
|
|
1877
|
+
/** 1-based current page. Two-way bindable: `[(page)]="myPageSignal"`. */
|
|
1878
|
+
page = model(1, ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
|
|
1879
|
+
totalPages = input(1, ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
|
|
1880
|
+
/**
|
|
1881
|
+
* `window` (default): a fixed number of page buttons (`visiblePages`) that slides to keep
|
|
1882
|
+
* the current page centered, clamped at the edges — no ellipsis, no pinned boundaries
|
|
1883
|
+
* unless `showFirstPage`/`showLastPage` ask for them.
|
|
1884
|
+
* `ellipsis`: the original behavior — first and last page are always pinned, and
|
|
1885
|
+
* `siblingCount` pages are kept around the current one, with a "…" filling the gap. Kept
|
|
1886
|
+
* around as an opt-in for consumers (like `gog-table`) already built around that look.
|
|
1887
|
+
*/
|
|
1888
|
+
rangeMode = input('window', ...(ngDevMode ? [{ debugName: "rangeMode" }] : /* istanbul ignore next */ []));
|
|
1889
|
+
/** `rangeMode="window"` only: how many page number buttons stay visible at once. */
|
|
1890
|
+
visiblePages = input(5, ...(ngDevMode ? [{ debugName: "visiblePages" }] : /* istanbul ignore next */ []));
|
|
1891
|
+
/** `rangeMode="window"` only: always keep page 1 reachable, with a "…" if it's not adjacent. */
|
|
1892
|
+
showFirstPage = input(false, ...(ngDevMode ? [{ debugName: "showFirstPage" }] : /* istanbul ignore next */ []));
|
|
1893
|
+
/** `rangeMode="window"` only: always keep the last page reachable, with a "…" if it's not adjacent. */
|
|
1894
|
+
showLastPage = input(false, ...(ngDevMode ? [{ debugName: "showLastPage" }] : /* istanbul ignore next */ []));
|
|
1895
|
+
/** `rangeMode="ellipsis"` only: how many page numbers to keep on each side of the current page. */
|
|
1896
|
+
siblingCount = input(2, ...(ngDevMode ? [{ debugName: "siblingCount" }] : /* istanbul ignore next */ []));
|
|
1897
|
+
size = input('sm', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1898
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1899
|
+
ariaLabel = input('Pagination', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1900
|
+
pageNumbers = computed(() => {
|
|
1901
|
+
const total = Math.max(1, this.totalPages());
|
|
1902
|
+
const current = this.page();
|
|
1903
|
+
return this.rangeMode() === 'ellipsis'
|
|
1904
|
+
? this.ellipsisRange(total, current)
|
|
1905
|
+
: this.windowRange(total, current);
|
|
1906
|
+
}, ...(ngDevMode ? [{ debugName: "pageNumbers" }] : /* istanbul ignore next */ []));
|
|
1907
|
+
constructor() {
|
|
1908
|
+
// Self-clamps whenever `totalPages` shrinks below the current page (or a consumer
|
|
1909
|
+
// passes an out-of-range value directly), so every consumer gets correct bounds for
|
|
1910
|
+
// free instead of reimplementing this per usage.
|
|
1911
|
+
effect(() => {
|
|
1912
|
+
const total = Math.max(1, this.totalPages());
|
|
1913
|
+
const current = this.page();
|
|
1914
|
+
if (current > total) {
|
|
1915
|
+
this.page.set(total);
|
|
1916
|
+
}
|
|
1917
|
+
else if (current < 1) {
|
|
1918
|
+
this.page.set(1);
|
|
1919
|
+
}
|
|
1920
|
+
});
|
|
1921
|
+
}
|
|
1922
|
+
windowRange(total, current) {
|
|
1923
|
+
const windowSize = Math.min(Math.max(1, this.visiblePages()), total);
|
|
1924
|
+
const start = Math.max(1, Math.min(current - Math.floor((windowSize - 1) / 2), total - windowSize + 1));
|
|
1925
|
+
const end = start + windowSize - 1;
|
|
1926
|
+
const range = [];
|
|
1927
|
+
if (this.showFirstPage() && start > 1) {
|
|
1928
|
+
range.push(1);
|
|
1929
|
+
if (start > 2)
|
|
1930
|
+
range.push('...');
|
|
1931
|
+
}
|
|
1932
|
+
for (let i = start; i <= end; i++)
|
|
1933
|
+
range.push(i);
|
|
1934
|
+
if (this.showLastPage() && end < total) {
|
|
1935
|
+
if (end < total - 1)
|
|
1936
|
+
range.push('...');
|
|
1937
|
+
range.push(total);
|
|
1938
|
+
}
|
|
1939
|
+
return range;
|
|
1940
|
+
}
|
|
1941
|
+
ellipsisRange(total, current) {
|
|
1942
|
+
const delta = Math.max(0, this.siblingCount());
|
|
1943
|
+
const range = [];
|
|
1944
|
+
for (let i = 1; i <= total; i++) {
|
|
1945
|
+
if (i === 1 || i === total || (i >= current - delta && i <= current + delta)) {
|
|
1946
|
+
range.push(i);
|
|
1947
|
+
}
|
|
1948
|
+
else if (range[range.length - 1] !== '...') {
|
|
1949
|
+
range.push('...');
|
|
1950
|
+
}
|
|
1951
|
+
}
|
|
1952
|
+
return range;
|
|
1953
|
+
}
|
|
1954
|
+
isNumber(value) {
|
|
1955
|
+
return typeof value === 'number';
|
|
1956
|
+
}
|
|
1957
|
+
goTo(target) {
|
|
1958
|
+
if (this.disabled() || target < 1 || target > this.totalPages())
|
|
1959
|
+
return;
|
|
1960
|
+
this.page.set(target);
|
|
1961
|
+
}
|
|
1962
|
+
prev() {
|
|
1963
|
+
this.goTo(this.page() - 1);
|
|
1964
|
+
}
|
|
1965
|
+
next() {
|
|
1966
|
+
this.goTo(this.page() + 1);
|
|
1967
|
+
}
|
|
1968
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1969
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PaginatorComponent, isStandalone: true, selector: "gog-paginator", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, visiblePages: { classPropertyName: "visiblePages", publicName: "visiblePages", isSignal: true, isRequired: false, transformFunction: null }, showFirstPage: { classPropertyName: "showFirstPage", publicName: "showFirstPage", isSignal: true, isRequired: false, transformFunction: null }, showLastPage: { classPropertyName: "showLastPage", publicName: "showLastPage", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()" }, classAttribute: "gog-paginator" }, ngImport: i0, template: "<gog-button\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled() || page() === 1\"\n ariaLabel=\"Previous page\"\n (gogClick)=\"prev()\"\n >\u2039</gog-button\n>\n\n@for (item of pageNumbers(); track $index) {\n @if (isNumber(item)) {\n <gog-button\n [size]=\"size()\"\n [variant]=\"item === page() ? 'primary' : 'ghost'\"\n [disabled]=\"disabled()\"\n [ariaLabel]=\"item === page() ? 'Page ' + item + ', current page' : 'Go to page ' + item\"\n (gogClick)=\"goTo(item)\"\n >{{ item }}</gog-button\n >\n } @else {\n <span class=\"gog-paginator__ellipsis\">\u2026</span>\n }\n}\n\n<gog-button\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled() || page() === totalPages()\"\n ariaLabel=\"Next page\"\n (gogClick)=\"next()\"\n >\u203A</gog-button\n>\n", styles: [":host{display:flex;align-items:center;gap:var(--gog-paginator-gap);flex-wrap:wrap}.gog-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--gog-paginator-ellipsis-min-width);color:var(--gog-paginator-ellipsis-color);font-family:var(--gog-paginator-ellipsis-font-family);font-size:var(--gog-paginator-ellipsis-font-size);-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1970
|
+
}
|
|
1971
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
1972
|
+
type: Component,
|
|
1973
|
+
args: [{ selector: 'gog-paginator', imports: [ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1974
|
+
class: 'gog-paginator',
|
|
1975
|
+
role: 'navigation',
|
|
1976
|
+
'[attr.aria-label]': 'ariaLabel()',
|
|
1977
|
+
}, template: "<gog-button\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled() || page() === 1\"\n ariaLabel=\"Previous page\"\n (gogClick)=\"prev()\"\n >\u2039</gog-button\n>\n\n@for (item of pageNumbers(); track $index) {\n @if (isNumber(item)) {\n <gog-button\n [size]=\"size()\"\n [variant]=\"item === page() ? 'primary' : 'ghost'\"\n [disabled]=\"disabled()\"\n [ariaLabel]=\"item === page() ? 'Page ' + item + ', current page' : 'Go to page ' + item\"\n (gogClick)=\"goTo(item)\"\n >{{ item }}</gog-button\n >\n } @else {\n <span class=\"gog-paginator__ellipsis\">\u2026</span>\n }\n}\n\n<gog-button\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled() || page() === totalPages()\"\n ariaLabel=\"Next page\"\n (gogClick)=\"next()\"\n >\u203A</gog-button\n>\n", styles: [":host{display:flex;align-items:center;gap:var(--gog-paginator-gap);flex-wrap:wrap}.gog-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--gog-paginator-ellipsis-min-width);color:var(--gog-paginator-ellipsis-color);font-family:var(--gog-paginator-ellipsis-font-family);font-size:var(--gog-paginator-ellipsis-font-size);-webkit-user-select:none;user-select:none}\n"] }]
|
|
1978
|
+
}], ctorParameters: () => [], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: false }] }], rangeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeMode", required: false }] }], visiblePages: [{ type: i0.Input, args: [{ isSignal: true, alias: "visiblePages", required: false }] }], showFirstPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstPage", required: false }] }], showLastPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLastPage", required: false }] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
1875
1979
|
|
|
1876
1980
|
class SpinnerOverlayComponent {
|
|
1877
1981
|
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
1878
1982
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1879
1983
|
ariaLabel = input('Loading', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1984
|
+
variant = input('runic', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
1880
1985
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SpinnerOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1881
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SpinnerOverlayComponent, isStandalone: true, selector: "gog-spinner-overlay", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-busy": "loading() ? \"true\" : null" }, classAttribute: "gog-spinner-overlay-host" }, ngImport: i0, template: "<div class=\"gog-spinner-overlay\">\
|
|
1986
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SpinnerOverlayComponent, isStandalone: true, selector: "gog-spinner-overlay", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-busy": "loading() ? \"true\" : null" }, classAttribute: "gog-spinner-overlay-host" }, ngImport: i0, template: "<div class=\"gog-spinner-overlay\">\n <div class=\"gog-spinner-overlay__content\">\n <ng-content />\n </div>\n\n @if (loading()) {\n <div class=\"gog-spinner-overlay__scrim\">\n <gog-spinner [size]=\"size()\" [ariaLabel]=\"ariaLabel()\" [variant]=\"variant()\" />\n </div>\n }\n</div>\n", styles: [":host{display:block}.gog-spinner-overlay{position:relative}.gog-spinner-overlay__content{min-height:inherit}.gog-spinner-overlay__scrim{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:var(--gog-spinner-overlay-bg);-webkit-backdrop-filter:blur(var(--gog-spinner-overlay-blur));backdrop-filter:blur(var(--gog-spinner-overlay-blur));animation:gog-spinner-overlay-fade-in var(--gog-spinner-overlay-fade-duration) var(--gog-easing)}@keyframes gog-spinner-overlay-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.gog-spinner-overlay__scrim{animation:none}}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1882
1987
|
}
|
|
1883
1988
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SpinnerOverlayComponent, decorators: [{
|
|
1884
1989
|
type: Component,
|
|
1885
1990
|
args: [{ selector: 'gog-spinner-overlay', imports: [SpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1886
1991
|
class: 'gog-spinner-overlay-host',
|
|
1887
1992
|
'[attr.aria-busy]': 'loading() ? "true" : null',
|
|
1888
|
-
}, template: "<div class=\"gog-spinner-overlay\">\
|
|
1889
|
-
}], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
1993
|
+
}, template: "<div class=\"gog-spinner-overlay\">\n <div class=\"gog-spinner-overlay__content\">\n <ng-content />\n </div>\n\n @if (loading()) {\n <div class=\"gog-spinner-overlay__scrim\">\n <gog-spinner [size]=\"size()\" [ariaLabel]=\"ariaLabel()\" [variant]=\"variant()\" />\n </div>\n }\n</div>\n", styles: [":host{display:block}.gog-spinner-overlay{position:relative}.gog-spinner-overlay__content{min-height:inherit}.gog-spinner-overlay__scrim{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:var(--gog-spinner-overlay-bg);-webkit-backdrop-filter:blur(var(--gog-spinner-overlay-blur));backdrop-filter:blur(var(--gog-spinner-overlay-blur));animation:gog-spinner-overlay-fade-in var(--gog-spinner-overlay-fade-duration) var(--gog-easing)}@keyframes gog-spinner-overlay-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.gog-spinner-overlay__scrim{animation:none}}\n"] }]
|
|
1994
|
+
}], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
1890
1995
|
|
|
1996
|
+
/** Case-insensitive, numeric-aware (`"item2" < "item10"`) — the sensible default for text. */
|
|
1997
|
+
const defaultCollator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
|
|
1998
|
+
/** Default comparator: locale-aware for strings via `Intl.Collator`, `<`/`>` otherwise. */
|
|
1999
|
+
function defaultCompare(a, b) {
|
|
2000
|
+
if (typeof a === 'string' && typeof b === 'string') {
|
|
2001
|
+
return defaultCollator.compare(a, b);
|
|
2002
|
+
}
|
|
2003
|
+
if (a === b)
|
|
2004
|
+
return 0;
|
|
2005
|
+
return a < b ? -1 : 1;
|
|
2006
|
+
}
|
|
1891
2007
|
class Column {
|
|
2008
|
+
/** Field name, or a dot-path into a nested property (e.g. `"address.city"`). */
|
|
1892
2009
|
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
1893
2010
|
header = input('', ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
|
|
1894
2011
|
sortable = input(false, ...(ngDevMode ? [{ debugName: "sortable" }] : /* istanbul ignore next */ []));
|
|
@@ -1898,8 +2015,10 @@ class Column {
|
|
|
1898
2015
|
minWidth = input('', ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
|
|
1899
2016
|
/** Max width, e.g. "300px" */
|
|
1900
2017
|
maxWidth = input('', ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
|
|
2018
|
+
/** Custom sort comparator for this column. Defaults to `defaultCompare`. */
|
|
2019
|
+
comparator = input(null, ...(ngDevMode ? [{ debugName: "comparator" }] : /* istanbul ignore next */ []));
|
|
1901
2020
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: Column, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1902
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: Column, isStandalone: true, selector: "column", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
2021
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: Column, isStandalone: true, selector: "column", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, comparator: { classPropertyName: "comparator", publicName: "comparator", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
1903
2022
|
}
|
|
1904
2023
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: Column, decorators: [{
|
|
1905
2024
|
type: Directive,
|
|
@@ -1907,7 +2026,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
1907
2026
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
1908
2027
|
selector: 'column',
|
|
1909
2028
|
}]
|
|
1910
|
-
}], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }] } });
|
|
2029
|
+
}], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], comparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "comparator", required: false }] }] } });
|
|
1911
2030
|
|
|
1912
2031
|
/**
|
|
1913
2032
|
* Marks a <ng-template> inside <gog-table> with a field name and optional type.
|
|
@@ -1920,7 +2039,9 @@ class TemplateDirective {
|
|
|
1920
2039
|
template = input.required(...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
|
|
1921
2040
|
type = input('body', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
1922
2041
|
templateRef = inject((TemplateRef));
|
|
1923
|
-
static ngTemplateContextGuard(_dir,
|
|
2042
|
+
static ngTemplateContextGuard(_dir,
|
|
2043
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- only used as a type guard
|
|
2044
|
+
ctx) {
|
|
1924
2045
|
return true;
|
|
1925
2046
|
}
|
|
1926
2047
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -1929,10 +2050,23 @@ class TemplateDirective {
|
|
|
1929
2050
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TemplateDirective, decorators: [{
|
|
1930
2051
|
type: Directive,
|
|
1931
2052
|
args: [{
|
|
2053
|
+
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
1932
2054
|
selector: '[template]',
|
|
1933
2055
|
}]
|
|
1934
2056
|
}], propDecorators: { template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
|
|
1935
2057
|
|
|
2058
|
+
/** Resolves `field` against `row`, following dot-paths (e.g. `"address.city"`). */
|
|
2059
|
+
function getByPath(row, field) {
|
|
2060
|
+
if (!field.includes('.'))
|
|
2061
|
+
return row?.[field];
|
|
2062
|
+
let value = row;
|
|
2063
|
+
for (const key of field.split('.')) {
|
|
2064
|
+
if (value == null)
|
|
2065
|
+
return undefined;
|
|
2066
|
+
value = value[key];
|
|
2067
|
+
}
|
|
2068
|
+
return value;
|
|
2069
|
+
}
|
|
1936
2070
|
class TableComponent {
|
|
1937
2071
|
value = input([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1938
2072
|
/** 0 = no pagination */
|
|
@@ -1954,34 +2088,25 @@ class TableComponent {
|
|
|
1954
2088
|
size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1955
2089
|
columns = contentChildren(Column, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
|
|
1956
2090
|
templates = contentChildren(TemplateDirective, ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
|
|
1957
|
-
currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
|
|
1958
2091
|
sortState = signal({ field: '', direction: null }, ...(ngDevMode ? [{ debugName: "sortState" }] : /* istanbul ignore next */ []));
|
|
1959
|
-
constructor() {
|
|
1960
|
-
effect(() => {
|
|
1961
|
-
this.value();
|
|
1962
|
-
this.pageSize();
|
|
1963
|
-
this.currentPage();
|
|
1964
|
-
const total = this.totalPages();
|
|
1965
|
-
if (this.currentPage() > total) {
|
|
1966
|
-
this.currentPage.set(total);
|
|
1967
|
-
}
|
|
1968
|
-
});
|
|
1969
|
-
}
|
|
1970
2092
|
sortedData = computed(() => {
|
|
1971
2093
|
const { field, direction } = this.sortState();
|
|
1972
2094
|
const rows = [...this.value()];
|
|
1973
2095
|
if (!field || !direction)
|
|
1974
2096
|
return rows;
|
|
2097
|
+
const compare = this.columns()
|
|
2098
|
+
.find((col) => col.field() === field)
|
|
2099
|
+
?.comparator() ?? defaultCompare;
|
|
1975
2100
|
return rows.sort((a, b) => {
|
|
1976
|
-
const av = a
|
|
1977
|
-
const bv = b
|
|
2101
|
+
const av = getByPath(a, field);
|
|
2102
|
+
const bv = getByPath(b, field);
|
|
1978
2103
|
if (av == null && bv == null)
|
|
1979
2104
|
return 0;
|
|
1980
2105
|
if (av == null)
|
|
1981
2106
|
return 1;
|
|
1982
2107
|
if (bv == null)
|
|
1983
2108
|
return -1;
|
|
1984
|
-
const cmp = av
|
|
2109
|
+
const cmp = compare(av, bv);
|
|
1985
2110
|
return direction === 'asc' ? cmp : -cmp;
|
|
1986
2111
|
});
|
|
1987
2112
|
}, ...(ngDevMode ? [{ debugName: "sortedData" }] : /* istanbul ignore next */ []));
|
|
@@ -1991,6 +2116,19 @@ class TableComponent {
|
|
|
1991
2116
|
return 1;
|
|
1992
2117
|
return Math.max(1, Math.ceil(this.sortedData().length / size));
|
|
1993
2118
|
}, ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
|
|
2119
|
+
/**
|
|
2120
|
+
* Resets to page 1 whenever the sort changes (a new sort re-orders the whole data set,
|
|
2121
|
+
* so whatever page the user was on no longer means anything) and clamps down to
|
|
2122
|
+
* `totalPages` whenever the data set or page size shrinks — but otherwise preserves
|
|
2123
|
+
* wherever the paginator navigated to. `gog-paginator`'s own `page` model additionally
|
|
2124
|
+
* self-clamps against `totalPages` on its own, so this only has to handle the reset case.
|
|
2125
|
+
*/
|
|
2126
|
+
currentPage = linkedSignal({ ...(ngDevMode ? { debugName: "currentPage" } : /* istanbul ignore next */ {}), source: () => ({ total: this.totalPages(), sortState: this.sortState() }),
|
|
2127
|
+
computation: (src, previous) => {
|
|
2128
|
+
if (!previous || previous.source.sortState !== src.sortState)
|
|
2129
|
+
return 1;
|
|
2130
|
+
return Math.min(Math.max(1, previous.value), src.total);
|
|
2131
|
+
} });
|
|
1994
2132
|
visibleRows = computed(() => {
|
|
1995
2133
|
const size = this.pageSize();
|
|
1996
2134
|
if (!size)
|
|
@@ -1999,21 +2137,6 @@ class TableComponent {
|
|
|
1999
2137
|
const start = (page - 1) * size;
|
|
2000
2138
|
return this.sortedData().slice(start, start + size);
|
|
2001
2139
|
}, ...(ngDevMode ? [{ debugName: "visibleRows" }] : /* istanbul ignore next */ []));
|
|
2002
|
-
pageNumbers = computed(() => {
|
|
2003
|
-
const total = this.totalPages();
|
|
2004
|
-
const current = this.currentPage();
|
|
2005
|
-
const delta = 2;
|
|
2006
|
-
const range = [];
|
|
2007
|
-
for (let i = 1; i <= total; i++) {
|
|
2008
|
-
if (i === 1 || i === total || (i >= current - delta && i <= current + delta)) {
|
|
2009
|
-
range.push(i);
|
|
2010
|
-
}
|
|
2011
|
-
else if (range[range.length - 1] !== '...') {
|
|
2012
|
-
range.push('...');
|
|
2013
|
-
}
|
|
2014
|
-
}
|
|
2015
|
-
return range;
|
|
2016
|
-
}, ...(ngDevMode ? [{ debugName: "pageNumbers" }] : /* istanbul ignore next */ []));
|
|
2017
2140
|
hasPagination = computed(() => !this.loading() && this.pageSize() > 0 && this.totalPages() > 1, ...(ngDevMode ? [{ debugName: "hasPagination" }] : /* istanbul ignore next */ []));
|
|
2018
2141
|
emptyColspan = computed(() => this.columns().length + (this.showRowNumbers() ? 1 : 0), ...(ngDevMode ? [{ debugName: "emptyColspan" }] : /* istanbul ignore next */ []));
|
|
2019
2142
|
getBodyTemplate(field) {
|
|
@@ -2036,7 +2159,6 @@ class TableComponent {
|
|
|
2036
2159
|
else {
|
|
2037
2160
|
this.sortState.set({ field: '', direction: null });
|
|
2038
2161
|
}
|
|
2039
|
-
this.currentPage.set(1);
|
|
2040
2162
|
}
|
|
2041
2163
|
getSortDirection(field) {
|
|
2042
2164
|
const s = this.sortState();
|
|
@@ -2050,26 +2172,12 @@ class TableComponent {
|
|
|
2050
2172
|
return 'descending';
|
|
2051
2173
|
return null;
|
|
2052
2174
|
}
|
|
2053
|
-
goTo(page) {
|
|
2054
|
-
if (page < 1 || page > this.totalPages())
|
|
2055
|
-
return;
|
|
2056
|
-
this.currentPage.set(page);
|
|
2057
|
-
}
|
|
2058
|
-
prev() {
|
|
2059
|
-
this.goTo(this.currentPage() - 1);
|
|
2060
|
-
}
|
|
2061
|
-
next() {
|
|
2062
|
-
this.goTo(this.currentPage() + 1);
|
|
2063
|
-
}
|
|
2064
2175
|
handleSortClick(col) {
|
|
2065
2176
|
if (!this.loading())
|
|
2066
2177
|
this.toggleSort(col);
|
|
2067
2178
|
}
|
|
2068
|
-
isNumber(val) {
|
|
2069
|
-
return typeof val === 'number';
|
|
2070
|
-
}
|
|
2071
2179
|
getCellValue(row, field) {
|
|
2072
|
-
return row
|
|
2180
|
+
return getByPath(row, field);
|
|
2073
2181
|
}
|
|
2074
2182
|
formatCellValue(row, field) {
|
|
2075
2183
|
const value = this.getCellValue(row, field);
|
|
@@ -2108,16 +2216,16 @@ class TableComponent {
|
|
|
2108
2216
|
return map;
|
|
2109
2217
|
}, ...(ngDevMode ? [{ debugName: "headerTemplateMap" }] : /* istanbul ignore next */ []));
|
|
2110
2218
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2111
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TableComponent, isStandalone: true, selector: "gog-table", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, showRowNumbers: { classPropertyName: "showRowNumbers", publicName: "showRowNumbers", isSignal: true, isRequired: false, transformFunction: null }, showTotal: { classPropertyName: "showTotal", publicName: "showTotal", isSignal: true, isRequired: false, transformFunction: null }, emptyPlaceholder: { classPropertyName: "emptyPlaceholder", publicName: "emptyPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, paginatorPosition: { classPropertyName: "paginatorPosition", publicName: "paginatorPosition", isSignal: true, isRequired: false, transformFunction: null }, totalPosition: { classPropertyName: "totalPosition", publicName: "totalPosition", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showColumnBorders: { classPropertyName: "showColumnBorders", publicName: "showColumnBorders", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"", "style.width": "\"100%\"" }, classAttribute: "gog-table-host" }, queries: [{ propertyName: "columns", predicate: Column, isSignal: true }, { propertyName: "templates", predicate: TemplateDirective, isSignal: true }], ngImport: i0, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\n <div class=\"gog-table-scroll\">\n <table\n class=\"gog-table font-body\"\n [class.gog-table--col-borders]=\"showColumnBorders()\"\n [class.gog-table--loading]=\"loading()\"\n [class.gog-table--md]=\"size() === 'md'\"\n [class.gog-table--sticky-header]=\"stickyHeader()\"\n [class.gog-table--sm]=\"size() === 'sm'\"\n >\n <colgroup>\n @if (showRowNumbers()) {\n <col class=\"gog-table__col--num\" />\n }\n @for (col of columns(); track col.field()) {\n <col\n [style.width]=\"col.width() || null\"\n [style.min-width]=\"col.minWidth() || null\"\n [style.max-width]=\"col.maxWidth() || null\"\n />\n }\n </colgroup>\n <thead>\n <tr>\n @if (showRowNumbers()) {\n <th class=\"gog-table__th gog-table__th--num font-heading\" scope=\"col\">#</th>\n }\n @for (col of columns(); track col.field()) {\n <th\n class=\"gog-table__th font-heading\"\n scope=\"col\"\n [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\n [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\n [attr.aria-sort]=\"getAriaSort(col.field())\"\n [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\n (click)=\"handleSortClick(col)\"\n (keydown.enter)=\"handleSortClick(col)\"\n (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\n >\n @if (getHeaderTemplate(col.field()); as headerTpl) {\n <ng-container *ngTemplateOutlet=\"headerTpl\" />\n } @else {\n <span class=\"gog-table__th-inner\">\n {{ col.header() || col.field() }}\n @if (col.sortable() && !loading()) {\n <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\n @if (getSortDirection(col.field()) === 'asc') {\n <gog-icon name=\"sort-up\" />\n } @else if (getSortDirection(col.field()) === 'desc') {\n <gog-icon name=\"sort-down\" />\n } @else {\n <gog-icon name=\"sort\" />\n }\n </span>\n }\n </span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @if (loading()) {\n <tr>\n <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\n <gog-spinner size=\"md\" />\n </td>\n </tr>\n } @else if (visibleRows().length === 0) {\n <tr>\n <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\n </tr>\n } @else {\n @for (row of visibleRows(); track $index; let i = $index) {\n <tr class=\"gog-table__row\">\n @if (showRowNumbers()) {\n <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\n }\n @for (col of columns(); track col.field()) {\n <td class=\"gog-table__td\">\n @if (getBodyTemplate(col.field()); as bodyTpl) {\n <ng-container\n *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, index: i }\"\n />\n } @else {\n {{ formatCellValue(row, col.field()) }}\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n\n @if (hasPagination() || showTotal()) {\n <div class=\"gog-table__footer\">\n @if (showTotal()) {\n <span class=\"gog-table__total font-body\" [style.grid-area]=\"totalGridArea()\">\n Total: {{ value().length }}\n </span>\n }\n\n @if (hasPagination()) {\n <nav\n class=\"gog-table__pagination\"\n [style.grid-area]=\"paginatorGridArea()\"\n aria-label=\"Table pagination\"\n >\n <gog-button variant=\"ghost\" size=\"sm\" [disabled]=\"currentPage() === 1\" (gogClick)=\"prev()\"\n >\u2039</gog-button\n >\n @for (page of pageNumbers(); track $index) {\n @if (isNumber(page)) {\n <gog-button\n size=\"sm\"\n [variant]=\"page === currentPage() ? 'primary' : 'ghost'\"\n (gogClick)=\"goTo(page)\"\n >{{ page }}</gog-button\n >\n } @else {\n <span class=\"gog-table__pagination-ellipsis\">\u2026</span>\n }\n }\n <gog-button\n variant=\"ghost\"\n size=\"sm\"\n [disabled]=\"currentPage() === totalPages()\"\n (gogClick)=\"next()\"\n >\u203A</gog-button\n >\n </nav>\n }\n </div>\n }\n</div>\n", styles: [".gog-table-wrapper{--gog-table-border-color: var(--accent-dim);--gog-table-surface: var(--surface-color);--gog-table-text-color: var(--text-color);--gog-table-accent-color: var(--accent-color);--gog-table-accent-bright: var(--accent-bright);--gog-table-hover-bg: var(--accent-pale);--gog-table-muted-color: var(--muted-text-color);--gog-table-focus-ring: var(--accent-color);--gog-table-pagination-gap: 4px;--gog-table-footer-gap: 8px;--gog-table-loading-opacity: .5;--gog-table-scroll-shadow: 0 8px 24px rgba(0, 0, 0, .3);display:flex;flex-direction:column;gap:12px;width:100%;overflow-anchor:none}.gog-table-scroll{width:100%;overflow-x:auto}.gog-table{width:100%;border-collapse:collapse;border:2px solid var(--gog-table-border-color);background-color:var(--gog-table-surface);color:var(--gog-table-text-color);table-layout:fixed;--tbl-th-padding-v: 10px;--tbl-td-padding-v: 10px;--tbl-padding-h: 14px;--tbl-th-font-size: var(--text-sm);--tbl-td-font-size: var(--text-md)}.gog-table--md{--tbl-th-padding-v: 6px;--tbl-td-padding-v: 6px;--tbl-th-font-size: var(--text-xs);--tbl-td-font-size: var(--text-sm)}.gog-table--sm{--tbl-th-padding-v: 3px;--tbl-td-padding-v: 3px;--tbl-th-font-size: var(--text-xs);--tbl-td-font-size: var(--text-xs)}.gog-table__col--num{width:48px}.gog-table__th{padding:var(--tbl-th-padding-v) var(--tbl-padding-h);text-align:left;font-size:var(--tbl-th-font-size);text-transform:uppercase;letter-spacing:1px;color:var(--gog-table-accent-color);background-color:var(--gog-table-surface);border-bottom:2px solid var(--gog-table-border-color);white-space:normal;overflow:hidden}.gog-table--sticky-header .gog-table__th{position:sticky;top:0;z-index:1}.gog-table__th--num{width:48px;text-align:center;color:var(--gog-table-muted-color)}.gog-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.gog-table__th--sortable:focus-visible{outline:3px solid var(--gog-table-focus-ring);outline-offset:-3px}.gog-table__th--sortable:hover,.gog-table__th--sorted{color:var(--gog-table-accent-bright)}.gog-table__th-inner{display:inline-flex;align-items:center;gap:6px;width:100%}.gog-table__sort-icon{display:inline-block;width:1em;text-align:center;font-size:.8rem;opacity:.6;flex-shrink:0}.gog-table__sort-icon gog-icon{font-size:.8rem}.gog-table__th--sorted .gog-table__sort-icon{opacity:1}.gog-table__td{padding:var(--tbl-td-padding-v) var(--tbl-padding-h);font-size:var(--tbl-td-font-size);border-bottom:1px solid var(--gog-table-border-color);vertical-align:middle;overflow-wrap:break-word;word-break:break-word;overflow:hidden}.gog-table__td--num{text-align:center;color:var(--gog-table-muted-color);font-size:var(--text-xs);font-family:var(--font-mono);width:48px}.gog-table__row:last-child .gog-table__td{border-bottom:none}.gog-table__row{transition:background-color .12s ease}.gog-table__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__empty{padding:24px 14px;text-align:center;color:var(--gog-table-muted-color);font-size:var(--text-md)}.gog-table--loading thead{opacity:var(--gog-table-loading-opacity);pointer-events:none}.gog-table__loading-cell{padding:32px 14px;text-align:center}.gog-table--col-borders .gog-table__th:not(:last-child),.gog-table--col-borders .gog-table__td:not(:last-child){border-right:1px solid var(--gog-table-border-color)}.gog-table__footer{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:\"left center right\";align-items:center;min-height:32px;gap:var(--gog-table-footer-gap)}.gog-table__total{font-size:var(--text-xs);color:var(--gog-table-muted-color);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.5px}.gog-table__total[style*=\"grid-area: right\"]{text-align:right}.gog-table__pagination{display:flex;align-items:center;gap:var(--gog-table-pagination-gap);flex-wrap:wrap}.gog-table__pagination[style*=\"grid-area: left\"]{justify-content:flex-start}.gog-table__pagination[style*=\"grid-area: center\"]{justify-content:center}.gog-table__pagination[style*=\"grid-area: right\"]{justify-content:flex-end}.gog-table__pagination-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:32px;color:var(--gog-table-muted-color);font-size:var(--text-sm);-webkit-user-select:none;user-select:none}@media(prefers-reduced-motion:reduce){.gog-table__row{transition:none}}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel"] }, { kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "debounce", "loading"], outputs: ["gogClick"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2219
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TableComponent, isStandalone: true, selector: "gog-table", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, showRowNumbers: { classPropertyName: "showRowNumbers", publicName: "showRowNumbers", isSignal: true, isRequired: false, transformFunction: null }, showTotal: { classPropertyName: "showTotal", publicName: "showTotal", isSignal: true, isRequired: false, transformFunction: null }, emptyPlaceholder: { classPropertyName: "emptyPlaceholder", publicName: "emptyPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, paginatorPosition: { classPropertyName: "paginatorPosition", publicName: "paginatorPosition", isSignal: true, isRequired: false, transformFunction: null }, totalPosition: { classPropertyName: "totalPosition", publicName: "totalPosition", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showColumnBorders: { classPropertyName: "showColumnBorders", publicName: "showColumnBorders", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"", "style.width": "\"100%\"" }, classAttribute: "gog-table-host" }, queries: [{ propertyName: "columns", predicate: Column, isSignal: true }, { propertyName: "templates", predicate: TemplateDirective, isSignal: true }], ngImport: i0, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\n <div class=\"gog-table-scroll\">\n <table\n class=\"gog-table\"\n [class.gog-table--col-borders]=\"showColumnBorders()\"\n [class.gog-table--loading]=\"loading()\"\n [class.gog-table--slg]=\"size() === 'slg'\"\n [class.gog-table--md]=\"size() === 'md'\"\n [class.gog-table--sticky-header]=\"stickyHeader()\"\n [class.gog-table--sm]=\"size() === 'sm'\"\n [class.gog-table--xsm]=\"size() === 'xsm'\"\n >\n <colgroup>\n @if (showRowNumbers()) {\n <col class=\"gog-table__col--num\" />\n }\n @for (col of columns(); track col.field()) {\n <col\n [style.width]=\"col.width() || null\"\n [style.min-width]=\"col.minWidth() || null\"\n [style.max-width]=\"col.maxWidth() || null\"\n />\n }\n </colgroup>\n <thead>\n <tr>\n @if (showRowNumbers()) {\n <th class=\"gog-table__th gog-table__th--num\" scope=\"col\">#</th>\n }\n @for (col of columns(); track col.field()) {\n <th\n class=\"gog-table__th\"\n scope=\"col\"\n [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\n [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\n [attr.aria-sort]=\"getAriaSort(col.field())\"\n [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\n (click)=\"handleSortClick(col)\"\n (keydown.enter)=\"handleSortClick(col)\"\n (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\n >\n @if (getHeaderTemplate(col.field()); as headerTpl) {\n <ng-container *ngTemplateOutlet=\"headerTpl\" />\n } @else {\n <span class=\"gog-table__th-inner\">\n {{ col.header() || col.field() }}\n @if (col.sortable() && !loading()) {\n <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\n @if (getSortDirection(col.field()) === 'asc') {\n <gog-icon name=\"sort-up\" />\n } @else if (getSortDirection(col.field()) === 'desc') {\n <gog-icon name=\"sort-down\" />\n } @else {\n <gog-icon name=\"sort\" />\n }\n </span>\n }\n </span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @if (loading()) {\n <tr>\n <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\n <gog-spinner size=\"md\" />\n </td>\n </tr>\n } @else if (visibleRows().length === 0) {\n <tr>\n <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\n </tr>\n } @else {\n @for (row of visibleRows(); track $index; let i = $index) {\n <tr class=\"gog-table__row\">\n @if (showRowNumbers()) {\n <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\n }\n @for (col of columns(); track col.field()) {\n <td class=\"gog-table__td\">\n @if (getBodyTemplate(col.field()); as bodyTpl) {\n <ng-container\n *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, index: i }\"\n />\n } @else {\n {{ formatCellValue(row, col.field()) }}\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n\n @if (hasPagination() || showTotal()) {\n <div class=\"gog-table__footer\">\n @if (showTotal()) {\n <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\n Total: {{ value().length }}\n </span>\n }\n\n @if (hasPagination()) {\n <gog-paginator\n class=\"gog-table__pagination\"\n [style.grid-area]=\"paginatorGridArea()\"\n [(page)]=\"currentPage\"\n [totalPages]=\"totalPages()\"\n rangeMode=\"ellipsis\"\n size=\"sm\"\n ariaLabel=\"Table pagination\"\n />\n }\n </div>\n }\n</div>\n", styles: [".gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%;overflow-x:auto}.gog-table{width:100%;border-collapse:collapse;border:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);background-color:var(--gog-table-surface);color:var(--gog-table-text-color);font-family:var(--gog-table-font-family);table-layout:fixed}.gog-table--slg{--gog-table-size-th-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-td-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-th-font-size: var(--gog-table-slg-th-font-size);--gog-table-size-td-font-size: var(--gog-table-slg-td-font-size)}.gog-table--md{--gog-table-size-th-padding-v: var(--gog-table-md-padding-v);--gog-table-size-td-padding-v: var(--gog-table-md-padding-v);--gog-table-size-th-font-size: var(--gog-table-md-th-font-size);--gog-table-size-td-font-size: var(--gog-table-md-td-font-size)}.gog-table--sm{--gog-table-size-th-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-th-font-size: var(--gog-table-sm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-sm-td-font-size)}.gog-table--xsm{--gog-table-size-th-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-th-font-size: var(--gog-table-xsm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-xsm-td-font-size)}.gog-table__col--num{width:var(--gog-table-num-col-width)}.gog-table__th{padding:var(--gog-table-th-padding-v, var(--gog-table-size-th-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);text-align:left;font-family:var(--gog-table-header-font-family);font-size:var(--gog-table-th-font-size, var(--gog-table-size-th-font-size, var(--gog-table-lg-th-font-size)));text-transform:var(--gog-table-header-text-transform);letter-spacing:var(--gog-table-header-letter-spacing);color:var(--gog-table-accent-color);background-color:var(--gog-table-surface);border-bottom:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);white-space:normal;overflow:hidden}.gog-table--sticky-header .gog-table__th{position:sticky;top:0;z-index:1}.gog-table__th--num{width:var(--gog-table-num-col-width);text-align:center;color:var(--gog-table-muted-color)}.gog-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.gog-table__th--sortable:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__th--sortable:hover,.gog-table__th--sorted{color:var(--gog-table-accent-bright)}.gog-table__th-inner{display:inline-flex;align-items:center;gap:var(--gog-table-th-inner-gap);width:100%}.gog-table__sort-icon{display:inline-block;width:var(--gog-table-sort-icon-width);text-align:center;font-size:var(--gog-table-sort-icon-size);opacity:var(--gog-table-sort-icon-opacity);flex-shrink:0}.gog-table__th--sorted .gog-table__sort-icon{opacity:1}.gog-table__td{padding:var(--gog-table-td-padding-v, var(--gog-table-size-td-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);font-size:var(--gog-table-td-font-size, var(--gog-table-size-td-font-size, var(--gog-table-lg-td-font-size)));border-bottom:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color);vertical-align:middle;overflow-wrap:break-word;word-break:break-word;overflow:hidden}.gog-table__td--num{text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-num-font-size);font-family:var(--gog-table-numeric-font-family);width:var(--gog-table-num-col-width)}.gog-table__row:last-child .gog-table__td{border-bottom:none}.gog-table__row{transition:background-color var(--gog-table-row-transition-duration) var(--gog-easing)}.gog-table__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__empty{padding:var(--gog-table-empty-padding);text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-empty-font-size)}.gog-table--loading thead{opacity:var(--gog-table-loading-opacity);pointer-events:none}.gog-table__loading-cell{padding:var(--gog-table-loading-padding);text-align:center}.gog-table--col-borders .gog-table__th:not(:last-child),.gog-table--col-borders .gog-table__td:not(:last-child){border-right:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color)}.gog-table__footer{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:\"left center right\";align-items:center;min-height:var(--gog-table-footer-min-height);gap:var(--gog-table-footer-gap)}.gog-table__total{font-size:var(--gog-table-total-font-size);color:var(--gog-table-muted-color);font-family:var(--gog-table-numeric-font-family);text-transform:var(--gog-table-total-text-transform);letter-spacing:var(--gog-table-total-letter-spacing)}.gog-table__total[style*=\"grid-area: right\"]{text-align:right}.gog-table__pagination[style*=\"grid-area: left\"]{justify-content:flex-start}.gog-table__pagination[style*=\"grid-area: center\"]{justify-content:center}.gog-table__pagination[style*=\"grid-area: right\"]{justify-content:flex-end}@media(prefers-reduced-motion:reduce){.gog-table__row{transition:none}}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }, { kind: "component", type: PaginatorComponent, selector: "gog-paginator", inputs: ["page", "totalPages", "rangeMode", "visiblePages", "showFirstPage", "showLastPage", "siblingCount", "size", "disabled", "ariaLabel"], outputs: ["pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2112
2220
|
}
|
|
2113
2221
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, decorators: [{
|
|
2114
2222
|
type: Component,
|
|
2115
|
-
args: [{ selector: 'gog-table', imports: [SpinnerComponent,
|
|
2223
|
+
args: [{ selector: 'gog-table', imports: [SpinnerComponent, PaginatorComponent, NgTemplateOutlet, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2116
2224
|
class: 'gog-table-host',
|
|
2117
2225
|
'[style.display]': '"block"',
|
|
2118
2226
|
'[style.width]': '"100%"',
|
|
2119
|
-
}, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\n <div class=\"gog-table-scroll\">\n <table\n class=\"gog-table
|
|
2120
|
-
}],
|
|
2227
|
+
}, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\n <div class=\"gog-table-scroll\">\n <table\n class=\"gog-table\"\n [class.gog-table--col-borders]=\"showColumnBorders()\"\n [class.gog-table--loading]=\"loading()\"\n [class.gog-table--slg]=\"size() === 'slg'\"\n [class.gog-table--md]=\"size() === 'md'\"\n [class.gog-table--sticky-header]=\"stickyHeader()\"\n [class.gog-table--sm]=\"size() === 'sm'\"\n [class.gog-table--xsm]=\"size() === 'xsm'\"\n >\n <colgroup>\n @if (showRowNumbers()) {\n <col class=\"gog-table__col--num\" />\n }\n @for (col of columns(); track col.field()) {\n <col\n [style.width]=\"col.width() || null\"\n [style.min-width]=\"col.minWidth() || null\"\n [style.max-width]=\"col.maxWidth() || null\"\n />\n }\n </colgroup>\n <thead>\n <tr>\n @if (showRowNumbers()) {\n <th class=\"gog-table__th gog-table__th--num\" scope=\"col\">#</th>\n }\n @for (col of columns(); track col.field()) {\n <th\n class=\"gog-table__th\"\n scope=\"col\"\n [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\n [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\n [attr.aria-sort]=\"getAriaSort(col.field())\"\n [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\n (click)=\"handleSortClick(col)\"\n (keydown.enter)=\"handleSortClick(col)\"\n (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\n >\n @if (getHeaderTemplate(col.field()); as headerTpl) {\n <ng-container *ngTemplateOutlet=\"headerTpl\" />\n } @else {\n <span class=\"gog-table__th-inner\">\n {{ col.header() || col.field() }}\n @if (col.sortable() && !loading()) {\n <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\n @if (getSortDirection(col.field()) === 'asc') {\n <gog-icon name=\"sort-up\" />\n } @else if (getSortDirection(col.field()) === 'desc') {\n <gog-icon name=\"sort-down\" />\n } @else {\n <gog-icon name=\"sort\" />\n }\n </span>\n }\n </span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @if (loading()) {\n <tr>\n <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\n <gog-spinner size=\"md\" />\n </td>\n </tr>\n } @else if (visibleRows().length === 0) {\n <tr>\n <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\n </tr>\n } @else {\n @for (row of visibleRows(); track $index; let i = $index) {\n <tr class=\"gog-table__row\">\n @if (showRowNumbers()) {\n <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\n }\n @for (col of columns(); track col.field()) {\n <td class=\"gog-table__td\">\n @if (getBodyTemplate(col.field()); as bodyTpl) {\n <ng-container\n *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, index: i }\"\n />\n } @else {\n {{ formatCellValue(row, col.field()) }}\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n\n @if (hasPagination() || showTotal()) {\n <div class=\"gog-table__footer\">\n @if (showTotal()) {\n <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\n Total: {{ value().length }}\n </span>\n }\n\n @if (hasPagination()) {\n <gog-paginator\n class=\"gog-table__pagination\"\n [style.grid-area]=\"paginatorGridArea()\"\n [(page)]=\"currentPage\"\n [totalPages]=\"totalPages()\"\n rangeMode=\"ellipsis\"\n size=\"sm\"\n ariaLabel=\"Table pagination\"\n />\n }\n </div>\n }\n</div>\n", styles: [".gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%;overflow-x:auto}.gog-table{width:100%;border-collapse:collapse;border:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);background-color:var(--gog-table-surface);color:var(--gog-table-text-color);font-family:var(--gog-table-font-family);table-layout:fixed}.gog-table--slg{--gog-table-size-th-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-td-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-th-font-size: var(--gog-table-slg-th-font-size);--gog-table-size-td-font-size: var(--gog-table-slg-td-font-size)}.gog-table--md{--gog-table-size-th-padding-v: var(--gog-table-md-padding-v);--gog-table-size-td-padding-v: var(--gog-table-md-padding-v);--gog-table-size-th-font-size: var(--gog-table-md-th-font-size);--gog-table-size-td-font-size: var(--gog-table-md-td-font-size)}.gog-table--sm{--gog-table-size-th-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-th-font-size: var(--gog-table-sm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-sm-td-font-size)}.gog-table--xsm{--gog-table-size-th-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-th-font-size: var(--gog-table-xsm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-xsm-td-font-size)}.gog-table__col--num{width:var(--gog-table-num-col-width)}.gog-table__th{padding:var(--gog-table-th-padding-v, var(--gog-table-size-th-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);text-align:left;font-family:var(--gog-table-header-font-family);font-size:var(--gog-table-th-font-size, var(--gog-table-size-th-font-size, var(--gog-table-lg-th-font-size)));text-transform:var(--gog-table-header-text-transform);letter-spacing:var(--gog-table-header-letter-spacing);color:var(--gog-table-accent-color);background-color:var(--gog-table-surface);border-bottom:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);white-space:normal;overflow:hidden}.gog-table--sticky-header .gog-table__th{position:sticky;top:0;z-index:1}.gog-table__th--num{width:var(--gog-table-num-col-width);text-align:center;color:var(--gog-table-muted-color)}.gog-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.gog-table__th--sortable:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__th--sortable:hover,.gog-table__th--sorted{color:var(--gog-table-accent-bright)}.gog-table__th-inner{display:inline-flex;align-items:center;gap:var(--gog-table-th-inner-gap);width:100%}.gog-table__sort-icon{display:inline-block;width:var(--gog-table-sort-icon-width);text-align:center;font-size:var(--gog-table-sort-icon-size);opacity:var(--gog-table-sort-icon-opacity);flex-shrink:0}.gog-table__th--sorted .gog-table__sort-icon{opacity:1}.gog-table__td{padding:var(--gog-table-td-padding-v, var(--gog-table-size-td-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);font-size:var(--gog-table-td-font-size, var(--gog-table-size-td-font-size, var(--gog-table-lg-td-font-size)));border-bottom:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color);vertical-align:middle;overflow-wrap:break-word;word-break:break-word;overflow:hidden}.gog-table__td--num{text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-num-font-size);font-family:var(--gog-table-numeric-font-family);width:var(--gog-table-num-col-width)}.gog-table__row:last-child .gog-table__td{border-bottom:none}.gog-table__row{transition:background-color var(--gog-table-row-transition-duration) var(--gog-easing)}.gog-table__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__empty{padding:var(--gog-table-empty-padding);text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-empty-font-size)}.gog-table--loading thead{opacity:var(--gog-table-loading-opacity);pointer-events:none}.gog-table__loading-cell{padding:var(--gog-table-loading-padding);text-align:center}.gog-table--col-borders .gog-table__th:not(:last-child),.gog-table--col-borders .gog-table__td:not(:last-child){border-right:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color)}.gog-table__footer{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:\"left center right\";align-items:center;min-height:var(--gog-table-footer-min-height);gap:var(--gog-table-footer-gap)}.gog-table__total{font-size:var(--gog-table-total-font-size);color:var(--gog-table-muted-color);font-family:var(--gog-table-numeric-font-family);text-transform:var(--gog-table-total-text-transform);letter-spacing:var(--gog-table-total-letter-spacing)}.gog-table__total[style*=\"grid-area: right\"]{text-align:right}.gog-table__pagination[style*=\"grid-area: left\"]{justify-content:flex-start}.gog-table__pagination[style*=\"grid-area: center\"]{justify-content:center}.gog-table__pagination[style*=\"grid-area: right\"]{justify-content:flex-end}@media(prefers-reduced-motion:reduce){.gog-table__row{transition:none}}\n"] }]
|
|
2228
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], showRowNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRowNumbers", required: false }] }], showTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTotal", required: false }] }], emptyPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyPlaceholder", required: false }] }], paginatorPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginatorPosition", required: false }] }], totalPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPosition", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showColumnBorders: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnBorders", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Column), { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TemplateDirective), { isSignal: true }] }] } });
|
|
2121
2229
|
|
|
2122
2230
|
class ThemeService {
|
|
2123
2231
|
document = inject(DOCUMENT);
|
|
@@ -2155,5 +2263,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2155
2263
|
* Generated bundle index. Do not edit.
|
|
2156
2264
|
*/
|
|
2157
2265
|
|
|
2158
|
-
export { AccordionComponent, ButtonComponent, CheckboxComponent, ChipComponent, Column, ConfirmationDialogComponent, DIALOG_DATA, DIALOG_REF, DialogComponent, DialogService, GogAccordionChevronDirective, GogAccordionContentDirective, GogAccordionHeaderDirective,
|
|
2266
|
+
export { AccordionComponent, ButtonComponent, CheckboxComponent, ChipComponent, Column, ConfirmationDialogComponent, DIALOG_DATA, DIALOG_REF, DialogComponent, DialogService, GogAccordionChevronDirective, GogAccordionContentDirective, GogAccordionHeaderDirective, GogDropdownBase, ICON_DEFS, IconComponent, InputfieldComponent, MultiselectComponent, PaginatorComponent, SelectComponent, SkeletonComponent, SliderComponent, SpinnerComponent, SpinnerOverlayComponent, TableComponent, TagComponent, TemplateDirective, ThemeService, ToastComponent, ToastContainerComponent, ToastService, defaultCompare };
|
|
2159
2267
|
//# sourceMappingURL=guildofgleks-ui.mjs.map
|