@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>
59 lines (55 loc) • 16.4 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, Input, HostBinding } from '@angular/core';
/**
* `NgDocButtonComponent` is a reusable button component with customizable properties.
* It can be used as a regular button, a flat button, or a text button.
* @example
* ```html
* <button ng-doc-button [size]="'large'" [color]="'secondary'" [rounded]="true">Click me</button>
* ```
*/
class NgDocButtonComponent {
constructor() {
/**
* Size of the button. Can be 'small', 'medium', or 'large'.
* Default is 'small'.
*/
this.size = 'small';
/**
* Color of the button. Can be 'primary', 'secondary', etc.
* Default is 'primary'.
*/
this.color = 'primary';
/**
* Whether the button is rounded or not.
* Default is false.
*/
this.rounded = false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: NgDocButtonComponent, isStandalone: true, selector: "button[ng-doc-button], a[ng-doc-button], button[ng-doc-button-flat], a[ng-doc-button-flat], button[ng-doc-button-text], a[ng-doc-button-text]", inputs: { size: "size", color: "color", rounded: "rounded" }, host: { properties: { "attr.data-ng-doc-size": "this.size", "attr.data-ng-doc-color": "this.color", "attr.data-ng-doc-rounded": "this.rounded" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);position:relative;display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;border-radius:calc(var(--ng-doc-base-gutter) / 2);padding:var(--ng-doc-button-padding, var(--ng-doc-base-gutter) calc(var(--ng-doc-base-gutter) * 2));text-decoration:none;background:color-mix(in srgb,var(--ng-doc-button-background) var(--ng-doc-button-background-opacity, 100%),transparent);--ng-doc-text: var(--ng-doc-button-color);--ng-doc-font-size: calc(var(--ng-doc-base-gutter) * 2);--ng-doc-line-height: calc(var(--ng-doc-base-gutter) * 3);--ng-doc-icon-color: var(--ng-doc-button-color)}:host[data-ng-doc-rounded=true]{border-radius:calc(var(--ng-doc-base-gutter) * 5)}:host[data-ng-doc-size=small]{--ng-doc-font-size: 14px;--ng-doc-line-height: 16px}:host[data-ng-doc-size=small][data-ng-doc-rounded=true]{border-radius:calc(var(--ng-doc-base-gutter) * 3)}:host[data-ng-doc-size=large]{--ng-doc-font-size: 20px;--ng-doc-font-weight: 700;--ng-doc-line-height: 32px}:host[data-ng-doc-size=large][data-ng-doc-rounded=true]{border-radius:calc(var(--ng-doc-base-gutter) * 5)}:host:hover{text-decoration:none;--ng-doc-button-background-opacity: var(--ng-doc-button-hover-background-opacity) !important;--ng-doc-button-color: var(--ng-doc-button-hover-color) !important}:host:active{--ng-doc-button-background-opacity: var(--ng-doc-button-active-background-opacity) !important;--ng-doc-button-color: var(--ng-doc-button-active-color) !important}:host[ng-doc-button]{--ng-doc-button-background-opacity: 10%;--ng-doc-button-hover-background-opacity: 20%;--ng-doc-button-active-background-opacity: 30%}:host[ng-doc-button][data-ng-doc-color=primary]{--ng-doc-button-background: var(--ng-doc-primary);--ng-doc-button-color: var(--ng-doc-primary);--ng-doc-button-hover-color: var(--ng-doc-primary);--ng-doc-button-active-color: var(--ng-doc-primary)}:host[ng-doc-button][data-ng-doc-color=info]{--ng-doc-button-background: var(--ng-doc-info);--ng-doc-button-color: var(--ng-doc-info);--ng-doc-button-hover-color: var(--ng-doc-info);--ng-doc-button-active-color: var(--ng-doc-info)}:host[ng-doc-button][data-ng-doc-color=warning]{--ng-doc-button-background: var(--ng-doc-warning);--ng-doc-button-color: var(--ng-doc-warning);--ng-doc-button-hover-color: var(--ng-doc-warning);--ng-doc-button-active-color: var(--ng-doc-warning)}:host[ng-doc-button][data-ng-doc-color=alert]{--ng-doc-button-background: var(--ng-doc-alert);--ng-doc-button-color: var(--ng-doc-alert);--ng-doc-button-hover-color: var(--ng-doc-alert);--ng-doc-button-active-color: var(--ng-doc-alert)}:host[ng-doc-button][data-ng-doc-color=link]{--ng-doc-button-background: var(--ng-doc-link-color);--ng-doc-button-color: var(--ng-doc-link-color);--ng-doc-button-hover-color: var(--ng-doc-link-color);--ng-doc-button-active-color: var(--ng-doc-link-color)}:host[ng-doc-button][data-ng-doc-color=success]{--ng-doc-button-background: var(--ng-doc-success);--ng-doc-button-color: var(--ng-doc-success);--ng-doc-button-hover-color: var(--ng-doc-success);--ng-doc-button-active-color: var(--ng-doc-success)}:host[ng-doc-button-text]{--ng-doc-button-hover-background-opacity: 10%;--ng-doc-button-active-background-opacity: 20%}:host[ng-doc-button-text][data-ng-doc-color=primary]{--ng-doc-button-background: var(--ng-doc-primary);--ng-doc-button-color: var(--ng-doc-primary);--ng-doc-button-hover-color: var(--ng-doc-primary);--ng-doc-button-active-color: var(--ng-doc-primary)}:host[ng-doc-button-text][data-ng-doc-color=info]{--ng-doc-button-background: var(--ng-doc-info);--ng-doc-button-color: var(--ng-doc-info);--ng-doc-button-hover-color: var(--ng-doc-info);--ng-doc-button-active-color: var(--ng-doc-info)}:host[ng-doc-button-text][data-ng-doc-color=warning]{--ng-doc-button-background: var(--ng-doc-warning);--ng-doc-button-color: var(--ng-doc-warning);--ng-doc-button-hover-color: var(--ng-doc-warning);--ng-doc-button-active-color: var(--ng-doc-warning)}:host[ng-doc-button-text][data-ng-doc-color=alert]{--ng-doc-button-background: var(--ng-doc-alert);--ng-doc-button-color: var(--ng-doc-alert);--ng-doc-button-hover-color: var(--ng-doc-alert);--ng-doc-button-active-color: var(--ng-doc-alert)}:host[ng-doc-button-text][data-ng-doc-color=link]{--ng-doc-button-background: var(--ng-doc-link-color);--ng-doc-button-color: var(--ng-doc-link-color);--ng-doc-button-hover-color: var(--ng-doc-link-color);--ng-doc-button-active-color: var(--ng-doc-link-color)}:host[ng-doc-button-text][data-ng-doc-color=success]{--ng-doc-button-background: var(--ng-doc-success);--ng-doc-button-color: var(--ng-doc-success);--ng-doc-button-hover-color: var(--ng-doc-success);--ng-doc-button-active-color: var(--ng-doc-success)}:host[ng-doc-button-flat]{background:color-mix(in srgb,var(--ng-doc-button-background),black var(--ng-doc-button-background-opacity));--ng-doc-button-background: var(--ng-doc-white);--ng-doc-button-background-opacity: 0%;--ng-doc-button-hover-background-opacity: 10%;--ng-doc-button-active-background-opacity: 20%}:host[ng-doc-button-flat][data-ng-doc-color=primary]{--ng-doc-button-background: var(--ng-doc-primary);--ng-doc-button-color: var(--ng-doc-primary-text);--ng-doc-button-hover-color: var(--ng-doc-primary-text);--ng-doc-button-active-color: var(--ng-doc-primary-text)}:host[ng-doc-button-flat][data-ng-doc-color=info]{--ng-doc-button-background: var(--ng-doc-info);--ng-doc-button-color: var(--ng-doc-info-text);--ng-doc-button-hover-color: var(--ng-doc-info-text);--ng-doc-button-active-color: var(--ng-doc-info-text)}:host[ng-doc-button-flat][data-ng-doc-color=warning]{--ng-doc-button-background: var(--ng-doc-warning);--ng-doc-button-color: var(--ng-doc-warning-text);--ng-doc-button-hover-color: var(--ng-doc-warning-text);--ng-doc-button-active-color: var(--ng-doc-warning-text)}:host[ng-doc-button-flat][data-ng-doc-color=alert]{--ng-doc-button-background: var(--ng-doc-alert);--ng-doc-button-color: var(--ng-doc-alert-text);--ng-doc-button-hover-color: var(--ng-doc-alert-text);--ng-doc-button-active-color: var(--ng-doc-alert-text)}:host[ng-doc-button-flat][data-ng-doc-color=link]{--ng-doc-button-background: var(--ng-doc-link-color);--ng-doc-button-color: var(--ng-doc-primary-text);--ng-doc-button-hover-color: var(--ng-doc-primary-text);--ng-doc-button-active-color: var(--ng-doc-primary-text)}:host[ng-doc-button-flat][data-ng-doc-color=success]{--ng-doc-button-background: var(--ng-doc-success);--ng-doc-button-color: var(--ng-doc-success-text);--ng-doc-button-hover-color: var(--ng-doc-success-text);--ng-doc-button-active-color: var(--ng-doc-success-text)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'button[ng-doc-button], a[ng-doc-button], button[ng-doc-button-flat], a[ng-doc-button-flat], button[ng-doc-button-text], a[ng-doc-button-text]', template: `<ng-content></ng-content>`, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [":host{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);position:relative;display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;border-radius:calc(var(--ng-doc-base-gutter) / 2);padding:var(--ng-doc-button-padding, var(--ng-doc-base-gutter) calc(var(--ng-doc-base-gutter) * 2));text-decoration:none;background:color-mix(in srgb,var(--ng-doc-button-background) var(--ng-doc-button-background-opacity, 100%),transparent);--ng-doc-text: var(--ng-doc-button-color);--ng-doc-font-size: calc(var(--ng-doc-base-gutter) * 2);--ng-doc-line-height: calc(var(--ng-doc-base-gutter) * 3);--ng-doc-icon-color: var(--ng-doc-button-color)}:host[data-ng-doc-rounded=true]{border-radius:calc(var(--ng-doc-base-gutter) * 5)}:host[data-ng-doc-size=small]{--ng-doc-font-size: 14px;--ng-doc-line-height: 16px}:host[data-ng-doc-size=small][data-ng-doc-rounded=true]{border-radius:calc(var(--ng-doc-base-gutter) * 3)}:host[data-ng-doc-size=large]{--ng-doc-font-size: 20px;--ng-doc-font-weight: 700;--ng-doc-line-height: 32px}:host[data-ng-doc-size=large][data-ng-doc-rounded=true]{border-radius:calc(var(--ng-doc-base-gutter) * 5)}:host:hover{text-decoration:none;--ng-doc-button-background-opacity: var(--ng-doc-button-hover-background-opacity) !important;--ng-doc-button-color: var(--ng-doc-button-hover-color) !important}:host:active{--ng-doc-button-background-opacity: var(--ng-doc-button-active-background-opacity) !important;--ng-doc-button-color: var(--ng-doc-button-active-color) !important}:host[ng-doc-button]{--ng-doc-button-background-opacity: 10%;--ng-doc-button-hover-background-opacity: 20%;--ng-doc-button-active-background-opacity: 30%}:host[ng-doc-button][data-ng-doc-color=primary]{--ng-doc-button-background: var(--ng-doc-primary);--ng-doc-button-color: var(--ng-doc-primary);--ng-doc-button-hover-color: var(--ng-doc-primary);--ng-doc-button-active-color: var(--ng-doc-primary)}:host[ng-doc-button][data-ng-doc-color=info]{--ng-doc-button-background: var(--ng-doc-info);--ng-doc-button-color: var(--ng-doc-info);--ng-doc-button-hover-color: var(--ng-doc-info);--ng-doc-button-active-color: var(--ng-doc-info)}:host[ng-doc-button][data-ng-doc-color=warning]{--ng-doc-button-background: var(--ng-doc-warning);--ng-doc-button-color: var(--ng-doc-warning);--ng-doc-button-hover-color: var(--ng-doc-warning);--ng-doc-button-active-color: var(--ng-doc-warning)}:host[ng-doc-button][data-ng-doc-color=alert]{--ng-doc-button-background: var(--ng-doc-alert);--ng-doc-button-color: var(--ng-doc-alert);--ng-doc-button-hover-color: var(--ng-doc-alert);--ng-doc-button-active-color: var(--ng-doc-alert)}:host[ng-doc-button][data-ng-doc-color=link]{--ng-doc-button-background: var(--ng-doc-link-color);--ng-doc-button-color: var(--ng-doc-link-color);--ng-doc-button-hover-color: var(--ng-doc-link-color);--ng-doc-button-active-color: var(--ng-doc-link-color)}:host[ng-doc-button][data-ng-doc-color=success]{--ng-doc-button-background: var(--ng-doc-success);--ng-doc-button-color: var(--ng-doc-success);--ng-doc-button-hover-color: var(--ng-doc-success);--ng-doc-button-active-color: var(--ng-doc-success)}:host[ng-doc-button-text]{--ng-doc-button-hover-background-opacity: 10%;--ng-doc-button-active-background-opacity: 20%}:host[ng-doc-button-text][data-ng-doc-color=primary]{--ng-doc-button-background: var(--ng-doc-primary);--ng-doc-button-color: var(--ng-doc-primary);--ng-doc-button-hover-color: var(--ng-doc-primary);--ng-doc-button-active-color: var(--ng-doc-primary)}:host[ng-doc-button-text][data-ng-doc-color=info]{--ng-doc-button-background: var(--ng-doc-info);--ng-doc-button-color: var(--ng-doc-info);--ng-doc-button-hover-color: var(--ng-doc-info);--ng-doc-button-active-color: var(--ng-doc-info)}:host[ng-doc-button-text][data-ng-doc-color=warning]{--ng-doc-button-background: var(--ng-doc-warning);--ng-doc-button-color: var(--ng-doc-warning);--ng-doc-button-hover-color: var(--ng-doc-warning);--ng-doc-button-active-color: var(--ng-doc-warning)}:host[ng-doc-button-text][data-ng-doc-color=alert]{--ng-doc-button-background: var(--ng-doc-alert);--ng-doc-button-color: var(--ng-doc-alert);--ng-doc-button-hover-color: var(--ng-doc-alert);--ng-doc-button-active-color: var(--ng-doc-alert)}:host[ng-doc-button-text][data-ng-doc-color=link]{--ng-doc-button-background: var(--ng-doc-link-color);--ng-doc-button-color: var(--ng-doc-link-color);--ng-doc-button-hover-color: var(--ng-doc-link-color);--ng-doc-button-active-color: var(--ng-doc-link-color)}:host[ng-doc-button-text][data-ng-doc-color=success]{--ng-doc-button-background: var(--ng-doc-success);--ng-doc-button-color: var(--ng-doc-success);--ng-doc-button-hover-color: var(--ng-doc-success);--ng-doc-button-active-color: var(--ng-doc-success)}:host[ng-doc-button-flat]{background:color-mix(in srgb,var(--ng-doc-button-background),black var(--ng-doc-button-background-opacity));--ng-doc-button-background: var(--ng-doc-white);--ng-doc-button-background-opacity: 0%;--ng-doc-button-hover-background-opacity: 10%;--ng-doc-button-active-background-opacity: 20%}:host[ng-doc-button-flat][data-ng-doc-color=primary]{--ng-doc-button-background: var(--ng-doc-primary);--ng-doc-button-color: var(--ng-doc-primary-text);--ng-doc-button-hover-color: var(--ng-doc-primary-text);--ng-doc-button-active-color: var(--ng-doc-primary-text)}:host[ng-doc-button-flat][data-ng-doc-color=info]{--ng-doc-button-background: var(--ng-doc-info);--ng-doc-button-color: var(--ng-doc-info-text);--ng-doc-button-hover-color: var(--ng-doc-info-text);--ng-doc-button-active-color: var(--ng-doc-info-text)}:host[ng-doc-button-flat][data-ng-doc-color=warning]{--ng-doc-button-background: var(--ng-doc-warning);--ng-doc-button-color: var(--ng-doc-warning-text);--ng-doc-button-hover-color: var(--ng-doc-warning-text);--ng-doc-button-active-color: var(--ng-doc-warning-text)}:host[ng-doc-button-flat][data-ng-doc-color=alert]{--ng-doc-button-background: var(--ng-doc-alert);--ng-doc-button-color: var(--ng-doc-alert-text);--ng-doc-button-hover-color: var(--ng-doc-alert-text);--ng-doc-button-active-color: var(--ng-doc-alert-text)}:host[ng-doc-button-flat][data-ng-doc-color=link]{--ng-doc-button-background: var(--ng-doc-link-color);--ng-doc-button-color: var(--ng-doc-primary-text);--ng-doc-button-hover-color: var(--ng-doc-primary-text);--ng-doc-button-active-color: var(--ng-doc-primary-text)}:host[ng-doc-button-flat][data-ng-doc-color=success]{--ng-doc-button-background: var(--ng-doc-success);--ng-doc-button-color: var(--ng-doc-success-text);--ng-doc-button-hover-color: var(--ng-doc-success-text);--ng-doc-button-active-color: var(--ng-doc-success-text)}\n"] }]
}], propDecorators: { size: [{
type: Input
}, {
type: HostBinding,
args: ['attr.data-ng-doc-size']
}], color: [{
type: Input
}, {
type: HostBinding,
args: ['attr.data-ng-doc-color']
}], rounded: [{
type: Input
}, {
type: HostBinding,
args: ['attr.data-ng-doc-rounded']
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocButtonComponent };
//# sourceMappingURL=ng-doc-ui-kit-components-button.mjs.map