@angular/material
Version:
Angular Material
269 lines (265 loc) • 18.8 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, inject, ElementRef, NgZone, Renderer2, booleanAttribute, numberAttribute, Input, Directive, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
import { FocusMonitor } from '@angular/cdk/a11y';
import { _CdkPrivateStyleLoader } from '@angular/cdk/private';
import { MatRippleLoader } from './_ripple-loader-chunk.mjs';
import { _StructuralStylesLoader } from './_structural-styles-chunk.mjs';
import { _animationsDisabled } from './_animation-chunk.mjs';
const MAT_BUTTON_CONFIG = new InjectionToken('MAT_BUTTON_CONFIG');
function transformTabIndex(value) {
return value == null ? undefined : numberAttribute(value);
}
class MatButtonBase {
_elementRef = inject(ElementRef);
_ngZone = inject(NgZone);
_animationsDisabled = _animationsDisabled();
_config = inject(MAT_BUTTON_CONFIG, {
optional: true
});
_focusMonitor = inject(FocusMonitor);
_cleanupClick;
_renderer = inject(Renderer2);
_rippleLoader = inject(MatRippleLoader);
_isAnchor;
_isFab = false;
color;
get disableRipple() {
return this._disableRipple;
}
set disableRipple(value) {
this._disableRipple = value;
this._updateRippleDisabled();
}
_disableRipple = false;
get disabled() {
return this._disabled;
}
set disabled(value) {
this._disabled = value;
this._updateRippleDisabled();
}
_disabled = false;
ariaDisabled;
disabledInteractive;
tabIndex;
set _tabindex(value) {
this.tabIndex = value;
}
constructor() {
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
const element = this._elementRef.nativeElement;
this._isAnchor = element.tagName === 'A';
this.disabledInteractive = this._config?.disabledInteractive ?? false;
this.color = this._config?.color ?? null;
this._rippleLoader?.configureRipple(element, {
className: 'mat-mdc-button-ripple'
});
}
ngAfterViewInit() {
this._focusMonitor.monitor(this._elementRef, true);
if (this._isAnchor) {
this._setupAsAnchor();
}
}
ngOnDestroy() {
this._cleanupClick?.();
this._focusMonitor.stopMonitoring(this._elementRef);
this._rippleLoader?.destroyRipple(this._elementRef.nativeElement);
}
focus(origin = 'program', options) {
if (origin) {
this._focusMonitor.focusVia(this._elementRef.nativeElement, origin, options);
} else {
this._elementRef.nativeElement.focus(options);
}
}
_getAriaDisabled() {
if (this.ariaDisabled != null) {
return this.ariaDisabled;
}
if (this._isAnchor) {
return this.disabled || null;
}
return this.disabled && this.disabledInteractive ? true : null;
}
_getDisabledAttribute() {
return this.disabledInteractive || !this.disabled ? null : true;
}
_updateRippleDisabled() {
this._rippleLoader?.setDisabled(this._elementRef.nativeElement, this.disableRipple || this.disabled);
}
_getTabIndex() {
if (this._isAnchor) {
return this.disabled && !this.disabledInteractive ? -1 : this.tabIndex;
}
return this.tabIndex;
}
_setupAsAnchor() {
this._cleanupClick = this._ngZone.runOutsideAngular(() => this._renderer.listen(this._elementRef.nativeElement, 'click', event => {
if (this.disabled) {
event.preventDefault();
event.stopImmediatePropagation();
}
}));
}
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatButtonBase,
deps: [],
target: i0.ɵɵFactoryTarget.Directive
});
static ɵdir = i0.ɵɵngDeclareDirective({
minVersion: "16.1.0",
version: "22.0.0-next.5",
type: MatButtonBase,
isStandalone: true,
inputs: {
color: "color",
disableRipple: ["disableRipple", "disableRipple", booleanAttribute],
disabled: ["disabled", "disabled", booleanAttribute],
ariaDisabled: ["aria-disabled", "ariaDisabled", booleanAttribute],
disabledInteractive: ["disabledInteractive", "disabledInteractive", booleanAttribute],
tabIndex: ["tabIndex", "tabIndex", transformTabIndex],
_tabindex: ["tabindex", "_tabindex", transformTabIndex]
},
host: {
properties: {
"class": "color ? \"mat-\" + color : \"\"",
"attr.disabled": "_getDisabledAttribute()",
"attr.aria-disabled": "_getAriaDisabled()",
"attr.tabindex": "_getTabIndex()",
"class.mat-mdc-button-disabled": "disabled",
"class.mat-mdc-button-disabled-interactive": "disabledInteractive",
"class.mat-unthemed": "!color",
"class._mat-animation-noopable": "_animationsDisabled"
},
classAttribute: "mat-mdc-button-base"
},
ngImport: i0
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatButtonBase,
decorators: [{
type: Directive,
args: [{
host: {
'class': 'mat-mdc-button-base',
'[class]': 'color ? "mat-" + color : ""',
'[attr.disabled]': '_getDisabledAttribute()',
'[attr.aria-disabled]': '_getAriaDisabled()',
'[attr.tabindex]': '_getTabIndex()',
'[class.mat-mdc-button-disabled]': 'disabled',
'[class.mat-mdc-button-disabled-interactive]': 'disabledInteractive',
'[class.mat-unthemed]': '!color',
'[class._mat-animation-noopable]': '_animationsDisabled'
}
}]
}],
ctorParameters: () => [],
propDecorators: {
color: [{
type: Input
}],
disableRipple: [{
type: Input,
args: [{
transform: booleanAttribute
}]
}],
disabled: [{
type: Input,
args: [{
transform: booleanAttribute
}]
}],
ariaDisabled: [{
type: Input,
args: [{
transform: booleanAttribute,
alias: 'aria-disabled'
}]
}],
disabledInteractive: [{
type: Input,
args: [{
transform: booleanAttribute
}]
}],
tabIndex: [{
type: Input,
args: [{
transform: transformTabIndex
}]
}],
_tabindex: [{
type: Input,
args: [{
alias: 'tabindex',
transform: transformTabIndex
}]
}]
}
});
class MatIconButton extends MatButtonBase {
constructor() {
super();
this._rippleLoader.configureRipple(this._elementRef.nativeElement, {
centered: true
});
}
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatIconButton,
deps: [],
target: i0.ɵɵFactoryTarget.Component
});
static ɵcmp = i0.ɵɵngDeclareComponent({
minVersion: "14.0.0",
version: "22.0.0-next.5",
type: MatIconButton,
isStandalone: true,
selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]",
host: {
classAttribute: "mdc-icon-button mat-mdc-icon-button"
},
exportAs: ["matButton", "matAnchor"],
usesInheritance: true,
ngImport: i0,
template: "<span class=\"mat-mdc-button-persistent-ripple mdc-icon-button__ripple\"></span>\n\n<ng-content></ng-content>\n\n<!--\n The indicator can't be directly on the button, because MDC uses ::before for high contrast\n indication and it can't be on the ripple, because it has a border radius and overflow: hidden.\n-->\n<span class=\"mat-focus-indicator\"></span>\n\n<span class=\"mat-mdc-button-touch-target\"></span>\n",
styles: [".mat-mdc-icon-button {\n -webkit-user-select: none;\n user-select: none;\n display: inline-block;\n position: relative;\n box-sizing: border-box;\n border: none;\n outline: none;\n background-color: transparent;\n fill: currentColor;\n text-decoration: none;\n cursor: pointer;\n z-index: 0;\n overflow: visible;\n border-radius: var(--mat-icon-button-container-shape, var(--mat-sys-corner-full, 50%));\n flex-shrink: 0;\n text-align: center;\n width: var(--mat-icon-button-state-layer-size, 40px);\n height: var(--mat-icon-button-state-layer-size, 40px);\n padding: calc(calc(var(--mat-icon-button-state-layer-size, 40px) - var(--mat-icon-button-icon-size, 24px)) / 2);\n font-size: var(--mat-icon-button-icon-size, 24px);\n color: var(--mat-icon-button-icon-color, var(--mat-sys-on-surface-variant));\n -webkit-tap-highlight-color: transparent;\n}\n.mat-mdc-icon-button .mat-mdc-button-ripple,\n.mat-mdc-icon-button .mat-mdc-button-persistent-ripple,\n.mat-mdc-icon-button .mat-mdc-button-persistent-ripple::before {\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n pointer-events: none;\n border-radius: inherit;\n}\n.mat-mdc-icon-button .mat-mdc-button-ripple {\n overflow: hidden;\n}\n.mat-mdc-icon-button .mat-mdc-button-persistent-ripple::before {\n content: \"\";\n opacity: 0;\n}\n.mat-mdc-icon-button .mdc-button__label,\n.mat-mdc-icon-button .mat-icon {\n z-index: 1;\n position: relative;\n}\n.mat-mdc-icon-button .mat-focus-indicator {\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n border-radius: inherit;\n}\n.mat-mdc-icon-button:focus-visible > .mat-focus-indicator::before {\n content: \"\";\n border-radius: inherit;\n}\n.mat-mdc-icon-button .mat-ripple-element {\n background-color: var(--mat-icon-button-ripple-color, color-mix(in srgb, var(--mat-sys-on-surface-variant) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent));\n}\n.mat-mdc-icon-button .mat-mdc-button-persistent-ripple::before {\n background-color: var(--mat-icon-button-state-layer-color, var(--mat-sys-on-surface-variant));\n}\n.mat-mdc-icon-button.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before {\n background-color: var(--mat-icon-button-disabled-state-layer-color, var(--mat-sys-on-surface-variant));\n}\n.mat-mdc-icon-button:hover > .mat-mdc-button-persistent-ripple::before {\n opacity: var(--mat-icon-button-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity));\n}\n.mat-mdc-icon-button.cdk-program-focused > .mat-mdc-button-persistent-ripple::before, .mat-mdc-icon-button.cdk-keyboard-focused > .mat-mdc-button-persistent-ripple::before, .mat-mdc-icon-button.mat-mdc-button-disabled-interactive:focus > .mat-mdc-button-persistent-ripple::before {\n opacity: var(--mat-icon-button-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity));\n}\n.mat-mdc-icon-button:active > .mat-mdc-button-persistent-ripple::before {\n opacity: var(--mat-icon-button-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity));\n}\n.mat-mdc-icon-button .mat-mdc-button-touch-target {\n position: absolute;\n top: 50%;\n height: var(--mat-icon-button-touch-target-size, 48px);\n display: var(--mat-icon-button-touch-target-display, block);\n left: 50%;\n width: var(--mat-icon-button-touch-target-size, 48px);\n transform: translate(-50%, -50%);\n}\n.mat-mdc-icon-button._mat-animation-noopable {\n transition: none !important;\n animation: none !important;\n}\n.mat-mdc-icon-button[disabled], .mat-mdc-icon-button.mat-mdc-button-disabled {\n cursor: default;\n pointer-events: none;\n color: var(--mat-icon-button-disabled-icon-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));\n}\n.mat-mdc-icon-button.mat-mdc-button-disabled-interactive {\n pointer-events: auto;\n}\n.mat-mdc-icon-button img,\n.mat-mdc-icon-button svg {\n width: var(--mat-icon-button-icon-size, 24px);\n height: var(--mat-icon-button-icon-size, 24px);\n vertical-align: baseline;\n}\n.mat-mdc-icon-button .mat-mdc-button-persistent-ripple {\n border-radius: var(--mat-icon-button-container-shape, var(--mat-sys-corner-full, 50%));\n}\n.mat-mdc-icon-button[hidden] {\n display: none;\n}\n.mat-mdc-icon-button.mat-unthemed:not(.mdc-ripple-upgraded):focus::before, .mat-mdc-icon-button.mat-primary:not(.mdc-ripple-upgraded):focus::before, .mat-mdc-icon-button.mat-accent:not(.mdc-ripple-upgraded):focus::before, .mat-mdc-icon-button.mat-warn:not(.mdc-ripple-upgraded):focus::before {\n background: transparent;\n opacity: 1;\n}\n", "@media (forced-colors: active) {\n .mat-mdc-button:not(.mdc-button--outlined),\n .mat-mdc-unelevated-button:not(.mdc-button--outlined),\n .mat-mdc-raised-button:not(.mdc-button--outlined),\n .mat-mdc-outlined-button:not(.mdc-button--outlined),\n .mat-mdc-button-base.mat-tonal-button,\n .mat-mdc-icon-button.mat-mdc-icon-button,\n .mat-mdc-outlined-button .mdc-button__ripple {\n outline: solid 1px;\n }\n}\n"],
changeDetection: i0.ChangeDetectionStrategy.OnPush,
encapsulation: i0.ViewEncapsulation.None
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatIconButton,
decorators: [{
type: Component,
args: [{
selector: `button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]`,
host: {
'class': 'mdc-icon-button mat-mdc-icon-button'
},
exportAs: 'matButton, matAnchor',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
template: "<span class=\"mat-mdc-button-persistent-ripple mdc-icon-button__ripple\"></span>\n\n<ng-content></ng-content>\n\n<!--\n The indicator can't be directly on the button, because MDC uses ::before for high contrast\n indication and it can't be on the ripple, because it has a border radius and overflow: hidden.\n-->\n<span class=\"mat-focus-indicator\"></span>\n\n<span class=\"mat-mdc-button-touch-target\"></span>\n",
styles: [".mat-mdc-icon-button {\n -webkit-user-select: none;\n user-select: none;\n display: inline-block;\n position: relative;\n box-sizing: border-box;\n border: none;\n outline: none;\n background-color: transparent;\n fill: currentColor;\n text-decoration: none;\n cursor: pointer;\n z-index: 0;\n overflow: visible;\n border-radius: var(--mat-icon-button-container-shape, var(--mat-sys-corner-full, 50%));\n flex-shrink: 0;\n text-align: center;\n width: var(--mat-icon-button-state-layer-size, 40px);\n height: var(--mat-icon-button-state-layer-size, 40px);\n padding: calc(calc(var(--mat-icon-button-state-layer-size, 40px) - var(--mat-icon-button-icon-size, 24px)) / 2);\n font-size: var(--mat-icon-button-icon-size, 24px);\n color: var(--mat-icon-button-icon-color, var(--mat-sys-on-surface-variant));\n -webkit-tap-highlight-color: transparent;\n}\n.mat-mdc-icon-button .mat-mdc-button-ripple,\n.mat-mdc-icon-button .mat-mdc-button-persistent-ripple,\n.mat-mdc-icon-button .mat-mdc-button-persistent-ripple::before {\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n pointer-events: none;\n border-radius: inherit;\n}\n.mat-mdc-icon-button .mat-mdc-button-ripple {\n overflow: hidden;\n}\n.mat-mdc-icon-button .mat-mdc-button-persistent-ripple::before {\n content: \"\";\n opacity: 0;\n}\n.mat-mdc-icon-button .mdc-button__label,\n.mat-mdc-icon-button .mat-icon {\n z-index: 1;\n position: relative;\n}\n.mat-mdc-icon-button .mat-focus-indicator {\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n border-radius: inherit;\n}\n.mat-mdc-icon-button:focus-visible > .mat-focus-indicator::before {\n content: \"\";\n border-radius: inherit;\n}\n.mat-mdc-icon-button .mat-ripple-element {\n background-color: var(--mat-icon-button-ripple-color, color-mix(in srgb, var(--mat-sys-on-surface-variant) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent));\n}\n.mat-mdc-icon-button .mat-mdc-button-persistent-ripple::before {\n background-color: var(--mat-icon-button-state-layer-color, var(--mat-sys-on-surface-variant));\n}\n.mat-mdc-icon-button.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before {\n background-color: var(--mat-icon-button-disabled-state-layer-color, var(--mat-sys-on-surface-variant));\n}\n.mat-mdc-icon-button:hover > .mat-mdc-button-persistent-ripple::before {\n opacity: var(--mat-icon-button-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity));\n}\n.mat-mdc-icon-button.cdk-program-focused > .mat-mdc-button-persistent-ripple::before, .mat-mdc-icon-button.cdk-keyboard-focused > .mat-mdc-button-persistent-ripple::before, .mat-mdc-icon-button.mat-mdc-button-disabled-interactive:focus > .mat-mdc-button-persistent-ripple::before {\n opacity: var(--mat-icon-button-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity));\n}\n.mat-mdc-icon-button:active > .mat-mdc-button-persistent-ripple::before {\n opacity: var(--mat-icon-button-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity));\n}\n.mat-mdc-icon-button .mat-mdc-button-touch-target {\n position: absolute;\n top: 50%;\n height: var(--mat-icon-button-touch-target-size, 48px);\n display: var(--mat-icon-button-touch-target-display, block);\n left: 50%;\n width: var(--mat-icon-button-touch-target-size, 48px);\n transform: translate(-50%, -50%);\n}\n.mat-mdc-icon-button._mat-animation-noopable {\n transition: none !important;\n animation: none !important;\n}\n.mat-mdc-icon-button[disabled], .mat-mdc-icon-button.mat-mdc-button-disabled {\n cursor: default;\n pointer-events: none;\n color: var(--mat-icon-button-disabled-icon-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));\n}\n.mat-mdc-icon-button.mat-mdc-button-disabled-interactive {\n pointer-events: auto;\n}\n.mat-mdc-icon-button img,\n.mat-mdc-icon-button svg {\n width: var(--mat-icon-button-icon-size, 24px);\n height: var(--mat-icon-button-icon-size, 24px);\n vertical-align: baseline;\n}\n.mat-mdc-icon-button .mat-mdc-button-persistent-ripple {\n border-radius: var(--mat-icon-button-container-shape, var(--mat-sys-corner-full, 50%));\n}\n.mat-mdc-icon-button[hidden] {\n display: none;\n}\n.mat-mdc-icon-button.mat-unthemed:not(.mdc-ripple-upgraded):focus::before, .mat-mdc-icon-button.mat-primary:not(.mdc-ripple-upgraded):focus::before, .mat-mdc-icon-button.mat-accent:not(.mdc-ripple-upgraded):focus::before, .mat-mdc-icon-button.mat-warn:not(.mdc-ripple-upgraded):focus::before {\n background: transparent;\n opacity: 1;\n}\n", "@media (forced-colors: active) {\n .mat-mdc-button:not(.mdc-button--outlined),\n .mat-mdc-unelevated-button:not(.mdc-button--outlined),\n .mat-mdc-raised-button:not(.mdc-button--outlined),\n .mat-mdc-outlined-button:not(.mdc-button--outlined),\n .mat-mdc-button-base.mat-tonal-button,\n .mat-mdc-icon-button.mat-mdc-icon-button,\n .mat-mdc-outlined-button .mdc-button__ripple {\n outline: solid 1px;\n }\n}\n"]
}]
}],
ctorParameters: () => []
});
const MatIconAnchor = MatIconButton;
export { MAT_BUTTON_CONFIG, MatButtonBase, MatIconAnchor, MatIconButton };
//# sourceMappingURL=_icon-button-chunk.mjs.map