@ifsworld/granite-components 18.1.0 → 18.2.1-beta.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.
|
@@ -125,11 +125,11 @@ class GraniteCarouselComponent {
|
|
|
125
125
|
this.updateVisibleItems();
|
|
126
126
|
}
|
|
127
127
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GraniteCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
128
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: GraniteCarouselComponent, isStandalone: false, selector: "granite-carousel", inputs: { items: "items", responsiveOptions: "responsiveOptions", numVisible: "numVisible", numScroll: "numScroll", circular: "circular", prevButtonAriaLabel: "prevButtonAriaLabel", nextButtonAriaLabel: "nextButtonAriaLabel", shrinkToContent: "shrinkToContent" }, host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "itemTemplateRef", first: true, predicate: ["itemTemplate"], descendants: true }], viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"carousel-wrapper\">\n <button\n graniteFlatButton\n class=\"arrow-btn\"\n [disabled]=\"carousel.isBackwardNavDisabled()\"\n [attr.aria-label]=\"prevButtonAriaLabel\"\n (click)=\"navBackward($event)\"\n >\n <granite-icon fontIcon=\"icon-caret-left\"></granite-icon>\n </button>\n\n <p-carousel\n #carousel\n [value]=\"visibleItems\"\n [numVisible]=\"numVisible\"\n [numScroll]=\"numScroll\"\n [circular]=\"circular\"\n [responsiveOptions]=\"responsiveOptions\"\n [showNavigators]=\"false\"\n [showIndicators]=\"false\"\n [class.auto-width]=\"shrinkToContent\"\n [class.is-one-item]=\"isOneItemVisible\"\n (keydown)=\"onKeyDown($event)\"\n tabindex=\"0\"\n >\n <ng-template let-item pTemplate=\"item\">\n <div class=\"item-template-wrapper\" *ngIf=\"!item.placeholder\">\n <ng-container\n *ngTemplateOutlet=\"itemTemplateRef; context: { $implicit: item }\"\n ></ng-container>\n </div>\n </ng-template>\n </p-carousel>\n\n <button\n graniteFlatButton\n class=\"arrow-btn\"\n [disabled]=\"carousel.isForwardNavDisabled()\"\n [attr.aria-label]=\"nextButtonAriaLabel\"\n (click)=\"navForward($event)\"\n >\n <granite-icon fontIcon=\"icon-caret-right\"></granite-icon>\n </button>\n</div>\n", styles: [":host{width:100%;overflow:hidden}.carousel-wrapper{display:flex;justify-content:center;align-items:
|
|
128
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: GraniteCarouselComponent, isStandalone: false, selector: "granite-carousel", inputs: { items: "items", responsiveOptions: "responsiveOptions", numVisible: "numVisible", numScroll: "numScroll", circular: "circular", prevButtonAriaLabel: "prevButtonAriaLabel", nextButtonAriaLabel: "nextButtonAriaLabel", shrinkToContent: "shrinkToContent" }, host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "itemTemplateRef", first: true, predicate: ["itemTemplate"], descendants: true }], viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"carousel-wrapper\">\n <button\n graniteFlatButton\n class=\"arrow-btn\"\n [disabled]=\"carousel.isBackwardNavDisabled()\"\n [attr.aria-label]=\"prevButtonAriaLabel\"\n (click)=\"navBackward($event)\"\n >\n <granite-icon fontIcon=\"icon-caret-left\"></granite-icon>\n </button>\n\n <p-carousel\n #carousel\n [value]=\"visibleItems\"\n [numVisible]=\"numVisible\"\n [numScroll]=\"numScroll\"\n [circular]=\"circular\"\n [responsiveOptions]=\"responsiveOptions\"\n [showNavigators]=\"false\"\n [showIndicators]=\"false\"\n [class.auto-width]=\"shrinkToContent\"\n [class.is-one-item]=\"isOneItemVisible\"\n (keydown)=\"onKeyDown($event)\"\n tabindex=\"0\"\n >\n <ng-template let-item pTemplate=\"item\">\n <div class=\"item-template-wrapper\" *ngIf=\"!item.placeholder\">\n <ng-container\n *ngTemplateOutlet=\"itemTemplateRef; context: { $implicit: item }\"\n ></ng-container>\n </div>\n </ng-template>\n </p-carousel>\n\n <button\n graniteFlatButton\n class=\"arrow-btn\"\n [disabled]=\"carousel.isForwardNavDisabled()\"\n [attr.aria-label]=\"nextButtonAriaLabel\"\n (click)=\"navForward($event)\"\n >\n <granite-icon fontIcon=\"icon-caret-right\"></granite-icon>\n </button>\n</div>\n", styles: [":host{display:block;box-sizing:border-box;width:100%;height:100%;min-height:0;overflow:hidden}.carousel-wrapper{display:flex;justify-content:center;align-items:stretch;gap:var(--granite-spacing-8);padding:var(--granite-spacing-8);width:100%;height:100%;min-height:0;max-width:100%;overflow:hidden;box-sizing:border-box}p-carousel{flex:1;min-width:0;min-height:0;height:100%;display:block}.arrow-btn{align-self:stretch;flex-shrink:0;width:calc(var(--granite-size-base-rem) * 2);min-height:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.arrow-btn granite-icon{font-size:var(--granite-font-size-body);position:relative;top:0}::ng-deep p-carousel .p-carousel{height:100%;display:flex;flex-direction:column}::ng-deep p-carousel .p-carousel-content{flex:1 1 auto;min-height:0;display:flex;flex-direction:row;align-items:stretch}::ng-deep p-carousel .p-carousel-container{flex:1 1 auto;min-height:0;min-width:0;display:flex;flex-direction:column}::ng-deep p-carousel .p-carousel-items-content{flex:1 1 auto;min-height:0;height:100%!important}::ng-deep p-carousel .p-carousel-items-container{height:100%}::ng-deep p-carousel .p-carousel-item{display:flex;min-height:0}::ng-deep p-carousel .item-template-wrapper{box-sizing:border-box;flex:1 1 auto;min-height:0;width:100%;margin:var(--granite-spacing-4)}::ng-deep .auto-width .p-carousel-item{flex:0 0 auto!important}::ng-deep .is-one-item .p-carousel-item{flex:1 0 100%!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.Carousel, selector: "p-carousel", inputs: ["page", "numVisible", "numScroll", "responsiveOptions", "orientation", "verticalViewPortHeight", "contentClass", "indicatorsContentClass", "indicatorsContentStyle", "indicatorStyleClass", "indicatorStyle", "value", "circular", "showIndicators", "showNavigators", "autoplayInterval", "styleClass", "prevButtonProps", "nextButtonProps"], outputs: ["onPage"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4.GraniteButtonComponent, selector: "button[graniteButton], button[granitePrimaryButton], button[graniteFlatButton], button[graniteToolbarButton] ", inputs: ["disabled", "toggled"], exportAs: ["graniteButton"] }, { kind: "component", type: i4.GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
129
129
|
}
|
|
130
130
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GraniteCarouselComponent, decorators: [{
|
|
131
131
|
type: Component,
|
|
132
|
-
args: [{ selector: 'granite-carousel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"carousel-wrapper\">\n <button\n graniteFlatButton\n class=\"arrow-btn\"\n [disabled]=\"carousel.isBackwardNavDisabled()\"\n [attr.aria-label]=\"prevButtonAriaLabel\"\n (click)=\"navBackward($event)\"\n >\n <granite-icon fontIcon=\"icon-caret-left\"></granite-icon>\n </button>\n\n <p-carousel\n #carousel\n [value]=\"visibleItems\"\n [numVisible]=\"numVisible\"\n [numScroll]=\"numScroll\"\n [circular]=\"circular\"\n [responsiveOptions]=\"responsiveOptions\"\n [showNavigators]=\"false\"\n [showIndicators]=\"false\"\n [class.auto-width]=\"shrinkToContent\"\n [class.is-one-item]=\"isOneItemVisible\"\n (keydown)=\"onKeyDown($event)\"\n tabindex=\"0\"\n >\n <ng-template let-item pTemplate=\"item\">\n <div class=\"item-template-wrapper\" *ngIf=\"!item.placeholder\">\n <ng-container\n *ngTemplateOutlet=\"itemTemplateRef; context: { $implicit: item }\"\n ></ng-container>\n </div>\n </ng-template>\n </p-carousel>\n\n <button\n graniteFlatButton\n class=\"arrow-btn\"\n [disabled]=\"carousel.isForwardNavDisabled()\"\n [attr.aria-label]=\"nextButtonAriaLabel\"\n (click)=\"navForward($event)\"\n >\n <granite-icon fontIcon=\"icon-caret-right\"></granite-icon>\n </button>\n</div>\n", styles: [":host{width:100%;overflow:hidden}.carousel-wrapper{display:flex;justify-content:center;align-items:
|
|
132
|
+
args: [{ selector: 'granite-carousel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"carousel-wrapper\">\n <button\n graniteFlatButton\n class=\"arrow-btn\"\n [disabled]=\"carousel.isBackwardNavDisabled()\"\n [attr.aria-label]=\"prevButtonAriaLabel\"\n (click)=\"navBackward($event)\"\n >\n <granite-icon fontIcon=\"icon-caret-left\"></granite-icon>\n </button>\n\n <p-carousel\n #carousel\n [value]=\"visibleItems\"\n [numVisible]=\"numVisible\"\n [numScroll]=\"numScroll\"\n [circular]=\"circular\"\n [responsiveOptions]=\"responsiveOptions\"\n [showNavigators]=\"false\"\n [showIndicators]=\"false\"\n [class.auto-width]=\"shrinkToContent\"\n [class.is-one-item]=\"isOneItemVisible\"\n (keydown)=\"onKeyDown($event)\"\n tabindex=\"0\"\n >\n <ng-template let-item pTemplate=\"item\">\n <div class=\"item-template-wrapper\" *ngIf=\"!item.placeholder\">\n <ng-container\n *ngTemplateOutlet=\"itemTemplateRef; context: { $implicit: item }\"\n ></ng-container>\n </div>\n </ng-template>\n </p-carousel>\n\n <button\n graniteFlatButton\n class=\"arrow-btn\"\n [disabled]=\"carousel.isForwardNavDisabled()\"\n [attr.aria-label]=\"nextButtonAriaLabel\"\n (click)=\"navForward($event)\"\n >\n <granite-icon fontIcon=\"icon-caret-right\"></granite-icon>\n </button>\n</div>\n", styles: [":host{display:block;box-sizing:border-box;width:100%;height:100%;min-height:0;overflow:hidden}.carousel-wrapper{display:flex;justify-content:center;align-items:stretch;gap:var(--granite-spacing-8);padding:var(--granite-spacing-8);width:100%;height:100%;min-height:0;max-width:100%;overflow:hidden;box-sizing:border-box}p-carousel{flex:1;min-width:0;min-height:0;height:100%;display:block}.arrow-btn{align-self:stretch;flex-shrink:0;width:calc(var(--granite-size-base-rem) * 2);min-height:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.arrow-btn granite-icon{font-size:var(--granite-font-size-body);position:relative;top:0}::ng-deep p-carousel .p-carousel{height:100%;display:flex;flex-direction:column}::ng-deep p-carousel .p-carousel-content{flex:1 1 auto;min-height:0;display:flex;flex-direction:row;align-items:stretch}::ng-deep p-carousel .p-carousel-container{flex:1 1 auto;min-height:0;min-width:0;display:flex;flex-direction:column}::ng-deep p-carousel .p-carousel-items-content{flex:1 1 auto;min-height:0;height:100%!important}::ng-deep p-carousel .p-carousel-items-container{height:100%}::ng-deep p-carousel .p-carousel-item{display:flex;min-height:0}::ng-deep p-carousel .item-template-wrapper{box-sizing:border-box;flex:1 1 auto;min-height:0;width:100%;margin:var(--granite-spacing-4)}::ng-deep .auto-width .p-carousel-item{flex:0 0 auto!important}::ng-deep .is-one-item .p-carousel-item{flex:1 0 100%!important}\n"] }]
|
|
133
133
|
}], propDecorators: { items: [{
|
|
134
134
|
type: Input
|
|
135
135
|
}], responsiveOptions: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ifsworld-granite-components-carousel.mjs","sources":["../../../../libs/granite-components/carousel/src/lib/carousel.component.ts","../../../../libs/granite-components/carousel/src/lib/carousel.component.html","../../../../libs/granite-components/carousel/src/lib/carousel.module.ts","../../../../libs/granite-components/carousel/src/ifsworld-granite-components-carousel.ts"],"sourcesContent":["import {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChild,\n HostListener,\n Input,\n OnChanges,\n OnDestroy,\n SimpleChanges,\n TemplateRef,\n ViewChild,\n inject,\n} from '@angular/core';\nimport { Carousel, CarouselResponsiveOptions } from 'primeng/carousel';\n\n@Component({\n selector: 'granite-carousel',\n templateUrl: './carousel.component.html',\n styleUrl: './carousel.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false,\n})\nexport class GraniteCarouselComponent<T>\n implements OnChanges, AfterViewInit, OnDestroy\n{\n @Input()\n items: T[] = [];\n\n @Input()\n responsiveOptions: CarouselResponsiveOptions[] = [\n {\n breakpoint: '1024px',\n numVisible: 3,\n numScroll: 1,\n },\n {\n breakpoint: '768px',\n numVisible: 2,\n numScroll: 1,\n },\n {\n breakpoint: '560px',\n numVisible: 1,\n numScroll: 1,\n },\n ];\n\n @Input()\n numVisible: number = 1;\n\n @Input()\n numScroll: number = 1;\n\n @Input()\n circular: boolean = false;\n\n @Input()\n prevButtonAriaLabel: string = 'Previous page';\n\n @Input()\n nextButtonAriaLabel: string = 'Next page';\n\n @Input()\n shrinkToContent: boolean = false;\n\n @ContentChild('itemTemplate', { static: false })\n itemTemplateRef: TemplateRef<any>;\n\n @ViewChild('carousel')\n carousel: Carousel;\n\n visibleItems: T[] = [];\n isOneItemVisible: boolean = false;\n\n private cdr = inject(ChangeDetectorRef);\n private resizeObserver: ResizeObserver;\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['items'] && changes['items'].currentValue) {\n this.items = changes['items'].currentValue;\n this.triggerUpdate();\n }\n }\n\n ngAfterViewInit(): void {\n if (typeof ResizeObserver !== 'undefined') {\n this.resizeObserver = new ResizeObserver((entries) => {\n this.handleResize(entries);\n });\n\n this.resizeObserver.observe(this.carousel?.el?.nativeElement);\n }\n }\n\n @HostListener('window:resize')\n onResize(): void {\n this.triggerUpdate();\n }\n\n onKeyDown(event: KeyboardEvent): void {\n const mouseEvent = new MouseEvent('click', { cancelable: true });\n if (event.key === 'ArrowRight') {\n this.navForward(mouseEvent);\n } else if (event.key === 'ArrowLeft') {\n this.navBackward(mouseEvent);\n }\n }\n\n navForward(event: MouseEvent): void {\n this.carousel?.navForward(event);\n }\n\n navBackward(event: MouseEvent): void {\n this.carousel?.navBackward(event);\n }\n\n ngOnDestroy(): void {\n this.resizeObserver?.disconnect();\n }\n\n private triggerUpdate(): void {\n if (this.carousel?.el?.nativeElement) {\n const containerWidth = this.carousel.el.nativeElement.offsetWidth;\n this.updateNumVisibleBasedOnWidth(containerWidth);\n } else {\n this.updateVisibleItems();\n }\n }\n\n private handleResize(entries: ResizeObserverEntry[]): void {\n entries.forEach((entry) => {\n if (entry.contentRect) {\n const containerWidth = entry.contentRect.width;\n this.updateNumVisibleBasedOnWidth(containerWidth);\n }\n });\n }\n\n private getDisplayItems(items: T[], numVisible: number): T[] {\n const placeholders = Array(Math.max(0, numVisible - items.length)).fill({\n placeholder: true,\n });\n\n return [...items, ...placeholders];\n }\n\n private updateVisibleItems(): void {\n if (!this.items || !this.carousel) return;\n\n const numVisible = this.carousel.numVisible || this.numVisible;\n this.visibleItems = this.getDisplayItems(this.items, numVisible);\n this.cdr.markForCheck();\n }\n\n private updateNumVisibleBasedOnWidth(containerWidth: number): void {\n if (!this.carousel) return;\n\n let matched: boolean = false;\n const sortedResponsiveOptions = [...this.responsiveOptions].sort(\n (a, b) => parseInt(a.breakpoint) - parseInt(b.breakpoint)\n );\n\n if (containerWidth) {\n for (const option of sortedResponsiveOptions) {\n const breakpoint = parseInt(option.breakpoint);\n\n if (containerWidth <= breakpoint) {\n this.carousel.numVisible = option.numVisible;\n this.isOneItemVisible = option.numVisible === 1;\n matched = true;\n break;\n }\n }\n }\n\n if (!matched) {\n this.carousel.numVisible = this.numVisible;\n }\n\n this.updateVisibleItems();\n }\n}\n","<div class=\"carousel-wrapper\">\n <button\n graniteFlatButton\n class=\"arrow-btn\"\n [disabled]=\"carousel.isBackwardNavDisabled()\"\n [attr.aria-label]=\"prevButtonAriaLabel\"\n (click)=\"navBackward($event)\"\n >\n <granite-icon fontIcon=\"icon-caret-left\"></granite-icon>\n </button>\n\n <p-carousel\n #carousel\n [value]=\"visibleItems\"\n [numVisible]=\"numVisible\"\n [numScroll]=\"numScroll\"\n [circular]=\"circular\"\n [responsiveOptions]=\"responsiveOptions\"\n [showNavigators]=\"false\"\n [showIndicators]=\"false\"\n [class.auto-width]=\"shrinkToContent\"\n [class.is-one-item]=\"isOneItemVisible\"\n (keydown)=\"onKeyDown($event)\"\n tabindex=\"0\"\n >\n <ng-template let-item pTemplate=\"item\">\n <div class=\"item-template-wrapper\" *ngIf=\"!item.placeholder\">\n <ng-container\n *ngTemplateOutlet=\"itemTemplateRef; context: { $implicit: item }\"\n ></ng-container>\n </div>\n </ng-template>\n </p-carousel>\n\n <button\n graniteFlatButton\n class=\"arrow-btn\"\n [disabled]=\"carousel.isForwardNavDisabled()\"\n [attr.aria-label]=\"nextButtonAriaLabel\"\n (click)=\"navForward($event)\"\n >\n <granite-icon fontIcon=\"icon-caret-right\"></granite-icon>\n </button>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { GraniteCarouselComponent } from './carousel.component';\nimport { CarouselModule } from 'primeng/carousel';\nimport {\n GraniteIconModule,\n GraniteButtonModule,\n} from '@ifsworld/granite-components';\n\n@NgModule({\n declarations: [GraniteCarouselComponent],\n exports: [GraniteCarouselComponent],\n imports: [\n CommonModule,\n CarouselModule,\n GraniteButtonModule,\n GraniteIconModule,\n ],\n})\nexport class GraniteCarouselModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ifsworld-granite-components-carousel.mjs","sources":["../../../../libs/granite-components/carousel/src/lib/carousel.component.ts","../../../../libs/granite-components/carousel/src/lib/carousel.component.html","../../../../libs/granite-components/carousel/src/lib/carousel.module.ts","../../../../libs/granite-components/carousel/src/ifsworld-granite-components-carousel.ts"],"sourcesContent":["import {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChild,\n HostListener,\n Input,\n OnChanges,\n OnDestroy,\n SimpleChanges,\n TemplateRef,\n ViewChild,\n inject,\n} from '@angular/core';\nimport { Carousel, CarouselResponsiveOptions } from 'primeng/carousel';\n\n@Component({\n selector: 'granite-carousel',\n templateUrl: './carousel.component.html',\n styleUrl: './carousel.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false,\n})\nexport class GraniteCarouselComponent<T>\n implements OnChanges, AfterViewInit, OnDestroy\n{\n @Input()\n items: T[] = [];\n\n @Input()\n responsiveOptions: CarouselResponsiveOptions[] = [\n {\n breakpoint: '1024px',\n numVisible: 3,\n numScroll: 1,\n },\n {\n breakpoint: '768px',\n numVisible: 2,\n numScroll: 1,\n },\n {\n breakpoint: '560px',\n numVisible: 1,\n numScroll: 1,\n },\n ];\n\n @Input()\n numVisible: number = 1;\n\n @Input()\n numScroll: number = 1;\n\n @Input()\n circular: boolean = false;\n\n @Input()\n prevButtonAriaLabel: string = 'Previous page';\n\n @Input()\n nextButtonAriaLabel: string = 'Next page';\n\n @Input()\n shrinkToContent: boolean = false;\n\n @ContentChild('itemTemplate', { static: false })\n itemTemplateRef: TemplateRef<any>;\n\n @ViewChild('carousel')\n carousel: Carousel;\n\n visibleItems: T[] = [];\n isOneItemVisible: boolean = false;\n\n private cdr = inject(ChangeDetectorRef);\n private resizeObserver: ResizeObserver;\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['items'] && changes['items'].currentValue) {\n this.items = changes['items'].currentValue;\n this.triggerUpdate();\n }\n }\n\n ngAfterViewInit(): void {\n if (typeof ResizeObserver !== 'undefined') {\n this.resizeObserver = new ResizeObserver((entries) => {\n this.handleResize(entries);\n });\n\n this.resizeObserver.observe(this.carousel?.el?.nativeElement);\n }\n }\n\n @HostListener('window:resize')\n onResize(): void {\n this.triggerUpdate();\n }\n\n onKeyDown(event: KeyboardEvent): void {\n const mouseEvent = new MouseEvent('click', { cancelable: true });\n if (event.key === 'ArrowRight') {\n this.navForward(mouseEvent);\n } else if (event.key === 'ArrowLeft') {\n this.navBackward(mouseEvent);\n }\n }\n\n navForward(event: MouseEvent): void {\n this.carousel?.navForward(event);\n }\n\n navBackward(event: MouseEvent): void {\n this.carousel?.navBackward(event);\n }\n\n ngOnDestroy(): void {\n this.resizeObserver?.disconnect();\n }\n\n private triggerUpdate(): void {\n if (this.carousel?.el?.nativeElement) {\n const containerWidth = this.carousel.el.nativeElement.offsetWidth;\n this.updateNumVisibleBasedOnWidth(containerWidth);\n } else {\n this.updateVisibleItems();\n }\n }\n\n private handleResize(entries: ResizeObserverEntry[]): void {\n entries.forEach((entry) => {\n if (entry.contentRect) {\n const containerWidth = entry.contentRect.width;\n this.updateNumVisibleBasedOnWidth(containerWidth);\n }\n });\n }\n\n private getDisplayItems(items: T[], numVisible: number): T[] {\n const placeholders = Array(Math.max(0, numVisible - items.length)).fill({\n placeholder: true,\n });\n\n return [...items, ...placeholders];\n }\n\n private updateVisibleItems(): void {\n if (!this.items || !this.carousel) return;\n\n const numVisible = this.carousel.numVisible || this.numVisible;\n this.visibleItems = this.getDisplayItems(this.items, numVisible);\n this.cdr.markForCheck();\n }\n\n private updateNumVisibleBasedOnWidth(containerWidth: number): void {\n if (!this.carousel) return;\n\n let matched: boolean = false;\n const sortedResponsiveOptions = [...this.responsiveOptions].sort(\n (a, b) => parseInt(a.breakpoint) - parseInt(b.breakpoint)\n );\n\n if (containerWidth) {\n for (const option of sortedResponsiveOptions) {\n const breakpoint = parseInt(option.breakpoint);\n\n if (containerWidth <= breakpoint) {\n this.carousel.numVisible = option.numVisible;\n this.isOneItemVisible = option.numVisible === 1;\n matched = true;\n break;\n }\n }\n }\n\n if (!matched) {\n this.carousel.numVisible = this.numVisible;\n }\n\n this.updateVisibleItems();\n }\n}\n","<div class=\"carousel-wrapper\">\n <button\n graniteFlatButton\n class=\"arrow-btn\"\n [disabled]=\"carousel.isBackwardNavDisabled()\"\n [attr.aria-label]=\"prevButtonAriaLabel\"\n (click)=\"navBackward($event)\"\n >\n <granite-icon fontIcon=\"icon-caret-left\"></granite-icon>\n </button>\n\n <p-carousel\n #carousel\n [value]=\"visibleItems\"\n [numVisible]=\"numVisible\"\n [numScroll]=\"numScroll\"\n [circular]=\"circular\"\n [responsiveOptions]=\"responsiveOptions\"\n [showNavigators]=\"false\"\n [showIndicators]=\"false\"\n [class.auto-width]=\"shrinkToContent\"\n [class.is-one-item]=\"isOneItemVisible\"\n (keydown)=\"onKeyDown($event)\"\n tabindex=\"0\"\n >\n <ng-template let-item pTemplate=\"item\">\n <div class=\"item-template-wrapper\" *ngIf=\"!item.placeholder\">\n <ng-container\n *ngTemplateOutlet=\"itemTemplateRef; context: { $implicit: item }\"\n ></ng-container>\n </div>\n </ng-template>\n </p-carousel>\n\n <button\n graniteFlatButton\n class=\"arrow-btn\"\n [disabled]=\"carousel.isForwardNavDisabled()\"\n [attr.aria-label]=\"nextButtonAriaLabel\"\n (click)=\"navForward($event)\"\n >\n <granite-icon fontIcon=\"icon-caret-right\"></granite-icon>\n </button>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { GraniteCarouselComponent } from './carousel.component';\nimport { CarouselModule } from 'primeng/carousel';\nimport {\n GraniteIconModule,\n GraniteButtonModule,\n} from '@ifsworld/granite-components';\n\n@NgModule({\n declarations: [GraniteCarouselComponent],\n exports: [GraniteCarouselComponent],\n imports: [\n CommonModule,\n CarouselModule,\n GraniteButtonModule,\n GraniteIconModule,\n ],\n})\nexport class GraniteCarouselModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -841,7 +841,7 @@ class GraniteMenuItemComponent {
|
|
|
841
841
|
class="caret-right"
|
|
842
842
|
[fontIcon]="'icon-caret-right'"
|
|
843
843
|
></granite-icon>
|
|
844
|
-
</ng-container>`, isInline: true, styles: [":host{display:block;position:relative;line-height:
|
|
844
|
+
</ng-container>`, isInline: true, styles: [":host{display:block;position:relative;line-height:var(--granite-menu-item-height, calc(var(--granite-size-base-rem) * 2));padding-inline:var(--granite-menu-item-padding-inline, var(--granite-spacing-8));padding-block:var(--granite-menu-item-padding-block, 0);width:100%;max-width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-menu-item-font-size, var(--granite-font-size-body-small));font-family:inherit}@media (hover: hover) and (pointer: fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover: none) and (pointer: coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;line-height:var(--granite-menu-item-title-height, calc(var(--granite-size-base-rem) * 1.5));width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-menu-item-title-font-size, var(--granite-font-size-micro));font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-program-focused,:host.cdk-keyboard-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-menu-item-font-size, var(--granite-font-size-body-small));color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{padding-inline-end:var(--granite-spacing-24)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:var(--granite-menu-item-touch-height, calc(var(--granite-size-base-rem) * 3));font-size:var(--granite-menu-item-font-size, var(--granite-font-size-body-small));text-align:center;padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:var(--granite-menu-item-title-height, calc(var(--granite-size-base-rem) * 1.5));font-size:var(--granite-menu-item-title-font-size, var(--granite-font-size-micro))}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-menu-item-title{line-height:var(--granite-menu-item-touch-height, calc(var(--granite-size-base-rem) * 3));height:var(--granite-menu-item-touch-height, calc(var(--granite-size-base-rem) * 3));font-size:var(--granite-menu-touch-title-font-size, var(--granite-font-size-micro));color:var(--granite-menu-touch-title-color, var(--granite-color-text-weak))}@media (hover: none) and (pointer: coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }] }); }
|
|
845
845
|
}
|
|
846
846
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GraniteMenuItemComponent, decorators: [{
|
|
847
847
|
type: Component,
|
|
@@ -864,7 +864,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
864
864
|
'[class.granite-device-output-touch]': '_clientOutput?.device === "touch"',
|
|
865
865
|
//#endregion --- Touch device customizations ---
|
|
866
866
|
'(mouseenter)': '_hovered.next(this)',
|
|
867
|
-
}, styles: [":host{display:block;position:relative;line-height:
|
|
867
|
+
}, styles: [":host{display:block;position:relative;line-height:var(--granite-menu-item-height, calc(var(--granite-size-base-rem) * 2));padding-inline:var(--granite-menu-item-padding-inline, var(--granite-spacing-8));padding-block:var(--granite-menu-item-padding-block, 0);width:100%;max-width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-menu-item-font-size, var(--granite-font-size-body-small));font-family:inherit}@media (hover: hover) and (pointer: fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover: none) and (pointer: coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;line-height:var(--granite-menu-item-title-height, calc(var(--granite-size-base-rem) * 1.5));width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-menu-item-title-font-size, var(--granite-font-size-micro));font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-program-focused,:host.cdk-keyboard-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-menu-item-font-size, var(--granite-font-size-body-small));color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{padding-inline-end:var(--granite-spacing-24)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:var(--granite-menu-item-touch-height, calc(var(--granite-size-base-rem) * 3));font-size:var(--granite-menu-item-font-size, var(--granite-font-size-body-small));text-align:center;padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:var(--granite-menu-item-title-height, calc(var(--granite-size-base-rem) * 1.5));font-size:var(--granite-menu-item-title-font-size, var(--granite-font-size-micro))}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-menu-item-title{line-height:var(--granite-menu-item-touch-height, calc(var(--granite-size-base-rem) * 3));height:var(--granite-menu-item-touch-height, calc(var(--granite-size-base-rem) * 3));font-size:var(--granite-menu-touch-title-font-size, var(--granite-font-size-micro));color:var(--granite-menu-touch-title-color, var(--granite-color-text-weak))}@media (hover: none) and (pointer: coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}\n"] }]
|
|
868
868
|
}], ctorParameters: () => [], propDecorators: { role: [{
|
|
869
869
|
type: Input
|
|
870
870
|
}] } });
|
|
@@ -1307,13 +1307,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
1307
1307
|
|
|
1308
1308
|
class GraniteMenuTouchCloseComponent {
|
|
1309
1309
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GraniteMenuTouchCloseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1310
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: GraniteMenuTouchCloseComponent, isStandalone: false, selector: "[graniteMenuTouchCloseItem]", host: { properties: { "class.granite-device-output-touch": "true" } }, exportAs: ["graniteMenuTouchCloseItem"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block;position:relative;line-height:
|
|
1310
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: GraniteMenuTouchCloseComponent, isStandalone: false, selector: "[graniteMenuTouchCloseItem]", host: { properties: { "class.granite-device-output-touch": "true" } }, exportAs: ["graniteMenuTouchCloseItem"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block;position:relative;line-height:var(--granite-menu-item-height, calc(var(--granite-size-base-rem) * 2));padding-inline:var(--granite-menu-item-padding-inline, var(--granite-spacing-8));padding-block:var(--granite-menu-item-padding-block, 0);width:100%;max-width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-menu-item-font-size, var(--granite-font-size-body-small));font-family:inherit}@media (hover: hover) and (pointer: fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover: none) and (pointer: coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;line-height:var(--granite-menu-item-title-height, calc(var(--granite-size-base-rem) * 1.5));width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-menu-item-title-font-size, var(--granite-font-size-micro));font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-program-focused,:host.cdk-keyboard-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-menu-item-font-size, var(--granite-font-size-body-small));color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{padding-inline-end:var(--granite-spacing-24)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:var(--granite-menu-item-touch-height, calc(var(--granite-size-base-rem) * 3));font-size:var(--granite-menu-item-font-size, var(--granite-font-size-body-small));text-align:center;padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:var(--granite-menu-item-title-height, calc(var(--granite-size-base-rem) * 1.5));font-size:var(--granite-menu-item-title-font-size, var(--granite-font-size-micro))}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-menu-item-title{line-height:var(--granite-menu-item-touch-height, calc(var(--granite-size-base-rem) * 3));height:var(--granite-menu-item-touch-height, calc(var(--granite-size-base-rem) * 3));font-size:var(--granite-menu-touch-title-font-size, var(--granite-font-size-micro));color:var(--granite-menu-touch-title-color, var(--granite-color-text-weak))}@media (hover: none) and (pointer: coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}\n"] }); }
|
|
1311
1311
|
}
|
|
1312
1312
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GraniteMenuTouchCloseComponent, decorators: [{
|
|
1313
1313
|
type: Component,
|
|
1314
1314
|
args: [{ selector: '[graniteMenuTouchCloseItem]', standalone: false, template: '<ng-content></ng-content>', exportAs: 'graniteMenuTouchCloseItem', host: {
|
|
1315
1315
|
'[class.granite-device-output-touch]': 'true',
|
|
1316
|
-
}, styles: [":host{display:block;position:relative;line-height:
|
|
1316
|
+
}, styles: [":host{display:block;position:relative;line-height:var(--granite-menu-item-height, calc(var(--granite-size-base-rem) * 2));padding-inline:var(--granite-menu-item-padding-inline, var(--granite-spacing-8));padding-block:var(--granite-menu-item-padding-block, 0);width:100%;max-width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-menu-item-font-size, var(--granite-font-size-body-small));font-family:inherit}@media (hover: hover) and (pointer: fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover: none) and (pointer: coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;line-height:var(--granite-menu-item-title-height, calc(var(--granite-size-base-rem) * 1.5));width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-menu-item-title-font-size, var(--granite-font-size-micro));font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-program-focused,:host.cdk-keyboard-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-menu-item-font-size, var(--granite-font-size-body-small));color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{padding-inline-end:var(--granite-spacing-24)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:var(--granite-menu-item-touch-height, calc(var(--granite-size-base-rem) * 3));font-size:var(--granite-menu-item-font-size, var(--granite-font-size-body-small));text-align:center;padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:var(--granite-menu-item-title-height, calc(var(--granite-size-base-rem) * 1.5));font-size:var(--granite-menu-item-title-font-size, var(--granite-font-size-micro))}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-menu-item-title{line-height:var(--granite-menu-item-touch-height, calc(var(--granite-size-base-rem) * 3));height:var(--granite-menu-item-touch-height, calc(var(--granite-size-base-rem) * 3));font-size:var(--granite-menu-touch-title-font-size, var(--granite-font-size-micro));color:var(--granite-menu-touch-title-color, var(--granite-color-text-weak))}@media (hover: none) and (pointer: coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}\n"] }]
|
|
1317
1317
|
}] });
|
|
1318
1318
|
|
|
1319
1319
|
class GraniteMenuTouchTitleItemComponent {
|
|
@@ -1341,7 +1341,7 @@ class GraniteMenuTouchTitleItemComponent {
|
|
|
1341
1341
|
></granite-icon>
|
|
1342
1342
|
</ng-container>
|
|
1343
1343
|
<ng-content></ng-content>
|
|
1344
|
-
`, isInline: true, styles: [":host{display:block;position:relative;line-height:
|
|
1344
|
+
`, isInline: true, styles: [":host{display:block;position:relative;line-height:var(--granite-menu-item-height, calc(var(--granite-size-base-rem) * 2));padding-inline:var(--granite-menu-item-padding-inline, var(--granite-spacing-8));padding-block:var(--granite-menu-item-padding-block, 0);width:100%;max-width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-menu-item-font-size, var(--granite-font-size-body-small));font-family:inherit}@media (hover: hover) and (pointer: fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover: none) and (pointer: coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;line-height:var(--granite-menu-item-title-height, calc(var(--granite-size-base-rem) * 1.5));width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-menu-item-title-font-size, var(--granite-font-size-micro));font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-program-focused,:host.cdk-keyboard-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-menu-item-font-size, var(--granite-font-size-body-small));color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{padding-inline-end:var(--granite-spacing-24)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:var(--granite-menu-item-touch-height, calc(var(--granite-size-base-rem) * 3));font-size:var(--granite-menu-item-font-size, var(--granite-font-size-body-small));text-align:center;padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:var(--granite-menu-item-title-height, calc(var(--granite-size-base-rem) * 1.5));font-size:var(--granite-menu-item-title-font-size, var(--granite-font-size-micro))}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-menu-item-title{line-height:var(--granite-menu-item-touch-height, calc(var(--granite-size-base-rem) * 3));height:var(--granite-menu-item-touch-height, calc(var(--granite-size-base-rem) * 3));font-size:var(--granite-menu-touch-title-font-size, var(--granite-font-size-micro));color:var(--granite-menu-touch-title-color, var(--granite-color-text-weak))}@media (hover: none) and (pointer: coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }] }); }
|
|
1345
1345
|
}
|
|
1346
1346
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GraniteMenuTouchTitleItemComponent, decorators: [{
|
|
1347
1347
|
type: Component,
|
|
@@ -1361,14 +1361,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
1361
1361
|
'[class.granite-menu-item-title]': 'true',
|
|
1362
1362
|
'[class.granite-menu-item-back-trigger]': '_triggersBack',
|
|
1363
1363
|
'[class.granite-device-output-touch]': 'true',
|
|
1364
|
-
}, styles: [":host{display:block;position:relative;line-height:
|
|
1364
|
+
}, styles: [":host{display:block;position:relative;line-height:var(--granite-menu-item-height, calc(var(--granite-size-base-rem) * 2));padding-inline:var(--granite-menu-item-padding-inline, var(--granite-spacing-8));padding-block:var(--granite-menu-item-padding-block, 0);width:100%;max-width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-menu-item-font-size, var(--granite-font-size-body-small));font-family:inherit}@media (hover: hover) and (pointer: fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover: none) and (pointer: coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;line-height:var(--granite-menu-item-title-height, calc(var(--granite-size-base-rem) * 1.5));width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-menu-item-title-font-size, var(--granite-font-size-micro));font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-program-focused,:host.cdk-keyboard-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-menu-item-font-size, var(--granite-font-size-body-small));color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{padding-inline-end:var(--granite-spacing-24)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:var(--granite-menu-item-touch-height, calc(var(--granite-size-base-rem) * 3));font-size:var(--granite-menu-item-font-size, var(--granite-font-size-body-small));text-align:center;padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:var(--granite-menu-item-title-height, calc(var(--granite-size-base-rem) * 1.5));font-size:var(--granite-menu-item-title-font-size, var(--granite-font-size-micro))}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-menu-item-title{line-height:var(--granite-menu-item-touch-height, calc(var(--granite-size-base-rem) * 3));height:var(--granite-menu-item-touch-height, calc(var(--granite-size-base-rem) * 3));font-size:var(--granite-menu-touch-title-font-size, var(--granite-font-size-micro));color:var(--granite-menu-touch-title-color, var(--granite-color-text-weak))}@media (hover: none) and (pointer: coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}\n"] }]
|
|
1365
1365
|
}], ctorParameters: () => [] });
|
|
1366
1366
|
|
|
1367
1367
|
class GraniteMenuComponent extends _MenuBaseComponent {
|
|
1368
1368
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GraniteMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1369
1369
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: GraniteMenuComponent, isStandalone: false, selector: "granite-menu", providers: [
|
|
1370
1370
|
{ provide: GRANITE_MENU_PANEL, useExisting: GraniteMenuComponent },
|
|
1371
|
-
], exportAs: ["graniteMenu"], usesInheritance: true, ngImport: i0, template: "<!--\n Using separate template part for desktop and touch output, because of\n animation triggers and slightly different content.\n-->\n<ng-template>\n <!-- Desktop -->\n <ng-container *ngIf=\"_clientOutput.device === 'desktop'\">\n <div\n #menu\n class=\"granite-menu\"\n [class.is-menu-empty]=\"_isMenuEmpty$ | async\"\n tabindex=\"-1\"\n [id]=\"panelId\"\n [@transformMenuDesktop]=\"_transformMenu | async\"\n (@transformMenuDesktop.start)=\"_onAnimationStart($event)\"\n (@transformMenuDesktop.done)=\"_onAnimationDone($event)\"\n [style]=\"styles\"\n (click)=\"_handleClick($event)\"\n (keydown)=\"_handleKeydown($event)\"\n >\n <div class=\"granite-menu-content\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- Touch -->\n <ng-container *ngIf=\"_clientOutput?.device === 'touch'\">\n <div\n #menu\n class=\"granite-menu granite-device-output-touch\"\n tabindex=\"-1\"\n [id]=\"panelId\"\n [style]=\"touchStyles\"\n [@transformMenuTouch]=\"_transformMenu | async\"\n (@transformMenuTouch.start)=\"_onAnimationStart($event)\"\n (@transformMenuTouch.done)=\"_onAnimationDone($event)\"\n (click)=\"_handleClick($event)\"\n (keydown)=\"_handleKeydown($event)\"\n >\n <div class=\"granite-menu-content\">\n <div *ngIf=\"showTitle\" class=\"header-container\">\n <button\n [disabled]=\"!showBackButton\"\n graniteMenuTouchTitleItem\n (click)=\"_handleBackClick($event)\"\n >\n {{ title }}\n </button>\n </div>\n\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n\n <div class=\"footer-container\"></div>\n </div>\n </div>\n\n <!-- Close button -->\n <div class=\"close\" [@transformCloseButton]=\"_transformMenu | async\">\n <button\n *ngIf=\"showCloseButton\"\n graniteMenuTouchCloseItem\n (click)=\"_handleCloseClick($event)\"\n >\n {{ closeLabel }}\n </button>\n </div>\n </ng-container>\n\n <!--\n Content template shared between desktop and touch parts, as <ng-content>\n can't be used in two places in the same template\n -->\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n</ng-template>\n", styles: [".granite-menu:not(.granite-device-output-touch){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;box-shadow:var(--granite-shadow-l);min-width:7rem;overflow-x:hidden;overflow-y:hidden}.granite-menu:not(.granite-device-output-touch).ng-animating{pointer-events:none}.granite-menu:not(.granite-device-output-touch):not(.is-menu-empty){min-height:
|
|
1371
|
+
], exportAs: ["graniteMenu"], usesInheritance: true, ngImport: i0, template: "<!--\n Using separate template part for desktop and touch output, because of\n animation triggers and slightly different content.\n-->\n<ng-template>\n <!-- Desktop -->\n <ng-container *ngIf=\"_clientOutput.device === 'desktop'\">\n <div\n #menu\n class=\"granite-menu\"\n [class.is-menu-empty]=\"_isMenuEmpty$ | async\"\n tabindex=\"-1\"\n [id]=\"panelId\"\n [@transformMenuDesktop]=\"_transformMenu | async\"\n (@transformMenuDesktop.start)=\"_onAnimationStart($event)\"\n (@transformMenuDesktop.done)=\"_onAnimationDone($event)\"\n [style]=\"styles\"\n (click)=\"_handleClick($event)\"\n (keydown)=\"_handleKeydown($event)\"\n >\n <div class=\"granite-menu-content\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- Touch -->\n <ng-container *ngIf=\"_clientOutput?.device === 'touch'\">\n <div\n #menu\n class=\"granite-menu granite-device-output-touch\"\n tabindex=\"-1\"\n [id]=\"panelId\"\n [style]=\"touchStyles\"\n [@transformMenuTouch]=\"_transformMenu | async\"\n (@transformMenuTouch.start)=\"_onAnimationStart($event)\"\n (@transformMenuTouch.done)=\"_onAnimationDone($event)\"\n (click)=\"_handleClick($event)\"\n (keydown)=\"_handleKeydown($event)\"\n >\n <div class=\"granite-menu-content\">\n <div *ngIf=\"showTitle\" class=\"header-container\">\n <button\n [disabled]=\"!showBackButton\"\n graniteMenuTouchTitleItem\n (click)=\"_handleBackClick($event)\"\n >\n {{ title }}\n </button>\n </div>\n\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n\n <div class=\"footer-container\"></div>\n </div>\n </div>\n\n <!-- Close button -->\n <div class=\"close\" [@transformCloseButton]=\"_transformMenu | async\">\n <button\n *ngIf=\"showCloseButton\"\n graniteMenuTouchCloseItem\n (click)=\"_handleCloseClick($event)\"\n >\n {{ closeLabel }}\n </button>\n </div>\n </ng-container>\n\n <!--\n Content template shared between desktop and touch parts, as <ng-content>\n can't be used in two places in the same template\n -->\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n</ng-template>\n", styles: [".granite-menu:not(.granite-device-output-touch){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;box-shadow:var(--granite-shadow-l);min-width:7rem;overflow-x:hidden;overflow-y:hidden}.granite-menu:not(.granite-device-output-touch).ng-animating{pointer-events:none}.granite-menu:not(.granite-device-output-touch):not(.is-menu-empty){min-height:var(--granite-menu-item-height, calc(var(--granite-size-base-rem) * 2))}.granite-menu:not(.granite-device-output-touch):hover{overflow-y:auto}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar{width:var(--granite-spacing-4)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-thumb{background-color:var(--granite-color-border-hard);border-radius:calc(var(--granite-spacing-16) * .125)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-track{background-color:var(--granite-color-background-hover)}.granite-menu.granite-device-output-touch{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;box-shadow:var(--granite-shadow-l);border-radius:.25rem}.granite-menu.granite-device-output-touch.ng-animating{pointer-events:none}.granite-menu.granite-device-output-touch:not(.is-menu-empty){min-height:var(--granite-menu-item-touch-height, calc(var(--granite-size-base-rem) * 3))}.granite-menu.granite-device-output-touch:not(.close){margin:var(--granite-spacing-4)}.granite-menu.granite-device-output-touch.close{margin-inline-start:var(--granite-spacing-4);margin-inline-end:var(--granite-spacing-4);margin-block-end:var(--granite-spacing-4)}.granite-menu.granite-device-output-touch .header-container{position:sticky;top:0;background-color:var(--granite-color-background-variant);z-index:1}.granite-menu.granite-device-output-touch .footer-container{position:sticky;bottom:0;height:0}.close:not(:empty){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;box-shadow:var(--granite-shadow-l);border-radius:.25rem}.close:not(:empty).ng-animating{pointer-events:none}.close:not(:empty):not(.is-menu-empty){min-height:var(--granite-menu-item-touch-height, calc(var(--granite-size-base-rem) * 3))}.close:not(:empty):not(.close){margin:var(--granite-spacing-4)}.close:not(:empty).close{margin-inline-start:var(--granite-spacing-4);margin-inline-end:var(--granite-spacing-4);margin-block-end:var(--granite-spacing-4)}.granite-menu-custom-template{display:block}.granite-menu-custom-template:not(button){cursor:default}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GraniteMenuTouchCloseComponent, selector: "[graniteMenuTouchCloseItem]", exportAs: ["graniteMenuTouchCloseItem"] }, { kind: "component", type: GraniteMenuTouchTitleItemComponent, selector: "[graniteMenuTouchTitleItem]", exportAs: ["graniteMenuTouchTitleItem"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], animations: [
|
|
1372
1372
|
graniteMenuDesktopAnimations.transformMenuDesktop,
|
|
1373
1373
|
graniteMenuTouchAnimations.transformMenuTouch,
|
|
1374
1374
|
graniteMenuTouchAnimations.transformCloseButton,
|
|
@@ -1382,7 +1382,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
1382
1382
|
graniteMenuTouchAnimations.transformCloseButton,
|
|
1383
1383
|
], providers: [
|
|
1384
1384
|
{ provide: GRANITE_MENU_PANEL, useExisting: GraniteMenuComponent },
|
|
1385
|
-
], template: "<!--\n Using separate template part for desktop and touch output, because of\n animation triggers and slightly different content.\n-->\n<ng-template>\n <!-- Desktop -->\n <ng-container *ngIf=\"_clientOutput.device === 'desktop'\">\n <div\n #menu\n class=\"granite-menu\"\n [class.is-menu-empty]=\"_isMenuEmpty$ | async\"\n tabindex=\"-1\"\n [id]=\"panelId\"\n [@transformMenuDesktop]=\"_transformMenu | async\"\n (@transformMenuDesktop.start)=\"_onAnimationStart($event)\"\n (@transformMenuDesktop.done)=\"_onAnimationDone($event)\"\n [style]=\"styles\"\n (click)=\"_handleClick($event)\"\n (keydown)=\"_handleKeydown($event)\"\n >\n <div class=\"granite-menu-content\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- Touch -->\n <ng-container *ngIf=\"_clientOutput?.device === 'touch'\">\n <div\n #menu\n class=\"granite-menu granite-device-output-touch\"\n tabindex=\"-1\"\n [id]=\"panelId\"\n [style]=\"touchStyles\"\n [@transformMenuTouch]=\"_transformMenu | async\"\n (@transformMenuTouch.start)=\"_onAnimationStart($event)\"\n (@transformMenuTouch.done)=\"_onAnimationDone($event)\"\n (click)=\"_handleClick($event)\"\n (keydown)=\"_handleKeydown($event)\"\n >\n <div class=\"granite-menu-content\">\n <div *ngIf=\"showTitle\" class=\"header-container\">\n <button\n [disabled]=\"!showBackButton\"\n graniteMenuTouchTitleItem\n (click)=\"_handleBackClick($event)\"\n >\n {{ title }}\n </button>\n </div>\n\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n\n <div class=\"footer-container\"></div>\n </div>\n </div>\n\n <!-- Close button -->\n <div class=\"close\" [@transformCloseButton]=\"_transformMenu | async\">\n <button\n *ngIf=\"showCloseButton\"\n graniteMenuTouchCloseItem\n (click)=\"_handleCloseClick($event)\"\n >\n {{ closeLabel }}\n </button>\n </div>\n </ng-container>\n\n <!--\n Content template shared between desktop and touch parts, as <ng-content>\n can't be used in two places in the same template\n -->\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n</ng-template>\n", styles: [".granite-menu:not(.granite-device-output-touch){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;box-shadow:var(--granite-shadow-l);min-width:7rem;overflow-x:hidden;overflow-y:hidden}.granite-menu:not(.granite-device-output-touch).ng-animating{pointer-events:none}.granite-menu:not(.granite-device-output-touch):not(.is-menu-empty){min-height:
|
|
1385
|
+
], template: "<!--\n Using separate template part for desktop and touch output, because of\n animation triggers and slightly different content.\n-->\n<ng-template>\n <!-- Desktop -->\n <ng-container *ngIf=\"_clientOutput.device === 'desktop'\">\n <div\n #menu\n class=\"granite-menu\"\n [class.is-menu-empty]=\"_isMenuEmpty$ | async\"\n tabindex=\"-1\"\n [id]=\"panelId\"\n [@transformMenuDesktop]=\"_transformMenu | async\"\n (@transformMenuDesktop.start)=\"_onAnimationStart($event)\"\n (@transformMenuDesktop.done)=\"_onAnimationDone($event)\"\n [style]=\"styles\"\n (click)=\"_handleClick($event)\"\n (keydown)=\"_handleKeydown($event)\"\n >\n <div class=\"granite-menu-content\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- Touch -->\n <ng-container *ngIf=\"_clientOutput?.device === 'touch'\">\n <div\n #menu\n class=\"granite-menu granite-device-output-touch\"\n tabindex=\"-1\"\n [id]=\"panelId\"\n [style]=\"touchStyles\"\n [@transformMenuTouch]=\"_transformMenu | async\"\n (@transformMenuTouch.start)=\"_onAnimationStart($event)\"\n (@transformMenuTouch.done)=\"_onAnimationDone($event)\"\n (click)=\"_handleClick($event)\"\n (keydown)=\"_handleKeydown($event)\"\n >\n <div class=\"granite-menu-content\">\n <div *ngIf=\"showTitle\" class=\"header-container\">\n <button\n [disabled]=\"!showBackButton\"\n graniteMenuTouchTitleItem\n (click)=\"_handleBackClick($event)\"\n >\n {{ title }}\n </button>\n </div>\n\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n\n <div class=\"footer-container\"></div>\n </div>\n </div>\n\n <!-- Close button -->\n <div class=\"close\" [@transformCloseButton]=\"_transformMenu | async\">\n <button\n *ngIf=\"showCloseButton\"\n graniteMenuTouchCloseItem\n (click)=\"_handleCloseClick($event)\"\n >\n {{ closeLabel }}\n </button>\n </div>\n </ng-container>\n\n <!--\n Content template shared between desktop and touch parts, as <ng-content>\n can't be used in two places in the same template\n -->\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n</ng-template>\n", styles: [".granite-menu:not(.granite-device-output-touch){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;box-shadow:var(--granite-shadow-l);min-width:7rem;overflow-x:hidden;overflow-y:hidden}.granite-menu:not(.granite-device-output-touch).ng-animating{pointer-events:none}.granite-menu:not(.granite-device-output-touch):not(.is-menu-empty){min-height:var(--granite-menu-item-height, calc(var(--granite-size-base-rem) * 2))}.granite-menu:not(.granite-device-output-touch):hover{overflow-y:auto}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar{width:var(--granite-spacing-4)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-thumb{background-color:var(--granite-color-border-hard);border-radius:calc(var(--granite-spacing-16) * .125)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-track{background-color:var(--granite-color-background-hover)}.granite-menu.granite-device-output-touch{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;box-shadow:var(--granite-shadow-l);border-radius:.25rem}.granite-menu.granite-device-output-touch.ng-animating{pointer-events:none}.granite-menu.granite-device-output-touch:not(.is-menu-empty){min-height:var(--granite-menu-item-touch-height, calc(var(--granite-size-base-rem) * 3))}.granite-menu.granite-device-output-touch:not(.close){margin:var(--granite-spacing-4)}.granite-menu.granite-device-output-touch.close{margin-inline-start:var(--granite-spacing-4);margin-inline-end:var(--granite-spacing-4);margin-block-end:var(--granite-spacing-4)}.granite-menu.granite-device-output-touch .header-container{position:sticky;top:0;background-color:var(--granite-color-background-variant);z-index:1}.granite-menu.granite-device-output-touch .footer-container{position:sticky;bottom:0;height:0}.close:not(:empty){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;box-shadow:var(--granite-shadow-l);border-radius:.25rem}.close:not(:empty).ng-animating{pointer-events:none}.close:not(:empty):not(.is-menu-empty){min-height:var(--granite-menu-item-touch-height, calc(var(--granite-size-base-rem) * 3))}.close:not(:empty):not(.close){margin:var(--granite-spacing-4)}.close:not(:empty).close{margin-inline-start:var(--granite-spacing-4);margin-inline-end:var(--granite-spacing-4);margin-block-end:var(--granite-spacing-4)}.granite-menu-custom-template{display:block}.granite-menu-custom-template:not(button){cursor:default}\n"] }]
|
|
1386
1386
|
}] });
|
|
1387
1387
|
|
|
1388
1388
|
/** Options for binding a passive event listener. */
|
|
@@ -2809,7 +2809,7 @@ class GraniteButtonComponent extends ButtonComponentMixin {
|
|
|
2809
2809
|
return this._elementRef.nativeElement;
|
|
2810
2810
|
}
|
|
2811
2811
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GraniteButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2812
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: GraniteButtonComponent, isStandalone: false, selector: "button[graniteButton],\n button[granitePrimaryButton],\n button[graniteFlatButton],\n button[graniteToolbarButton]\n ", inputs: { disabled: "disabled", toggled: "toggled" }, host: { properties: { "class.granite-button-disabled": "disabled", "class.granite-button-toggled": "_buttonToggled", "attr.disabled": "disabled || null" }, classAttribute: "granite-button-base" }, exportAs: ["graniteButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-8) var(--granite-spacing-8);position:relative;line-height:var(--granite-font-size-body);display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;justify-content:center;align-items:center;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){outline-offset:-2px;outline-width:.125rem;outline-color:var(--granite-color-focus);outline-style:solid}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled,button:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none;outline:none}}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:none;outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-toolbar-button{background-color:var(--granite-color-background);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-toolbar-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-toolbar-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host{outline:none;text-decoration:none}a:host:hover{text-decoration:underline}a:host.granite-button{background-color:var(--granite-color-background);color:var(--granite-color-text-link);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled,a:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;pointer-events:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2812
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: GraniteButtonComponent, isStandalone: false, selector: "button[graniteButton],\n button[granitePrimaryButton],\n button[graniteFlatButton],\n button[graniteToolbarButton]\n ", inputs: { disabled: "disabled", toggled: "toggled" }, host: { properties: { "class.granite-button-disabled": "disabled", "class.granite-button-toggled": "_buttonToggled", "attr.disabled": "disabled || null" }, classAttribute: "granite-button-base" }, exportAs: ["graniteButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-button-font-size, var(--granite-font-size-body-small));font-weight:var(--granite-button-font-weight, var(--granite-font-weight-regular));padding-inline:var(--granite-button-padding-inline, var(--granite-spacing-8));padding-block:var(--granite-button-padding-block, var(--granite-spacing-8));position:relative;line-height:var(--granite-button-line-height, var(--granite-font-size-body));display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;justify-content:center;align-items:center;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){outline-offset:-2px;outline-width:.125rem;outline-color:var(--granite-color-focus);outline-style:solid}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled,button:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none;outline:none}}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:none;outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-toolbar-button{background-color:var(--granite-color-background);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-toolbar-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-toolbar-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host{outline:none;text-decoration:none}a:host:hover{text-decoration:underline}a:host.granite-button{background-color:var(--granite-color-background);color:var(--granite-color-text-link);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled,a:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;pointer-events:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2813
2813
|
}
|
|
2814
2814
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GraniteButtonComponent, decorators: [{
|
|
2815
2815
|
type: Component,
|
|
@@ -2822,7 +2822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
2822
2822
|
'[class.granite-button-disabled]': 'disabled',
|
|
2823
2823
|
'[class.granite-button-toggled]': '_buttonToggled',
|
|
2824
2824
|
'[attr.disabled]': 'disabled || null',
|
|
2825
|
-
}, exportAs: 'graniteButton', template: '<ng-content></ng-content>', standalone: false, inputs: ['disabled'], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-8) var(--granite-spacing-8);position:relative;line-height:var(--granite-font-size-body);display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;justify-content:center;align-items:center;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){outline-offset:-2px;outline-width:.125rem;outline-color:var(--granite-color-focus);outline-style:solid}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled,button:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none;outline:none}}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:none;outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-toolbar-button{background-color:var(--granite-color-background);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-toolbar-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-toolbar-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host{outline:none;text-decoration:none}a:host:hover{text-decoration:underline}a:host.granite-button{background-color:var(--granite-color-background);color:var(--granite-color-text-link);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled,a:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;pointer-events:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}\n"] }]
|
|
2825
|
+
}, exportAs: 'graniteButton', template: '<ng-content></ng-content>', standalone: false, inputs: ['disabled'], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-button-font-size, var(--granite-font-size-body-small));font-weight:var(--granite-button-font-weight, var(--granite-font-weight-regular));padding-inline:var(--granite-button-padding-inline, var(--granite-spacing-8));padding-block:var(--granite-button-padding-block, var(--granite-spacing-8));position:relative;line-height:var(--granite-button-line-height, var(--granite-font-size-body));display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;justify-content:center;align-items:center;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){outline-offset:-2px;outline-width:.125rem;outline-color:var(--granite-color-focus);outline-style:solid}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled,button:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none;outline:none}}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:none;outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-toolbar-button{background-color:var(--granite-color-background);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-toolbar-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-toolbar-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host{outline:none;text-decoration:none}a:host:hover{text-decoration:underline}a:host.granite-button{background-color:var(--granite-color-background);color:var(--granite-color-text-link);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled,a:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;pointer-events:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}\n"] }]
|
|
2826
2826
|
}], ctorParameters: () => [], propDecorators: { toggled: [{
|
|
2827
2827
|
type: Input
|
|
2828
2828
|
}] } });
|
|
@@ -2836,7 +2836,7 @@ class GraniteAnchorComponent extends GraniteButtonComponent {
|
|
|
2836
2836
|
super.ngOnChanges(changes);
|
|
2837
2837
|
}
|
|
2838
2838
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GraniteAnchorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2839
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: GraniteAnchorComponent, isStandalone: false, selector: "a[graniteButton],\n a[graniteFlatButton]", inputs: { disabled: "disabled" }, host: { listeners: { "click": "_anchorClick($event)" }, properties: { "attr.tabindex": "disabled ? -1 : 0", "class.granite-button-disabled": "disabled" }, classAttribute: "granite-button-base" }, exportAs: ["graniteAnchor"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-8) var(--granite-spacing-8);position:relative;line-height:var(--granite-font-size-body);display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;justify-content:center;align-items:center;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){outline-offset:-2px;outline-width:.125rem;outline-color:var(--granite-color-focus);outline-style:solid}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled,button:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none;outline:none}}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:none;outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-toolbar-button{background-color:var(--granite-color-background);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-toolbar-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-toolbar-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host{outline:none;text-decoration:none}a:host:hover{text-decoration:underline}a:host.granite-button{background-color:var(--granite-color-background);color:var(--granite-color-text-link);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled,a:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;pointer-events:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2839
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: GraniteAnchorComponent, isStandalone: false, selector: "a[graniteButton],\n a[graniteFlatButton]", inputs: { disabled: "disabled" }, host: { listeners: { "click": "_anchorClick($event)" }, properties: { "attr.tabindex": "disabled ? -1 : 0", "class.granite-button-disabled": "disabled" }, classAttribute: "granite-button-base" }, exportAs: ["graniteAnchor"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-button-font-size, var(--granite-font-size-body-small));font-weight:var(--granite-button-font-weight, var(--granite-font-weight-regular));padding-inline:var(--granite-button-padding-inline, var(--granite-spacing-8));padding-block:var(--granite-button-padding-block, var(--granite-spacing-8));position:relative;line-height:var(--granite-button-line-height, var(--granite-font-size-body));display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;justify-content:center;align-items:center;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){outline-offset:-2px;outline-width:.125rem;outline-color:var(--granite-color-focus);outline-style:solid}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled,button:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none;outline:none}}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:none;outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-toolbar-button{background-color:var(--granite-color-background);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-toolbar-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-toolbar-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host{outline:none;text-decoration:none}a:host:hover{text-decoration:underline}a:host.granite-button{background-color:var(--granite-color-background);color:var(--granite-color-text-link);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled,a:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;pointer-events:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2840
2840
|
}
|
|
2841
2841
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GraniteAnchorComponent, decorators: [{
|
|
2842
2842
|
type: Component,
|
|
@@ -2845,7 +2845,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
2845
2845
|
class: 'granite-button-base',
|
|
2846
2846
|
'[attr.tabindex]': 'disabled ? -1 : 0',
|
|
2847
2847
|
'[class.granite-button-disabled]': 'disabled',
|
|
2848
|
-
}, exportAs: 'graniteAnchor', template: '<ng-content></ng-content>', standalone: false, inputs: ['disabled'], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-8) var(--granite-spacing-8);position:relative;line-height:var(--granite-font-size-body);display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;justify-content:center;align-items:center;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){outline-offset:-2px;outline-width:.125rem;outline-color:var(--granite-color-focus);outline-style:solid}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled,button:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none;outline:none}}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:none;outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-toolbar-button{background-color:var(--granite-color-background);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-toolbar-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-toolbar-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host{outline:none;text-decoration:none}a:host:hover{text-decoration:underline}a:host.granite-button{background-color:var(--granite-color-background);color:var(--granite-color-text-link);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled,a:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;pointer-events:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}\n"] }]
|
|
2848
|
+
}, exportAs: 'graniteAnchor', template: '<ng-content></ng-content>', standalone: false, inputs: ['disabled'], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-button-font-size, var(--granite-font-size-body-small));font-weight:var(--granite-button-font-weight, var(--granite-font-weight-regular));padding-inline:var(--granite-button-padding-inline, var(--granite-spacing-8));padding-block:var(--granite-button-padding-block, var(--granite-spacing-8));position:relative;line-height:var(--granite-button-line-height, var(--granite-font-size-body));display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;justify-content:center;align-items:center;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){outline-offset:-2px;outline-width:.125rem;outline-color:var(--granite-color-focus);outline-style:solid}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled,button:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none;outline:none}}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:none;outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-toolbar-button{background-color:var(--granite-color-background);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-toolbar-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-toolbar-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host{outline:none;text-decoration:none}a:host:hover{text-decoration:underline}a:host.granite-button{background-color:var(--granite-color-background);color:var(--granite-color-text-link);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled,a:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;pointer-events:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}\n"] }]
|
|
2849
2849
|
}], propDecorators: { _anchorClick: [{
|
|
2850
2850
|
type: HostListener,
|
|
2851
2851
|
args: ['click', ['$event']]
|