@guildofgleks/ui 21.6.1 → 21.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +135 -55
- package/CHANGELOG.md +229 -0
- package/README.md +81 -15
- package/TOKENS.md +9 -9
- package/fesm2022/guildofgleks-ui.mjs +188 -1322
- package/fesm2022/guildofgleks-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/button.css +11 -32
- package/styles/presets/bevel.css +82 -0
- package/styles/presets/ledger.css +66 -0
- package/styles/presets/material.css +111 -0
- package/styles/presets/one-dark.css +27 -5
- package/styles/presets/one-light.css +17 -4
- package/styles/presets/parchment.css +63 -0
- package/styles/presets/parchment.fonts.css +29 -0
- package/styles/presets/primeng.css +121 -0
- package/styles/presets/slate.css +26 -8
- package/styles/presets/terminal.css +72 -0
- package/styles/presets/terminal.fonts.css +26 -0
- package/styles/theme.css +696 -592
- package/types/guildofgleks-ui.d.ts +35 -26
|
@@ -570,7 +570,7 @@ class GogButtonDirective {
|
|
|
570
570
|
variantClass = computed(() => `gog-btn--${this.variant()}`, ...(ngDevMode ? [{ debugName: "variantClass" }] : /* istanbul ignore next */ []));
|
|
571
571
|
/**
|
|
572
572
|
* Unlike `gog-button`, this emits a class for `'md'` too. The component can leave the default
|
|
573
|
-
* size unclassed because its own stylesheet bottoms out at `--gog-
|
|
573
|
+
* size unclassed because its own stylesheet bottoms out at `--gog-button-md-*`; here the class is
|
|
574
574
|
* also what a consumer reads in devtools to see which size is applied, and a silently absent
|
|
575
575
|
* one reads as "no size resolved".
|
|
576
576
|
*/
|
|
@@ -1074,7 +1074,7 @@ class AccordionComponent {
|
|
|
1074
1074
|
handleRovingFocusKeydown(event, headers);
|
|
1075
1075
|
}
|
|
1076
1076
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1077
|
-
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 }, ripple: { classPropertyName: "ripple", publicName: "ripple", 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 }, skeletonCount: { classPropertyName: "skeletonCount", publicName: "skeletonCount", 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: { properties: { "attr.aria-busy": "loading() ? \"true\" : null" }, 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--loading]=\"loading()\"\r\n class=\"gog-accordion gog-contained-layout\"\r\n [class]=\"sizeClass()\"\r\n>\r\n @if (loading()) {\r\n @for (row of skeletonRows(); track row) {\r\n <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\r\n <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\r\n <gog-skeleton shape=\"text\" [size]=\"size()\" [width]=\"skeletonWidth(row)\" />\r\n <!--\r\n The chevron gets a placeholder too, so the row's silhouette is the one that arrives.\r\n Without it the right-hand side is empty while loading and the chevron appears out of\r\n nowhere \u2014 the shape-matching placeholder failing at the one thing it is for.\r\n -->\r\n @if (showChevron()) {\r\n <span class=\"gog-accordion__chevron\" aria-hidden=\"true\">\r\n <!--\r\n `width=\"100%\"` rather than `[size]`: a skeleton's `size` is its *text* line\r\n height, so a circle given one came out 18px wide and 64px tall and streaked down\r\n the row. A circle takes its diameter from `width` and keeps itself round, so\r\n filling the chevron's own box is what matches it.\r\n -->\r\n <gog-skeleton shape=\"circle\" width=\"100%\" />\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n }\r\n } @else {\r\n @for (item of items(); track item.id) {\r\n <div\r\n class=\"gog-accordion__item\"\r\n [class.gog-accordion__item--open]=\"isOpen(item.id)\"\r\n [class.gog-accordion__item--disabled]=\"item.disabled\"\r\n >\r\n <ng-template #headerButton>\r\n <button\r\n [id]=\"uid + '-btn-' + item.id\"\r\n class=\"gog-accordion__header\"\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]=\"uid + '-body-' + item.id\"\r\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n [disabled]=\"item.disabled || null\"\r\n (click)=\"toggle(item)\"\r\n (keydown)=\"onHeaderKeydown($event)\"\r\n type=\"button\"\r\n gogRipple\r\n [rippleDisabled]=\"!rippleEnabled()\"\r\n >\r\n <span class=\"gog-accordion__header-content\">\r\n @if (headerTpl(); as tpl) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n tpl.templateRef;\r\n context: { $implicit: item, open: isOpen(item.id) }\r\n \"\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\r\n class=\"gog-accordion__chevron\"\r\n [class.gog-accordion__chevron--auto-rotate]=\"!chevronTpl()\"\r\n aria-hidden=\"true\"\r\n >\r\n @if (chevronTpl(); as tpl) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n tpl.templateRef;\r\n context: { $implicit: item, open: isOpen(item.id) }\r\n \"\r\n />\r\n } @else {\r\n <gog-icon name=\"chevron-down\" />\r\n }\r\n </span>\r\n }\r\n </button>\r\n </ng-template>\r\n\r\n @if (headingLevel(); as level) {\r\n <div role=\"heading\" [attr.aria-level]=\"level\" class=\"gog-accordion__heading\">\r\n <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n </div>\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n }\r\n\r\n <div\r\n [id]=\"uid + '-body-' + item.id\"\r\n class=\"gog-accordion__body\"\r\n [class.gog-accordion__body--open]=\"isOpen(item.id)\"\r\n role=\"region\"\r\n [attr.aria-labelledby]=\"uid + '-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: ["@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:start;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:color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron{color:var(--gog-accordion-accent-color)}.gog-accordion__chevron--auto-rotate{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--auto-rotate{transform:rotate(180deg)}.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}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "component", type: SkeletonComponent, selector: "gog-skeleton", inputs: ["shape", "size", "animation", "width", "height", "lines", "rounded", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1077
|
+
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 }, ripple: { classPropertyName: "ripple", publicName: "ripple", 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 }, skeletonCount: { classPropertyName: "skeletonCount", publicName: "skeletonCount", 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: { properties: { "attr.aria-busy": "loading() ? \"true\" : null" }, 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--loading]=\"loading()\"\r\n class=\"gog-accordion gog-contained-layout\"\r\n [class]=\"sizeClass()\"\r\n>\r\n @if (loading()) {\r\n @for (row of skeletonRows(); track row) {\r\n <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\r\n <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\r\n <gog-skeleton shape=\"text\" [size]=\"size()\" [width]=\"skeletonWidth(row)\" />\r\n <!--\r\n The chevron gets a placeholder too, so the row's silhouette is the one that arrives.\r\n Without it the right-hand side is empty while loading and the chevron appears out of\r\n nowhere \u2014 the shape-matching placeholder failing at the one thing it is for.\r\n -->\r\n @if (showChevron()) {\r\n <span class=\"gog-accordion__chevron\" aria-hidden=\"true\">\r\n <!--\r\n `width=\"100%\"` rather than `[size]`: a skeleton's `size` is its *text* line\r\n height, so a circle given one came out 18px wide and 64px tall and streaked down\r\n the row. A circle takes its diameter from `width` and keeps itself round, so\r\n filling the chevron's own box is what matches it.\r\n -->\r\n <gog-skeleton shape=\"circle\" width=\"100%\" />\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n }\r\n } @else {\r\n @for (item of items(); track item.id) {\r\n <div\r\n class=\"gog-accordion__item\"\r\n [class.gog-accordion__item--open]=\"isOpen(item.id)\"\r\n [class.gog-accordion__item--disabled]=\"item.disabled\"\r\n >\r\n <ng-template #headerButton>\r\n <button\r\n [id]=\"uid + '-btn-' + item.id\"\r\n class=\"gog-accordion__header\"\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]=\"uid + '-body-' + item.id\"\r\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n [disabled]=\"item.disabled || null\"\r\n (click)=\"toggle(item)\"\r\n (keydown)=\"onHeaderKeydown($event)\"\r\n type=\"button\"\r\n gogRipple\r\n [rippleDisabled]=\"!rippleEnabled()\"\r\n >\r\n <span class=\"gog-accordion__header-content\">\r\n @if (headerTpl(); as tpl) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n tpl.templateRef;\r\n context: { $implicit: item, open: isOpen(item.id) }\r\n \"\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\r\n class=\"gog-accordion__chevron\"\r\n [class.gog-accordion__chevron--auto-rotate]=\"!chevronTpl()\"\r\n aria-hidden=\"true\"\r\n >\r\n @if (chevronTpl(); as tpl) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n tpl.templateRef;\r\n context: { $implicit: item, open: isOpen(item.id) }\r\n \"\r\n />\r\n } @else {\r\n <gog-icon name=\"chevron-down\" />\r\n }\r\n </span>\r\n }\r\n </button>\r\n </ng-template>\r\n\r\n @if (headingLevel(); as level) {\r\n <div role=\"heading\" [attr.aria-level]=\"level\" class=\"gog-accordion__heading\">\r\n <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n </div>\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n }\r\n\r\n <div\r\n [id]=\"uid + '-body-' + item.id\"\r\n class=\"gog-accordion__body\"\r\n [class.gog-accordion__body--open]=\"isOpen(item.id)\"\r\n role=\"region\"\r\n [attr.aria-labelledby]=\"uid + '-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: ["@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:start;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:color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron{color:var(--gog-accordion-accent-color)}.gog-accordion__chevron--auto-rotate{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--auto-rotate{transform:rotate(180deg)}.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-skeleton-base: var(--gog-border-color)}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "component", type: SkeletonComponent, selector: "gog-skeleton", inputs: ["shape", "size", "animation", "width", "height", "lines", "rounded", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1078
1078
|
}
|
|
1079
1079
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
1080
1080
|
type: Component,
|
|
@@ -1087,7 +1087,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
1087
1087
|
* already do this; see the loading-state rule in `api-design.instructions.md`.
|
|
1088
1088
|
*/
|
|
1089
1089
|
'[attr.aria-busy]': 'loading() ? "true" : null',
|
|
1090
|
-
}, template: "<div\r\n [class.gog-accordion--loading]=\"loading()\"\r\n class=\"gog-accordion gog-contained-layout\"\r\n [class]=\"sizeClass()\"\r\n>\r\n @if (loading()) {\r\n @for (row of skeletonRows(); track row) {\r\n <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\r\n <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\r\n <gog-skeleton shape=\"text\" [size]=\"size()\" [width]=\"skeletonWidth(row)\" />\r\n <!--\r\n The chevron gets a placeholder too, so the row's silhouette is the one that arrives.\r\n Without it the right-hand side is empty while loading and the chevron appears out of\r\n nowhere \u2014 the shape-matching placeholder failing at the one thing it is for.\r\n -->\r\n @if (showChevron()) {\r\n <span class=\"gog-accordion__chevron\" aria-hidden=\"true\">\r\n <!--\r\n `width=\"100%\"` rather than `[size]`: a skeleton's `size` is its *text* line\r\n height, so a circle given one came out 18px wide and 64px tall and streaked down\r\n the row. A circle takes its diameter from `width` and keeps itself round, so\r\n filling the chevron's own box is what matches it.\r\n -->\r\n <gog-skeleton shape=\"circle\" width=\"100%\" />\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n }\r\n } @else {\r\n @for (item of items(); track item.id) {\r\n <div\r\n class=\"gog-accordion__item\"\r\n [class.gog-accordion__item--open]=\"isOpen(item.id)\"\r\n [class.gog-accordion__item--disabled]=\"item.disabled\"\r\n >\r\n <ng-template #headerButton>\r\n <button\r\n [id]=\"uid + '-btn-' + item.id\"\r\n class=\"gog-accordion__header\"\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]=\"uid + '-body-' + item.id\"\r\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n [disabled]=\"item.disabled || null\"\r\n (click)=\"toggle(item)\"\r\n (keydown)=\"onHeaderKeydown($event)\"\r\n type=\"button\"\r\n gogRipple\r\n [rippleDisabled]=\"!rippleEnabled()\"\r\n >\r\n <span class=\"gog-accordion__header-content\">\r\n @if (headerTpl(); as tpl) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n tpl.templateRef;\r\n context: { $implicit: item, open: isOpen(item.id) }\r\n \"\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\r\n class=\"gog-accordion__chevron\"\r\n [class.gog-accordion__chevron--auto-rotate]=\"!chevronTpl()\"\r\n aria-hidden=\"true\"\r\n >\r\n @if (chevronTpl(); as tpl) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n tpl.templateRef;\r\n context: { $implicit: item, open: isOpen(item.id) }\r\n \"\r\n />\r\n } @else {\r\n <gog-icon name=\"chevron-down\" />\r\n }\r\n </span>\r\n }\r\n </button>\r\n </ng-template>\r\n\r\n @if (headingLevel(); as level) {\r\n <div role=\"heading\" [attr.aria-level]=\"level\" class=\"gog-accordion__heading\">\r\n <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n </div>\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n }\r\n\r\n <div\r\n [id]=\"uid + '-body-' + item.id\"\r\n class=\"gog-accordion__body\"\r\n [class.gog-accordion__body--open]=\"isOpen(item.id)\"\r\n role=\"region\"\r\n [attr.aria-labelledby]=\"uid + '-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: ["@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:start;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:color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron{color:var(--gog-accordion-accent-color)}.gog-accordion__chevron--auto-rotate{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--auto-rotate{transform:rotate(180deg)}.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}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}}\n"] }]
|
|
1090
|
+
}, template: "<div\r\n [class.gog-accordion--loading]=\"loading()\"\r\n class=\"gog-accordion gog-contained-layout\"\r\n [class]=\"sizeClass()\"\r\n>\r\n @if (loading()) {\r\n @for (row of skeletonRows(); track row) {\r\n <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\r\n <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\r\n <gog-skeleton shape=\"text\" [size]=\"size()\" [width]=\"skeletonWidth(row)\" />\r\n <!--\r\n The chevron gets a placeholder too, so the row's silhouette is the one that arrives.\r\n Without it the right-hand side is empty while loading and the chevron appears out of\r\n nowhere \u2014 the shape-matching placeholder failing at the one thing it is for.\r\n -->\r\n @if (showChevron()) {\r\n <span class=\"gog-accordion__chevron\" aria-hidden=\"true\">\r\n <!--\r\n `width=\"100%\"` rather than `[size]`: a skeleton's `size` is its *text* line\r\n height, so a circle given one came out 18px wide and 64px tall and streaked down\r\n the row. A circle takes its diameter from `width` and keeps itself round, so\r\n filling the chevron's own box is what matches it.\r\n -->\r\n <gog-skeleton shape=\"circle\" width=\"100%\" />\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n }\r\n } @else {\r\n @for (item of items(); track item.id) {\r\n <div\r\n class=\"gog-accordion__item\"\r\n [class.gog-accordion__item--open]=\"isOpen(item.id)\"\r\n [class.gog-accordion__item--disabled]=\"item.disabled\"\r\n >\r\n <ng-template #headerButton>\r\n <button\r\n [id]=\"uid + '-btn-' + item.id\"\r\n class=\"gog-accordion__header\"\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]=\"uid + '-body-' + item.id\"\r\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n [disabled]=\"item.disabled || null\"\r\n (click)=\"toggle(item)\"\r\n (keydown)=\"onHeaderKeydown($event)\"\r\n type=\"button\"\r\n gogRipple\r\n [rippleDisabled]=\"!rippleEnabled()\"\r\n >\r\n <span class=\"gog-accordion__header-content\">\r\n @if (headerTpl(); as tpl) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n tpl.templateRef;\r\n context: { $implicit: item, open: isOpen(item.id) }\r\n \"\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\r\n class=\"gog-accordion__chevron\"\r\n [class.gog-accordion__chevron--auto-rotate]=\"!chevronTpl()\"\r\n aria-hidden=\"true\"\r\n >\r\n @if (chevronTpl(); as tpl) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n tpl.templateRef;\r\n context: { $implicit: item, open: isOpen(item.id) }\r\n \"\r\n />\r\n } @else {\r\n <gog-icon name=\"chevron-down\" />\r\n }\r\n </span>\r\n }\r\n </button>\r\n </ng-template>\r\n\r\n @if (headingLevel(); as level) {\r\n <div role=\"heading\" [attr.aria-level]=\"level\" class=\"gog-accordion__heading\">\r\n <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n </div>\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n }\r\n\r\n <div\r\n [id]=\"uid + '-body-' + item.id\"\r\n class=\"gog-accordion__body\"\r\n [class.gog-accordion__body--open]=\"isOpen(item.id)\"\r\n role=\"region\"\r\n [attr.aria-labelledby]=\"uid + '-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: ["@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:start;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:color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron{color:var(--gog-accordion-accent-color)}.gog-accordion__chevron--auto-rotate{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--auto-rotate{transform:rotate(180deg)}.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-skeleton-base: var(--gog-border-color)}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}}\n"] }]
|
|
1091
1091
|
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ripple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ripple", 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 }] }], skeletonCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonCount", 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 }] }] } });
|
|
1092
1092
|
|
|
1093
1093
|
/**
|
|
@@ -2237,6 +2237,91 @@ function readPx$1(raw, fallback) {
|
|
|
2237
2237
|
return Number.isFinite(parsed) ? parsed : fallback;
|
|
2238
2238
|
}
|
|
2239
2239
|
|
|
2240
|
+
/**
|
|
2241
|
+
* Reading a `--gog-*` token's value from TypeScript, safely.
|
|
2242
|
+
*
|
|
2243
|
+
* **The trap these exist for.** `getComputedStyle(el).getPropertyValue('--x')` returns a custom
|
|
2244
|
+
* property's *specified* value, not a used one. A token declared
|
|
2245
|
+
* `calc(10px * var(--gog-density))` comes back as that whole string, and `Number.parseFloat` on
|
|
2246
|
+
* it returns `NaN` — which every caller in this library turned into its fallback, silently. No
|
|
2247
|
+
* error, no failing test, just a component quietly using the wrong number.
|
|
2248
|
+
*
|
|
2249
|
+
* That is not hypothetical. 21.7.0's density scale (`docs/themes.md` iteration 6) made 178
|
|
2250
|
+
* tokens `calc(<n>px * var(--gog-density))`; none of the three tokens read from TypeScript were
|
|
2251
|
+
* among them, but nothing stopped the next one from being. And a **consumer** can write
|
|
2252
|
+
* `--gog-scroll-thumb-min-size: calc(2rem + 4px)` in their own theme at any time, which no
|
|
2253
|
+
* repo-side check could ever catch.
|
|
2254
|
+
*
|
|
2255
|
+
* So these resolve rather than parse: the fast path still handles a plain `12px`, and anything
|
|
2256
|
+
* else is handed to the browser on a throwaway element, which also gets `rem`, `em`, `%` and
|
|
2257
|
+
* nested `var()` right for free. The probe is appended to the element the token was read from,
|
|
2258
|
+
* so relative units resolve against the same context the real value would.
|
|
2259
|
+
*/
|
|
2260
|
+
/** Reads a length token in pixels. Returns `fallback` for an empty, unparseable or zero value. */
|
|
2261
|
+
function resolveLengthToken(el, token, fallback) {
|
|
2262
|
+
const raw = getComputedStyle(el).getPropertyValue(token).trim();
|
|
2263
|
+
if (!raw)
|
|
2264
|
+
return fallback;
|
|
2265
|
+
const plain = PX.exec(raw);
|
|
2266
|
+
if (plain)
|
|
2267
|
+
return Number.parseFloat(plain[1]);
|
|
2268
|
+
return probe(el, `width:${raw}`, (style) => readPx(style.width), fallback);
|
|
2269
|
+
}
|
|
2270
|
+
/**
|
|
2271
|
+
* Reads a unitless numeric token (a `z-index`). Same resolution path as lengths — `z-index`
|
|
2272
|
+
* takes an integer, so the browser computes `calc()` there too.
|
|
2273
|
+
*/
|
|
2274
|
+
function resolveNumberToken(el, token, fallback) {
|
|
2275
|
+
const raw = getComputedStyle(el).getPropertyValue(token).trim();
|
|
2276
|
+
if (!raw)
|
|
2277
|
+
return fallback;
|
|
2278
|
+
const plain = NUMBER.exec(raw);
|
|
2279
|
+
if (plain)
|
|
2280
|
+
return Number.parseFloat(plain[1]);
|
|
2281
|
+
return probe(el, `position:relative;z-index:${raw}`, (s) => {
|
|
2282
|
+
const resolved = NUMBER.exec(s.zIndex.trim());
|
|
2283
|
+
return resolved ? Number.parseFloat(resolved[1]) : Number.NaN;
|
|
2284
|
+
}, fallback);
|
|
2285
|
+
}
|
|
2286
|
+
const PX = /^(-?\d*\.?\d+)px$/;
|
|
2287
|
+
const NUMBER = /^(-?\d*\.?\d+)$/;
|
|
2288
|
+
/**
|
|
2289
|
+
* A computed length, but only if it really was computed.
|
|
2290
|
+
*
|
|
2291
|
+
* An environment with no layout engine — jsdom, which is what this library's own unit tests run
|
|
2292
|
+
* in — hands back the *specified* string from `getComputedStyle`, so a probe styled `width: 2em`
|
|
2293
|
+
* reads back `"2em"`, and `parseFloat` would happily call that `2`. A wrong number is worse than
|
|
2294
|
+
* the fallback, so anything that is not a resolved pixel value is rejected.
|
|
2295
|
+
*/
|
|
2296
|
+
function readPx(value) {
|
|
2297
|
+
const m = PX.exec(value.trim());
|
|
2298
|
+
return m ? Number.parseFloat(m[1]) : Number.NaN;
|
|
2299
|
+
}
|
|
2300
|
+
/**
|
|
2301
|
+
* Measures `declaration` on a hidden child of `host` and reads the result back.
|
|
2302
|
+
*
|
|
2303
|
+
* `visibility: hidden` rather than `display: none`, because a `display: none` element has no
|
|
2304
|
+
* used value to read — that is the whole failure this helper exists to avoid. `position:
|
|
2305
|
+
* absolute` keeps it out of the host's layout, so a flex or grid host is not disturbed by the
|
|
2306
|
+
* measurement.
|
|
2307
|
+
*/
|
|
2308
|
+
function probe(host, declaration, read, fallback) {
|
|
2309
|
+
const doc = host.ownerDocument;
|
|
2310
|
+
if (!doc?.defaultView)
|
|
2311
|
+
return fallback;
|
|
2312
|
+
const el = doc.createElement('div');
|
|
2313
|
+
el.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;${declaration}`;
|
|
2314
|
+
host.appendChild(el);
|
|
2315
|
+
let value;
|
|
2316
|
+
try {
|
|
2317
|
+
value = read(doc.defaultView.getComputedStyle(el));
|
|
2318
|
+
}
|
|
2319
|
+
finally {
|
|
2320
|
+
el.remove();
|
|
2321
|
+
}
|
|
2322
|
+
return Number.isFinite(value) ? value : fallback;
|
|
2323
|
+
}
|
|
2324
|
+
|
|
2240
2325
|
/** A sub-pixel overflow reading is rounding noise, not real scrollable content. */
|
|
2241
2326
|
const OVERFLOW_EPSILON = 1;
|
|
2242
2327
|
/** Portion of the viewport paged per track click, leaving visual continuity with the old view. */
|
|
@@ -2247,10 +2332,6 @@ const DEFAULT_AUTO_HIDE = true;
|
|
|
2247
2332
|
const DEFAULT_HIDE_DELAY$1 = 800;
|
|
2248
2333
|
const DEFAULT_OVERSCROLL_BEHAVIOR = 'auto';
|
|
2249
2334
|
const DEFAULT_SHOW_TRACK = true;
|
|
2250
|
-
function readPx(raw, fallback) {
|
|
2251
|
-
const parsed = Number.parseFloat(raw.trim());
|
|
2252
|
-
return Number.isFinite(parsed) ? parsed : fallback;
|
|
2253
|
-
}
|
|
2254
2335
|
function clamp$1(value, min, max) {
|
|
2255
2336
|
return Math.min(max, Math.max(min, value));
|
|
2256
2337
|
}
|
|
@@ -2528,8 +2609,8 @@ class ScrollComponent {
|
|
|
2528
2609
|
}
|
|
2529
2610
|
/** Reads the tokens that feed thumb-size math. Cheap, but still only once per change. */
|
|
2530
2611
|
refreshTokens() {
|
|
2531
|
-
const
|
|
2532
|
-
this.thumbMinSizePx =
|
|
2612
|
+
const viewport = this.viewportRef().nativeElement;
|
|
2613
|
+
this.thumbMinSizePx = resolveLengthToken(viewport, '--gog-scroll-thumb-min-size', 32);
|
|
2533
2614
|
}
|
|
2534
2615
|
/** Coalesces scroll/resize bursts into one measurement per frame. */
|
|
2535
2616
|
scheduleMeasure() {
|
|
@@ -2976,7 +3057,7 @@ const DEFAULT_MAX = 99;
|
|
|
2976
3057
|
* A count or status dot pinned to the corner of another element.
|
|
2977
3058
|
*
|
|
2978
3059
|
* ```html
|
|
2979
|
-
* <gog-button gogBadge="12" badgeAriaLabel="12
|
|
3060
|
+
* <gog-button gogBadge="12" badgeAriaLabel="12 unread">Inbox</gog-button>
|
|
2980
3061
|
* <gog-icon name="info" gogBadge badgeDot />
|
|
2981
3062
|
* ```
|
|
2982
3063
|
*
|
|
@@ -3002,9 +3083,9 @@ class GogBadgeDirective {
|
|
|
3002
3083
|
* What assistive tech should hear instead of the bare number.
|
|
3003
3084
|
*
|
|
3004
3085
|
* Left empty, the badge text is announced inline with the host's own label, which reads as
|
|
3005
|
-
* "
|
|
3086
|
+
* "Inbox 12" — acceptable, and what Material does. Set this and the visible badge becomes
|
|
3006
3087
|
* `aria-hidden` while this wording is announced in its place, so the host reads as
|
|
3007
|
-
* "
|
|
3088
|
+
* "Inbox, 12 unread" instead.
|
|
3008
3089
|
*/
|
|
3009
3090
|
badgeAriaLabel = input('', ...(ngDevMode ? [{ debugName: "badgeAriaLabel" }] : /* istanbul ignore next */ []));
|
|
3010
3091
|
hostRef = inject((ElementRef));
|
|
@@ -3334,7 +3415,7 @@ const GOG_TABS_STATE = new InjectionToken('GOG_TABS_STATE');
|
|
|
3334
3415
|
* alive afterwards.
|
|
3335
3416
|
*
|
|
3336
3417
|
* ```html
|
|
3337
|
-
* <gog-tab label="
|
|
3418
|
+
* <gog-tab label="Report">
|
|
3338
3419
|
* <ng-template gogTabContent><app-expensive-report /></ng-template>
|
|
3339
3420
|
* </gog-tab>
|
|
3340
3421
|
* ```
|
|
@@ -3358,8 +3439,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3358
3439
|
*
|
|
3359
3440
|
* ```html
|
|
3360
3441
|
* <gog-tabs>
|
|
3361
|
-
* <gog-tab label="
|
|
3362
|
-
* <gog-tab label="
|
|
3442
|
+
* <gog-tab label="Profile"><app-profile /></gog-tab>
|
|
3443
|
+
* <gog-tab label="Settings" iconName="info" [disabled]="!canEdit">…</gog-tab>
|
|
3363
3444
|
* </gog-tabs>
|
|
3364
3445
|
* ```
|
|
3365
3446
|
*/
|
|
@@ -3421,7 +3502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3421
3502
|
* <ng-template gogTabHeader let-tab let-active="active">
|
|
3422
3503
|
* {{ tab.label() }} <gog-tag *ngIf="active">•</gog-tag>
|
|
3423
3504
|
* </ng-template>
|
|
3424
|
-
* <gog-tab label="
|
|
3505
|
+
* <gog-tab label="Inbox">…</gog-tab>
|
|
3425
3506
|
* </gog-tabs>
|
|
3426
3507
|
* ```
|
|
3427
3508
|
*/
|
|
@@ -3444,8 +3525,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3444
3525
|
*
|
|
3445
3526
|
* ```html
|
|
3446
3527
|
* <gog-tabs [(activeIndex)]="index" align="start">
|
|
3447
|
-
* <gog-tab label="
|
|
3448
|
-
* <gog-tab label="
|
|
3528
|
+
* <gog-tab label="Profile"><app-profile /></gog-tab>
|
|
3529
|
+
* <gog-tab label="Settings"><app-settings /></gog-tab>
|
|
3449
3530
|
* </gog-tabs>
|
|
3450
3531
|
* ```
|
|
3451
3532
|
*
|
|
@@ -4764,7 +4845,7 @@ const ESTIMATED_PANEL_HEIGHT = 330;
|
|
|
4764
4845
|
* A date field with a calendar panel.
|
|
4765
4846
|
*
|
|
4766
4847
|
* ```html
|
|
4767
|
-
* <gog-datepicker [(value)]="date" label="
|
|
4848
|
+
* <gog-datepicker [(value)]="date" label="Date of birth" [max]="today" />
|
|
4768
4849
|
* <gog-datepicker selectionMode="range" [(value)]="range" [numberOfMonths]="2" />
|
|
4769
4850
|
* <gog-datepicker [showTime]="true" hourFormat="24" [(value)]="when" />
|
|
4770
4851
|
* ```
|
|
@@ -5124,7 +5205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
5124
5205
|
* ```html
|
|
5125
5206
|
* <gog-divider />
|
|
5126
5207
|
* <gog-divider orientation="vertical" />
|
|
5127
|
-
* <gog-divider
|
|
5208
|
+
* <gog-divider>OR</gog-divider>
|
|
5128
5209
|
* ```
|
|
5129
5210
|
*
|
|
5130
5211
|
* The label is projected content rather than a `label` input: it is markup, so a consumer can
|
|
@@ -5149,7 +5230,7 @@ class DividerComponent {
|
|
|
5149
5230
|
.filter((className) => className !== null)
|
|
5150
5231
|
.join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
5151
5232
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5152
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: DividerComponent, isStandalone: true, selector: "gog-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "class": "hostClasses()", "attr.aria-orientation": "orientation()" } }, ngImport: i0, template: "<!--\n Three parts always rendered; the stylesheet collapses the label and the trailing rule to a\n single continuous line when nothing was projected (`:has(.gog-divider__label:empty)`).\n Written this way so `<gog-divider />` and `<gog-divider
|
|
5233
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: DividerComponent, isStandalone: true, selector: "gog-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "class": "hostClasses()", "attr.aria-orientation": "orientation()" } }, ngImport: i0, template: "<!--\r\n Three parts always rendered; the stylesheet collapses the label and the trailing rule to a\r\n single continuous line when nothing was projected (`:has(.gog-divider__label:empty)`).\r\n Written this way so `<gog-divider />` and `<gog-divider>OR</gog-divider>` need no extra input\r\n to tell them apart.\r\n-->\r\n<span class=\"gog-divider__rule gog-divider__rule--start\" aria-hidden=\"true\"></span>\r\n<span class=\"gog-divider__label\"><ng-content></ng-content></span>\r\n<span class=\"gog-divider__rule gog-divider__rule--end\" aria-hidden=\"true\"></span>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;box-sizing:border-box;color:var(--gog-divider-label-color);font-family:var(--gog-divider-label-font-family);font-size:var(--gog-divider-label-font-size);font-weight:var(--gog-divider-label-font-weight);line-height:var(--gog-divider-label-line-height)}.gog-divider__rule{flex:1 1 auto;min-width:0;min-height:0}.gog-divider__label{flex:0 0 auto;white-space:nowrap}.gog-divider__label:empty{display:none}:host(.gog-divider--horizontal){flex-direction:row;width:100%;margin-block:var(--gog-divider-spacing, var(--gog-divider-block-spacing))}:host(.gog-divider--horizontal) .gog-divider__rule{border-block-start:var(--gog-divider-thickness, var(--gog-divider-line-thickness)) var(--gog-divider-variant-style, var(--gog-divider-solid-style)) var(--gog-divider-color, var(--gog-divider-line-color))}:host(.gog-divider--horizontal) .gog-divider__label{padding-inline:var(--gog-divider-label-gap)}:host(.gog-divider--vertical){flex-direction:column;align-self:stretch;min-height:var(--gog-divider-vertical-length);margin-inline:var(--gog-divider-spacing, var(--gog-divider-inline-spacing))}:host(.gog-divider--vertical) .gog-divider__rule{border-inline-start:var(--gog-divider-thickness, var(--gog-divider-line-thickness)) var(--gog-divider-variant-style, var(--gog-divider-solid-style)) var(--gog-divider-color, var(--gog-divider-line-color))}:host(.gog-divider--vertical) .gog-divider__label{padding-block:var(--gog-divider-label-gap)}:host(.gog-divider--dashed){--gog-divider-variant-style: var(--gog-divider-dashed-style)}:host(.gog-divider--dotted){--gog-divider-variant-style: var(--gog-divider-dotted-style)}:host(.gog-divider--horizontal.gog-divider--inset){padding-inline-start:var(--gog-divider-inset-size)}:host(.gog-divider--vertical.gog-divider--inset){padding-block-start:var(--gog-divider-inset-size)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5153
5234
|
}
|
|
5154
5235
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DividerComponent, decorators: [{
|
|
5155
5236
|
type: Component,
|
|
@@ -5157,7 +5238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
5157
5238
|
'[class]': 'hostClasses()',
|
|
5158
5239
|
role: 'separator',
|
|
5159
5240
|
'[attr.aria-orientation]': 'orientation()',
|
|
5160
|
-
}, template: "<!--\n Three parts always rendered; the stylesheet collapses the label and the trailing rule to a\n single continuous line when nothing was projected (`:has(.gog-divider__label:empty)`).\n Written this way so `<gog-divider />` and `<gog-divider
|
|
5241
|
+
}, template: "<!--\r\n Three parts always rendered; the stylesheet collapses the label and the trailing rule to a\r\n single continuous line when nothing was projected (`:has(.gog-divider__label:empty)`).\r\n Written this way so `<gog-divider />` and `<gog-divider>OR</gog-divider>` need no extra input\r\n to tell them apart.\r\n-->\r\n<span class=\"gog-divider__rule gog-divider__rule--start\" aria-hidden=\"true\"></span>\r\n<span class=\"gog-divider__label\"><ng-content></ng-content></span>\r\n<span class=\"gog-divider__rule gog-divider__rule--end\" aria-hidden=\"true\"></span>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;box-sizing:border-box;color:var(--gog-divider-label-color);font-family:var(--gog-divider-label-font-family);font-size:var(--gog-divider-label-font-size);font-weight:var(--gog-divider-label-font-weight);line-height:var(--gog-divider-label-line-height)}.gog-divider__rule{flex:1 1 auto;min-width:0;min-height:0}.gog-divider__label{flex:0 0 auto;white-space:nowrap}.gog-divider__label:empty{display:none}:host(.gog-divider--horizontal){flex-direction:row;width:100%;margin-block:var(--gog-divider-spacing, var(--gog-divider-block-spacing))}:host(.gog-divider--horizontal) .gog-divider__rule{border-block-start:var(--gog-divider-thickness, var(--gog-divider-line-thickness)) var(--gog-divider-variant-style, var(--gog-divider-solid-style)) var(--gog-divider-color, var(--gog-divider-line-color))}:host(.gog-divider--horizontal) .gog-divider__label{padding-inline:var(--gog-divider-label-gap)}:host(.gog-divider--vertical){flex-direction:column;align-self:stretch;min-height:var(--gog-divider-vertical-length);margin-inline:var(--gog-divider-spacing, var(--gog-divider-inline-spacing))}:host(.gog-divider--vertical) .gog-divider__rule{border-inline-start:var(--gog-divider-thickness, var(--gog-divider-line-thickness)) var(--gog-divider-variant-style, var(--gog-divider-solid-style)) var(--gog-divider-color, var(--gog-divider-line-color))}:host(.gog-divider--vertical) .gog-divider__label{padding-block:var(--gog-divider-label-gap)}:host(.gog-divider--dashed){--gog-divider-variant-style: var(--gog-divider-dashed-style)}:host(.gog-divider--dotted){--gog-divider-variant-style: var(--gog-divider-dotted-style)}:host(.gog-divider--horizontal.gog-divider--inset){padding-inline-start:var(--gog-divider-inset-size)}:host(.gog-divider--vertical.gog-divider--inset){padding-block-start:var(--gog-divider-inset-size)}\n"] }]
|
|
5161
5242
|
}], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }] } });
|
|
5162
5243
|
|
|
5163
5244
|
const MIN = 0;
|
|
@@ -5172,7 +5253,7 @@ function clamp(value) {
|
|
|
5172
5253
|
*
|
|
5173
5254
|
* ```html
|
|
5174
5255
|
* <gog-progressbar [value]="42" />
|
|
5175
|
-
* <gog-progressbar mode="indeterminate" ariaLabel="
|
|
5256
|
+
* <gog-progressbar mode="indeterminate" ariaLabel="Loading" />
|
|
5176
5257
|
* <gog-progressbar mode="buffer" [value]="42" [buffer]="70" />
|
|
5177
5258
|
* ```
|
|
5178
5259
|
*
|
|
@@ -5232,8 +5313,8 @@ const DEFAULT_SIZE$3 = 'md';
|
|
|
5232
5313
|
* An on/off switch.
|
|
5233
5314
|
*
|
|
5234
5315
|
* ```html
|
|
5235
|
-
* <gog-toggle label="
|
|
5236
|
-
* <gog-toggle formControlName="darkMode" onLabel="
|
|
5316
|
+
* <gog-toggle label="Notifications" [(checked)]="on" />
|
|
5317
|
+
* <gog-toggle formControlName="darkMode" onLabel="ON" offLabel="OFF" />
|
|
5237
5318
|
* ```
|
|
5238
5319
|
*
|
|
5239
5320
|
* Next to `gog-checkbox` rather than a variant of it, because the two answer different
|
|
@@ -5451,6 +5532,15 @@ class DialogService {
|
|
|
5451
5532
|
modalDialogCount = 0;
|
|
5452
5533
|
bodyOverflowBeforeLock = null;
|
|
5453
5534
|
focusedBeforeOpen = null;
|
|
5535
|
+
/**
|
|
5536
|
+
* `TData` is checked at this call site only — `data` here must match `TData`, but the dialog
|
|
5537
|
+
* component you pass as `component` still receives it via `inject(DIALOG_DATA)`, an
|
|
5538
|
+
* `InjectionToken<unknown>` shared by every dialog, so it still casts on injection
|
|
5539
|
+
* (`inject<TData>(DIALOG_DATA)`). Angular's DI has no way to carry a per-call-site type
|
|
5540
|
+
* through a single token, so this checks the half of the round trip that can be: what you
|
|
5541
|
+
* pass in must match what you declared, even though what the component reads back is still
|
|
5542
|
+
* on trust.
|
|
5543
|
+
*/
|
|
5454
5544
|
open(config) {
|
|
5455
5545
|
const id = ++this.nextId;
|
|
5456
5546
|
const zIndex = config.zIndex ?? this.nextZIndex++;
|
|
@@ -5835,11 +5925,11 @@ class ToastComponent {
|
|
|
5835
5925
|
return (typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
|
|
5836
5926
|
}
|
|
5837
5927
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5838
|
-
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" }, viewQueries: [{ propertyName: "progressEl", first: true, predicate: ["progress"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n class=\"gog-toast\"\r\n [class.gog-toast--paused]=\"isPaused()\"\r\n [class.gog-toast--queued]=\"!isFront()\"\r\n [class.gog-toast--success]=\"toast().type === 'success'\"\r\n [class.gog-toast--error]=\"toast().type === 'error'\"\r\n [class.gog-toast--warning]=\"toast().type === 'warning'\"\r\n [class.gog-toast--info]=\"toast().type === 'info'\"\r\n [class.gog-toast--visible]=\"visible()\"\r\n [style.--toast-duration]=\"toast().duration + 'ms'\"\r\n (mouseenter)=\"pauseAutoDismiss()\"\r\n (mouseleave)=\"resumeAutoDismiss()\"\r\n (transitionend)=\"onTransitionEnd($event)\"\r\n>\r\n <div class=\"gog-toast__content\">\r\n <span class=\"gog-toast__icon\" aria-hidden=\"true\">\r\n <gog-icon [template]=\"toast().iconTemplate ?? null\" [name]=\"toast().iconName\" />\r\n </span>\r\n <div class=\"gog-toast__main\">\r\n <span class=\"gog-toast__message\">{{ toast().message }}</span>\r\n @if (hasActions()) {\r\n <div class=\"gog-toast__actions\">\r\n @for (action of toast().actions; track action.label) {\r\n <gog-button\r\n class=\"gog-toast__action\"\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n type=\"button\"\r\n (gogClick)=\"runAction(action)\"\r\n >\r\n @if (action.iconName || action.iconTemplate) {\r\n <gog-icon\r\n [template]=\"action.iconTemplate ?? null\"\r\n [name]=\"action.iconName ?? 'check'\"\r\n />\r\n }\r\n {{ action.label }}\r\n </gog-button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <gog-button\r\n class=\"gog-toast__close\"\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n type=\"button\"\r\n [ariaLabel]=\"closeLabel\"\r\n (gogClick)=\"close()\"\r\n >\r\n <gog-icon name=\"close\" />\r\n </gog-button>\r\n </div>\r\n @if (!toast().isSticky) {\r\n <span #progress class=\"gog-toast__progress\" aria-hidden=\"true\"></span>\r\n }\r\n</div>\r\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-inline-start: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-button-padding: var(--gog-toast-action-padding);--gog-button-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-button-padding: var(--gog-toast-close-padding);--gog-button-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;inset-inline:0;bottom:0;height:var(--gog-toast-progress-height);background:color-mix(in srgb,var(--toast-progress-color) var(--gog-toast-progress-opacity),transparent);transform-origin:var(--gog-inline-start-side) 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
|
|
5928
|
+
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" }, viewQueries: [{ propertyName: "progressEl", first: true, predicate: ["progress"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n class=\"gog-toast\"\r\n [class.gog-toast--paused]=\"isPaused()\"\r\n [class.gog-toast--queued]=\"!isFront()\"\r\n [class.gog-toast--success]=\"toast().type === 'success'\"\r\n [class.gog-toast--error]=\"toast().type === 'error'\"\r\n [class.gog-toast--warning]=\"toast().type === 'warning'\"\r\n [class.gog-toast--info]=\"toast().type === 'info'\"\r\n [class.gog-toast--visible]=\"visible()\"\r\n [style.--toast-duration]=\"toast().duration + 'ms'\"\r\n (mouseenter)=\"pauseAutoDismiss()\"\r\n (mouseleave)=\"resumeAutoDismiss()\"\r\n (transitionend)=\"onTransitionEnd($event)\"\r\n>\r\n <div class=\"gog-toast__content\">\r\n <span class=\"gog-toast__icon\" aria-hidden=\"true\">\r\n <gog-icon [template]=\"toast().iconTemplate ?? null\" [name]=\"toast().iconName\" />\r\n </span>\r\n <div class=\"gog-toast__main\">\r\n <span class=\"gog-toast__message\">{{ toast().message }}</span>\r\n @if (hasActions()) {\r\n <div class=\"gog-toast__actions\">\r\n @for (action of toast().actions; track action.label) {\r\n <gog-button\r\n class=\"gog-toast__action\"\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n type=\"button\"\r\n (gogClick)=\"runAction(action)\"\r\n >\r\n @if (action.iconName || action.iconTemplate) {\r\n <gog-icon\r\n [template]=\"action.iconTemplate ?? null\"\r\n [name]=\"action.iconName ?? 'check'\"\r\n />\r\n }\r\n {{ action.label }}\r\n </gog-button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <gog-button\r\n class=\"gog-toast__close\"\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n type=\"button\"\r\n [ariaLabel]=\"closeLabel\"\r\n (gogClick)=\"close()\"\r\n >\r\n <gog-icon name=\"close\" />\r\n </gog-button>\r\n </div>\r\n @if (!toast().isSticky) {\r\n <span #progress class=\"gog-toast__progress\" aria-hidden=\"true\"></span>\r\n }\r\n</div>\r\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-inline-start: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-button-padding: var(--gog-toast-action-padding);--gog-button-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-button-padding: var(--gog-toast-close-padding);--gog-button-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;inset-inline:0;bottom:0;height:var(--gog-toast-progress-height);background:color-mix(in srgb,var(--toast-progress-color) var(--gog-toast-progress-opacity),transparent);transform-origin:var(--gog-inline-start-side) 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{transition:none;animation:none}.gog-toast__progress{transition:none;animation-timing-function:steps(20,end)}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "ripple", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5839
5929
|
}
|
|
5840
5930
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastComponent, decorators: [{
|
|
5841
5931
|
type: Component,
|
|
5842
|
-
args: [{ selector: 'gog-toast', imports: [ButtonComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"gog-toast\"\r\n [class.gog-toast--paused]=\"isPaused()\"\r\n [class.gog-toast--queued]=\"!isFront()\"\r\n [class.gog-toast--success]=\"toast().type === 'success'\"\r\n [class.gog-toast--error]=\"toast().type === 'error'\"\r\n [class.gog-toast--warning]=\"toast().type === 'warning'\"\r\n [class.gog-toast--info]=\"toast().type === 'info'\"\r\n [class.gog-toast--visible]=\"visible()\"\r\n [style.--toast-duration]=\"toast().duration + 'ms'\"\r\n (mouseenter)=\"pauseAutoDismiss()\"\r\n (mouseleave)=\"resumeAutoDismiss()\"\r\n (transitionend)=\"onTransitionEnd($event)\"\r\n>\r\n <div class=\"gog-toast__content\">\r\n <span class=\"gog-toast__icon\" aria-hidden=\"true\">\r\n <gog-icon [template]=\"toast().iconTemplate ?? null\" [name]=\"toast().iconName\" />\r\n </span>\r\n <div class=\"gog-toast__main\">\r\n <span class=\"gog-toast__message\">{{ toast().message }}</span>\r\n @if (hasActions()) {\r\n <div class=\"gog-toast__actions\">\r\n @for (action of toast().actions; track action.label) {\r\n <gog-button\r\n class=\"gog-toast__action\"\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n type=\"button\"\r\n (gogClick)=\"runAction(action)\"\r\n >\r\n @if (action.iconName || action.iconTemplate) {\r\n <gog-icon\r\n [template]=\"action.iconTemplate ?? null\"\r\n [name]=\"action.iconName ?? 'check'\"\r\n />\r\n }\r\n {{ action.label }}\r\n </gog-button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <gog-button\r\n class=\"gog-toast__close\"\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n type=\"button\"\r\n [ariaLabel]=\"closeLabel\"\r\n (gogClick)=\"close()\"\r\n >\r\n <gog-icon name=\"close\" />\r\n </gog-button>\r\n </div>\r\n @if (!toast().isSticky) {\r\n <span #progress class=\"gog-toast__progress\" aria-hidden=\"true\"></span>\r\n }\r\n</div>\r\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-inline-start: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-button-padding: var(--gog-toast-action-padding);--gog-button-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-button-padding: var(--gog-toast-close-padding);--gog-button-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;inset-inline:0;bottom:0;height:var(--gog-toast-progress-height);background:color-mix(in srgb,var(--toast-progress-color) var(--gog-toast-progress-opacity),transparent);transform-origin:var(--gog-inline-start-side) 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
|
|
5932
|
+
args: [{ selector: 'gog-toast', imports: [ButtonComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"gog-toast\"\r\n [class.gog-toast--paused]=\"isPaused()\"\r\n [class.gog-toast--queued]=\"!isFront()\"\r\n [class.gog-toast--success]=\"toast().type === 'success'\"\r\n [class.gog-toast--error]=\"toast().type === 'error'\"\r\n [class.gog-toast--warning]=\"toast().type === 'warning'\"\r\n [class.gog-toast--info]=\"toast().type === 'info'\"\r\n [class.gog-toast--visible]=\"visible()\"\r\n [style.--toast-duration]=\"toast().duration + 'ms'\"\r\n (mouseenter)=\"pauseAutoDismiss()\"\r\n (mouseleave)=\"resumeAutoDismiss()\"\r\n (transitionend)=\"onTransitionEnd($event)\"\r\n>\r\n <div class=\"gog-toast__content\">\r\n <span class=\"gog-toast__icon\" aria-hidden=\"true\">\r\n <gog-icon [template]=\"toast().iconTemplate ?? null\" [name]=\"toast().iconName\" />\r\n </span>\r\n <div class=\"gog-toast__main\">\r\n <span class=\"gog-toast__message\">{{ toast().message }}</span>\r\n @if (hasActions()) {\r\n <div class=\"gog-toast__actions\">\r\n @for (action of toast().actions; track action.label) {\r\n <gog-button\r\n class=\"gog-toast__action\"\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n type=\"button\"\r\n (gogClick)=\"runAction(action)\"\r\n >\r\n @if (action.iconName || action.iconTemplate) {\r\n <gog-icon\r\n [template]=\"action.iconTemplate ?? null\"\r\n [name]=\"action.iconName ?? 'check'\"\r\n />\r\n }\r\n {{ action.label }}\r\n </gog-button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <gog-button\r\n class=\"gog-toast__close\"\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n type=\"button\"\r\n [ariaLabel]=\"closeLabel\"\r\n (gogClick)=\"close()\"\r\n >\r\n <gog-icon name=\"close\" />\r\n </gog-button>\r\n </div>\r\n @if (!toast().isSticky) {\r\n <span #progress class=\"gog-toast__progress\" aria-hidden=\"true\"></span>\r\n }\r\n</div>\r\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-inline-start: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-button-padding: var(--gog-toast-action-padding);--gog-button-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-button-padding: var(--gog-toast-close-padding);--gog-button-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;inset-inline:0;bottom:0;height:var(--gog-toast-progress-height);background:color-mix(in srgb,var(--toast-progress-color) var(--gog-toast-progress-opacity),transparent);transform-origin:var(--gog-inline-start-side) 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{transition:none;animation:none}.gog-toast__progress{transition:none;animation-timing-function:steps(20,end)}}\n"] }]
|
|
5843
5933
|
}], 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 }] }] } });
|
|
5844
5934
|
|
|
5845
5935
|
const DEFAULT_DURATION = 4000;
|
|
@@ -6560,7 +6650,7 @@ class TextareaComponent {
|
|
|
6560
6650
|
this._onTouched();
|
|
6561
6651
|
}
|
|
6562
6652
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6563
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TextareaComponent, isStandalone: true, selector: "gog-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, spellcheck: { classPropertyName: "spellcheck", publicName: "spellcheck", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, floatLabelShowPlaceholder: { classPropertyName: "floatLabelShowPlaceholder", publicName: "floatLabelShowPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.gog-host--auto-width": "!fullWidth()" } }, viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n class=\"gog-input-wrapper gog-contained-layout\"\r\n [class]=\"sizeClass()\"\r\n [class.gog-input-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n [class.gog-input-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n [class.gog-input-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n [class.gog-input-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n @if (label() && resolvedFloatLabel() === 'none') {\r\n <label class=\"gog-input__label\" [attr.for]=\"resolvedInputId()\">{{ label() }}</label>\r\n }\r\n <div\r\n class=\"gog-input__field-container\"\r\n [class.gog-input__field-container--resizable]=\"resolvedResize() !== 'none' && !isDisabled()\"\r\n [style.--gog-textarea-resize-inset-right.px]=\"resizeInsetRight()\"\r\n [style.--gog-textarea-resize-inset-bottom.px]=\"resizeInsetBottom()\"\r\n >\r\n @if (label() && isFloatLabelActive()) {\r\n <label class=\"gog-input__label gog-input__label--float\" [attr.for]=\"resolvedInputId()\">{{\r\n label()\r\n }}</label>\r\n }\r\n <textarea\r\n #field\r\n class=\"gog-input__field gog-textarea__field\"\r\n [class.gog-input__field--error]=\"hasError()\"\r\n [class.gog-textarea__field--resize-vertical]=\"resolvedResize() === 'vertical'\"\r\n [class.gog-textarea__field--resize-horizontal]=\"resolvedResize() === 'horizontal'\"\r\n [class.gog-textarea__field--resize-both]=\"resolvedResize() === 'both'\"\r\n [class.gog-textarea__field--resize-none]=\"resolvedResize() === 'none'\"\r\n [attr.id]=\"resolvedInputId()\"\r\n [attr.name]=\"name() || null\"\r\n [placeholder]=\"effectivePlaceholder()\"\r\n [rows]=\"rows()\"\r\n [value]=\"value()\"\r\n [disabled]=\"isDisabled()\"\r\n [readOnly]=\"readonly()\"\r\n [attr.maxlength]=\"maxlength()\"\r\n [attr.minlength]=\"minlength()\"\r\n [attr.spellcheck]=\"spellcheck()\"\r\n [attr.aria-invalid]=\"hasError()\"\r\n [attr.aria-describedby]=\"errorId()\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n ></textarea>\r\n @if (showClear()) {\r\n <button\r\n type=\"button\"\r\n class=\"gog-input__clear gog-textarea__clear gog-inline-center\"\r\n [style.--gog-textarea-scrollbar-width.px]=\"scrollbarWidth()\"\r\n [attr.aria-label]=\"resolvedClearLabel()\"\r\n (click)=\"clearValue($event)\"\r\n >\r\n <gog-icon name=\"close\" />\r\n </button>\r\n }\r\n </div>\r\n @if (visibleError()) {\r\n <span class=\"gog-input__error\" [attr.id]=\"errorId()\" role=\"alert\">{{ visibleError() }}</span>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.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{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-padding-x, 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-textarea__field{display:block;min-height:2.5em;line-height:1.5}.gog-textarea__field::-webkit-resizer{background:transparent}.gog-textarea__field--resize-vertical{resize:vertical}.gog-textarea__field--resize-horizontal{resize:horizontal}.gog-textarea__field--resize-both{resize:both}.gog-textarea__field--resize-none{resize:none}.gog-input__field-container{position:relative}.gog-input__field-container--resizable:after{content:\"\";position:absolute;inset-inline-end:calc(var(--gog-textarea-resize-grip-offset) + var(--gog-textarea-resize-inset-right));bottom:calc(var(--gog-textarea-resize-grip-offset) + var(--gog-textarea-resize-inset-bottom));width:var(--gog-textarea-resize-grip-size);height:var(--gog-textarea-resize-grip-size);clip-path:polygon(100% 0,100% 100%,0 100%);background-image:repeating-linear-gradient(135deg,transparent 0 var(--gog-textarea-resize-grip-stripe-gap),var(--gog-textarea-resize-grip-color) var(--gog-textarea-resize-grip-stripe-gap) calc(var(--gog-textarea-resize-grip-stripe-gap) + var(--gog-textarea-resize-grip-stripe-width)));opacity:var(--gog-textarea-resize-grip-opacity);pointer-events:none}.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-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-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-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__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;resize:none}.gog-input__field--error{border-color:var(--gog-input-error-color)}.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)}.gog-input__label--float{position:absolute;inset-inline-start:var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));top:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y)));max-width:calc(100% - 2 * var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-input-placeholder-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-input-transition-duration) var(--gog-easing),font-size var(--gog-input-transition-duration) var(--gog-easing),color var(--gog-input-transition-duration) var(--gog-easing),top var(--gog-input-transition-duration) var(--gog-easing),background-color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--float-in,.gog-input-wrapper--float-on{--gog-input-float-top-padding: calc(var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-input-float-label-reserve))}.gog-input-wrapper--float-in .gog-input__field,.gog-input-wrapper--float-on .gog-input__field{padding-top:var(--gog-input-float-top-padding)}.gog-input-wrapper--float-in .gog-input__label--float,.gog-input-wrapper--float-on .gog-input__label--float{top:var(--gog-input-float-top-padding)}.gog-input-wrapper--float-in.gog-input-wrapper--floated .gog-input__label--float{top:var(--gog-input-float-label-in-top);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-wrapper--float-on.gog-input-wrapper--floated .gog-input__label--float{top:0;transform:translateY(-50%);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);background-color:var(--gog-input-float-label-on-bg, var(--gog-input-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-input-wrapper--float-over.gog-input-wrapper--floated .gog-input__label--float{top:calc(-1 * var(--gog-input-float-label-over-gap));transform:translateY(-100%);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-wrapper--float-over .gog-input__field-container{margin-top:var(--gog-input-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-input__field,.gog-input__label--float{transition:none}}.gog-textarea__clear{position:absolute;top:var(--gog-input-clear-inset);inset-inline-end:calc(var(--gog-input-clear-inset) + var(--gog-textarea-scrollbar-width, 0px));width:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-input-clear-radius);background:transparent;color:var(--gog-input-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-textarea__clear:hover{color:var(--gog-input-icon-hover-color)}.gog-textarea__clear: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-textarea__clear gog-icon{font-size:calc(var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size))) * var(--gog-textarea-clear-icon-ratio))}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6653
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TextareaComponent, isStandalone: true, selector: "gog-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, spellcheck: { classPropertyName: "spellcheck", publicName: "spellcheck", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, floatLabelShowPlaceholder: { classPropertyName: "floatLabelShowPlaceholder", publicName: "floatLabelShowPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.gog-host--auto-width": "!fullWidth()" } }, viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n class=\"gog-input-wrapper gog-contained-layout\"\r\n [class]=\"sizeClass()\"\r\n [class.gog-input-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n [class.gog-input-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n [class.gog-input-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n [class.gog-input-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n @if (label() && resolvedFloatLabel() === 'none') {\r\n <label class=\"gog-input__label\" [attr.for]=\"resolvedInputId()\">{{ label() }}</label>\r\n }\r\n <div\r\n class=\"gog-input__field-container\"\r\n [class.gog-input__field-container--resizable]=\"resolvedResize() !== 'none' && !isDisabled()\"\r\n [style.--gog-textarea-resize-inset-right.px]=\"resizeInsetRight()\"\r\n [style.--gog-textarea-resize-inset-bottom.px]=\"resizeInsetBottom()\"\r\n >\r\n @if (label() && isFloatLabelActive()) {\r\n <label class=\"gog-input__label gog-input__label--float\" [attr.for]=\"resolvedInputId()\">{{\r\n label()\r\n }}</label>\r\n }\r\n <textarea\r\n #field\r\n class=\"gog-input__field gog-textarea__field\"\r\n [class.gog-input__field--error]=\"hasError()\"\r\n [class.gog-textarea__field--resize-vertical]=\"resolvedResize() === 'vertical'\"\r\n [class.gog-textarea__field--resize-horizontal]=\"resolvedResize() === 'horizontal'\"\r\n [class.gog-textarea__field--resize-both]=\"resolvedResize() === 'both'\"\r\n [class.gog-textarea__field--resize-none]=\"resolvedResize() === 'none'\"\r\n [attr.id]=\"resolvedInputId()\"\r\n [attr.name]=\"name() || null\"\r\n [placeholder]=\"effectivePlaceholder()\"\r\n [rows]=\"rows()\"\r\n [value]=\"value()\"\r\n [disabled]=\"isDisabled()\"\r\n [readOnly]=\"readonly()\"\r\n [attr.maxlength]=\"maxlength()\"\r\n [attr.minlength]=\"minlength()\"\r\n [attr.spellcheck]=\"spellcheck()\"\r\n [attr.aria-invalid]=\"hasError()\"\r\n [attr.aria-describedby]=\"errorId()\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n ></textarea>\r\n @if (showClear()) {\r\n <button\r\n type=\"button\"\r\n class=\"gog-input__clear gog-textarea__clear gog-inline-center\"\r\n [style.--gog-textarea-scrollbar-width.px]=\"scrollbarWidth()\"\r\n [attr.aria-label]=\"resolvedClearLabel()\"\r\n (click)=\"clearValue($event)\"\r\n >\r\n <gog-icon name=\"close\" />\r\n </button>\r\n }\r\n </div>\r\n @if (visibleError()) {\r\n <span class=\"gog-input__error\" [attr.id]=\"errorId()\" role=\"alert\">{{ visibleError() }}</span>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.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{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-padding-x, 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-textarea__field{display:block;min-height:2.5em;line-height:1.5}.gog-textarea__field::-webkit-resizer{background:transparent}.gog-textarea__field{scrollbar-width:thin;scrollbar-color:var(--gog-scroll-thumb-bg) var(--gog-scroll-track-bg)}.gog-textarea__field::-webkit-scrollbar{width:var(--gog-scroll-thin-track-width);height:var(--gog-scroll-thin-track-width)}.gog-textarea__field::-webkit-scrollbar-track{background:var(--gog-scroll-track-bg);border-radius:var(--gog-scroll-track-radius)}.gog-textarea__field::-webkit-scrollbar-thumb{background:var(--gog-scroll-thumb-bg);border-radius:var(--gog-scroll-thumb-radius)}.gog-textarea__field::-webkit-scrollbar-thumb:hover{background:var(--gog-scroll-thumb-hover-bg)}.gog-textarea__field::-webkit-scrollbar-thumb:active{background:var(--gog-scroll-thumb-active-bg)}.gog-textarea__field::-webkit-scrollbar-corner{background:var(--gog-scroll-track-bg)}.gog-textarea__field--resize-vertical{resize:vertical}.gog-textarea__field--resize-horizontal{resize:horizontal}.gog-textarea__field--resize-both{resize:both}.gog-textarea__field--resize-none{resize:none}.gog-input__field-container{position:relative}.gog-input__field-container--resizable:after{content:\"\";position:absolute;inset-inline-end:calc(var(--gog-textarea-resize-grip-offset) + var(--gog-textarea-resize-inset-right));bottom:calc(var(--gog-textarea-resize-grip-offset) + var(--gog-textarea-resize-inset-bottom));width:var(--gog-textarea-resize-grip-size);height:var(--gog-textarea-resize-grip-size);clip-path:polygon(100% 0,100% 100%,0 100%);background-image:repeating-linear-gradient(135deg,transparent 0 var(--gog-textarea-resize-grip-stripe-gap),var(--gog-textarea-resize-grip-color) var(--gog-textarea-resize-grip-stripe-gap) calc(var(--gog-textarea-resize-grip-stripe-gap) + var(--gog-textarea-resize-grip-stripe-width)));opacity:var(--gog-textarea-resize-grip-opacity);pointer-events:none}.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-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-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-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__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;resize:none}.gog-input__field--error{border-color:var(--gog-input-error-color)}.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)}.gog-input__label--float{position:absolute;inset-inline-start:var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));top:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y)));max-width:calc(100% - 2 * var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-input-placeholder-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-input-transition-duration) var(--gog-easing),font-size var(--gog-input-transition-duration) var(--gog-easing),color var(--gog-input-transition-duration) var(--gog-easing),top var(--gog-input-transition-duration) var(--gog-easing),background-color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--float-in,.gog-input-wrapper--float-on{--gog-input-float-top-padding: calc(var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-input-float-label-reserve))}.gog-input-wrapper--float-in .gog-input__field,.gog-input-wrapper--float-on .gog-input__field{padding-top:var(--gog-input-float-top-padding)}.gog-input-wrapper--float-in .gog-input__label--float,.gog-input-wrapper--float-on .gog-input__label--float{top:var(--gog-input-float-top-padding)}.gog-input-wrapper--float-in.gog-input-wrapper--floated .gog-input__label--float{top:var(--gog-input-float-label-in-top);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-wrapper--float-on.gog-input-wrapper--floated .gog-input__label--float{top:0;transform:translateY(-50%);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);background-color:var(--gog-input-float-label-on-bg, var(--gog-input-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-input-wrapper--float-over.gog-input-wrapper--floated .gog-input__label--float{top:calc(-1 * var(--gog-input-float-label-over-gap));transform:translateY(-100%);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-wrapper--float-over .gog-input__field-container{margin-top:var(--gog-input-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-input__field,.gog-input__label--float{transition:none}}.gog-textarea__clear{position:absolute;top:var(--gog-input-clear-inset);inset-inline-end:calc(var(--gog-input-clear-inset) + var(--gog-textarea-scrollbar-width, 0px));width:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-input-clear-radius);background:transparent;color:var(--gog-input-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-textarea__clear:hover{color:var(--gog-input-icon-hover-color)}.gog-textarea__clear: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-textarea__clear gog-icon{font-size:calc(var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size))) * var(--gog-textarea-clear-icon-ratio))}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6564
6654
|
}
|
|
6565
6655
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
6566
6656
|
type: Component,
|
|
@@ -6570,7 +6660,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
6570
6660
|
// full-width class: this field is full width by default, so the class only appears
|
|
6571
6661
|
// once a consumer opts *out* of that.
|
|
6572
6662
|
'[class.gog-host--auto-width]': '!fullWidth()',
|
|
6573
|
-
}, template: "<div\r\n class=\"gog-input-wrapper gog-contained-layout\"\r\n [class]=\"sizeClass()\"\r\n [class.gog-input-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n [class.gog-input-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n [class.gog-input-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n [class.gog-input-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n @if (label() && resolvedFloatLabel() === 'none') {\r\n <label class=\"gog-input__label\" [attr.for]=\"resolvedInputId()\">{{ label() }}</label>\r\n }\r\n <div\r\n class=\"gog-input__field-container\"\r\n [class.gog-input__field-container--resizable]=\"resolvedResize() !== 'none' && !isDisabled()\"\r\n [style.--gog-textarea-resize-inset-right.px]=\"resizeInsetRight()\"\r\n [style.--gog-textarea-resize-inset-bottom.px]=\"resizeInsetBottom()\"\r\n >\r\n @if (label() && isFloatLabelActive()) {\r\n <label class=\"gog-input__label gog-input__label--float\" [attr.for]=\"resolvedInputId()\">{{\r\n label()\r\n }}</label>\r\n }\r\n <textarea\r\n #field\r\n class=\"gog-input__field gog-textarea__field\"\r\n [class.gog-input__field--error]=\"hasError()\"\r\n [class.gog-textarea__field--resize-vertical]=\"resolvedResize() === 'vertical'\"\r\n [class.gog-textarea__field--resize-horizontal]=\"resolvedResize() === 'horizontal'\"\r\n [class.gog-textarea__field--resize-both]=\"resolvedResize() === 'both'\"\r\n [class.gog-textarea__field--resize-none]=\"resolvedResize() === 'none'\"\r\n [attr.id]=\"resolvedInputId()\"\r\n [attr.name]=\"name() || null\"\r\n [placeholder]=\"effectivePlaceholder()\"\r\n [rows]=\"rows()\"\r\n [value]=\"value()\"\r\n [disabled]=\"isDisabled()\"\r\n [readOnly]=\"readonly()\"\r\n [attr.maxlength]=\"maxlength()\"\r\n [attr.minlength]=\"minlength()\"\r\n [attr.spellcheck]=\"spellcheck()\"\r\n [attr.aria-invalid]=\"hasError()\"\r\n [attr.aria-describedby]=\"errorId()\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n ></textarea>\r\n @if (showClear()) {\r\n <button\r\n type=\"button\"\r\n class=\"gog-input__clear gog-textarea__clear gog-inline-center\"\r\n [style.--gog-textarea-scrollbar-width.px]=\"scrollbarWidth()\"\r\n [attr.aria-label]=\"resolvedClearLabel()\"\r\n (click)=\"clearValue($event)\"\r\n >\r\n <gog-icon name=\"close\" />\r\n </button>\r\n }\r\n </div>\r\n @if (visibleError()) {\r\n <span class=\"gog-input__error\" [attr.id]=\"errorId()\" role=\"alert\">{{ visibleError() }}</span>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.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{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-padding-x, 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-textarea__field{display:block;min-height:2.5em;line-height:1.5}.gog-textarea__field::-webkit-resizer{background:transparent}.gog-textarea__field--resize-vertical{resize:vertical}.gog-textarea__field--resize-horizontal{resize:horizontal}.gog-textarea__field--resize-both{resize:both}.gog-textarea__field--resize-none{resize:none}.gog-input__field-container{position:relative}.gog-input__field-container--resizable:after{content:\"\";position:absolute;inset-inline-end:calc(var(--gog-textarea-resize-grip-offset) + var(--gog-textarea-resize-inset-right));bottom:calc(var(--gog-textarea-resize-grip-offset) + var(--gog-textarea-resize-inset-bottom));width:var(--gog-textarea-resize-grip-size);height:var(--gog-textarea-resize-grip-size);clip-path:polygon(100% 0,100% 100%,0 100%);background-image:repeating-linear-gradient(135deg,transparent 0 var(--gog-textarea-resize-grip-stripe-gap),var(--gog-textarea-resize-grip-color) var(--gog-textarea-resize-grip-stripe-gap) calc(var(--gog-textarea-resize-grip-stripe-gap) + var(--gog-textarea-resize-grip-stripe-width)));opacity:var(--gog-textarea-resize-grip-opacity);pointer-events:none}.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-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-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-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__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;resize:none}.gog-input__field--error{border-color:var(--gog-input-error-color)}.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)}.gog-input__label--float{position:absolute;inset-inline-start:var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));top:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y)));max-width:calc(100% - 2 * var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-input-placeholder-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-input-transition-duration) var(--gog-easing),font-size var(--gog-input-transition-duration) var(--gog-easing),color var(--gog-input-transition-duration) var(--gog-easing),top var(--gog-input-transition-duration) var(--gog-easing),background-color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--float-in,.gog-input-wrapper--float-on{--gog-input-float-top-padding: calc(var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-input-float-label-reserve))}.gog-input-wrapper--float-in .gog-input__field,.gog-input-wrapper--float-on .gog-input__field{padding-top:var(--gog-input-float-top-padding)}.gog-input-wrapper--float-in .gog-input__label--float,.gog-input-wrapper--float-on .gog-input__label--float{top:var(--gog-input-float-top-padding)}.gog-input-wrapper--float-in.gog-input-wrapper--floated .gog-input__label--float{top:var(--gog-input-float-label-in-top);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-wrapper--float-on.gog-input-wrapper--floated .gog-input__label--float{top:0;transform:translateY(-50%);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);background-color:var(--gog-input-float-label-on-bg, var(--gog-input-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-input-wrapper--float-over.gog-input-wrapper--floated .gog-input__label--float{top:calc(-1 * var(--gog-input-float-label-over-gap));transform:translateY(-100%);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-wrapper--float-over .gog-input__field-container{margin-top:var(--gog-input-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-input__field,.gog-input__label--float{transition:none}}.gog-textarea__clear{position:absolute;top:var(--gog-input-clear-inset);inset-inline-end:calc(var(--gog-input-clear-inset) + var(--gog-textarea-scrollbar-width, 0px));width:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-input-clear-radius);background:transparent;color:var(--gog-input-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-textarea__clear:hover{color:var(--gog-input-icon-hover-color)}.gog-textarea__clear: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-textarea__clear gog-icon{font-size:calc(var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size))) * var(--gog-textarea-clear-icon-ratio))}\n"] }]
|
|
6663
|
+
}, template: "<div\r\n class=\"gog-input-wrapper gog-contained-layout\"\r\n [class]=\"sizeClass()\"\r\n [class.gog-input-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n [class.gog-input-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n [class.gog-input-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n [class.gog-input-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n @if (label() && resolvedFloatLabel() === 'none') {\r\n <label class=\"gog-input__label\" [attr.for]=\"resolvedInputId()\">{{ label() }}</label>\r\n }\r\n <div\r\n class=\"gog-input__field-container\"\r\n [class.gog-input__field-container--resizable]=\"resolvedResize() !== 'none' && !isDisabled()\"\r\n [style.--gog-textarea-resize-inset-right.px]=\"resizeInsetRight()\"\r\n [style.--gog-textarea-resize-inset-bottom.px]=\"resizeInsetBottom()\"\r\n >\r\n @if (label() && isFloatLabelActive()) {\r\n <label class=\"gog-input__label gog-input__label--float\" [attr.for]=\"resolvedInputId()\">{{\r\n label()\r\n }}</label>\r\n }\r\n <textarea\r\n #field\r\n class=\"gog-input__field gog-textarea__field\"\r\n [class.gog-input__field--error]=\"hasError()\"\r\n [class.gog-textarea__field--resize-vertical]=\"resolvedResize() === 'vertical'\"\r\n [class.gog-textarea__field--resize-horizontal]=\"resolvedResize() === 'horizontal'\"\r\n [class.gog-textarea__field--resize-both]=\"resolvedResize() === 'both'\"\r\n [class.gog-textarea__field--resize-none]=\"resolvedResize() === 'none'\"\r\n [attr.id]=\"resolvedInputId()\"\r\n [attr.name]=\"name() || null\"\r\n [placeholder]=\"effectivePlaceholder()\"\r\n [rows]=\"rows()\"\r\n [value]=\"value()\"\r\n [disabled]=\"isDisabled()\"\r\n [readOnly]=\"readonly()\"\r\n [attr.maxlength]=\"maxlength()\"\r\n [attr.minlength]=\"minlength()\"\r\n [attr.spellcheck]=\"spellcheck()\"\r\n [attr.aria-invalid]=\"hasError()\"\r\n [attr.aria-describedby]=\"errorId()\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n ></textarea>\r\n @if (showClear()) {\r\n <button\r\n type=\"button\"\r\n class=\"gog-input__clear gog-textarea__clear gog-inline-center\"\r\n [style.--gog-textarea-scrollbar-width.px]=\"scrollbarWidth()\"\r\n [attr.aria-label]=\"resolvedClearLabel()\"\r\n (click)=\"clearValue($event)\"\r\n >\r\n <gog-icon name=\"close\" />\r\n </button>\r\n }\r\n </div>\r\n @if (visibleError()) {\r\n <span class=\"gog-input__error\" [attr.id]=\"errorId()\" role=\"alert\">{{ visibleError() }}</span>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.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{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-padding-x, 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-textarea__field{display:block;min-height:2.5em;line-height:1.5}.gog-textarea__field::-webkit-resizer{background:transparent}.gog-textarea__field{scrollbar-width:thin;scrollbar-color:var(--gog-scroll-thumb-bg) var(--gog-scroll-track-bg)}.gog-textarea__field::-webkit-scrollbar{width:var(--gog-scroll-thin-track-width);height:var(--gog-scroll-thin-track-width)}.gog-textarea__field::-webkit-scrollbar-track{background:var(--gog-scroll-track-bg);border-radius:var(--gog-scroll-track-radius)}.gog-textarea__field::-webkit-scrollbar-thumb{background:var(--gog-scroll-thumb-bg);border-radius:var(--gog-scroll-thumb-radius)}.gog-textarea__field::-webkit-scrollbar-thumb:hover{background:var(--gog-scroll-thumb-hover-bg)}.gog-textarea__field::-webkit-scrollbar-thumb:active{background:var(--gog-scroll-thumb-active-bg)}.gog-textarea__field::-webkit-scrollbar-corner{background:var(--gog-scroll-track-bg)}.gog-textarea__field--resize-vertical{resize:vertical}.gog-textarea__field--resize-horizontal{resize:horizontal}.gog-textarea__field--resize-both{resize:both}.gog-textarea__field--resize-none{resize:none}.gog-input__field-container{position:relative}.gog-input__field-container--resizable:after{content:\"\";position:absolute;inset-inline-end:calc(var(--gog-textarea-resize-grip-offset) + var(--gog-textarea-resize-inset-right));bottom:calc(var(--gog-textarea-resize-grip-offset) + var(--gog-textarea-resize-inset-bottom));width:var(--gog-textarea-resize-grip-size);height:var(--gog-textarea-resize-grip-size);clip-path:polygon(100% 0,100% 100%,0 100%);background-image:repeating-linear-gradient(135deg,transparent 0 var(--gog-textarea-resize-grip-stripe-gap),var(--gog-textarea-resize-grip-color) var(--gog-textarea-resize-grip-stripe-gap) calc(var(--gog-textarea-resize-grip-stripe-gap) + var(--gog-textarea-resize-grip-stripe-width)));opacity:var(--gog-textarea-resize-grip-opacity);pointer-events:none}.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-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-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-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__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;resize:none}.gog-input__field--error{border-color:var(--gog-input-error-color)}.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)}.gog-input__label--float{position:absolute;inset-inline-start:var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));top:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y)));max-width:calc(100% - 2 * var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-input-placeholder-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-input-transition-duration) var(--gog-easing),font-size var(--gog-input-transition-duration) var(--gog-easing),color var(--gog-input-transition-duration) var(--gog-easing),top var(--gog-input-transition-duration) var(--gog-easing),background-color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--float-in,.gog-input-wrapper--float-on{--gog-input-float-top-padding: calc(var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-input-float-label-reserve))}.gog-input-wrapper--float-in .gog-input__field,.gog-input-wrapper--float-on .gog-input__field{padding-top:var(--gog-input-float-top-padding)}.gog-input-wrapper--float-in .gog-input__label--float,.gog-input-wrapper--float-on .gog-input__label--float{top:var(--gog-input-float-top-padding)}.gog-input-wrapper--float-in.gog-input-wrapper--floated .gog-input__label--float{top:var(--gog-input-float-label-in-top);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-wrapper--float-on.gog-input-wrapper--floated .gog-input__label--float{top:0;transform:translateY(-50%);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);background-color:var(--gog-input-float-label-on-bg, var(--gog-input-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-input-wrapper--float-over.gog-input-wrapper--floated .gog-input__label--float{top:calc(-1 * var(--gog-input-float-label-over-gap));transform:translateY(-100%);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-wrapper--float-over .gog-input__field-container{margin-top:var(--gog-input-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-input__field,.gog-input__label--float{transition:none}}.gog-textarea__clear{position:absolute;top:var(--gog-input-clear-inset);inset-inline-end:calc(var(--gog-input-clear-inset) + var(--gog-textarea-scrollbar-width, 0px));width:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-input-clear-radius);background:transparent;color:var(--gog-input-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-textarea__clear:hover{color:var(--gog-input-icon-hover-color)}.gog-textarea__clear: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-textarea__clear gog-icon{font-size:calc(var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size))) * var(--gog-textarea-clear-icon-ratio))}\n"] }]
|
|
6574
6664
|
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], minlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minlength", required: false }] }], spellcheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "spellcheck", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], floatLabelShowPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabelShowPlaceholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
|
|
6575
6665
|
|
|
6576
6666
|
class ChipComponent {
|
|
@@ -6728,14 +6818,14 @@ class SelectComponent extends GogDropdownBase {
|
|
|
6728
6818
|
this.close();
|
|
6729
6819
|
}
|
|
6730
6820
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6731
|
-
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" }, host: { properties: { "style.--gog-select-min-width": "minWidth()" } }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\r\n Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n paint over the open dropdown.\r\n-->\r\n<div\r\n class=\"gog-select\"\r\n [class.gog-select--clearable]=\"showClear()\"\r\n [class]=\"sizeClass()\"\r\n [class.gog-select--disabled]=\"isDisabled()\"\r\n [class.gog-select--open]=\"isOpen()\"\r\n [class.gog-select--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n [class.gog-select--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n [class.gog-select--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n [class.gog-select--floated]=\"isFloatLabelFloated()\"\r\n>\r\n <!--\r\n Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\r\n not a labelable element, so `for` pointing at it is silently ignored by browsers and\r\n assistive tech alike.\r\n -->\r\n @if (label() && resolvedFloatLabel() === 'none') {\r\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n }\r\n\r\n <div class=\"gog-select__field\">\r\n @if (label() && isFloatLabelActive()) {\r\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n <label class=\"gog-select__label gog-select__label--float\" [id]=\"labelId()\">{{\r\n label()\r\n }}</label>\r\n }\r\n <button\r\n type=\"button\"\r\n class=\"gog-select__control\"\r\n [id]=\"triggerId()\"\r\n [disabled]=\"isDisabled()\"\r\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\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 (focus)=\"onFocusIn()\"\r\n (blur)=\"onFocusOut()\"\r\n (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n (keydown.escape)=\"close()\"\r\n (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n >\r\n <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\r\n {{ selectedLabel() || effectivePlaceholder() }}\r\n </span>\r\n\r\n <span class=\"gog-select__chevron\" aria-hidden=\"true\">\r\n <gog-icon [template]=\"chevronSlot()?.templateRef ?? null\" name=\"chevron-down\" />\r\n </span>\r\n </button>\r\n\r\n <!--\r\n A sibling of the trigger, not a child: `.gog-select__control` is a <button>, and nesting\r\n one button inside another is invalid HTML. It is positioned over the trigger's right edge\r\n by the stylesheet, which also reserves room for it so it never covers the value text.\r\n -->\r\n @if (showClear()) {\r\n <button\r\n type=\"button\"\r\n class=\"gog-select__clear gog-inline-center\"\r\n [attr.aria-label]=\"resolvedClearLabel()\"\r\n (click)=\"clearValue($event)\"\r\n >\r\n <gog-icon name=\"close\" />\r\n </button>\r\n }\r\n\r\n @if (isOpen() && !resolvedAppendToBody()) {\r\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n }\r\n </div>\r\n\r\n @if (hasError()) {\r\n <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n {{ visibleError() }}\r\n </span>\r\n }\r\n</div>\r\n\r\n<!--\r\n One template for both render modes. When `appendToBody` is set it is stamped into\r\n <body> by the overlay, which is why the portal-only modifier and the resolved\r\n coordinates are applied conditionally: outside the component's subtree the panel can\r\n no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\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 -->\r\n <div\r\n [id]=\"listboxId()\"\r\n class=\"gog-select__dropdown\"\r\n [class.gog-select__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n [class.gog-select__dropdown--portal]=\"resolvedAppendToBody()\"\r\n [class]=\"panelSizeClass()\"\r\n [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n role=\"listbox\"\r\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <!--\r\n Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n focus moved between options via the arrow keys (roving-focus.ts), which already\r\n scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n needed here.\r\n -->\r\n @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n <div class=\"gog-select__filter gog-select__filter--top\">\r\n <input\r\n type=\"text\"\r\n class=\"gog-select__filter-input\"\r\n [placeholder]=\"filterPlaceholder()\"\r\n [value]=\"filterQuery()\"\r\n (input)=\"onFilterInput($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown.escape)=\"close(); focusTrigger()\"\r\n />\r\n </div>\r\n }\r\n <gog-scroll\r\n size=\"thin\"\r\n [focusable]=\"false\"\r\n overscrollBehavior=\"contain\"\r\n class=\"gog-select__scroll\"\r\n >\r\n @if (visibleOptions().length === 0) {\r\n <p class=\"gog-select__empty\">{{ filterEmptyMessage() }}</p>\r\n }\r\n @for (option of visibleOptions(); track valueOf(option)) {\r\n <!--\r\n tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\r\n focus is moved between options with the arrow keys, not by tabbing through every\r\n one of them. Programmatic .focus() still works on a negative tabindex.\r\n -->\r\n <button\r\n type=\"button\"\r\n class=\"gog-select__option\"\r\n role=\"option\"\r\n tabindex=\"-1\"\r\n [attr.aria-selected]=\"isSelected(option)\"\r\n [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n [class.gog-select__option--selected]=\"isSelected(option)\"\r\n [class.gog-select__option--disabled]=\"isOptionDisabled(option)\"\r\n (click)=\"selectOption(option, $event)\"\r\n (keydown)=\"onOptionKeydown($event)\"\r\n gogRipple\r\n [rippleDisabled]=\"!rippleEnabled()\"\r\n >\r\n @if (optionSlot(); as slot) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n slot.templateRef;\r\n context: optionContext(option, isSelected(option))\r\n \"\r\n />\r\n } @else {\r\n <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\r\n @if (isSelected(option)) {\r\n <gog-icon name=\"check\" />\r\n }\r\n </span>\r\n <span class=\"gog-select__option-label\">{{ labelOf(option) }}</span>\r\n }\r\n </button>\r\n }\r\n </gog-scroll>\r\n @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n <div class=\"gog-select__filter gog-select__filter--bottom\">\r\n <input\r\n type=\"text\"\r\n class=\"gog-select__filter-input\"\r\n [placeholder]=\"filterPlaceholder()\"\r\n [value]=\"filterQuery()\"\r\n (input)=\"onFilterInput($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown.escape)=\"close(); focusTrigger()\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:fit-content}.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-block:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-select-chevron-inset);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:start}.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));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-select-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;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:hidden;box-shadow:var(--gog-select-panel-shadow)}.gog-select__scroll{flex:1;min-height:0}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline: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:start;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)}.gog-select__label--float{position:absolute;inset-inline-start:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-select-placeholder-color);font-size:var(--gog-select-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-select-transition-duration) var(--gog-easing),font-size var(--gog-select-transition-duration) var(--gog-easing),color var(--gog-select-transition-duration) var(--gog-easing),top var(--gog-select-transition-duration) var(--gog-easing),background-color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--float-in,.gog-select--float-on{--gog-select-float-top-padding: calc(var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-select-float-label-reserve))}.gog-select--float-in .gog-select__control,.gog-select--float-on .gog-select__control{padding-top:var(--gog-select-float-top-padding)}.gog-select--float-in .gog-select__label--float,.gog-select--float-on .gog-select__label--float{top:var(--gog-select-float-top-padding);transform:none}.gog-select--float-in.gog-select--floated .gog-select__label--float{top:var(--gog-select-float-label-in-top);transform:translateY(0);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)}.gog-select--float-on.gog-select--floated .gog-select__label--float{top:0;transform:translateY(-50%);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);background-color:var(--gog-select-float-label-on-bg, var(--gog-select-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-select--float-over.gog-select--floated .gog-select__label--float{top:calc(-1 * var(--gog-select-float-label-over-gap));transform:translateY(-100%);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)}.gog-select--float-over .gog-select__field{margin-top:var(--gog-select-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option,.gog-select__label--float{transition:none}}.gog-select__clear{position:absolute;top:50%;inset-inline-end:var(--gog-select-chevron-inset);transform:translateY(-50%);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)));padding:0;border:0;border-radius:var(--gog-select-clear-radius);background:transparent;color:var(--gog-select-clear-color);line-height:1;cursor:pointer;transition:color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__clear:hover{color:var(--gog-select-clear-hover-color)}.gog-select__clear: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__clear 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-clear-icon-ratio))}.gog-select--clearable .gog-select__control{padding-inline-end:calc(var(--gog-select-chevron-inset) + var(--gog-select-clear-gap) + var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))))}.gog-select__filter{position:sticky;top:0;z-index:1;padding:var(--gog-select-filter-padding);background:var(--gog-select-panel-bg)}.gog-select__filter-input{width:100%;padding:var(--gog-select-filter-input-padding-y) var(--gog-select-filter-input-padding-x);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-filter-input-color);background:var(--gog-select-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-select-filter-input-border);border-radius:var(--gog-select-filter-input-radius);outline:none}.gog-select__filter-input:focus{border-color:var(--gog-select-focus-border)}.gog-select__empty{margin:0;padding:var(--gog-select-filter-empty-padding);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-filter-empty-color);text-align:center}.gog-select__filter--top{border-bottom:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}.gog-select__filter--bottom{top:auto;bottom:0;border-top:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-select__control{min-width:var(--gog-select-min-width)}.gog-select__dropdown--portal{max-width:var(--gog-select-panel-max-width)}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6821
|
+
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" }, host: { properties: { "style.--gog-select-min-width": "minWidth()" } }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\r\n Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n paint over the open dropdown.\r\n-->\r\n<div\r\n class=\"gog-select\"\r\n [class.gog-select--clearable]=\"showClear()\"\r\n [class]=\"sizeClass()\"\r\n [class.gog-select--disabled]=\"isDisabled()\"\r\n [class.gog-select--open]=\"isOpen()\"\r\n [class.gog-select--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n [class.gog-select--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n [class.gog-select--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n [class.gog-select--floated]=\"isFloatLabelFloated()\"\r\n>\r\n <!--\r\n Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\r\n not a labelable element, so `for` pointing at it is silently ignored by browsers and\r\n assistive tech alike.\r\n -->\r\n @if (label() && resolvedFloatLabel() === 'none') {\r\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n }\r\n\r\n <div class=\"gog-select__field\">\r\n @if (label() && isFloatLabelActive()) {\r\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n <label class=\"gog-select__label gog-select__label--float\" [id]=\"labelId()\">{{\r\n label()\r\n }}</label>\r\n }\r\n <button\r\n type=\"button\"\r\n class=\"gog-select__control\"\r\n [id]=\"triggerId()\"\r\n [disabled]=\"isDisabled()\"\r\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\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 (focus)=\"onFocusIn()\"\r\n (blur)=\"onFocusOut()\"\r\n (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n (keydown.escape)=\"close()\"\r\n (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n >\r\n <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\r\n {{ selectedLabel() || effectivePlaceholder() }}\r\n </span>\r\n\r\n <span\r\n class=\"gog-select__chevron\"\r\n [class.gog-select__chevron--auto-rotate]=\"!chevronSlot()\"\r\n aria-hidden=\"true\"\r\n >\r\n <gog-icon [template]=\"chevronSlot()?.templateRef ?? null\" name=\"chevron-down\" />\r\n </span>\r\n </button>\r\n\r\n <!--\r\n A sibling of the trigger, not a child: `.gog-select__control` is a <button>, and nesting\r\n one button inside another is invalid HTML. It is positioned over the trigger's right edge\r\n by the stylesheet, which also reserves room for it so it never covers the value text.\r\n -->\r\n @if (showClear()) {\r\n <button\r\n type=\"button\"\r\n class=\"gog-select__clear gog-inline-center\"\r\n [attr.aria-label]=\"resolvedClearLabel()\"\r\n (click)=\"clearValue($event)\"\r\n >\r\n <gog-icon name=\"close\" />\r\n </button>\r\n }\r\n\r\n @if (isOpen() && !resolvedAppendToBody()) {\r\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n }\r\n </div>\r\n\r\n @if (hasError()) {\r\n <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n {{ visibleError() }}\r\n </span>\r\n }\r\n</div>\r\n\r\n<!--\r\n One template for both render modes. When `appendToBody` is set it is stamped into\r\n <body> by the overlay, which is why the portal-only modifier and the resolved\r\n coordinates are applied conditionally: outside the component's subtree the panel can\r\n no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\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 -->\r\n <div\r\n [id]=\"listboxId()\"\r\n class=\"gog-select__dropdown\"\r\n [class.gog-select__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n [class.gog-select__dropdown--portal]=\"resolvedAppendToBody()\"\r\n [class]=\"panelSizeClass()\"\r\n [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n role=\"listbox\"\r\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <!--\r\n Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n focus moved between options via the arrow keys (roving-focus.ts), which already\r\n scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n needed here.\r\n -->\r\n @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n <div class=\"gog-select__filter gog-select__filter--top\">\r\n <input\r\n type=\"text\"\r\n class=\"gog-select__filter-input\"\r\n [placeholder]=\"filterPlaceholder()\"\r\n [value]=\"filterQuery()\"\r\n (input)=\"onFilterInput($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown.escape)=\"close(); focusTrigger()\"\r\n />\r\n </div>\r\n }\r\n <gog-scroll\r\n size=\"thin\"\r\n [focusable]=\"false\"\r\n overscrollBehavior=\"contain\"\r\n class=\"gog-select__scroll\"\r\n >\r\n @if (visibleOptions().length === 0) {\r\n <p class=\"gog-select__empty\">{{ filterEmptyMessage() }}</p>\r\n }\r\n @for (option of visibleOptions(); track valueOf(option)) {\r\n <!--\r\n tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\r\n focus is moved between options with the arrow keys, not by tabbing through every\r\n one of them. Programmatic .focus() still works on a negative tabindex.\r\n -->\r\n <button\r\n type=\"button\"\r\n class=\"gog-select__option\"\r\n role=\"option\"\r\n tabindex=\"-1\"\r\n [attr.aria-selected]=\"isSelected(option)\"\r\n [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n [class.gog-select__option--selected]=\"isSelected(option)\"\r\n [class.gog-select__option--disabled]=\"isOptionDisabled(option)\"\r\n (click)=\"selectOption(option, $event)\"\r\n (keydown)=\"onOptionKeydown($event)\"\r\n gogRipple\r\n [rippleDisabled]=\"!rippleEnabled()\"\r\n >\r\n @if (optionSlot(); as slot) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n slot.templateRef;\r\n context: optionContext(option, isSelected(option))\r\n \"\r\n />\r\n } @else {\r\n <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\r\n @if (isSelected(option)) {\r\n <gog-icon name=\"check\" />\r\n }\r\n </span>\r\n <span class=\"gog-select__option-label\">{{ labelOf(option) }}</span>\r\n }\r\n </button>\r\n }\r\n </gog-scroll>\r\n @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n <div class=\"gog-select__filter gog-select__filter--bottom\">\r\n <input\r\n type=\"text\"\r\n class=\"gog-select__filter-input\"\r\n [placeholder]=\"filterPlaceholder()\"\r\n [value]=\"filterQuery()\"\r\n (input)=\"onFilterInput($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown.escape)=\"close(); focusTrigger()\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:fit-content}.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-block:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-select-chevron-inset);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:start}.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--auto-rotate{transition:transform var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--open .gog-select__chevron--auto-rotate{transform:rotate(180deg)}.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));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-select-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;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:hidden;box-shadow:var(--gog-select-panel-shadow)}.gog-select__scroll{flex:1;min-height:0}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline: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:start;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)}.gog-select__label--float{position:absolute;inset-inline-start:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-select-placeholder-color);font-size:var(--gog-select-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-select-transition-duration) var(--gog-easing),font-size var(--gog-select-transition-duration) var(--gog-easing),color var(--gog-select-transition-duration) var(--gog-easing),top var(--gog-select-transition-duration) var(--gog-easing),background-color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--float-in,.gog-select--float-on{--gog-select-float-top-padding: calc(var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-select-float-label-reserve))}.gog-select--float-in .gog-select__control,.gog-select--float-on .gog-select__control{padding-top:var(--gog-select-float-top-padding)}.gog-select--float-in .gog-select__label--float,.gog-select--float-on .gog-select__label--float{top:var(--gog-select-float-top-padding);transform:none}.gog-select--float-in.gog-select--floated .gog-select__label--float{top:var(--gog-select-float-label-in-top);transform:translateY(0);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)}.gog-select--float-on.gog-select--floated .gog-select__label--float{top:0;transform:translateY(-50%);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);background-color:var(--gog-select-float-label-on-bg, var(--gog-select-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-select--float-over.gog-select--floated .gog-select__label--float{top:calc(-1 * var(--gog-select-float-label-over-gap));transform:translateY(-100%);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)}.gog-select--float-over .gog-select__field{margin-top:var(--gog-select-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option,.gog-select__chevron--auto-rotate,.gog-select__label--float{transition:none}}.gog-select__clear{position:absolute;top:50%;inset-inline-end:var(--gog-select-chevron-inset);transform:translateY(-50%);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)));padding:0;border:0;border-radius:var(--gog-select-clear-radius);background:transparent;color:var(--gog-select-clear-color);line-height:1;cursor:pointer;transition:color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__clear:hover{color:var(--gog-select-clear-hover-color)}.gog-select__clear: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__clear 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-clear-icon-ratio))}.gog-select--clearable .gog-select__control{padding-inline-end:calc(var(--gog-select-chevron-inset) + var(--gog-select-clear-gap) + var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))))}.gog-select__filter{position:sticky;top:0;z-index:1;padding:var(--gog-select-filter-padding);background:var(--gog-select-panel-bg)}.gog-select__filter-input{width:100%;padding:var(--gog-select-filter-input-padding-y) var(--gog-select-filter-input-padding-x);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-filter-input-color);background:var(--gog-select-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-select-filter-input-border);border-radius:var(--gog-select-filter-input-radius);outline:none}.gog-select__filter-input:focus{border-color:var(--gog-select-focus-border)}.gog-select__empty{margin:0;padding:var(--gog-select-filter-empty-padding);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-filter-empty-color);text-align:center}.gog-select__filter--top{border-bottom:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}.gog-select__filter--bottom{top:auto;bottom:0;border-top:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-select__control{min-width:var(--gog-select-min-width)}.gog-select__dropdown--portal{max-width:var(--gog-select-panel-max-width)}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6732
6822
|
}
|
|
6733
6823
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, decorators: [{
|
|
6734
6824
|
type: Component,
|
|
6735
6825
|
args: [{ selector: 'gog-select', imports: [GogRippleDirective, IconComponent, NgTemplateOutlet, ScrollComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
6736
6826
|
// Only bites when the control has opted out of full width; otherwise the container decides.
|
|
6737
6827
|
'[style.--gog-select-min-width]': 'minWidth()',
|
|
6738
|
-
}, template: "<!--\r\n Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n paint over the open dropdown.\r\n-->\r\n<div\r\n class=\"gog-select\"\r\n [class.gog-select--clearable]=\"showClear()\"\r\n [class]=\"sizeClass()\"\r\n [class.gog-select--disabled]=\"isDisabled()\"\r\n [class.gog-select--open]=\"isOpen()\"\r\n [class.gog-select--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n [class.gog-select--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n [class.gog-select--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n [class.gog-select--floated]=\"isFloatLabelFloated()\"\r\n>\r\n <!--\r\n Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\r\n not a labelable element, so `for` pointing at it is silently ignored by browsers and\r\n assistive tech alike.\r\n -->\r\n @if (label() && resolvedFloatLabel() === 'none') {\r\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n }\r\n\r\n <div class=\"gog-select__field\">\r\n @if (label() && isFloatLabelActive()) {\r\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n <label class=\"gog-select__label gog-select__label--float\" [id]=\"labelId()\">{{\r\n label()\r\n }}</label>\r\n }\r\n <button\r\n type=\"button\"\r\n class=\"gog-select__control\"\r\n [id]=\"triggerId()\"\r\n [disabled]=\"isDisabled()\"\r\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\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 (focus)=\"onFocusIn()\"\r\n (blur)=\"onFocusOut()\"\r\n (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n (keydown.escape)=\"close()\"\r\n (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n >\r\n <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\r\n {{ selectedLabel() || effectivePlaceholder() }}\r\n </span>\r\n\r\n <span class=\"gog-select__chevron\" aria-hidden=\"true\">\r\n <gog-icon [template]=\"chevronSlot()?.templateRef ?? null\" name=\"chevron-down\" />\r\n </span>\r\n </button>\r\n\r\n <!--\r\n A sibling of the trigger, not a child: `.gog-select__control` is a <button>, and nesting\r\n one button inside another is invalid HTML. It is positioned over the trigger's right edge\r\n by the stylesheet, which also reserves room for it so it never covers the value text.\r\n -->\r\n @if (showClear()) {\r\n <button\r\n type=\"button\"\r\n class=\"gog-select__clear gog-inline-center\"\r\n [attr.aria-label]=\"resolvedClearLabel()\"\r\n (click)=\"clearValue($event)\"\r\n >\r\n <gog-icon name=\"close\" />\r\n </button>\r\n }\r\n\r\n @if (isOpen() && !resolvedAppendToBody()) {\r\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n }\r\n </div>\r\n\r\n @if (hasError()) {\r\n <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n {{ visibleError() }}\r\n </span>\r\n }\r\n</div>\r\n\r\n<!--\r\n One template for both render modes. When `appendToBody` is set it is stamped into\r\n <body> by the overlay, which is why the portal-only modifier and the resolved\r\n coordinates are applied conditionally: outside the component's subtree the panel can\r\n no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\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 -->\r\n <div\r\n [id]=\"listboxId()\"\r\n class=\"gog-select__dropdown\"\r\n [class.gog-select__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n [class.gog-select__dropdown--portal]=\"resolvedAppendToBody()\"\r\n [class]=\"panelSizeClass()\"\r\n [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n role=\"listbox\"\r\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <!--\r\n Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n focus moved between options via the arrow keys (roving-focus.ts), which already\r\n scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n needed here.\r\n -->\r\n @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n <div class=\"gog-select__filter gog-select__filter--top\">\r\n <input\r\n type=\"text\"\r\n class=\"gog-select__filter-input\"\r\n [placeholder]=\"filterPlaceholder()\"\r\n [value]=\"filterQuery()\"\r\n (input)=\"onFilterInput($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown.escape)=\"close(); focusTrigger()\"\r\n />\r\n </div>\r\n }\r\n <gog-scroll\r\n size=\"thin\"\r\n [focusable]=\"false\"\r\n overscrollBehavior=\"contain\"\r\n class=\"gog-select__scroll\"\r\n >\r\n @if (visibleOptions().length === 0) {\r\n <p class=\"gog-select__empty\">{{ filterEmptyMessage() }}</p>\r\n }\r\n @for (option of visibleOptions(); track valueOf(option)) {\r\n <!--\r\n tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\r\n focus is moved between options with the arrow keys, not by tabbing through every\r\n one of them. Programmatic .focus() still works on a negative tabindex.\r\n -->\r\n <button\r\n type=\"button\"\r\n class=\"gog-select__option\"\r\n role=\"option\"\r\n tabindex=\"-1\"\r\n [attr.aria-selected]=\"isSelected(option)\"\r\n [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n [class.gog-select__option--selected]=\"isSelected(option)\"\r\n [class.gog-select__option--disabled]=\"isOptionDisabled(option)\"\r\n (click)=\"selectOption(option, $event)\"\r\n (keydown)=\"onOptionKeydown($event)\"\r\n gogRipple\r\n [rippleDisabled]=\"!rippleEnabled()\"\r\n >\r\n @if (optionSlot(); as slot) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n slot.templateRef;\r\n context: optionContext(option, isSelected(option))\r\n \"\r\n />\r\n } @else {\r\n <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\r\n @if (isSelected(option)) {\r\n <gog-icon name=\"check\" />\r\n }\r\n </span>\r\n <span class=\"gog-select__option-label\">{{ labelOf(option) }}</span>\r\n }\r\n </button>\r\n }\r\n </gog-scroll>\r\n @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n <div class=\"gog-select__filter gog-select__filter--bottom\">\r\n <input\r\n type=\"text\"\r\n class=\"gog-select__filter-input\"\r\n [placeholder]=\"filterPlaceholder()\"\r\n [value]=\"filterQuery()\"\r\n (input)=\"onFilterInput($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown.escape)=\"close(); focusTrigger()\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:fit-content}.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-block:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-select-chevron-inset);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:start}.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));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-select-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;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:hidden;box-shadow:var(--gog-select-panel-shadow)}.gog-select__scroll{flex:1;min-height:0}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline: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:start;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)}.gog-select__label--float{position:absolute;inset-inline-start:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-select-placeholder-color);font-size:var(--gog-select-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-select-transition-duration) var(--gog-easing),font-size var(--gog-select-transition-duration) var(--gog-easing),color var(--gog-select-transition-duration) var(--gog-easing),top var(--gog-select-transition-duration) var(--gog-easing),background-color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--float-in,.gog-select--float-on{--gog-select-float-top-padding: calc(var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-select-float-label-reserve))}.gog-select--float-in .gog-select__control,.gog-select--float-on .gog-select__control{padding-top:var(--gog-select-float-top-padding)}.gog-select--float-in .gog-select__label--float,.gog-select--float-on .gog-select__label--float{top:var(--gog-select-float-top-padding);transform:none}.gog-select--float-in.gog-select--floated .gog-select__label--float{top:var(--gog-select-float-label-in-top);transform:translateY(0);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)}.gog-select--float-on.gog-select--floated .gog-select__label--float{top:0;transform:translateY(-50%);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);background-color:var(--gog-select-float-label-on-bg, var(--gog-select-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-select--float-over.gog-select--floated .gog-select__label--float{top:calc(-1 * var(--gog-select-float-label-over-gap));transform:translateY(-100%);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)}.gog-select--float-over .gog-select__field{margin-top:var(--gog-select-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option,.gog-select__label--float{transition:none}}.gog-select__clear{position:absolute;top:50%;inset-inline-end:var(--gog-select-chevron-inset);transform:translateY(-50%);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)));padding:0;border:0;border-radius:var(--gog-select-clear-radius);background:transparent;color:var(--gog-select-clear-color);line-height:1;cursor:pointer;transition:color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__clear:hover{color:var(--gog-select-clear-hover-color)}.gog-select__clear: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__clear 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-clear-icon-ratio))}.gog-select--clearable .gog-select__control{padding-inline-end:calc(var(--gog-select-chevron-inset) + var(--gog-select-clear-gap) + var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))))}.gog-select__filter{position:sticky;top:0;z-index:1;padding:var(--gog-select-filter-padding);background:var(--gog-select-panel-bg)}.gog-select__filter-input{width:100%;padding:var(--gog-select-filter-input-padding-y) var(--gog-select-filter-input-padding-x);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-filter-input-color);background:var(--gog-select-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-select-filter-input-border);border-radius:var(--gog-select-filter-input-radius);outline:none}.gog-select__filter-input:focus{border-color:var(--gog-select-focus-border)}.gog-select__empty{margin:0;padding:var(--gog-select-filter-empty-padding);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-filter-empty-color);text-align:center}.gog-select__filter--top{border-bottom:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}.gog-select__filter--bottom{top:auto;bottom:0;border-top:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-select__control{min-width:var(--gog-select-min-width)}.gog-select__dropdown--portal{max-width:var(--gog-select-panel-max-width)}\n"] }]
|
|
6828
|
+
}, template: "<!--\r\n Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n paint over the open dropdown.\r\n-->\r\n<div\r\n class=\"gog-select\"\r\n [class.gog-select--clearable]=\"showClear()\"\r\n [class]=\"sizeClass()\"\r\n [class.gog-select--disabled]=\"isDisabled()\"\r\n [class.gog-select--open]=\"isOpen()\"\r\n [class.gog-select--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n [class.gog-select--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n [class.gog-select--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n [class.gog-select--floated]=\"isFloatLabelFloated()\"\r\n>\r\n <!--\r\n Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\r\n not a labelable element, so `for` pointing at it is silently ignored by browsers and\r\n assistive tech alike.\r\n -->\r\n @if (label() && resolvedFloatLabel() === 'none') {\r\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n }\r\n\r\n <div class=\"gog-select__field\">\r\n @if (label() && isFloatLabelActive()) {\r\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n <label class=\"gog-select__label gog-select__label--float\" [id]=\"labelId()\">{{\r\n label()\r\n }}</label>\r\n }\r\n <button\r\n type=\"button\"\r\n class=\"gog-select__control\"\r\n [id]=\"triggerId()\"\r\n [disabled]=\"isDisabled()\"\r\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\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 (focus)=\"onFocusIn()\"\r\n (blur)=\"onFocusOut()\"\r\n (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n (keydown.escape)=\"close()\"\r\n (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n >\r\n <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\r\n {{ selectedLabel() || effectivePlaceholder() }}\r\n </span>\r\n\r\n <span\r\n class=\"gog-select__chevron\"\r\n [class.gog-select__chevron--auto-rotate]=\"!chevronSlot()\"\r\n aria-hidden=\"true\"\r\n >\r\n <gog-icon [template]=\"chevronSlot()?.templateRef ?? null\" name=\"chevron-down\" />\r\n </span>\r\n </button>\r\n\r\n <!--\r\n A sibling of the trigger, not a child: `.gog-select__control` is a <button>, and nesting\r\n one button inside another is invalid HTML. It is positioned over the trigger's right edge\r\n by the stylesheet, which also reserves room for it so it never covers the value text.\r\n -->\r\n @if (showClear()) {\r\n <button\r\n type=\"button\"\r\n class=\"gog-select__clear gog-inline-center\"\r\n [attr.aria-label]=\"resolvedClearLabel()\"\r\n (click)=\"clearValue($event)\"\r\n >\r\n <gog-icon name=\"close\" />\r\n </button>\r\n }\r\n\r\n @if (isOpen() && !resolvedAppendToBody()) {\r\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n }\r\n </div>\r\n\r\n @if (hasError()) {\r\n <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n {{ visibleError() }}\r\n </span>\r\n }\r\n</div>\r\n\r\n<!--\r\n One template for both render modes. When `appendToBody` is set it is stamped into\r\n <body> by the overlay, which is why the portal-only modifier and the resolved\r\n coordinates are applied conditionally: outside the component's subtree the panel can\r\n no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\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 -->\r\n <div\r\n [id]=\"listboxId()\"\r\n class=\"gog-select__dropdown\"\r\n [class.gog-select__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n [class.gog-select__dropdown--portal]=\"resolvedAppendToBody()\"\r\n [class]=\"panelSizeClass()\"\r\n [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n role=\"listbox\"\r\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <!--\r\n Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n focus moved between options via the arrow keys (roving-focus.ts), which already\r\n scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n needed here.\r\n -->\r\n @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n <div class=\"gog-select__filter gog-select__filter--top\">\r\n <input\r\n type=\"text\"\r\n class=\"gog-select__filter-input\"\r\n [placeholder]=\"filterPlaceholder()\"\r\n [value]=\"filterQuery()\"\r\n (input)=\"onFilterInput($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown.escape)=\"close(); focusTrigger()\"\r\n />\r\n </div>\r\n }\r\n <gog-scroll\r\n size=\"thin\"\r\n [focusable]=\"false\"\r\n overscrollBehavior=\"contain\"\r\n class=\"gog-select__scroll\"\r\n >\r\n @if (visibleOptions().length === 0) {\r\n <p class=\"gog-select__empty\">{{ filterEmptyMessage() }}</p>\r\n }\r\n @for (option of visibleOptions(); track valueOf(option)) {\r\n <!--\r\n tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\r\n focus is moved between options with the arrow keys, not by tabbing through every\r\n one of them. Programmatic .focus() still works on a negative tabindex.\r\n -->\r\n <button\r\n type=\"button\"\r\n class=\"gog-select__option\"\r\n role=\"option\"\r\n tabindex=\"-1\"\r\n [attr.aria-selected]=\"isSelected(option)\"\r\n [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n [class.gog-select__option--selected]=\"isSelected(option)\"\r\n [class.gog-select__option--disabled]=\"isOptionDisabled(option)\"\r\n (click)=\"selectOption(option, $event)\"\r\n (keydown)=\"onOptionKeydown($event)\"\r\n gogRipple\r\n [rippleDisabled]=\"!rippleEnabled()\"\r\n >\r\n @if (optionSlot(); as slot) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n slot.templateRef;\r\n context: optionContext(option, isSelected(option))\r\n \"\r\n />\r\n } @else {\r\n <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\r\n @if (isSelected(option)) {\r\n <gog-icon name=\"check\" />\r\n }\r\n </span>\r\n <span class=\"gog-select__option-label\">{{ labelOf(option) }}</span>\r\n }\r\n </button>\r\n }\r\n </gog-scroll>\r\n @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n <div class=\"gog-select__filter gog-select__filter--bottom\">\r\n <input\r\n type=\"text\"\r\n class=\"gog-select__filter-input\"\r\n [placeholder]=\"filterPlaceholder()\"\r\n [value]=\"filterQuery()\"\r\n (input)=\"onFilterInput($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown.escape)=\"close(); focusTrigger()\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:fit-content}.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-block:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-select-chevron-inset);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:start}.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--auto-rotate{transition:transform var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--open .gog-select__chevron--auto-rotate{transform:rotate(180deg)}.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));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-select-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;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:hidden;box-shadow:var(--gog-select-panel-shadow)}.gog-select__scroll{flex:1;min-height:0}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline: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:start;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)}.gog-select__label--float{position:absolute;inset-inline-start:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-select-placeholder-color);font-size:var(--gog-select-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-select-transition-duration) var(--gog-easing),font-size var(--gog-select-transition-duration) var(--gog-easing),color var(--gog-select-transition-duration) var(--gog-easing),top var(--gog-select-transition-duration) var(--gog-easing),background-color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--float-in,.gog-select--float-on{--gog-select-float-top-padding: calc(var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-select-float-label-reserve))}.gog-select--float-in .gog-select__control,.gog-select--float-on .gog-select__control{padding-top:var(--gog-select-float-top-padding)}.gog-select--float-in .gog-select__label--float,.gog-select--float-on .gog-select__label--float{top:var(--gog-select-float-top-padding);transform:none}.gog-select--float-in.gog-select--floated .gog-select__label--float{top:var(--gog-select-float-label-in-top);transform:translateY(0);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)}.gog-select--float-on.gog-select--floated .gog-select__label--float{top:0;transform:translateY(-50%);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);background-color:var(--gog-select-float-label-on-bg, var(--gog-select-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-select--float-over.gog-select--floated .gog-select__label--float{top:calc(-1 * var(--gog-select-float-label-over-gap));transform:translateY(-100%);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)}.gog-select--float-over .gog-select__field{margin-top:var(--gog-select-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option,.gog-select__chevron--auto-rotate,.gog-select__label--float{transition:none}}.gog-select__clear{position:absolute;top:50%;inset-inline-end:var(--gog-select-chevron-inset);transform:translateY(-50%);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)));padding:0;border:0;border-radius:var(--gog-select-clear-radius);background:transparent;color:var(--gog-select-clear-color);line-height:1;cursor:pointer;transition:color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__clear:hover{color:var(--gog-select-clear-hover-color)}.gog-select__clear: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__clear 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-clear-icon-ratio))}.gog-select--clearable .gog-select__control{padding-inline-end:calc(var(--gog-select-chevron-inset) + var(--gog-select-clear-gap) + var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))))}.gog-select__filter{position:sticky;top:0;z-index:1;padding:var(--gog-select-filter-padding);background:var(--gog-select-panel-bg)}.gog-select__filter-input{width:100%;padding:var(--gog-select-filter-input-padding-y) var(--gog-select-filter-input-padding-x);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-filter-input-color);background:var(--gog-select-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-select-filter-input-border);border-radius:var(--gog-select-filter-input-radius);outline:none}.gog-select__filter-input:focus{border-color:var(--gog-select-focus-border)}.gog-select__empty{margin:0;padding:var(--gog-select-filter-empty-padding);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-filter-empty-color);text-align:center}.gog-select__filter--top{border-bottom:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}.gog-select__filter--bottom{top:auto;bottom:0;border-top:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-select__control{min-width:var(--gog-select-min-width)}.gog-select__dropdown--portal{max-width:var(--gog-select-panel-max-width)}\n"] }]
|
|
6739
6829
|
}], 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 }] }] } });
|
|
6740
6830
|
|
|
6741
6831
|
const DEFAULT_GAP$2 = 4;
|
|
@@ -7122,7 +7212,7 @@ class MenuComponent {
|
|
|
7122
7212
|
const written = scopedOverlayDirection(trigger, this.document.documentElement);
|
|
7123
7213
|
const direction = written ?? (styles.direction === 'rtl' ? 'rtl' : 'ltr');
|
|
7124
7214
|
const inheritedZ = styles.getPropertyValue('--gog-dropdown-z').trim();
|
|
7125
|
-
this.panelZIndex.set(inheritedZ ? (
|
|
7215
|
+
this.panelZIndex.set(inheritedZ ? resolveNumberToken(trigger, '--gog-dropdown-z', 0) : null);
|
|
7126
7216
|
const size = panel
|
|
7127
7217
|
? { width: panel.offsetWidth, height: panel.scrollHeight }
|
|
7128
7218
|
: {
|
|
@@ -7611,7 +7701,7 @@ class GogTooltipDirective {
|
|
|
7611
7701
|
// untransformed layout box, which is the size to position against.
|
|
7612
7702
|
const bubbleSize = { width: bubbleEl.offsetWidth, height: bubbleEl.offsetHeight };
|
|
7613
7703
|
const viewport = { width: window.innerWidth, height: window.innerHeight };
|
|
7614
|
-
const gap =
|
|
7704
|
+
const gap = resolveLengthToken(hostEl, '--gog-tooltip-gap', DEFAULT_GAP);
|
|
7615
7705
|
const placement = resolveTooltipPlacement(this.resolvedPosition(), targetRect, bubbleSize, viewport, gap, VIEWPORT_PADDING,
|
|
7616
7706
|
// Read from the target rather than the document: a tooltip on a trigger inside an RTL
|
|
7617
7707
|
// region of an LTR page has to mirror with that region, not with the page.
|
|
@@ -7631,11 +7721,11 @@ class GogTooltipDirective {
|
|
|
7631
7721
|
resolveZIndex(hostEl) {
|
|
7632
7722
|
const inherited = getComputedStyle(hostEl).getPropertyValue('--gog-tooltip-z').trim();
|
|
7633
7723
|
if (inherited)
|
|
7634
|
-
return
|
|
7724
|
+
return resolveNumberToken(hostEl, '--gog-tooltip-z', DEFAULT_Z_INDEX);
|
|
7635
7725
|
for (let node = hostEl; node; node = node.parentElement) {
|
|
7636
7726
|
const declared = node.style.getPropertyValue('--gog-tooltip-z').trim();
|
|
7637
7727
|
if (declared)
|
|
7638
|
-
return
|
|
7728
|
+
return resolveNumberToken(node, '--gog-tooltip-z', DEFAULT_Z_INDEX);
|
|
7639
7729
|
}
|
|
7640
7730
|
return DEFAULT_Z_INDEX;
|
|
7641
7731
|
}
|
|
@@ -7660,13 +7750,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
7660
7750
|
},
|
|
7661
7751
|
}]
|
|
7662
7752
|
}], ctorParameters: () => [], propDecorators: { gogTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "gogTooltip", required: false }] }], gogTooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "gogTooltipPosition", required: false }] }], gogTooltipShowDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "gogTooltipShowDelay", required: false }] }], gogTooltipHideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "gogTooltipHideDelay", required: false }] }], gogTooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "gogTooltipDisabled", required: false }] }], gogTooltipClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "gogTooltipClass", required: false }] }] } });
|
|
7663
|
-
function readNumber(raw, fallback) {
|
|
7664
|
-
const parsed = Number.parseFloat(raw);
|
|
7665
|
-
return Number.isFinite(parsed) ? parsed : fallback;
|
|
7666
|
-
}
|
|
7667
|
-
function readPxToken(el, token, fallback) {
|
|
7668
|
-
return readNumber(getComputedStyle(el).getPropertyValue(token), fallback);
|
|
7669
|
-
}
|
|
7670
7753
|
|
|
7671
7754
|
/** Height of the select-all/clear row, included in the panel height estimate. */
|
|
7672
7755
|
const CONTROLS_ROW_HEIGHT = 38;
|
|
@@ -7727,10 +7810,10 @@ class MultiselectComponent extends GogDropdownBase {
|
|
|
7727
7810
|
clearableByDefault = true;
|
|
7728
7811
|
sizeBlockClass = 'gog-ms-wrapper';
|
|
7729
7812
|
panelBlockClass = 'gog-ms__dropdown';
|
|
7730
|
-
optionGapToken = '--gog-
|
|
7731
|
-
optionsPaddingToken = '--gog-
|
|
7732
|
-
panelMaxHeightToken = '--gog-
|
|
7733
|
-
optionHeightToken = '--gog-
|
|
7813
|
+
optionGapToken = '--gog-multiselect-option-gap';
|
|
7814
|
+
optionsPaddingToken = '--gog-multiselect-options-padding';
|
|
7815
|
+
panelMaxHeightToken = '--gog-multiselect-panel-max-height';
|
|
7816
|
+
optionHeightToken = '--gog-multiselect-option-height';
|
|
7734
7817
|
listboxId = computed(() => `gog-ms-listbox-${this.uid}`, ...(ngDevMode ? [{ debugName: "listboxId" }] : /* istanbul ignore next */ []));
|
|
7735
7818
|
labelId = computed(() => `gog-ms-label-${this.uid}`, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
|
|
7736
7819
|
/** Labels of the current selection, driven off the selected *options* so it works whatever
|
|
@@ -8851,7 +8934,7 @@ class TableComponent {
|
|
|
8851
8934
|
/** CSS grid-area for the pagination block */
|
|
8852
8935
|
paginatorGridArea = computed(() => this.paginatorPosition(), ...(ngDevMode ? [{ debugName: "paginatorGridArea" }] : /* istanbul ignore next */ []));
|
|
8853
8936
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8854
|
-
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 }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelect: { classPropertyName: "showPageSizeSelect", publicName: "showPageSizeSelect", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, interactiveRows: { classPropertyName: "interactiveRows", publicName: "interactiveRows", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, showSelectionColumn: { classPropertyName: "showSelectionColumn", publicName: "showSelectionColumn", 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 }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", selection: "selectionChange", gogSortChange: "gogSortChange", gogPageChange: "gogPageChange", gogRowClick: "gogRowClick" }, host: { properties: { "style.display": "\"block\"", "style.width": "fullWidth() ? \"100%\" : \"fit-content\"", "attr.aria-busy": "loading() ? \"true\" : null" }, classAttribute: "gog-table-host" }, queries: [{ propertyName: "columns", predicate: GogColumn, isSignal: true }], ngImport: i0, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\r\n <!--\r\n The vertical axis is enabled only when the table has been capped. Left on for an uncapped\r\n table, `gog-scroll` would make this viewport a scroll container on both axes, which puts it\r\n in the sticky chain of everything inside it and takes the consumer's own scrolling region\r\n out of it \u2014 measured: a header that used to pin to that region rode away by 147px.\r\n -->\r\n <gog-scroll\r\n [axis]=\"maxHeight() ? 'both' : 'horizontal'\"\r\n [style.max-height]=\"maxHeight()\"\r\n class=\"gog-table-scroll\"\r\n >\r\n <table\r\n class=\"gog-table\"\r\n [class]=\"sizeClass()\"\r\n [class.gog-table--col-borders]=\"showColumnBorders()\"\r\n [class.gog-table--loading]=\"loading()\"\r\n [class.gog-table--sticky-header]=\"stickyHeader()\"\r\n [class.gog-table--auto-layout]=\"!fullWidth()\"\r\n [style.width]=\"fullWidth() ? '100%' : 'fit-content'\"\r\n >\r\n <colgroup>\r\n @if (hasSelectionColumn()) {\r\n <col class=\"gog-table__col--select\" />\r\n }\r\n @if (showRowNumbers()) {\r\n <col class=\"gog-table__col--num\" />\r\n }\r\n @for (col of columns(); track col.field()) {\r\n <col\r\n [style.width]=\"col.width() || null\"\r\n [style.min-width]=\"col.minWidth() || null\"\r\n [style.max-width]=\"col.maxWidth() || null\"\r\n />\r\n }\r\n </colgroup>\r\n <thead>\r\n <tr>\r\n @if (hasSelectionColumn()) {\r\n <th class=\"gog-table__th gog-table__th--select\" scope=\"col\">\r\n <!--\r\n Only `multiple` gets a select-all: in `single` mode there is nothing to select\r\n all of, and a checkbox that can only ever check one row is a lie.\r\n -->\r\n @if (selectionMode() === 'multiple') {\r\n <gog-checkbox\r\n [checked]=\"allPageRowsSelected()\"\r\n [indeterminate]=\"somePageRowsSelected()\"\r\n [disabled]=\"loading() || visibleRows().length === 0\"\r\n [ariaLabel]=\"resolvedLabels().selectAllRows\"\r\n (checkedChange)=\"toggleAllOnPage($event)\"\r\n />\r\n }\r\n </th>\r\n }\r\n @if (showRowNumbers()) {\r\n <th class=\"gog-table__th gog-table__th--num\" scope=\"col\">#</th>\r\n }\r\n @for (col of columns(); track col.field()) {\r\n <th\r\n class=\"gog-table__th\"\r\n scope=\"col\"\r\n [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\r\n [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\r\n [attr.aria-sort]=\"getAriaSort(col.field())\"\r\n [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\r\n (click)=\"handleSortClick(col)\"\r\n (keydown.enter)=\"handleSortClick(col)\"\r\n (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\r\n >\r\n @if (getHeaderTemplate(col); as headerTpl) {\r\n <ng-container *ngTemplateOutlet=\"headerTpl; context: headerContext(col)\" />\r\n } @else {\r\n <span class=\"gog-table__th-inner\">\r\n {{ col.header() || col.field() }}\r\n @if (col.sortable() && !loading()) {\r\n <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\r\n @if (getSortDirection(col.field()) === 'asc') {\r\n <gog-icon name=\"sort-up\" />\r\n } @else if (getSortDirection(col.field()) === 'desc') {\r\n <gog-icon name=\"sort-down\" />\r\n } @else {\r\n <gog-icon name=\"sort\" />\r\n }\r\n </span>\r\n }\r\n </span>\r\n }\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @if (loading()) {\r\n <tr>\r\n <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\r\n <gog-spinner size=\"md\" />\r\n </td>\r\n </tr>\r\n } @else if (visibleRows().length === 0) {\r\n <tr>\r\n <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\r\n </tr>\r\n } @else {\r\n @for (row of visibleRows(); track rowKey(row); let i = $index) {\r\n <tr\r\n class=\"gog-table__row\"\r\n [class.gog-table__row--interactive]=\"interactiveRows()\"\r\n [class.gog-table__row--selected]=\"isSelected(row)\"\r\n [attr.tabindex]=\"interactiveRows() ? 0 : null\"\r\n [attr.aria-selected]=\"hasSelection() ? isSelected(row) : null\"\r\n (click)=\"emitRowClick(row, i, $event)\"\r\n (keydown)=\"onRowKeydown(row, i, $event)\"\r\n >\r\n @if (hasSelectionColumn()) {\r\n <td class=\"gog-table__td gog-table__td--select\">\r\n <!--\r\n `$event.stopPropagation()` so ticking the box does not also count as a row\r\n click: with `interactiveRows` those are two different intents, and firing both\r\n from one gesture is how a \"select\" ends up navigating away.\r\n -->\r\n <gog-checkbox\r\n [checked]=\"isSelected(row)\"\r\n [ariaLabel]=\"resolvedLabels().selectRow\"\r\n (click)=\"$event.stopPropagation()\"\r\n (checkedChange)=\"toggleRowSelection(row, $event)\"\r\n />\r\n </td>\r\n }\r\n @if (showRowNumbers()) {\r\n <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\r\n }\r\n @for (col of columns(); track col.field()) {\r\n <td class=\"gog-table__td\">\r\n @if (getBodyTemplate(col); as bodyTpl) {\r\n <ng-container *ngTemplateOutlet=\"bodyTpl; context: bodyContext(row, col, i)\" />\r\n } @else {\r\n {{ formatCellValue(row, col.field()) }}\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </gog-scroll>\r\n\r\n @if (hasPagination() || showTotal()) {\r\n <div class=\"gog-table__footer\">\r\n @if (showTotal()) {\r\n <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\r\n {{ resolvedLabels().total }}: {{ rowCount() }}\r\n </span>\r\n }\r\n\r\n @if (hasPagination()) {\r\n <!--\r\n `[(pageSize)]` straight through to the table's own model: the rows-per-page select\r\n writes back here, and a consumer binding `[(pageSize)]` on the table sees it. No\r\n intermediate signal, in either direction.\r\n -->\r\n <gog-paginator\r\n class=\"gog-table__pagination\"\r\n [style.grid-area]=\"paginatorGridArea()\"\r\n [(page)]=\"currentPage\"\r\n [(pageSize)]=\"pageSize\"\r\n [totalPages]=\"totalPages()\"\r\n [showPageSizeSelect]=\"showPageSizeSelect()\"\r\n [pageSizeOptions]=\"pageSizeOptions()\"\r\n rangeMode=\"ellipsis\"\r\n size=\"sm\"\r\n [ariaLabel]=\"resolvedLabels().pagination\"\r\n />\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%}.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--auto-layout{table-layout:auto}.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:start;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--select,.gog-table__td--select{width:var(--gog-table-select-col-width);text-align:center}.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--interactive{cursor:pointer}.gog-table__row--interactive: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__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__row--selected,.gog-table__row--selected:hover{background-color:var(--gog-table-selected-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-inline-end: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:end}.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", "fullWidth", "totalPages", "totalRecords", "pageSize", "showPageSizeSelect", "pageSizeOptions", "rangeMode", "visiblePages", "showFirstPage", "showLastPage", "siblingCount", "size", "disabled", "ariaLabel"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }, { kind: "component", type: CheckboxComponent, selector: "gog-checkbox", inputs: ["label", "ariaLabel", "size", "indeterminate", "disabled", "fullWidth", "checked"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8937
|
+
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 }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelect: { classPropertyName: "showPageSizeSelect", publicName: "showPageSizeSelect", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, interactiveRows: { classPropertyName: "interactiveRows", publicName: "interactiveRows", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, showSelectionColumn: { classPropertyName: "showSelectionColumn", publicName: "showSelectionColumn", 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 }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", selection: "selectionChange", gogSortChange: "gogSortChange", gogPageChange: "gogPageChange", gogRowClick: "gogRowClick" }, host: { properties: { "style.display": "\"block\"", "style.width": "fullWidth() ? \"100%\" : \"fit-content\"", "attr.aria-busy": "loading() ? \"true\" : null" }, classAttribute: "gog-table-host" }, queries: [{ propertyName: "columns", predicate: GogColumn, isSignal: true }], ngImport: i0, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\r\n <!--\r\n The vertical axis is enabled only when the table has been capped. Left on for an uncapped\r\n table, `gog-scroll` would make this viewport a scroll container on both axes, which puts it\r\n in the sticky chain of everything inside it and takes the consumer's own scrolling region\r\n out of it \u2014 measured: a header that used to pin to that region rode away by 147px.\r\n -->\r\n <gog-scroll\r\n [axis]=\"maxHeight() ? 'both' : 'horizontal'\"\r\n [style.max-height]=\"maxHeight()\"\r\n class=\"gog-table-scroll\"\r\n >\r\n <table\r\n class=\"gog-table\"\r\n [class]=\"sizeClass()\"\r\n [class.gog-table--col-borders]=\"showColumnBorders()\"\r\n [class.gog-table--loading]=\"loading()\"\r\n [class.gog-table--sticky-header]=\"stickyHeader()\"\r\n [class.gog-table--auto-layout]=\"!fullWidth()\"\r\n [style.width]=\"fullWidth() ? '100%' : 'fit-content'\"\r\n >\r\n <colgroup>\r\n @if (hasSelectionColumn()) {\r\n <col class=\"gog-table__col--select\" />\r\n }\r\n @if (showRowNumbers()) {\r\n <col class=\"gog-table__col--num\" />\r\n }\r\n @for (col of columns(); track col.field()) {\r\n <col\r\n [style.width]=\"col.width() || null\"\r\n [style.min-width]=\"col.minWidth() || null\"\r\n [style.max-width]=\"col.maxWidth() || null\"\r\n />\r\n }\r\n </colgroup>\r\n <thead>\r\n <tr>\r\n @if (hasSelectionColumn()) {\r\n <th class=\"gog-table__th gog-table__th--select\" scope=\"col\">\r\n <!--\r\n Only `multiple` gets a select-all: in `single` mode there is nothing to select\r\n all of, and a checkbox that can only ever check one row is a lie.\r\n -->\r\n @if (selectionMode() === 'multiple') {\r\n <gog-checkbox\r\n [checked]=\"allPageRowsSelected()\"\r\n [indeterminate]=\"somePageRowsSelected()\"\r\n [disabled]=\"loading() || visibleRows().length === 0\"\r\n [ariaLabel]=\"resolvedLabels().selectAllRows\"\r\n (checkedChange)=\"toggleAllOnPage($event)\"\r\n />\r\n }\r\n </th>\r\n }\r\n @if (showRowNumbers()) {\r\n <th class=\"gog-table__th gog-table__th--num\" scope=\"col\">#</th>\r\n }\r\n @for (col of columns(); track col.field()) {\r\n <th\r\n class=\"gog-table__th\"\r\n scope=\"col\"\r\n [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\r\n [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\r\n [attr.aria-sort]=\"getAriaSort(col.field())\"\r\n [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\r\n (click)=\"handleSortClick(col)\"\r\n (keydown.enter)=\"handleSortClick(col)\"\r\n (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\r\n >\r\n @if (getHeaderTemplate(col); as headerTpl) {\r\n <ng-container *ngTemplateOutlet=\"headerTpl; context: headerContext(col)\" />\r\n } @else {\r\n <span class=\"gog-table__th-inner\">\r\n {{ col.header() || col.field() }}\r\n @if (col.sortable() && !loading()) {\r\n <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\r\n @if (getSortDirection(col.field()) === 'asc') {\r\n <gog-icon name=\"sort-up\" />\r\n } @else if (getSortDirection(col.field()) === 'desc') {\r\n <gog-icon name=\"sort-down\" />\r\n } @else {\r\n <gog-icon name=\"sort\" />\r\n }\r\n </span>\r\n }\r\n </span>\r\n }\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @if (loading()) {\r\n <tr>\r\n <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\r\n <gog-spinner size=\"md\" />\r\n </td>\r\n </tr>\r\n } @else if (visibleRows().length === 0) {\r\n <tr>\r\n <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\r\n </tr>\r\n } @else {\r\n @for (row of visibleRows(); track rowKey(row); let i = $index) {\r\n <tr\r\n class=\"gog-table__row\"\r\n [class.gog-table__row--interactive]=\"interactiveRows()\"\r\n [class.gog-table__row--selected]=\"isSelected(row)\"\r\n [attr.tabindex]=\"interactiveRows() ? 0 : null\"\r\n [attr.aria-selected]=\"hasSelection() ? isSelected(row) : null\"\r\n (click)=\"emitRowClick(row, i, $event)\"\r\n (keydown)=\"onRowKeydown(row, i, $event)\"\r\n >\r\n @if (hasSelectionColumn()) {\r\n <td class=\"gog-table__td gog-table__td--select\">\r\n <!--\r\n `$event.stopPropagation()` so ticking the box does not also count as a row\r\n click: with `interactiveRows` those are two different intents, and firing both\r\n from one gesture is how a \"select\" ends up navigating away.\r\n -->\r\n <gog-checkbox\r\n [checked]=\"isSelected(row)\"\r\n [ariaLabel]=\"resolvedLabels().selectRow\"\r\n (click)=\"$event.stopPropagation()\"\r\n (checkedChange)=\"toggleRowSelection(row, $event)\"\r\n />\r\n </td>\r\n }\r\n @if (showRowNumbers()) {\r\n <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\r\n }\r\n @for (col of columns(); track col.field()) {\r\n <td class=\"gog-table__td\">\r\n @if (getBodyTemplate(col); as bodyTpl) {\r\n <ng-container *ngTemplateOutlet=\"bodyTpl; context: bodyContext(row, col, i)\" />\r\n } @else {\r\n {{ formatCellValue(row, col.field()) }}\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </gog-scroll>\r\n\r\n @if (hasPagination() || showTotal()) {\r\n <div class=\"gog-table__footer\">\r\n @if (showTotal()) {\r\n <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\r\n {{ resolvedLabels().total }}: {{ rowCount() }}\r\n </span>\r\n }\r\n\r\n @if (hasPagination()) {\r\n <!--\r\n `[(pageSize)]` straight through to the table's own model: the rows-per-page select\r\n writes back here, and a consumer binding `[(pageSize)]` on the table sees it. No\r\n intermediate signal, in either direction.\r\n -->\r\n <gog-paginator\r\n class=\"gog-table__pagination\"\r\n [style.grid-area]=\"paginatorGridArea()\"\r\n [(page)]=\"currentPage\"\r\n [(pageSize)]=\"pageSize\"\r\n [totalPages]=\"totalPages()\"\r\n [showPageSizeSelect]=\"showPageSizeSelect()\"\r\n [pageSizeOptions]=\"pageSizeOptions()\"\r\n rangeMode=\"ellipsis\"\r\n size=\"sm\"\r\n [ariaLabel]=\"resolvedLabels().pagination\"\r\n />\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%}.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--auto-layout{table-layout:auto}.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:start;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-header-bg);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--select,.gog-table__td--select{width:var(--gog-table-select-col-width);text-align:center}.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--interactive{cursor:pointer}.gog-table__row--interactive: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__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__row--selected,.gog-table__row--selected:hover{background-color:var(--gog-table-selected-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-inline-end: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:end}.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", "fullWidth", "totalPages", "totalRecords", "pageSize", "showPageSizeSelect", "pageSizeOptions", "rangeMode", "visiblePages", "showFirstPage", "showLastPage", "siblingCount", "size", "disabled", "ariaLabel"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }, { kind: "component", type: CheckboxComponent, selector: "gog-checkbox", inputs: ["label", "ariaLabel", "size", "indeterminate", "disabled", "fullWidth", "checked"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8855
8938
|
}
|
|
8856
8939
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, decorators: [{
|
|
8857
8940
|
type: Component,
|
|
@@ -8872,7 +8955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
8872
8955
|
* of every `loading` input; see the loading-state rule in `api-design.instructions.md`.
|
|
8873
8956
|
*/
|
|
8874
8957
|
'[attr.aria-busy]': 'loading() ? "true" : null',
|
|
8875
|
-
}, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\r\n <!--\r\n The vertical axis is enabled only when the table has been capped. Left on for an uncapped\r\n table, `gog-scroll` would make this viewport a scroll container on both axes, which puts it\r\n in the sticky chain of everything inside it and takes the consumer's own scrolling region\r\n out of it \u2014 measured: a header that used to pin to that region rode away by 147px.\r\n -->\r\n <gog-scroll\r\n [axis]=\"maxHeight() ? 'both' : 'horizontal'\"\r\n [style.max-height]=\"maxHeight()\"\r\n class=\"gog-table-scroll\"\r\n >\r\n <table\r\n class=\"gog-table\"\r\n [class]=\"sizeClass()\"\r\n [class.gog-table--col-borders]=\"showColumnBorders()\"\r\n [class.gog-table--loading]=\"loading()\"\r\n [class.gog-table--sticky-header]=\"stickyHeader()\"\r\n [class.gog-table--auto-layout]=\"!fullWidth()\"\r\n [style.width]=\"fullWidth() ? '100%' : 'fit-content'\"\r\n >\r\n <colgroup>\r\n @if (hasSelectionColumn()) {\r\n <col class=\"gog-table__col--select\" />\r\n }\r\n @if (showRowNumbers()) {\r\n <col class=\"gog-table__col--num\" />\r\n }\r\n @for (col of columns(); track col.field()) {\r\n <col\r\n [style.width]=\"col.width() || null\"\r\n [style.min-width]=\"col.minWidth() || null\"\r\n [style.max-width]=\"col.maxWidth() || null\"\r\n />\r\n }\r\n </colgroup>\r\n <thead>\r\n <tr>\r\n @if (hasSelectionColumn()) {\r\n <th class=\"gog-table__th gog-table__th--select\" scope=\"col\">\r\n <!--\r\n Only `multiple` gets a select-all: in `single` mode there is nothing to select\r\n all of, and a checkbox that can only ever check one row is a lie.\r\n -->\r\n @if (selectionMode() === 'multiple') {\r\n <gog-checkbox\r\n [checked]=\"allPageRowsSelected()\"\r\n [indeterminate]=\"somePageRowsSelected()\"\r\n [disabled]=\"loading() || visibleRows().length === 0\"\r\n [ariaLabel]=\"resolvedLabels().selectAllRows\"\r\n (checkedChange)=\"toggleAllOnPage($event)\"\r\n />\r\n }\r\n </th>\r\n }\r\n @if (showRowNumbers()) {\r\n <th class=\"gog-table__th gog-table__th--num\" scope=\"col\">#</th>\r\n }\r\n @for (col of columns(); track col.field()) {\r\n <th\r\n class=\"gog-table__th\"\r\n scope=\"col\"\r\n [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\r\n [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\r\n [attr.aria-sort]=\"getAriaSort(col.field())\"\r\n [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\r\n (click)=\"handleSortClick(col)\"\r\n (keydown.enter)=\"handleSortClick(col)\"\r\n (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\r\n >\r\n @if (getHeaderTemplate(col); as headerTpl) {\r\n <ng-container *ngTemplateOutlet=\"headerTpl; context: headerContext(col)\" />\r\n } @else {\r\n <span class=\"gog-table__th-inner\">\r\n {{ col.header() || col.field() }}\r\n @if (col.sortable() && !loading()) {\r\n <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\r\n @if (getSortDirection(col.field()) === 'asc') {\r\n <gog-icon name=\"sort-up\" />\r\n } @else if (getSortDirection(col.field()) === 'desc') {\r\n <gog-icon name=\"sort-down\" />\r\n } @else {\r\n <gog-icon name=\"sort\" />\r\n }\r\n </span>\r\n }\r\n </span>\r\n }\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @if (loading()) {\r\n <tr>\r\n <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\r\n <gog-spinner size=\"md\" />\r\n </td>\r\n </tr>\r\n } @else if (visibleRows().length === 0) {\r\n <tr>\r\n <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\r\n </tr>\r\n } @else {\r\n @for (row of visibleRows(); track rowKey(row); let i = $index) {\r\n <tr\r\n class=\"gog-table__row\"\r\n [class.gog-table__row--interactive]=\"interactiveRows()\"\r\n [class.gog-table__row--selected]=\"isSelected(row)\"\r\n [attr.tabindex]=\"interactiveRows() ? 0 : null\"\r\n [attr.aria-selected]=\"hasSelection() ? isSelected(row) : null\"\r\n (click)=\"emitRowClick(row, i, $event)\"\r\n (keydown)=\"onRowKeydown(row, i, $event)\"\r\n >\r\n @if (hasSelectionColumn()) {\r\n <td class=\"gog-table__td gog-table__td--select\">\r\n <!--\r\n `$event.stopPropagation()` so ticking the box does not also count as a row\r\n click: with `interactiveRows` those are two different intents, and firing both\r\n from one gesture is how a \"select\" ends up navigating away.\r\n -->\r\n <gog-checkbox\r\n [checked]=\"isSelected(row)\"\r\n [ariaLabel]=\"resolvedLabels().selectRow\"\r\n (click)=\"$event.stopPropagation()\"\r\n (checkedChange)=\"toggleRowSelection(row, $event)\"\r\n />\r\n </td>\r\n }\r\n @if (showRowNumbers()) {\r\n <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\r\n }\r\n @for (col of columns(); track col.field()) {\r\n <td class=\"gog-table__td\">\r\n @if (getBodyTemplate(col); as bodyTpl) {\r\n <ng-container *ngTemplateOutlet=\"bodyTpl; context: bodyContext(row, col, i)\" />\r\n } @else {\r\n {{ formatCellValue(row, col.field()) }}\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </gog-scroll>\r\n\r\n @if (hasPagination() || showTotal()) {\r\n <div class=\"gog-table__footer\">\r\n @if (showTotal()) {\r\n <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\r\n {{ resolvedLabels().total }}: {{ rowCount() }}\r\n </span>\r\n }\r\n\r\n @if (hasPagination()) {\r\n <!--\r\n `[(pageSize)]` straight through to the table's own model: the rows-per-page select\r\n writes back here, and a consumer binding `[(pageSize)]` on the table sees it. No\r\n intermediate signal, in either direction.\r\n -->\r\n <gog-paginator\r\n class=\"gog-table__pagination\"\r\n [style.grid-area]=\"paginatorGridArea()\"\r\n [(page)]=\"currentPage\"\r\n [(pageSize)]=\"pageSize\"\r\n [totalPages]=\"totalPages()\"\r\n [showPageSizeSelect]=\"showPageSizeSelect()\"\r\n [pageSizeOptions]=\"pageSizeOptions()\"\r\n rangeMode=\"ellipsis\"\r\n size=\"sm\"\r\n [ariaLabel]=\"resolvedLabels().pagination\"\r\n />\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%}.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--auto-layout{table-layout:auto}.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:start;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--select,.gog-table__td--select{width:var(--gog-table-select-col-width);text-align:center}.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--interactive{cursor:pointer}.gog-table__row--interactive: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__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__row--selected,.gog-table__row--selected:hover{background-color:var(--gog-table-selected-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-inline-end: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:end}.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"] }]
|
|
8958
|
+
}, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\r\n <!--\r\n The vertical axis is enabled only when the table has been capped. Left on for an uncapped\r\n table, `gog-scroll` would make this viewport a scroll container on both axes, which puts it\r\n in the sticky chain of everything inside it and takes the consumer's own scrolling region\r\n out of it \u2014 measured: a header that used to pin to that region rode away by 147px.\r\n -->\r\n <gog-scroll\r\n [axis]=\"maxHeight() ? 'both' : 'horizontal'\"\r\n [style.max-height]=\"maxHeight()\"\r\n class=\"gog-table-scroll\"\r\n >\r\n <table\r\n class=\"gog-table\"\r\n [class]=\"sizeClass()\"\r\n [class.gog-table--col-borders]=\"showColumnBorders()\"\r\n [class.gog-table--loading]=\"loading()\"\r\n [class.gog-table--sticky-header]=\"stickyHeader()\"\r\n [class.gog-table--auto-layout]=\"!fullWidth()\"\r\n [style.width]=\"fullWidth() ? '100%' : 'fit-content'\"\r\n >\r\n <colgroup>\r\n @if (hasSelectionColumn()) {\r\n <col class=\"gog-table__col--select\" />\r\n }\r\n @if (showRowNumbers()) {\r\n <col class=\"gog-table__col--num\" />\r\n }\r\n @for (col of columns(); track col.field()) {\r\n <col\r\n [style.width]=\"col.width() || null\"\r\n [style.min-width]=\"col.minWidth() || null\"\r\n [style.max-width]=\"col.maxWidth() || null\"\r\n />\r\n }\r\n </colgroup>\r\n <thead>\r\n <tr>\r\n @if (hasSelectionColumn()) {\r\n <th class=\"gog-table__th gog-table__th--select\" scope=\"col\">\r\n <!--\r\n Only `multiple` gets a select-all: in `single` mode there is nothing to select\r\n all of, and a checkbox that can only ever check one row is a lie.\r\n -->\r\n @if (selectionMode() === 'multiple') {\r\n <gog-checkbox\r\n [checked]=\"allPageRowsSelected()\"\r\n [indeterminate]=\"somePageRowsSelected()\"\r\n [disabled]=\"loading() || visibleRows().length === 0\"\r\n [ariaLabel]=\"resolvedLabels().selectAllRows\"\r\n (checkedChange)=\"toggleAllOnPage($event)\"\r\n />\r\n }\r\n </th>\r\n }\r\n @if (showRowNumbers()) {\r\n <th class=\"gog-table__th gog-table__th--num\" scope=\"col\">#</th>\r\n }\r\n @for (col of columns(); track col.field()) {\r\n <th\r\n class=\"gog-table__th\"\r\n scope=\"col\"\r\n [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\r\n [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\r\n [attr.aria-sort]=\"getAriaSort(col.field())\"\r\n [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\r\n (click)=\"handleSortClick(col)\"\r\n (keydown.enter)=\"handleSortClick(col)\"\r\n (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\r\n >\r\n @if (getHeaderTemplate(col); as headerTpl) {\r\n <ng-container *ngTemplateOutlet=\"headerTpl; context: headerContext(col)\" />\r\n } @else {\r\n <span class=\"gog-table__th-inner\">\r\n {{ col.header() || col.field() }}\r\n @if (col.sortable() && !loading()) {\r\n <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\r\n @if (getSortDirection(col.field()) === 'asc') {\r\n <gog-icon name=\"sort-up\" />\r\n } @else if (getSortDirection(col.field()) === 'desc') {\r\n <gog-icon name=\"sort-down\" />\r\n } @else {\r\n <gog-icon name=\"sort\" />\r\n }\r\n </span>\r\n }\r\n </span>\r\n }\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @if (loading()) {\r\n <tr>\r\n <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\r\n <gog-spinner size=\"md\" />\r\n </td>\r\n </tr>\r\n } @else if (visibleRows().length === 0) {\r\n <tr>\r\n <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\r\n </tr>\r\n } @else {\r\n @for (row of visibleRows(); track rowKey(row); let i = $index) {\r\n <tr\r\n class=\"gog-table__row\"\r\n [class.gog-table__row--interactive]=\"interactiveRows()\"\r\n [class.gog-table__row--selected]=\"isSelected(row)\"\r\n [attr.tabindex]=\"interactiveRows() ? 0 : null\"\r\n [attr.aria-selected]=\"hasSelection() ? isSelected(row) : null\"\r\n (click)=\"emitRowClick(row, i, $event)\"\r\n (keydown)=\"onRowKeydown(row, i, $event)\"\r\n >\r\n @if (hasSelectionColumn()) {\r\n <td class=\"gog-table__td gog-table__td--select\">\r\n <!--\r\n `$event.stopPropagation()` so ticking the box does not also count as a row\r\n click: with `interactiveRows` those are two different intents, and firing both\r\n from one gesture is how a \"select\" ends up navigating away.\r\n -->\r\n <gog-checkbox\r\n [checked]=\"isSelected(row)\"\r\n [ariaLabel]=\"resolvedLabels().selectRow\"\r\n (click)=\"$event.stopPropagation()\"\r\n (checkedChange)=\"toggleRowSelection(row, $event)\"\r\n />\r\n </td>\r\n }\r\n @if (showRowNumbers()) {\r\n <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\r\n }\r\n @for (col of columns(); track col.field()) {\r\n <td class=\"gog-table__td\">\r\n @if (getBodyTemplate(col); as bodyTpl) {\r\n <ng-container *ngTemplateOutlet=\"bodyTpl; context: bodyContext(row, col, i)\" />\r\n } @else {\r\n {{ formatCellValue(row, col.field()) }}\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </gog-scroll>\r\n\r\n @if (hasPagination() || showTotal()) {\r\n <div class=\"gog-table__footer\">\r\n @if (showTotal()) {\r\n <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\r\n {{ resolvedLabels().total }}: {{ rowCount() }}\r\n </span>\r\n }\r\n\r\n @if (hasPagination()) {\r\n <!--\r\n `[(pageSize)]` straight through to the table's own model: the rows-per-page select\r\n writes back here, and a consumer binding `[(pageSize)]` on the table sees it. No\r\n intermediate signal, in either direction.\r\n -->\r\n <gog-paginator\r\n class=\"gog-table__pagination\"\r\n [style.grid-area]=\"paginatorGridArea()\"\r\n [(page)]=\"currentPage\"\r\n [(pageSize)]=\"pageSize\"\r\n [totalPages]=\"totalPages()\"\r\n [showPageSizeSelect]=\"showPageSizeSelect()\"\r\n [pageSizeOptions]=\"pageSizeOptions()\"\r\n rangeMode=\"ellipsis\"\r\n size=\"sm\"\r\n [ariaLabel]=\"resolvedLabels().pagination\"\r\n />\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%}.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--auto-layout{table-layout:auto}.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:start;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-header-bg);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--select,.gog-table__td--select{width:var(--gog-table-select-col-width);text-align:center}.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--interactive{cursor:pointer}.gog-table__row--interactive: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__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__row--selected,.gog-table__row--selected:hover{background-color:var(--gog-table-selected-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-inline-end: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:end}.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"] }]
|
|
8876
8959
|
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], showPageSizeSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSizeSelect", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], interactiveRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactiveRows", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], showSelectionColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectionColumn", 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 }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], gogSortChange: [{ type: i0.Output, args: ["gogSortChange"] }], gogPageChange: [{ type: i0.Output, args: ["gogPageChange"] }], gogRowClick: [{ type: i0.Output, args: ["gogRowClick"] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => GogColumn), { isSignal: true }] }] } });
|
|
8877
8960
|
|
|
8878
8961
|
/** Built-in defaults, used when `GOG_CONFIG.theme` doesn't supply one. */
|
|
@@ -9012,7 +9095,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
9012
9095
|
// GENERATED by scripts/generate-deprecations.mjs — do not edit by hand.
|
|
9013
9096
|
// Run `npm run generate:deprecations`; `npm run check:deprecations` fails on a stale copy.
|
|
9014
9097
|
/**
|
|
9015
|
-
* Everything `@guildofgleks/ui` currently deprecates: 0 symbol(s) and
|
|
9098
|
+
* Everything `@guildofgleks/ui` currently deprecates: 0 symbol(s) and 0 token(s).
|
|
9016
9099
|
*
|
|
9017
9100
|
* Generated from the library's own source — `@deprecated` tags for symbols, and the stylesheets
|
|
9018
9101
|
* themselves for tokens — so it cannot drift from what actually still resolves. Meant for tooling
|
|
@@ -9022,1240 +9105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
9022
9105
|
* An empty `symbol` half means exactly what it says: nothing in the TypeScript API is deprecated
|
|
9023
9106
|
* right now.
|
|
9024
9107
|
*/
|
|
9025
|
-
const GOG_DEPRECATIONS = [
|
|
9026
|
-
{
|
|
9027
|
-
kind: 'token',
|
|
9028
|
-
name: '--gog-btn-',
|
|
9029
|
-
replacement: '--gog-button-',
|
|
9030
|
-
since: '21.5.0',
|
|
9031
|
-
sinceDate: '2026-08-19',
|
|
9032
|
-
removedIn: '21.7.0',
|
|
9033
|
-
},
|
|
9034
|
-
{
|
|
9035
|
-
kind: 'token',
|
|
9036
|
-
name: '--gog-btn-active-scale',
|
|
9037
|
-
replacement: '--gog-button-active-scale',
|
|
9038
|
-
since: '21.5.0',
|
|
9039
|
-
sinceDate: '2026-08-19',
|
|
9040
|
-
removedIn: '21.7.0',
|
|
9041
|
-
},
|
|
9042
|
-
{
|
|
9043
|
-
kind: 'token',
|
|
9044
|
-
name: '--gog-btn-bg',
|
|
9045
|
-
replacement: '--gog-button-bg',
|
|
9046
|
-
since: '21.5.0',
|
|
9047
|
-
sinceDate: '2026-08-19',
|
|
9048
|
-
removedIn: '21.7.0',
|
|
9049
|
-
},
|
|
9050
|
-
{
|
|
9051
|
-
kind: 'token',
|
|
9052
|
-
name: '--gog-btn-border',
|
|
9053
|
-
replacement: '--gog-button-border',
|
|
9054
|
-
since: '21.5.0',
|
|
9055
|
-
sinceDate: '2026-08-19',
|
|
9056
|
-
removedIn: '21.7.0',
|
|
9057
|
-
},
|
|
9058
|
-
{
|
|
9059
|
-
kind: 'token',
|
|
9060
|
-
name: '--gog-btn-border-style',
|
|
9061
|
-
replacement: '--gog-button-border-style',
|
|
9062
|
-
since: '21.5.0',
|
|
9063
|
-
sinceDate: '2026-08-19',
|
|
9064
|
-
removedIn: '21.7.0',
|
|
9065
|
-
},
|
|
9066
|
-
{
|
|
9067
|
-
kind: 'token',
|
|
9068
|
-
name: '--gog-btn-border-width',
|
|
9069
|
-
replacement: '--gog-button-border-width',
|
|
9070
|
-
since: '21.5.0',
|
|
9071
|
-
sinceDate: '2026-08-19',
|
|
9072
|
-
removedIn: '21.7.0',
|
|
9073
|
-
},
|
|
9074
|
-
{
|
|
9075
|
-
kind: 'token',
|
|
9076
|
-
name: '--gog-btn-color',
|
|
9077
|
-
replacement: '--gog-button-color',
|
|
9078
|
-
since: '21.5.0',
|
|
9079
|
-
sinceDate: '2026-08-19',
|
|
9080
|
-
removedIn: '21.7.0',
|
|
9081
|
-
},
|
|
9082
|
-
{
|
|
9083
|
-
kind: 'token',
|
|
9084
|
-
name: '--gog-btn-disabled-opacity',
|
|
9085
|
-
replacement: '--gog-button-disabled-opacity',
|
|
9086
|
-
since: '21.5.0',
|
|
9087
|
-
sinceDate: '2026-08-19',
|
|
9088
|
-
removedIn: '21.7.0',
|
|
9089
|
-
},
|
|
9090
|
-
{
|
|
9091
|
-
kind: 'token',
|
|
9092
|
-
name: '--gog-btn-focus-ring-offset',
|
|
9093
|
-
replacement: '--gog-button-focus-ring-offset',
|
|
9094
|
-
since: '21.5.0',
|
|
9095
|
-
sinceDate: '2026-08-19',
|
|
9096
|
-
removedIn: '21.7.0',
|
|
9097
|
-
},
|
|
9098
|
-
{
|
|
9099
|
-
kind: 'token',
|
|
9100
|
-
name: '--gog-btn-focus-ring-width',
|
|
9101
|
-
replacement: '--gog-button-focus-ring-width',
|
|
9102
|
-
since: '21.5.0',
|
|
9103
|
-
sinceDate: '2026-08-19',
|
|
9104
|
-
removedIn: '21.7.0',
|
|
9105
|
-
},
|
|
9106
|
-
{
|
|
9107
|
-
kind: 'token',
|
|
9108
|
-
name: '--gog-btn-font-family',
|
|
9109
|
-
replacement: '--gog-button-font-family',
|
|
9110
|
-
since: '21.5.0',
|
|
9111
|
-
sinceDate: '2026-08-19',
|
|
9112
|
-
removedIn: '21.7.0',
|
|
9113
|
-
},
|
|
9114
|
-
{
|
|
9115
|
-
kind: 'token',
|
|
9116
|
-
name: '--gog-btn-font-size',
|
|
9117
|
-
replacement: '--gog-button-font-size',
|
|
9118
|
-
since: '21.5.0',
|
|
9119
|
-
sinceDate: '2026-08-19',
|
|
9120
|
-
removedIn: '21.7.0',
|
|
9121
|
-
},
|
|
9122
|
-
{
|
|
9123
|
-
kind: 'token',
|
|
9124
|
-
name: '--gog-btn-font-weight',
|
|
9125
|
-
replacement: '--gog-button-font-weight',
|
|
9126
|
-
since: '21.5.0',
|
|
9127
|
-
sinceDate: '2026-08-19',
|
|
9128
|
-
removedIn: '21.7.0',
|
|
9129
|
-
},
|
|
9130
|
-
{
|
|
9131
|
-
kind: 'token',
|
|
9132
|
-
name: '--gog-btn-gap',
|
|
9133
|
-
replacement: '--gog-button-gap',
|
|
9134
|
-
since: '21.5.0',
|
|
9135
|
-
sinceDate: '2026-08-19',
|
|
9136
|
-
removedIn: '21.7.0',
|
|
9137
|
-
},
|
|
9138
|
-
{
|
|
9139
|
-
kind: 'token',
|
|
9140
|
-
name: '--gog-btn-ghost-bg',
|
|
9141
|
-
replacement: '--gog-button-ghost-bg',
|
|
9142
|
-
since: '21.5.0',
|
|
9143
|
-
sinceDate: '2026-08-19',
|
|
9144
|
-
removedIn: '21.7.0',
|
|
9145
|
-
},
|
|
9146
|
-
{
|
|
9147
|
-
kind: 'token',
|
|
9148
|
-
name: '--gog-btn-ghost-border',
|
|
9149
|
-
replacement: '--gog-button-ghost-border',
|
|
9150
|
-
since: '21.5.0',
|
|
9151
|
-
sinceDate: '2026-08-19',
|
|
9152
|
-
removedIn: '21.7.0',
|
|
9153
|
-
},
|
|
9154
|
-
{
|
|
9155
|
-
kind: 'token',
|
|
9156
|
-
name: '--gog-btn-ghost-color',
|
|
9157
|
-
replacement: '--gog-button-ghost-color',
|
|
9158
|
-
since: '21.5.0',
|
|
9159
|
-
sinceDate: '2026-08-19',
|
|
9160
|
-
removedIn: '21.7.0',
|
|
9161
|
-
},
|
|
9162
|
-
{
|
|
9163
|
-
kind: 'token',
|
|
9164
|
-
name: '--gog-btn-ghost-hover-bg',
|
|
9165
|
-
replacement: '--gog-button-ghost-hover-bg',
|
|
9166
|
-
since: '21.5.0',
|
|
9167
|
-
sinceDate: '2026-08-19',
|
|
9168
|
-
removedIn: '21.7.0',
|
|
9169
|
-
},
|
|
9170
|
-
{
|
|
9171
|
-
kind: 'token',
|
|
9172
|
-
name: '--gog-btn-ghost-hover-color',
|
|
9173
|
-
replacement: '--gog-button-ghost-hover-color',
|
|
9174
|
-
since: '21.5.0',
|
|
9175
|
-
sinceDate: '2026-08-19',
|
|
9176
|
-
removedIn: '21.7.0',
|
|
9177
|
-
},
|
|
9178
|
-
{
|
|
9179
|
-
kind: 'token',
|
|
9180
|
-
name: '--gog-btn-ghost-hover-shadow',
|
|
9181
|
-
replacement: '--gog-button-ghost-hover-shadow',
|
|
9182
|
-
since: '21.5.0',
|
|
9183
|
-
sinceDate: '2026-08-19',
|
|
9184
|
-
removedIn: '21.7.0',
|
|
9185
|
-
},
|
|
9186
|
-
{
|
|
9187
|
-
kind: 'token',
|
|
9188
|
-
name: '--gog-btn-ghost-shadow',
|
|
9189
|
-
replacement: '--gog-button-ghost-shadow',
|
|
9190
|
-
since: '21.5.0',
|
|
9191
|
-
sinceDate: '2026-08-19',
|
|
9192
|
-
removedIn: '21.7.0',
|
|
9193
|
-
},
|
|
9194
|
-
{
|
|
9195
|
-
kind: 'token',
|
|
9196
|
-
name: '--gog-btn-ghost-spinner-color',
|
|
9197
|
-
replacement: '--gog-button-ghost-spinner-color',
|
|
9198
|
-
since: '21.5.0',
|
|
9199
|
-
sinceDate: '2026-08-19',
|
|
9200
|
-
removedIn: '21.7.0',
|
|
9201
|
-
},
|
|
9202
|
-
{
|
|
9203
|
-
kind: 'token',
|
|
9204
|
-
name: '--gog-btn-hover-bg',
|
|
9205
|
-
replacement: '--gog-button-hover-bg',
|
|
9206
|
-
since: '21.5.0',
|
|
9207
|
-
sinceDate: '2026-08-19',
|
|
9208
|
-
removedIn: '21.7.0',
|
|
9209
|
-
},
|
|
9210
|
-
{
|
|
9211
|
-
kind: 'token',
|
|
9212
|
-
name: '--gog-btn-hover-color',
|
|
9213
|
-
replacement: '--gog-button-hover-color',
|
|
9214
|
-
since: '21.5.0',
|
|
9215
|
-
sinceDate: '2026-08-19',
|
|
9216
|
-
removedIn: '21.7.0',
|
|
9217
|
-
},
|
|
9218
|
-
{
|
|
9219
|
-
kind: 'token',
|
|
9220
|
-
name: '--gog-btn-hover-shadow',
|
|
9221
|
-
replacement: '--gog-button-hover-shadow',
|
|
9222
|
-
since: '21.5.0',
|
|
9223
|
-
sinceDate: '2026-08-19',
|
|
9224
|
-
removedIn: '21.7.0',
|
|
9225
|
-
},
|
|
9226
|
-
{
|
|
9227
|
-
kind: 'token',
|
|
9228
|
-
name: '--gog-btn-letter-spacing',
|
|
9229
|
-
replacement: '--gog-button-letter-spacing',
|
|
9230
|
-
since: '21.5.0',
|
|
9231
|
-
sinceDate: '2026-08-19',
|
|
9232
|
-
removedIn: '21.7.0',
|
|
9233
|
-
},
|
|
9234
|
-
{
|
|
9235
|
-
kind: 'token',
|
|
9236
|
-
name: '--gog-btn-lg-font-size',
|
|
9237
|
-
replacement: '--gog-button-lg-font-size',
|
|
9238
|
-
since: '21.5.0',
|
|
9239
|
-
sinceDate: '2026-08-19',
|
|
9240
|
-
removedIn: '21.7.0',
|
|
9241
|
-
},
|
|
9242
|
-
{
|
|
9243
|
-
kind: 'token',
|
|
9244
|
-
name: '--gog-btn-lg-padding',
|
|
9245
|
-
replacement: '--gog-button-lg-padding',
|
|
9246
|
-
since: '21.5.0',
|
|
9247
|
-
sinceDate: '2026-08-19',
|
|
9248
|
-
removedIn: '21.7.0',
|
|
9249
|
-
},
|
|
9250
|
-
{
|
|
9251
|
-
kind: 'token',
|
|
9252
|
-
name: '--gog-btn-line-height',
|
|
9253
|
-
replacement: '--gog-button-line-height',
|
|
9254
|
-
since: '21.5.0',
|
|
9255
|
-
sinceDate: '2026-08-19',
|
|
9256
|
-
removedIn: '21.7.0',
|
|
9257
|
-
},
|
|
9258
|
-
{
|
|
9259
|
-
kind: 'token',
|
|
9260
|
-
name: '--gog-btn-loading-opacity',
|
|
9261
|
-
replacement: '--gog-button-loading-opacity',
|
|
9262
|
-
since: '21.5.0',
|
|
9263
|
-
sinceDate: '2026-08-19',
|
|
9264
|
-
removedIn: '21.7.0',
|
|
9265
|
-
},
|
|
9266
|
-
{
|
|
9267
|
-
kind: 'token',
|
|
9268
|
-
name: '--gog-btn-md-font-size',
|
|
9269
|
-
replacement: '--gog-button-md-font-size',
|
|
9270
|
-
since: '21.5.0',
|
|
9271
|
-
sinceDate: '2026-08-19',
|
|
9272
|
-
removedIn: '21.7.0',
|
|
9273
|
-
},
|
|
9274
|
-
{
|
|
9275
|
-
kind: 'token',
|
|
9276
|
-
name: '--gog-btn-md-padding',
|
|
9277
|
-
replacement: '--gog-button-md-padding',
|
|
9278
|
-
since: '21.5.0',
|
|
9279
|
-
sinceDate: '2026-08-19',
|
|
9280
|
-
removedIn: '21.7.0',
|
|
9281
|
-
},
|
|
9282
|
-
{
|
|
9283
|
-
kind: 'token',
|
|
9284
|
-
name: '--gog-btn-outline-bg',
|
|
9285
|
-
replacement: '--gog-button-outline-bg',
|
|
9286
|
-
since: '21.5.0',
|
|
9287
|
-
sinceDate: '2026-08-19',
|
|
9288
|
-
removedIn: '21.7.0',
|
|
9289
|
-
},
|
|
9290
|
-
{
|
|
9291
|
-
kind: 'token',
|
|
9292
|
-
name: '--gog-btn-outline-border',
|
|
9293
|
-
replacement: '--gog-button-outline-border',
|
|
9294
|
-
since: '21.5.0',
|
|
9295
|
-
sinceDate: '2026-08-19',
|
|
9296
|
-
removedIn: '21.7.0',
|
|
9297
|
-
},
|
|
9298
|
-
{
|
|
9299
|
-
kind: 'token',
|
|
9300
|
-
name: '--gog-btn-outline-color',
|
|
9301
|
-
replacement: '--gog-button-outline-color',
|
|
9302
|
-
since: '21.5.0',
|
|
9303
|
-
sinceDate: '2026-08-19',
|
|
9304
|
-
removedIn: '21.7.0',
|
|
9305
|
-
},
|
|
9306
|
-
{
|
|
9307
|
-
kind: 'token',
|
|
9308
|
-
name: '--gog-btn-outline-hover-bg',
|
|
9309
|
-
replacement: '--gog-button-outline-hover-bg',
|
|
9310
|
-
since: '21.5.0',
|
|
9311
|
-
sinceDate: '2026-08-19',
|
|
9312
|
-
removedIn: '21.7.0',
|
|
9313
|
-
},
|
|
9314
|
-
{
|
|
9315
|
-
kind: 'token',
|
|
9316
|
-
name: '--gog-btn-outline-hover-color',
|
|
9317
|
-
replacement: '--gog-button-outline-hover-color',
|
|
9318
|
-
since: '21.5.0',
|
|
9319
|
-
sinceDate: '2026-08-19',
|
|
9320
|
-
removedIn: '21.7.0',
|
|
9321
|
-
},
|
|
9322
|
-
{
|
|
9323
|
-
kind: 'token',
|
|
9324
|
-
name: '--gog-btn-outline-hover-shadow',
|
|
9325
|
-
replacement: '--gog-button-outline-hover-shadow',
|
|
9326
|
-
since: '21.5.0',
|
|
9327
|
-
sinceDate: '2026-08-19',
|
|
9328
|
-
removedIn: '21.7.0',
|
|
9329
|
-
},
|
|
9330
|
-
{
|
|
9331
|
-
kind: 'token',
|
|
9332
|
-
name: '--gog-btn-outline-shadow',
|
|
9333
|
-
replacement: '--gog-button-outline-shadow',
|
|
9334
|
-
since: '21.5.0',
|
|
9335
|
-
sinceDate: '2026-08-19',
|
|
9336
|
-
removedIn: '21.7.0',
|
|
9337
|
-
},
|
|
9338
|
-
{
|
|
9339
|
-
kind: 'token',
|
|
9340
|
-
name: '--gog-btn-outline-spinner-color',
|
|
9341
|
-
replacement: '--gog-button-outline-spinner-color',
|
|
9342
|
-
since: '21.5.0',
|
|
9343
|
-
sinceDate: '2026-08-19',
|
|
9344
|
-
removedIn: '21.7.0',
|
|
9345
|
-
},
|
|
9346
|
-
{
|
|
9347
|
-
kind: 'token',
|
|
9348
|
-
name: '--gog-btn-padding',
|
|
9349
|
-
replacement: '--gog-button-padding',
|
|
9350
|
-
since: '21.5.0',
|
|
9351
|
-
sinceDate: '2026-08-19',
|
|
9352
|
-
removedIn: '21.7.0',
|
|
9353
|
-
},
|
|
9354
|
-
{
|
|
9355
|
-
kind: 'token',
|
|
9356
|
-
name: '--gog-btn-primary-bg',
|
|
9357
|
-
replacement: '--gog-button-primary-bg',
|
|
9358
|
-
since: '21.5.0',
|
|
9359
|
-
sinceDate: '2026-08-19',
|
|
9360
|
-
removedIn: '21.7.0',
|
|
9361
|
-
},
|
|
9362
|
-
{
|
|
9363
|
-
kind: 'token',
|
|
9364
|
-
name: '--gog-btn-primary-border',
|
|
9365
|
-
replacement: '--gog-button-primary-border',
|
|
9366
|
-
since: '21.5.0',
|
|
9367
|
-
sinceDate: '2026-08-19',
|
|
9368
|
-
removedIn: '21.7.0',
|
|
9369
|
-
},
|
|
9370
|
-
{
|
|
9371
|
-
kind: 'token',
|
|
9372
|
-
name: '--gog-btn-primary-color',
|
|
9373
|
-
replacement: '--gog-button-primary-color',
|
|
9374
|
-
since: '21.5.0',
|
|
9375
|
-
sinceDate: '2026-08-19',
|
|
9376
|
-
removedIn: '21.7.0',
|
|
9377
|
-
},
|
|
9378
|
-
{
|
|
9379
|
-
kind: 'token',
|
|
9380
|
-
name: '--gog-btn-primary-hover-bg',
|
|
9381
|
-
replacement: '--gog-button-primary-hover-bg',
|
|
9382
|
-
since: '21.5.0',
|
|
9383
|
-
sinceDate: '2026-08-19',
|
|
9384
|
-
removedIn: '21.7.0',
|
|
9385
|
-
},
|
|
9386
|
-
{
|
|
9387
|
-
kind: 'token',
|
|
9388
|
-
name: '--gog-btn-primary-hover-color',
|
|
9389
|
-
replacement: '--gog-button-primary-hover-color',
|
|
9390
|
-
since: '21.5.0',
|
|
9391
|
-
sinceDate: '2026-08-19',
|
|
9392
|
-
removedIn: '21.7.0',
|
|
9393
|
-
},
|
|
9394
|
-
{
|
|
9395
|
-
kind: 'token',
|
|
9396
|
-
name: '--gog-btn-primary-hover-shadow',
|
|
9397
|
-
replacement: '--gog-button-primary-hover-shadow',
|
|
9398
|
-
since: '21.5.0',
|
|
9399
|
-
sinceDate: '2026-08-19',
|
|
9400
|
-
removedIn: '21.7.0',
|
|
9401
|
-
},
|
|
9402
|
-
{
|
|
9403
|
-
kind: 'token',
|
|
9404
|
-
name: '--gog-btn-primary-shadow',
|
|
9405
|
-
replacement: '--gog-button-primary-shadow',
|
|
9406
|
-
since: '21.5.0',
|
|
9407
|
-
sinceDate: '2026-08-19',
|
|
9408
|
-
removedIn: '21.7.0',
|
|
9409
|
-
},
|
|
9410
|
-
{
|
|
9411
|
-
kind: 'token',
|
|
9412
|
-
name: '--gog-btn-primary-spinner-color',
|
|
9413
|
-
replacement: '--gog-button-primary-spinner-color',
|
|
9414
|
-
since: '21.5.0',
|
|
9415
|
-
sinceDate: '2026-08-19',
|
|
9416
|
-
removedIn: '21.7.0',
|
|
9417
|
-
},
|
|
9418
|
-
{
|
|
9419
|
-
kind: 'token',
|
|
9420
|
-
name: '--gog-btn-radius',
|
|
9421
|
-
replacement: '--gog-button-radius',
|
|
9422
|
-
since: '21.5.0',
|
|
9423
|
-
sinceDate: '2026-08-19',
|
|
9424
|
-
removedIn: '21.7.0',
|
|
9425
|
-
},
|
|
9426
|
-
{
|
|
9427
|
-
kind: 'token',
|
|
9428
|
-
name: '--gog-btn-secondary-bg',
|
|
9429
|
-
replacement: '--gog-button-secondary-bg',
|
|
9430
|
-
since: '21.5.0',
|
|
9431
|
-
sinceDate: '2026-08-19',
|
|
9432
|
-
removedIn: '21.7.0',
|
|
9433
|
-
},
|
|
9434
|
-
{
|
|
9435
|
-
kind: 'token',
|
|
9436
|
-
name: '--gog-btn-secondary-border',
|
|
9437
|
-
replacement: '--gog-button-secondary-border',
|
|
9438
|
-
since: '21.5.0',
|
|
9439
|
-
sinceDate: '2026-08-19',
|
|
9440
|
-
removedIn: '21.7.0',
|
|
9441
|
-
},
|
|
9442
|
-
{
|
|
9443
|
-
kind: 'token',
|
|
9444
|
-
name: '--gog-btn-secondary-color',
|
|
9445
|
-
replacement: '--gog-button-secondary-color',
|
|
9446
|
-
since: '21.5.0',
|
|
9447
|
-
sinceDate: '2026-08-19',
|
|
9448
|
-
removedIn: '21.7.0',
|
|
9449
|
-
},
|
|
9450
|
-
{
|
|
9451
|
-
kind: 'token',
|
|
9452
|
-
name: '--gog-btn-secondary-hover-bg',
|
|
9453
|
-
replacement: '--gog-button-secondary-hover-bg',
|
|
9454
|
-
since: '21.5.0',
|
|
9455
|
-
sinceDate: '2026-08-19',
|
|
9456
|
-
removedIn: '21.7.0',
|
|
9457
|
-
},
|
|
9458
|
-
{
|
|
9459
|
-
kind: 'token',
|
|
9460
|
-
name: '--gog-btn-secondary-hover-color',
|
|
9461
|
-
replacement: '--gog-button-secondary-hover-color',
|
|
9462
|
-
since: '21.5.0',
|
|
9463
|
-
sinceDate: '2026-08-19',
|
|
9464
|
-
removedIn: '21.7.0',
|
|
9465
|
-
},
|
|
9466
|
-
{
|
|
9467
|
-
kind: 'token',
|
|
9468
|
-
name: '--gog-btn-secondary-hover-shadow',
|
|
9469
|
-
replacement: '--gog-button-secondary-hover-shadow',
|
|
9470
|
-
since: '21.5.0',
|
|
9471
|
-
sinceDate: '2026-08-19',
|
|
9472
|
-
removedIn: '21.7.0',
|
|
9473
|
-
},
|
|
9474
|
-
{
|
|
9475
|
-
kind: 'token',
|
|
9476
|
-
name: '--gog-btn-secondary-shadow',
|
|
9477
|
-
replacement: '--gog-button-secondary-shadow',
|
|
9478
|
-
since: '21.5.0',
|
|
9479
|
-
sinceDate: '2026-08-19',
|
|
9480
|
-
removedIn: '21.7.0',
|
|
9481
|
-
},
|
|
9482
|
-
{
|
|
9483
|
-
kind: 'token',
|
|
9484
|
-
name: '--gog-btn-secondary-spinner-color',
|
|
9485
|
-
replacement: '--gog-button-secondary-spinner-color',
|
|
9486
|
-
since: '21.5.0',
|
|
9487
|
-
sinceDate: '2026-08-19',
|
|
9488
|
-
removedIn: '21.7.0',
|
|
9489
|
-
},
|
|
9490
|
-
{
|
|
9491
|
-
kind: 'token',
|
|
9492
|
-
name: '--gog-btn-shadow',
|
|
9493
|
-
replacement: '--gog-button-shadow',
|
|
9494
|
-
since: '21.5.0',
|
|
9495
|
-
sinceDate: '2026-08-19',
|
|
9496
|
-
removedIn: '21.7.0',
|
|
9497
|
-
},
|
|
9498
|
-
{
|
|
9499
|
-
kind: 'token',
|
|
9500
|
-
name: '--gog-btn-slg-font-size',
|
|
9501
|
-
replacement: '--gog-button-slg-font-size',
|
|
9502
|
-
since: '21.5.0',
|
|
9503
|
-
sinceDate: '2026-08-19',
|
|
9504
|
-
removedIn: '21.7.0',
|
|
9505
|
-
},
|
|
9506
|
-
{
|
|
9507
|
-
kind: 'token',
|
|
9508
|
-
name: '--gog-btn-slg-padding',
|
|
9509
|
-
replacement: '--gog-button-slg-padding',
|
|
9510
|
-
since: '21.5.0',
|
|
9511
|
-
sinceDate: '2026-08-19',
|
|
9512
|
-
removedIn: '21.7.0',
|
|
9513
|
-
},
|
|
9514
|
-
{
|
|
9515
|
-
kind: 'token',
|
|
9516
|
-
name: '--gog-btn-sm-font-size',
|
|
9517
|
-
replacement: '--gog-button-sm-font-size',
|
|
9518
|
-
since: '21.5.0',
|
|
9519
|
-
sinceDate: '2026-08-19',
|
|
9520
|
-
removedIn: '21.7.0',
|
|
9521
|
-
},
|
|
9522
|
-
{
|
|
9523
|
-
kind: 'token',
|
|
9524
|
-
name: '--gog-btn-sm-padding',
|
|
9525
|
-
replacement: '--gog-button-sm-padding',
|
|
9526
|
-
since: '21.5.0',
|
|
9527
|
-
sinceDate: '2026-08-19',
|
|
9528
|
-
removedIn: '21.7.0',
|
|
9529
|
-
},
|
|
9530
|
-
{
|
|
9531
|
-
kind: 'token',
|
|
9532
|
-
name: '--gog-btn-spinner-color',
|
|
9533
|
-
replacement: '--gog-button-spinner-color',
|
|
9534
|
-
since: '21.5.0',
|
|
9535
|
-
sinceDate: '2026-08-19',
|
|
9536
|
-
removedIn: '21.7.0',
|
|
9537
|
-
},
|
|
9538
|
-
{
|
|
9539
|
-
kind: 'token',
|
|
9540
|
-
name: '--gog-btn-spinner-max-size',
|
|
9541
|
-
replacement: '--gog-button-spinner-max-size',
|
|
9542
|
-
since: '21.5.0',
|
|
9543
|
-
sinceDate: '2026-08-19',
|
|
9544
|
-
removedIn: '21.7.0',
|
|
9545
|
-
},
|
|
9546
|
-
{
|
|
9547
|
-
kind: 'token',
|
|
9548
|
-
name: '--gog-btn-text-transform',
|
|
9549
|
-
replacement: '--gog-button-text-transform',
|
|
9550
|
-
since: '21.5.0',
|
|
9551
|
-
sinceDate: '2026-08-19',
|
|
9552
|
-
removedIn: '21.7.0',
|
|
9553
|
-
},
|
|
9554
|
-
{
|
|
9555
|
-
kind: 'token',
|
|
9556
|
-
name: '--gog-btn-transition-duration',
|
|
9557
|
-
replacement: '--gog-button-transition-duration',
|
|
9558
|
-
since: '21.5.0',
|
|
9559
|
-
sinceDate: '2026-08-19',
|
|
9560
|
-
removedIn: '21.7.0',
|
|
9561
|
-
},
|
|
9562
|
-
{
|
|
9563
|
-
kind: 'token',
|
|
9564
|
-
name: '--gog-btn-x',
|
|
9565
|
-
replacement: '--gog-button-x',
|
|
9566
|
-
since: '21.5.0',
|
|
9567
|
-
sinceDate: '2026-08-19',
|
|
9568
|
-
removedIn: '21.7.0',
|
|
9569
|
-
},
|
|
9570
|
-
{
|
|
9571
|
-
kind: 'token',
|
|
9572
|
-
name: '--gog-btn-xsm-font-size',
|
|
9573
|
-
replacement: '--gog-button-xsm-font-size',
|
|
9574
|
-
since: '21.5.0',
|
|
9575
|
-
sinceDate: '2026-08-19',
|
|
9576
|
-
removedIn: '21.7.0',
|
|
9577
|
-
},
|
|
9578
|
-
{
|
|
9579
|
-
kind: 'token',
|
|
9580
|
-
name: '--gog-btn-xsm-padding',
|
|
9581
|
-
replacement: '--gog-button-xsm-padding',
|
|
9582
|
-
since: '21.5.0',
|
|
9583
|
-
sinceDate: '2026-08-19',
|
|
9584
|
-
removedIn: '21.7.0',
|
|
9585
|
-
},
|
|
9586
|
-
{
|
|
9587
|
-
kind: 'token',
|
|
9588
|
-
name: '--gog-confirm-',
|
|
9589
|
-
replacement: '--gog-confirmation-dialog-',
|
|
9590
|
-
since: '21.5.0',
|
|
9591
|
-
sinceDate: '2026-08-19',
|
|
9592
|
-
removedIn: '21.7.0',
|
|
9593
|
-
},
|
|
9594
|
-
{
|
|
9595
|
-
kind: 'token',
|
|
9596
|
-
name: '--gog-confirm-actions-gap',
|
|
9597
|
-
replacement: '--gog-confirmation-dialog-actions-gap',
|
|
9598
|
-
since: '21.5.0',
|
|
9599
|
-
sinceDate: '2026-08-19',
|
|
9600
|
-
removedIn: '21.7.0',
|
|
9601
|
-
},
|
|
9602
|
-
{
|
|
9603
|
-
kind: 'token',
|
|
9604
|
-
name: '--gog-confirm-actions-offset',
|
|
9605
|
-
replacement: '--gog-confirmation-dialog-actions-offset',
|
|
9606
|
-
since: '21.5.0',
|
|
9607
|
-
sinceDate: '2026-08-19',
|
|
9608
|
-
removedIn: '21.7.0',
|
|
9609
|
-
},
|
|
9610
|
-
{
|
|
9611
|
-
kind: 'token',
|
|
9612
|
-
name: '--gog-confirm-color',
|
|
9613
|
-
replacement: '--gog-confirmation-dialog-color',
|
|
9614
|
-
since: '21.5.0',
|
|
9615
|
-
sinceDate: '2026-08-19',
|
|
9616
|
-
removedIn: '21.7.0',
|
|
9617
|
-
},
|
|
9618
|
-
{
|
|
9619
|
-
kind: 'token',
|
|
9620
|
-
name: '--gog-confirm-description-color',
|
|
9621
|
-
replacement: '--gog-confirmation-dialog-description-color',
|
|
9622
|
-
since: '21.5.0',
|
|
9623
|
-
sinceDate: '2026-08-19',
|
|
9624
|
-
removedIn: '21.7.0',
|
|
9625
|
-
},
|
|
9626
|
-
{
|
|
9627
|
-
kind: 'token',
|
|
9628
|
-
name: '--gog-confirm-gap',
|
|
9629
|
-
replacement: '--gog-confirmation-dialog-gap',
|
|
9630
|
-
since: '21.5.0',
|
|
9631
|
-
sinceDate: '2026-08-19',
|
|
9632
|
-
removedIn: '21.7.0',
|
|
9633
|
-
},
|
|
9634
|
-
{
|
|
9635
|
-
kind: 'token',
|
|
9636
|
-
name: '--gog-confirm-max-width',
|
|
9637
|
-
replacement: '--gog-confirmation-dialog-max-width',
|
|
9638
|
-
since: '21.5.0',
|
|
9639
|
-
sinceDate: '2026-08-19',
|
|
9640
|
-
removedIn: '21.7.0',
|
|
9641
|
-
},
|
|
9642
|
-
{
|
|
9643
|
-
kind: 'token',
|
|
9644
|
-
name: '--gog-confirm-min-width',
|
|
9645
|
-
replacement: '--gog-confirmation-dialog-min-width',
|
|
9646
|
-
since: '21.5.0',
|
|
9647
|
-
sinceDate: '2026-08-19',
|
|
9648
|
-
removedIn: '21.7.0',
|
|
9649
|
-
},
|
|
9650
|
-
{
|
|
9651
|
-
kind: 'token',
|
|
9652
|
-
name: '--gog-ms-',
|
|
9653
|
-
replacement: '--gog-multiselect-',
|
|
9654
|
-
since: '21.3.0',
|
|
9655
|
-
sinceDate: '2026-08-07',
|
|
9656
|
-
removedIn: '21.7.0',
|
|
9657
|
-
},
|
|
9658
|
-
{
|
|
9659
|
-
kind: 'token',
|
|
9660
|
-
name: '--gog-ms-actions-gap',
|
|
9661
|
-
replacement: '--gog-multiselect-actions-gap',
|
|
9662
|
-
since: '21.3.0',
|
|
9663
|
-
sinceDate: '2026-08-07',
|
|
9664
|
-
removedIn: '21.7.0',
|
|
9665
|
-
},
|
|
9666
|
-
{
|
|
9667
|
-
kind: 'token',
|
|
9668
|
-
name: '--gog-ms-actions-inset',
|
|
9669
|
-
replacement: '--gog-multiselect-actions-inset',
|
|
9670
|
-
since: '21.3.0',
|
|
9671
|
-
sinceDate: '2026-08-07',
|
|
9672
|
-
removedIn: '21.7.0',
|
|
9673
|
-
},
|
|
9674
|
-
{
|
|
9675
|
-
kind: 'token',
|
|
9676
|
-
name: '--gog-ms-arrow-icon-ratio',
|
|
9677
|
-
replacement: '--gog-multiselect-arrow-icon-ratio',
|
|
9678
|
-
since: '21.3.0',
|
|
9679
|
-
sinceDate: '2026-08-07',
|
|
9680
|
-
removedIn: '21.7.0',
|
|
9681
|
-
},
|
|
9682
|
-
{
|
|
9683
|
-
kind: 'token',
|
|
9684
|
-
name: '--gog-ms-arrow-transition-duration',
|
|
9685
|
-
replacement: '--gog-multiselect-arrow-transition-duration',
|
|
9686
|
-
since: '21.3.0',
|
|
9687
|
-
sinceDate: '2026-08-07',
|
|
9688
|
-
removedIn: '21.7.0',
|
|
9689
|
-
},
|
|
9690
|
-
{
|
|
9691
|
-
kind: 'token',
|
|
9692
|
-
name: '--gog-ms-border-color',
|
|
9693
|
-
replacement: '--gog-multiselect-border-color',
|
|
9694
|
-
since: '21.3.0',
|
|
9695
|
-
sinceDate: '2026-08-07',
|
|
9696
|
-
removedIn: '21.7.0',
|
|
9697
|
-
},
|
|
9698
|
-
{
|
|
9699
|
-
kind: 'token',
|
|
9700
|
-
name: '--gog-ms-checkbox-bg',
|
|
9701
|
-
replacement: '--gog-multiselect-checkbox-bg',
|
|
9702
|
-
since: '21.3.0',
|
|
9703
|
-
sinceDate: '2026-08-07',
|
|
9704
|
-
removedIn: '21.7.0',
|
|
9705
|
-
},
|
|
9706
|
-
{
|
|
9707
|
-
kind: 'token',
|
|
9708
|
-
name: '--gog-ms-checkbox-border',
|
|
9709
|
-
replacement: '--gog-multiselect-checkbox-border',
|
|
9710
|
-
since: '21.3.0',
|
|
9711
|
-
sinceDate: '2026-08-07',
|
|
9712
|
-
removedIn: '21.7.0',
|
|
9713
|
-
},
|
|
9714
|
-
{
|
|
9715
|
-
kind: 'token',
|
|
9716
|
-
name: '--gog-ms-checkbox-checked-bg',
|
|
9717
|
-
replacement: '--gog-multiselect-checkbox-checked-bg',
|
|
9718
|
-
since: '21.3.0',
|
|
9719
|
-
sinceDate: '2026-08-07',
|
|
9720
|
-
removedIn: '21.7.0',
|
|
9721
|
-
},
|
|
9722
|
-
{
|
|
9723
|
-
kind: 'token',
|
|
9724
|
-
name: '--gog-ms-checkbox-checked-color',
|
|
9725
|
-
replacement: '--gog-multiselect-checkbox-checked-color',
|
|
9726
|
-
since: '21.3.0',
|
|
9727
|
-
sinceDate: '2026-08-07',
|
|
9728
|
-
removedIn: '21.7.0',
|
|
9729
|
-
},
|
|
9730
|
-
{
|
|
9731
|
-
kind: 'token',
|
|
9732
|
-
name: '--gog-ms-clear-icon-ratio',
|
|
9733
|
-
replacement: '--gog-multiselect-clear-icon-ratio',
|
|
9734
|
-
since: '21.3.0',
|
|
9735
|
-
sinceDate: '2026-08-07',
|
|
9736
|
-
removedIn: '21.7.0',
|
|
9737
|
-
},
|
|
9738
|
-
{
|
|
9739
|
-
kind: 'token',
|
|
9740
|
-
name: '--gog-ms-clear-radius',
|
|
9741
|
-
replacement: '--gog-multiselect-clear-radius',
|
|
9742
|
-
since: '21.3.0',
|
|
9743
|
-
sinceDate: '2026-08-07',
|
|
9744
|
-
removedIn: '21.7.0',
|
|
9745
|
-
},
|
|
9746
|
-
{
|
|
9747
|
-
kind: 'token',
|
|
9748
|
-
name: '--gog-ms-controls-gap',
|
|
9749
|
-
replacement: '--gog-multiselect-controls-gap',
|
|
9750
|
-
since: '21.3.0',
|
|
9751
|
-
sinceDate: '2026-08-07',
|
|
9752
|
-
removedIn: '21.7.0',
|
|
9753
|
-
},
|
|
9754
|
-
{
|
|
9755
|
-
kind: 'token',
|
|
9756
|
-
name: '--gog-ms-controls-padding',
|
|
9757
|
-
replacement: '--gog-multiselect-controls-padding',
|
|
9758
|
-
since: '21.3.0',
|
|
9759
|
-
sinceDate: '2026-08-07',
|
|
9760
|
-
removedIn: '21.7.0',
|
|
9761
|
-
},
|
|
9762
|
-
{
|
|
9763
|
-
kind: 'token',
|
|
9764
|
-
name: '--gog-ms-disabled-opacity',
|
|
9765
|
-
replacement: '--gog-multiselect-disabled-opacity',
|
|
9766
|
-
since: '21.3.0',
|
|
9767
|
-
sinceDate: '2026-08-07',
|
|
9768
|
-
removedIn: '21.7.0',
|
|
9769
|
-
},
|
|
9770
|
-
{
|
|
9771
|
-
kind: 'token',
|
|
9772
|
-
name: '--gog-ms-error-color',
|
|
9773
|
-
replacement: '--gog-multiselect-error-color',
|
|
9774
|
-
since: '21.3.0',
|
|
9775
|
-
sinceDate: '2026-08-07',
|
|
9776
|
-
removedIn: '21.7.0',
|
|
9777
|
-
},
|
|
9778
|
-
{
|
|
9779
|
-
kind: 'token',
|
|
9780
|
-
name: '--gog-ms-error-font-size',
|
|
9781
|
-
replacement: '--gog-multiselect-error-font-size',
|
|
9782
|
-
since: '21.3.0',
|
|
9783
|
-
sinceDate: '2026-08-07',
|
|
9784
|
-
removedIn: '21.7.0',
|
|
9785
|
-
},
|
|
9786
|
-
{
|
|
9787
|
-
kind: 'token',
|
|
9788
|
-
name: '--gog-ms-error-offset',
|
|
9789
|
-
replacement: '--gog-multiselect-error-offset',
|
|
9790
|
-
since: '21.3.0',
|
|
9791
|
-
sinceDate: '2026-08-07',
|
|
9792
|
-
removedIn: '21.7.0',
|
|
9793
|
-
},
|
|
9794
|
-
{
|
|
9795
|
-
kind: 'token',
|
|
9796
|
-
name: '--gog-ms-field-bg',
|
|
9797
|
-
replacement: '--gog-multiselect-field-bg',
|
|
9798
|
-
since: '21.3.0',
|
|
9799
|
-
sinceDate: '2026-08-07',
|
|
9800
|
-
removedIn: '21.7.0',
|
|
9801
|
-
},
|
|
9802
|
-
{
|
|
9803
|
-
kind: 'token',
|
|
9804
|
-
name: '--gog-ms-field-border',
|
|
9805
|
-
replacement: '--gog-multiselect-field-border',
|
|
9806
|
-
since: '21.3.0',
|
|
9807
|
-
sinceDate: '2026-08-07',
|
|
9808
|
-
removedIn: '21.7.0',
|
|
9809
|
-
},
|
|
9810
|
-
{
|
|
9811
|
-
kind: 'token',
|
|
9812
|
-
name: '--gog-ms-field-border-style',
|
|
9813
|
-
replacement: '--gog-multiselect-field-border-style',
|
|
9814
|
-
since: '21.3.0',
|
|
9815
|
-
sinceDate: '2026-08-07',
|
|
9816
|
-
removedIn: '21.7.0',
|
|
9817
|
-
},
|
|
9818
|
-
{
|
|
9819
|
-
kind: 'token',
|
|
9820
|
-
name: '--gog-ms-field-border-width',
|
|
9821
|
-
replacement: '--gog-multiselect-field-border-width',
|
|
9822
|
-
since: '21.3.0',
|
|
9823
|
-
sinceDate: '2026-08-07',
|
|
9824
|
-
removedIn: '21.7.0',
|
|
9825
|
-
},
|
|
9826
|
-
{
|
|
9827
|
-
kind: 'token',
|
|
9828
|
-
name: '--gog-ms-field-color',
|
|
9829
|
-
replacement: '--gog-multiselect-field-color',
|
|
9830
|
-
since: '21.3.0',
|
|
9831
|
-
sinceDate: '2026-08-07',
|
|
9832
|
-
removedIn: '21.7.0',
|
|
9833
|
-
},
|
|
9834
|
-
{
|
|
9835
|
-
kind: 'token',
|
|
9836
|
-
name: '--gog-ms-filter-border-color',
|
|
9837
|
-
replacement: '--gog-multiselect-filter-border-color',
|
|
9838
|
-
since: '21.3.0',
|
|
9839
|
-
sinceDate: '2026-08-07',
|
|
9840
|
-
removedIn: '21.7.0',
|
|
9841
|
-
},
|
|
9842
|
-
{
|
|
9843
|
-
kind: 'token',
|
|
9844
|
-
name: '--gog-ms-filter-border-style',
|
|
9845
|
-
replacement: '--gog-multiselect-filter-border-style',
|
|
9846
|
-
since: '21.3.0',
|
|
9847
|
-
sinceDate: '2026-08-07',
|
|
9848
|
-
removedIn: '21.7.0',
|
|
9849
|
-
},
|
|
9850
|
-
{
|
|
9851
|
-
kind: 'token',
|
|
9852
|
-
name: '--gog-ms-filter-border-width',
|
|
9853
|
-
replacement: '--gog-multiselect-filter-border-width',
|
|
9854
|
-
since: '21.3.0',
|
|
9855
|
-
sinceDate: '2026-08-07',
|
|
9856
|
-
removedIn: '21.7.0',
|
|
9857
|
-
},
|
|
9858
|
-
{
|
|
9859
|
-
kind: 'token',
|
|
9860
|
-
name: '--gog-ms-filter-empty-color',
|
|
9861
|
-
replacement: '--gog-multiselect-filter-empty-color',
|
|
9862
|
-
since: '21.3.0',
|
|
9863
|
-
sinceDate: '2026-08-07',
|
|
9864
|
-
removedIn: '21.7.0',
|
|
9865
|
-
},
|
|
9866
|
-
{
|
|
9867
|
-
kind: 'token',
|
|
9868
|
-
name: '--gog-ms-filter-empty-padding',
|
|
9869
|
-
replacement: '--gog-multiselect-filter-empty-padding',
|
|
9870
|
-
since: '21.3.0',
|
|
9871
|
-
sinceDate: '2026-08-07',
|
|
9872
|
-
removedIn: '21.7.0',
|
|
9873
|
-
},
|
|
9874
|
-
{
|
|
9875
|
-
kind: 'token',
|
|
9876
|
-
name: '--gog-ms-filter-input-bg',
|
|
9877
|
-
replacement: '--gog-multiselect-filter-input-bg',
|
|
9878
|
-
since: '21.3.0',
|
|
9879
|
-
sinceDate: '2026-08-07',
|
|
9880
|
-
removedIn: '21.7.0',
|
|
9881
|
-
},
|
|
9882
|
-
{
|
|
9883
|
-
kind: 'token',
|
|
9884
|
-
name: '--gog-ms-filter-input-border',
|
|
9885
|
-
replacement: '--gog-multiselect-filter-input-border',
|
|
9886
|
-
since: '21.3.0',
|
|
9887
|
-
sinceDate: '2026-08-07',
|
|
9888
|
-
removedIn: '21.7.0',
|
|
9889
|
-
},
|
|
9890
|
-
{
|
|
9891
|
-
kind: 'token',
|
|
9892
|
-
name: '--gog-ms-filter-input-color',
|
|
9893
|
-
replacement: '--gog-multiselect-filter-input-color',
|
|
9894
|
-
since: '21.3.0',
|
|
9895
|
-
sinceDate: '2026-08-07',
|
|
9896
|
-
removedIn: '21.7.0',
|
|
9897
|
-
},
|
|
9898
|
-
{
|
|
9899
|
-
kind: 'token',
|
|
9900
|
-
name: '--gog-ms-filter-input-padding-x',
|
|
9901
|
-
replacement: '--gog-multiselect-filter-input-padding-x',
|
|
9902
|
-
since: '21.3.0',
|
|
9903
|
-
sinceDate: '2026-08-07',
|
|
9904
|
-
removedIn: '21.7.0',
|
|
9905
|
-
},
|
|
9906
|
-
{
|
|
9907
|
-
kind: 'token',
|
|
9908
|
-
name: '--gog-ms-filter-input-padding-y',
|
|
9909
|
-
replacement: '--gog-multiselect-filter-input-padding-y',
|
|
9910
|
-
since: '21.3.0',
|
|
9911
|
-
sinceDate: '2026-08-07',
|
|
9912
|
-
removedIn: '21.7.0',
|
|
9913
|
-
},
|
|
9914
|
-
{
|
|
9915
|
-
kind: 'token',
|
|
9916
|
-
name: '--gog-ms-filter-input-radius',
|
|
9917
|
-
replacement: '--gog-multiselect-filter-input-radius',
|
|
9918
|
-
since: '21.3.0',
|
|
9919
|
-
sinceDate: '2026-08-07',
|
|
9920
|
-
removedIn: '21.7.0',
|
|
9921
|
-
},
|
|
9922
|
-
{
|
|
9923
|
-
kind: 'token',
|
|
9924
|
-
name: '--gog-ms-filter-padding',
|
|
9925
|
-
replacement: '--gog-multiselect-filter-padding',
|
|
9926
|
-
since: '21.3.0',
|
|
9927
|
-
sinceDate: '2026-08-07',
|
|
9928
|
-
removedIn: '21.7.0',
|
|
9929
|
-
},
|
|
9930
|
-
{
|
|
9931
|
-
kind: 'token',
|
|
9932
|
-
name: '--gog-ms-float-label-in-top',
|
|
9933
|
-
replacement: '--gog-multiselect-float-label-in-top',
|
|
9934
|
-
since: '21.3.0',
|
|
9935
|
-
sinceDate: '2026-08-07',
|
|
9936
|
-
removedIn: '21.7.0',
|
|
9937
|
-
},
|
|
9938
|
-
{
|
|
9939
|
-
kind: 'token',
|
|
9940
|
-
name: '--gog-ms-float-label-over-gap',
|
|
9941
|
-
replacement: '--gog-multiselect-float-label-over-gap',
|
|
9942
|
-
since: '21.3.0',
|
|
9943
|
-
sinceDate: '2026-08-07',
|
|
9944
|
-
removedIn: '21.7.0',
|
|
9945
|
-
},
|
|
9946
|
-
{
|
|
9947
|
-
kind: 'token',
|
|
9948
|
-
name: '--gog-ms-float-label-over-reserve',
|
|
9949
|
-
replacement: '--gog-multiselect-float-label-over-reserve',
|
|
9950
|
-
since: '21.3.0',
|
|
9951
|
-
sinceDate: '2026-08-07',
|
|
9952
|
-
removedIn: '21.7.0',
|
|
9953
|
-
},
|
|
9954
|
-
{
|
|
9955
|
-
kind: 'token',
|
|
9956
|
-
name: '--gog-ms-float-label-reserve',
|
|
9957
|
-
replacement: '--gog-multiselect-float-label-reserve',
|
|
9958
|
-
since: '21.3.0',
|
|
9959
|
-
sinceDate: '2026-08-07',
|
|
9960
|
-
removedIn: '21.7.0',
|
|
9961
|
-
},
|
|
9962
|
-
{
|
|
9963
|
-
kind: 'token',
|
|
9964
|
-
name: '--gog-ms-focus-border',
|
|
9965
|
-
replacement: '--gog-multiselect-focus-border',
|
|
9966
|
-
since: '21.3.0',
|
|
9967
|
-
sinceDate: '2026-08-07',
|
|
9968
|
-
removedIn: '21.7.0',
|
|
9969
|
-
},
|
|
9970
|
-
{
|
|
9971
|
-
kind: 'token',
|
|
9972
|
-
name: '--gog-ms-focus-glow',
|
|
9973
|
-
replacement: '--gog-multiselect-focus-glow',
|
|
9974
|
-
since: '21.3.0',
|
|
9975
|
-
sinceDate: '2026-08-07',
|
|
9976
|
-
removedIn: '21.7.0',
|
|
9977
|
-
},
|
|
9978
|
-
{
|
|
9979
|
-
kind: 'token',
|
|
9980
|
-
name: '--gog-ms-focus-ring',
|
|
9981
|
-
replacement: '--gog-multiselect-focus-ring',
|
|
9982
|
-
since: '21.3.0',
|
|
9983
|
-
sinceDate: '2026-08-07',
|
|
9984
|
-
removedIn: '21.7.0',
|
|
9985
|
-
},
|
|
9986
|
-
{
|
|
9987
|
-
kind: 'token',
|
|
9988
|
-
name: '--gog-ms-focus-ring-offset',
|
|
9989
|
-
replacement: '--gog-multiselect-focus-ring-offset',
|
|
9990
|
-
since: '21.3.0',
|
|
9991
|
-
sinceDate: '2026-08-07',
|
|
9992
|
-
removedIn: '21.7.0',
|
|
9993
|
-
},
|
|
9994
|
-
{
|
|
9995
|
-
kind: 'token',
|
|
9996
|
-
name: '--gog-ms-focus-ring-width',
|
|
9997
|
-
replacement: '--gog-multiselect-focus-ring-width',
|
|
9998
|
-
since: '21.3.0',
|
|
9999
|
-
sinceDate: '2026-08-07',
|
|
10000
|
-
removedIn: '21.7.0',
|
|
10001
|
-
},
|
|
10002
|
-
{
|
|
10003
|
-
kind: 'token',
|
|
10004
|
-
name: '--gog-ms-font-family',
|
|
10005
|
-
replacement: '--gog-multiselect-font-family',
|
|
10006
|
-
since: '21.3.0',
|
|
10007
|
-
sinceDate: '2026-08-07',
|
|
10008
|
-
removedIn: '21.7.0',
|
|
10009
|
-
},
|
|
10010
|
-
{
|
|
10011
|
-
kind: 'token',
|
|
10012
|
-
name: '--gog-ms-gap',
|
|
10013
|
-
replacement: '--gog-multiselect-gap',
|
|
10014
|
-
since: '21.3.0',
|
|
10015
|
-
sinceDate: '2026-08-07',
|
|
10016
|
-
removedIn: '21.7.0',
|
|
10017
|
-
},
|
|
10018
|
-
{
|
|
10019
|
-
kind: 'token',
|
|
10020
|
-
name: '--gog-ms-label-color',
|
|
10021
|
-
replacement: '--gog-multiselect-label-color',
|
|
10022
|
-
since: '21.3.0',
|
|
10023
|
-
sinceDate: '2026-08-07',
|
|
10024
|
-
removedIn: '21.7.0',
|
|
10025
|
-
},
|
|
10026
|
-
{
|
|
10027
|
-
kind: 'token',
|
|
10028
|
-
name: '--gog-ms-label-font-family',
|
|
10029
|
-
replacement: '--gog-multiselect-label-font-family',
|
|
10030
|
-
since: '21.3.0',
|
|
10031
|
-
sinceDate: '2026-08-07',
|
|
10032
|
-
removedIn: '21.7.0',
|
|
10033
|
-
},
|
|
10034
|
-
{
|
|
10035
|
-
kind: 'token',
|
|
10036
|
-
name: '--gog-ms-label-font-size',
|
|
10037
|
-
replacement: '--gog-multiselect-label-font-size',
|
|
10038
|
-
since: '21.3.0',
|
|
10039
|
-
sinceDate: '2026-08-07',
|
|
10040
|
-
removedIn: '21.7.0',
|
|
10041
|
-
},
|
|
10042
|
-
{
|
|
10043
|
-
kind: 'token',
|
|
10044
|
-
name: '--gog-ms-label-letter-spacing',
|
|
10045
|
-
replacement: '--gog-multiselect-label-letter-spacing',
|
|
10046
|
-
since: '21.3.0',
|
|
10047
|
-
sinceDate: '2026-08-07',
|
|
10048
|
-
removedIn: '21.7.0',
|
|
10049
|
-
},
|
|
10050
|
-
{
|
|
10051
|
-
kind: 'token',
|
|
10052
|
-
name: '--gog-ms-label-text-transform',
|
|
10053
|
-
replacement: '--gog-multiselect-label-text-transform',
|
|
10054
|
-
since: '21.3.0',
|
|
10055
|
-
sinceDate: '2026-08-07',
|
|
10056
|
-
removedIn: '21.7.0',
|
|
10057
|
-
},
|
|
10058
|
-
{
|
|
10059
|
-
kind: 'token',
|
|
10060
|
-
name: '--gog-ms-mark-icon-ratio',
|
|
10061
|
-
replacement: '--gog-multiselect-mark-icon-ratio',
|
|
10062
|
-
since: '21.3.0',
|
|
10063
|
-
sinceDate: '2026-08-07',
|
|
10064
|
-
removedIn: '21.7.0',
|
|
10065
|
-
},
|
|
10066
|
-
{
|
|
10067
|
-
kind: 'token',
|
|
10068
|
-
name: '--gog-ms-mark-size-ratio',
|
|
10069
|
-
replacement: '--gog-multiselect-mark-size-ratio',
|
|
10070
|
-
since: '21.3.0',
|
|
10071
|
-
sinceDate: '2026-08-07',
|
|
10072
|
-
removedIn: '21.7.0',
|
|
10073
|
-
},
|
|
10074
|
-
{
|
|
10075
|
-
kind: 'token',
|
|
10076
|
-
name: '--gog-ms-min-width',
|
|
10077
|
-
replacement: '--gog-multiselect-min-width',
|
|
10078
|
-
since: '21.3.0',
|
|
10079
|
-
sinceDate: '2026-08-07',
|
|
10080
|
-
removedIn: '21.7.0',
|
|
10081
|
-
},
|
|
10082
|
-
{
|
|
10083
|
-
kind: 'token',
|
|
10084
|
-
name: '--gog-ms-option-color',
|
|
10085
|
-
replacement: '--gog-multiselect-option-color',
|
|
10086
|
-
since: '21.3.0',
|
|
10087
|
-
sinceDate: '2026-08-07',
|
|
10088
|
-
removedIn: '21.7.0',
|
|
10089
|
-
},
|
|
10090
|
-
{
|
|
10091
|
-
kind: 'token',
|
|
10092
|
-
name: '--gog-ms-option-disabled-opacity',
|
|
10093
|
-
replacement: '--gog-multiselect-option-disabled-opacity',
|
|
10094
|
-
since: '21.3.0',
|
|
10095
|
-
sinceDate: '2026-08-07',
|
|
10096
|
-
removedIn: '21.7.0',
|
|
10097
|
-
},
|
|
10098
|
-
{
|
|
10099
|
-
kind: 'token',
|
|
10100
|
-
name: '--gog-ms-option-gap',
|
|
10101
|
-
replacement: '--gog-multiselect-option-gap',
|
|
10102
|
-
since: '21.3.0',
|
|
10103
|
-
sinceDate: '2026-08-07',
|
|
10104
|
-
removedIn: '21.7.0',
|
|
10105
|
-
},
|
|
10106
|
-
{
|
|
10107
|
-
kind: 'token',
|
|
10108
|
-
name: '--gog-ms-option-gap-inline',
|
|
10109
|
-
replacement: '--gog-multiselect-option-gap-inline',
|
|
10110
|
-
since: '21.3.0',
|
|
10111
|
-
sinceDate: '2026-08-07',
|
|
10112
|
-
removedIn: '21.7.0',
|
|
10113
|
-
},
|
|
10114
|
-
{
|
|
10115
|
-
kind: 'token',
|
|
10116
|
-
name: '--gog-ms-option-height',
|
|
10117
|
-
replacement: '--gog-multiselect-option-height',
|
|
10118
|
-
since: '21.3.0',
|
|
10119
|
-
sinceDate: '2026-08-07',
|
|
10120
|
-
removedIn: '21.7.0',
|
|
10121
|
-
},
|
|
10122
|
-
{
|
|
10123
|
-
kind: 'token',
|
|
10124
|
-
name: '--gog-ms-option-hover-bg',
|
|
10125
|
-
replacement: '--gog-multiselect-option-hover-bg',
|
|
10126
|
-
since: '21.3.0',
|
|
10127
|
-
sinceDate: '2026-08-07',
|
|
10128
|
-
removedIn: '21.7.0',
|
|
10129
|
-
},
|
|
10130
|
-
{
|
|
10131
|
-
kind: 'token',
|
|
10132
|
-
name: '--gog-ms-option-radius',
|
|
10133
|
-
replacement: '--gog-multiselect-option-radius',
|
|
10134
|
-
since: '21.3.0',
|
|
10135
|
-
sinceDate: '2026-08-07',
|
|
10136
|
-
removedIn: '21.7.0',
|
|
10137
|
-
},
|
|
10138
|
-
{
|
|
10139
|
-
kind: 'token',
|
|
10140
|
-
name: '--gog-ms-option-transition-duration',
|
|
10141
|
-
replacement: '--gog-multiselect-option-transition-duration',
|
|
10142
|
-
since: '21.3.0',
|
|
10143
|
-
sinceDate: '2026-08-07',
|
|
10144
|
-
removedIn: '21.7.0',
|
|
10145
|
-
},
|
|
10146
|
-
{
|
|
10147
|
-
kind: 'token',
|
|
10148
|
-
name: '--gog-ms-options-padding',
|
|
10149
|
-
replacement: '--gog-multiselect-options-padding',
|
|
10150
|
-
since: '21.3.0',
|
|
10151
|
-
sinceDate: '2026-08-07',
|
|
10152
|
-
removedIn: '21.7.0',
|
|
10153
|
-
},
|
|
10154
|
-
{
|
|
10155
|
-
kind: 'token',
|
|
10156
|
-
name: '--gog-ms-overflow-color',
|
|
10157
|
-
replacement: '--gog-multiselect-overflow-color',
|
|
10158
|
-
since: '21.3.0',
|
|
10159
|
-
sinceDate: '2026-08-07',
|
|
10160
|
-
removedIn: '21.7.0',
|
|
10161
|
-
},
|
|
10162
|
-
{
|
|
10163
|
-
kind: 'token',
|
|
10164
|
-
name: '--gog-ms-overflow-font-size',
|
|
10165
|
-
replacement: '--gog-multiselect-overflow-font-size',
|
|
10166
|
-
since: '21.3.0',
|
|
10167
|
-
sinceDate: '2026-08-07',
|
|
10168
|
-
removedIn: '21.7.0',
|
|
10169
|
-
},
|
|
10170
|
-
{
|
|
10171
|
-
kind: 'token',
|
|
10172
|
-
name: '--gog-ms-overflow-gap',
|
|
10173
|
-
replacement: '--gog-multiselect-overflow-gap',
|
|
10174
|
-
since: '21.3.0',
|
|
10175
|
-
sinceDate: '2026-08-07',
|
|
10176
|
-
removedIn: '21.7.0',
|
|
10177
|
-
},
|
|
10178
|
-
{
|
|
10179
|
-
kind: 'token',
|
|
10180
|
-
name: '--gog-ms-panel-bg',
|
|
10181
|
-
replacement: '--gog-multiselect-panel-bg',
|
|
10182
|
-
since: '21.3.0',
|
|
10183
|
-
sinceDate: '2026-08-07',
|
|
10184
|
-
removedIn: '21.7.0',
|
|
10185
|
-
},
|
|
10186
|
-
{
|
|
10187
|
-
kind: 'token',
|
|
10188
|
-
name: '--gog-ms-panel-border',
|
|
10189
|
-
replacement: '--gog-multiselect-panel-border',
|
|
10190
|
-
since: '21.3.0',
|
|
10191
|
-
sinceDate: '2026-08-07',
|
|
10192
|
-
removedIn: '21.7.0',
|
|
10193
|
-
},
|
|
10194
|
-
{
|
|
10195
|
-
kind: 'token',
|
|
10196
|
-
name: '--gog-ms-panel-max-height',
|
|
10197
|
-
replacement: '--gog-multiselect-panel-max-height',
|
|
10198
|
-
since: '21.3.0',
|
|
10199
|
-
sinceDate: '2026-08-07',
|
|
10200
|
-
removedIn: '21.7.0',
|
|
10201
|
-
},
|
|
10202
|
-
{
|
|
10203
|
-
kind: 'token',
|
|
10204
|
-
name: '--gog-ms-panel-max-width',
|
|
10205
|
-
replacement: '--gog-multiselect-panel-max-width',
|
|
10206
|
-
since: '21.3.0',
|
|
10207
|
-
sinceDate: '2026-08-07',
|
|
10208
|
-
removedIn: '21.7.0',
|
|
10209
|
-
},
|
|
10210
|
-
{
|
|
10211
|
-
kind: 'token',
|
|
10212
|
-
name: '--gog-ms-panel-offset',
|
|
10213
|
-
replacement: '--gog-multiselect-panel-offset',
|
|
10214
|
-
since: '21.3.0',
|
|
10215
|
-
sinceDate: '2026-08-07',
|
|
10216
|
-
removedIn: '21.7.0',
|
|
10217
|
-
},
|
|
10218
|
-
{
|
|
10219
|
-
kind: 'token',
|
|
10220
|
-
name: '--gog-ms-panel-shadow',
|
|
10221
|
-
replacement: '--gog-multiselect-panel-shadow',
|
|
10222
|
-
since: '21.3.0',
|
|
10223
|
-
sinceDate: '2026-08-07',
|
|
10224
|
-
removedIn: '21.7.0',
|
|
10225
|
-
},
|
|
10226
|
-
{
|
|
10227
|
-
kind: 'token',
|
|
10228
|
-
name: '--gog-ms-placeholder-color',
|
|
10229
|
-
replacement: '--gog-multiselect-placeholder-color',
|
|
10230
|
-
since: '21.3.0',
|
|
10231
|
-
sinceDate: '2026-08-07',
|
|
10232
|
-
removedIn: '21.7.0',
|
|
10233
|
-
},
|
|
10234
|
-
{
|
|
10235
|
-
kind: 'token',
|
|
10236
|
-
name: '--gog-ms-radius',
|
|
10237
|
-
replacement: '--gog-multiselect-radius',
|
|
10238
|
-
since: '21.3.0',
|
|
10239
|
-
sinceDate: '2026-08-07',
|
|
10240
|
-
removedIn: '21.7.0',
|
|
10241
|
-
},
|
|
10242
|
-
{
|
|
10243
|
-
kind: 'token',
|
|
10244
|
-
name: '--gog-ms-transition-duration',
|
|
10245
|
-
replacement: '--gog-multiselect-transition-duration',
|
|
10246
|
-
since: '21.3.0',
|
|
10247
|
-
sinceDate: '2026-08-07',
|
|
10248
|
-
removedIn: '21.7.0',
|
|
10249
|
-
},
|
|
10250
|
-
{
|
|
10251
|
-
kind: 'token',
|
|
10252
|
-
name: '--gog-ms-value-color',
|
|
10253
|
-
replacement: '--gog-multiselect-value-color',
|
|
10254
|
-
since: '21.3.0',
|
|
10255
|
-
sinceDate: '2026-08-07',
|
|
10256
|
-
removedIn: '21.7.0',
|
|
10257
|
-
},
|
|
10258
|
-
];
|
|
9108
|
+
const GOG_DEPRECATIONS = [];
|
|
10259
9109
|
|
|
10260
9110
|
// GENERATED FILE — do not edit by hand.
|
|
10261
9111
|
// Run `npm run generate:tokens` after changing src/styles/theme.css.
|
|
@@ -10272,11 +9122,13 @@ const GOG_TOKEN_GROUPS = [
|
|
|
10272
9122
|
'--gog-font-body',
|
|
10273
9123
|
'--gog-font-heading',
|
|
10274
9124
|
'--gog-font-mono',
|
|
9125
|
+
'--gog-letter-spacing',
|
|
10275
9126
|
'--gog-text-2xl',
|
|
10276
9127
|
'--gog-text-3xl',
|
|
10277
9128
|
'--gog-text-lg',
|
|
10278
9129
|
'--gog-text-md',
|
|
10279
9130
|
'--gog-text-sm',
|
|
9131
|
+
'--gog-text-transform',
|
|
10280
9132
|
'--gog-text-xl',
|
|
10281
9133
|
'--gog-text-xs',
|
|
10282
9134
|
],
|
|
@@ -10285,14 +9137,12 @@ const GOG_TOKEN_GROUPS = [
|
|
|
10285
9137
|
section: 'Spacing & geometry',
|
|
10286
9138
|
layer: 'foundation',
|
|
10287
9139
|
tokens: [
|
|
9140
|
+
'--gog-border-style',
|
|
9141
|
+
'--gog-border-width',
|
|
9142
|
+
'--gog-density',
|
|
10288
9143
|
'--gog-panel-border-style',
|
|
10289
9144
|
'--gog-panel-border-width',
|
|
10290
9145
|
'--gog-radius',
|
|
10291
|
-
'--gog-space-2xl',
|
|
10292
|
-
'--gog-space-lg',
|
|
10293
|
-
'--gog-space-md',
|
|
10294
|
-
'--gog-space-sm',
|
|
10295
|
-
'--gog-space-xs',
|
|
10296
9146
|
],
|
|
10297
9147
|
},
|
|
10298
9148
|
{
|
|
@@ -10326,34 +9176,16 @@ const GOG_TOKEN_GROUPS = [
|
|
|
10326
9176
|
'--gog-control-checkbox-label-size-slg',
|
|
10327
9177
|
'--gog-control-checkbox-label-size-sm',
|
|
10328
9178
|
'--gog-control-checkbox-label-size-xsm',
|
|
10329
|
-
'--gog-control-checkbox-padding',
|
|
10330
|
-
'--gog-control-icon-offset',
|
|
10331
|
-
'--gog-control-padding-x',
|
|
10332
|
-
'--gog-control-padding-y',
|
|
10333
9179
|
],
|
|
10334
9180
|
},
|
|
10335
9181
|
{
|
|
10336
9182
|
section: 'Field sizing (input / select / multiselect share one scale)',
|
|
10337
9183
|
layer: 'foundation',
|
|
10338
9184
|
tokens: [
|
|
10339
|
-
'--gog-field-
|
|
10340
|
-
'--gog-field-
|
|
10341
|
-
'--gog-field-
|
|
10342
|
-
'--gog-field-lg-padding-y',
|
|
10343
|
-
'--gog-field-md-icon-inset',
|
|
9185
|
+
'--gog-field-icon-glyph',
|
|
9186
|
+
'--gog-field-icon-glyph-sm',
|
|
9187
|
+
'--gog-field-icon-glyph-xsm',
|
|
10344
9188
|
'--gog-field-slg-font-size',
|
|
10345
|
-
'--gog-field-slg-icon-inset',
|
|
10346
|
-
'--gog-field-slg-icon-offset',
|
|
10347
|
-
'--gog-field-slg-padding-x',
|
|
10348
|
-
'--gog-field-slg-padding-y',
|
|
10349
|
-
'--gog-field-sm-icon-inset',
|
|
10350
|
-
'--gog-field-sm-icon-offset',
|
|
10351
|
-
'--gog-field-sm-padding-x',
|
|
10352
|
-
'--gog-field-sm-padding-y',
|
|
10353
|
-
'--gog-field-xsm-icon-inset',
|
|
10354
|
-
'--gog-field-xsm-icon-offset',
|
|
10355
|
-
'--gog-field-xsm-padding-x',
|
|
10356
|
-
'--gog-field-xsm-padding-y',
|
|
10357
9189
|
],
|
|
10358
9190
|
},
|
|
10359
9191
|
{
|
|
@@ -10361,7 +9193,6 @@ const GOG_TOKEN_GROUPS = [
|
|
|
10361
9193
|
layer: 'foundation',
|
|
10362
9194
|
tokens: [
|
|
10363
9195
|
'--gog-field-float-label-in-top',
|
|
10364
|
-
'--gog-field-float-label-over-gap',
|
|
10365
9196
|
'--gog-field-float-label-over-reserve',
|
|
10366
9197
|
'--gog-field-float-label-reserve',
|
|
10367
9198
|
],
|
|
@@ -10385,11 +9216,9 @@ const GOG_TOKEN_GROUPS = [
|
|
|
10385
9216
|
layer: 'foundation',
|
|
10386
9217
|
tokens: [
|
|
10387
9218
|
'--gog-toast-enter-distance',
|
|
10388
|
-
'--gog-toast-gap',
|
|
10389
9219
|
'--gog-toast-max-width',
|
|
10390
9220
|
'--gog-toast-min-width',
|
|
10391
9221
|
'--gog-toast-shadow',
|
|
10392
|
-
'--gog-toast-stack-padding',
|
|
10393
9222
|
'--gog-toast-z-index',
|
|
10394
9223
|
],
|
|
10395
9224
|
},
|
|
@@ -10409,10 +9238,12 @@ const GOG_TOKEN_GROUPS = [
|
|
|
10409
9238
|
'--gog-accent-text-color',
|
|
10410
9239
|
'--gog-background-color',
|
|
10411
9240
|
'--gog-border-color',
|
|
9241
|
+
'--gog-card-elevated-shadow',
|
|
10412
9242
|
'--gog-danger-color',
|
|
10413
9243
|
'--gog-hover-color',
|
|
10414
9244
|
'--gog-info-color',
|
|
10415
9245
|
'--gog-muted-text-color',
|
|
9246
|
+
'--gog-panel-elevated-shadow',
|
|
10416
9247
|
'--gog-panel-shadow',
|
|
10417
9248
|
'--gog-primary-color',
|
|
10418
9249
|
'--gog-secondary-color',
|
|
@@ -10427,14 +9258,58 @@ const GOG_TOKEN_GROUPS = [
|
|
|
10427
9258
|
section: 'Derived foundation tokens',
|
|
10428
9259
|
layer: 'foundation',
|
|
10429
9260
|
tokens: [
|
|
9261
|
+
'--gog-control-checkbox-padding',
|
|
9262
|
+
'--gog-control-icon-offset',
|
|
9263
|
+
'--gog-control-padding-x',
|
|
9264
|
+
'--gog-control-padding-y',
|
|
9265
|
+
'--gog-elevated-surface-color',
|
|
9266
|
+
'--gog-field-float-label-over-gap',
|
|
10430
9267
|
'--gog-field-lg-font-size',
|
|
9268
|
+
'--gog-field-lg-icon-inset',
|
|
9269
|
+
'--gog-field-lg-icon-offset',
|
|
9270
|
+
'--gog-field-lg-padding-x',
|
|
9271
|
+
'--gog-field-lg-padding-y',
|
|
10431
9272
|
'--gog-field-md-font-size',
|
|
9273
|
+
'--gog-field-md-icon-inset',
|
|
10432
9274
|
'--gog-field-md-icon-offset',
|
|
10433
9275
|
'--gog-field-md-padding-x',
|
|
10434
9276
|
'--gog-field-md-padding-y',
|
|
9277
|
+
'--gog-field-slg-icon-inset',
|
|
9278
|
+
'--gog-field-slg-icon-offset',
|
|
9279
|
+
'--gog-field-slg-padding-x',
|
|
9280
|
+
'--gog-field-slg-padding-y',
|
|
10435
9281
|
'--gog-field-sm-font-size',
|
|
9282
|
+
'--gog-field-sm-icon-inset',
|
|
9283
|
+
'--gog-field-sm-icon-offset',
|
|
9284
|
+
'--gog-field-sm-padding-x',
|
|
9285
|
+
'--gog-field-sm-padding-y',
|
|
10436
9286
|
'--gog-field-xsm-font-size',
|
|
9287
|
+
'--gog-field-xsm-icon-inset',
|
|
9288
|
+
'--gog-field-xsm-icon-offset',
|
|
9289
|
+
'--gog-field-xsm-padding-x',
|
|
9290
|
+
'--gog-field-xsm-padding-y',
|
|
10437
9291
|
'--gog-panel-radius',
|
|
9292
|
+
'--gog-space-10',
|
|
9293
|
+
'--gog-space-12',
|
|
9294
|
+
'--gog-space-14',
|
|
9295
|
+
'--gog-space-16',
|
|
9296
|
+
'--gog-space-18',
|
|
9297
|
+
'--gog-space-2',
|
|
9298
|
+
'--gog-space-20',
|
|
9299
|
+
'--gog-space-24',
|
|
9300
|
+
'--gog-space-28',
|
|
9301
|
+
'--gog-space-2xl',
|
|
9302
|
+
'--gog-space-32',
|
|
9303
|
+
'--gog-space-4',
|
|
9304
|
+
'--gog-space-48',
|
|
9305
|
+
'--gog-space-6',
|
|
9306
|
+
'--gog-space-8',
|
|
9307
|
+
'--gog-space-lg',
|
|
9308
|
+
'--gog-space-md',
|
|
9309
|
+
'--gog-space-sm',
|
|
9310
|
+
'--gog-space-xs',
|
|
9311
|
+
'--gog-toast-gap',
|
|
9312
|
+
'--gog-toast-stack-padding',
|
|
10438
9313
|
],
|
|
10439
9314
|
},
|
|
10440
9315
|
{
|
|
@@ -11559,6 +10434,7 @@ const GOG_TOKEN_GROUPS = [
|
|
|
11559
10434
|
'--gog-table-footer-gap',
|
|
11560
10435
|
'--gog-table-footer-min-height',
|
|
11561
10436
|
'--gog-table-gap',
|
|
10437
|
+
'--gog-table-header-bg',
|
|
11562
10438
|
'--gog-table-header-font-family',
|
|
11563
10439
|
'--gog-table-header-letter-spacing',
|
|
11564
10440
|
'--gog-table-header-text-transform',
|
|
@@ -11830,16 +10706,6 @@ const GOG_TOKEN_GROUPS = [
|
|
|
11830
10706
|
'--gog-autocomplete-padding-y',
|
|
11831
10707
|
'--gog-badge-bg',
|
|
11832
10708
|
'--gog-badge-color',
|
|
11833
|
-
'--gog-btn-bg',
|
|
11834
|
-
'--gog-btn-border',
|
|
11835
|
-
'--gog-btn-color',
|
|
11836
|
-
'--gog-btn-font-size',
|
|
11837
|
-
'--gog-btn-hover-bg',
|
|
11838
|
-
'--gog-btn-hover-color',
|
|
11839
|
-
'--gog-btn-hover-shadow',
|
|
11840
|
-
'--gog-btn-padding',
|
|
11841
|
-
'--gog-btn-shadow',
|
|
11842
|
-
'--gog-btn-spinner-color',
|
|
11843
10709
|
'--gog-button-bg',
|
|
11844
10710
|
'--gog-button-border',
|
|
11845
10711
|
'--gog-button-color',
|