@ng-doc/ui-kit
Version:
<!-- PROJECT LOGO --> <br /> <div align="center"> <a href="https://github.com/ng-doc/ng-doc"> <img src="https://ng-doc.com/assets/images/ng-doc.svg?raw=true" alt="Logo" height="150px"> </a>
33 lines (29 loc) • 5.59 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, Input, HostBinding } from '@angular/core';
class NgDocButtonIconComponent {
constructor() {
this.size = 'medium';
this.rounded = true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocButtonIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: NgDocButtonIconComponent, isStandalone: true, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]", inputs: { size: "size", rounded: "rounded" }, host: { properties: { "attr.data-ng-doc-size": "this.size", "attr.data-ng-doc-rounded": "this.rounded" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{position:relative;display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;border-radius:50%;border:var(--ng-doc-button-border);width:calc(var(--ng-doc-base-gutter) * 4);height:calc(var(--ng-doc-base-gutter) * 4);background-color:var(--ng-doc-button-background);color:var(--ng-doc-button-color);overflow:hidden;--ng-doc-icon-color: var(--ng-doc-button-color)}:host[data-ng-doc-size=small]{width:calc(var(--ng-doc-base-gutter) * 3);height:calc(var(--ng-doc-base-gutter) * 3)}:host[data-ng-doc-size=large]{width:calc(var(--ng-doc-base-gutter) * 5);height:calc(var(--ng-doc-base-gutter) * 5)}:host:hover{background-color:var(--ng-doc-button-hover-background);color:var(--ng-doc-button-hover-color);border:var(--ng-doc-button-hover-border);--ng-doc-icon-color: var(--ng-doc-button-hover-color)}:host:active{background-color:var(--ng-doc-button-active-background);color:var(--ng-doc-button-active-color);border:var(--ng-doc-button-active-border);--ng-doc-icon-color: var(--ng-doc-button-active-color)}:host[data-ng-doc-rounded=false]{border-radius:var(--ng-doc-base-gutter)}:host[ng-doc-button-icon-transparent]{--ng-doc-button-color: var(--ng-doc-base-6);--ng-doc-button-hover-color: var(--ng-doc-base-8);--ng-doc-button-active-color: var(--ng-doc-base-10);--ng-doc-button-hover-background: transparent;--ng-doc-button-active-background: transparent}:host[ng-doc-button-icon-raised]{--ng-doc-button-background: var(--ng-doc-base-1);--ng-doc-button-border: 1px solid var(--ng-doc-base-3);--ng-doc-button-hover-background: var(--ng-doc-base-2);--ng-doc-button-hover-border: 1px solid var(--ng-doc-base-4);--ng-doc-button-active-background: var(--ng-doc-base-3);--ng-doc-button-active-border: 1px solid var(--ng-doc-base-5)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocButtonIconComponent, decorators: [{
type: Component,
args: [{ selector: 'button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<ng-content></ng-content>\n", styles: [":host{position:relative;display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;border-radius:50%;border:var(--ng-doc-button-border);width:calc(var(--ng-doc-base-gutter) * 4);height:calc(var(--ng-doc-base-gutter) * 4);background-color:var(--ng-doc-button-background);color:var(--ng-doc-button-color);overflow:hidden;--ng-doc-icon-color: var(--ng-doc-button-color)}:host[data-ng-doc-size=small]{width:calc(var(--ng-doc-base-gutter) * 3);height:calc(var(--ng-doc-base-gutter) * 3)}:host[data-ng-doc-size=large]{width:calc(var(--ng-doc-base-gutter) * 5);height:calc(var(--ng-doc-base-gutter) * 5)}:host:hover{background-color:var(--ng-doc-button-hover-background);color:var(--ng-doc-button-hover-color);border:var(--ng-doc-button-hover-border);--ng-doc-icon-color: var(--ng-doc-button-hover-color)}:host:active{background-color:var(--ng-doc-button-active-background);color:var(--ng-doc-button-active-color);border:var(--ng-doc-button-active-border);--ng-doc-icon-color: var(--ng-doc-button-active-color)}:host[data-ng-doc-rounded=false]{border-radius:var(--ng-doc-base-gutter)}:host[ng-doc-button-icon-transparent]{--ng-doc-button-color: var(--ng-doc-base-6);--ng-doc-button-hover-color: var(--ng-doc-base-8);--ng-doc-button-active-color: var(--ng-doc-base-10);--ng-doc-button-hover-background: transparent;--ng-doc-button-active-background: transparent}:host[ng-doc-button-icon-raised]{--ng-doc-button-background: var(--ng-doc-base-1);--ng-doc-button-border: 1px solid var(--ng-doc-base-3);--ng-doc-button-hover-background: var(--ng-doc-base-2);--ng-doc-button-hover-border: 1px solid var(--ng-doc-base-4);--ng-doc-button-active-background: var(--ng-doc-base-3);--ng-doc-button-active-border: 1px solid var(--ng-doc-base-5)}\n"] }]
}], propDecorators: { size: [{
type: Input
}, {
type: HostBinding,
args: ['attr.data-ng-doc-size']
}], rounded: [{
type: Input
}, {
type: HostBinding,
args: ['attr.data-ng-doc-rounded']
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocButtonIconComponent };
//# sourceMappingURL=ng-doc-ui-kit-components-button-icon.mjs.map