carbon-components-angular
Version:
Next generation components
526 lines (518 loc) • 20.1 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, Input, HostBinding, Component, EventEmitter, ViewChild, Output, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from 'carbon-components-angular/tooltip';
import { TooltipModule } from 'carbon-components-angular/tooltip';
/**
* A convenience directive for applying styling to a button. Get started with importing the module:
*
* ```typescript
* import { ButtonModule } from 'carbon-components-angular';
* ```
*
* Example:
*
* ```html
* <button cdsButton>A button</button>
* <button cdsButton="secondary">A secondary button</button>
* ```
*
* See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/button/code) for more detail.
*
* [See demo](../../?path=/story/components-button--basic)
*/
class Button {
constructor() {
/**
* Sets the button type
* Accepts `ButtonType` or nothing (empty string which is equivalent to "primary")
* Empty string has been added as an option for Angular 16+ to resolve type errors
*/
this.cdsButton = "primary";
/**
* Set to `true` for a skeleton state button
*/
this.skeleton = false;
/**
* Set to `true` if the button contains only an icon
* This should only be used for creating custom icon buttons, otherwise use
* `<cds-icon-button></cds-icon-button>` component
*/
this.iconOnly = false;
/**
* Set to `true` for a "expressive" style button
*/
this.isExpressive = false;
// a whole lot of HostBindings ... this way we don't have to touch the elementRef directly
this.baseClass = true;
}
/**
* @deprecated as of v5 - Use `cdsButton` input property instead
*/
set ibmButton(type) {
this.cdsButton = type;
}
get primaryButton() {
return this.cdsButton === "primary" || !this.cdsButton;
}
get secondaryButton() {
return this.cdsButton === "secondary";
}
get tertiaryButton() {
return this.cdsButton === "tertiary";
}
get ghostButton() {
return this.cdsButton === "ghost";
}
get dangerButton() {
return this.cdsButton === "danger" || this.cdsButton === "danger--primary";
}
get dangerTertiary() {
return this.cdsButton === "danger--tertiary";
}
get dangerGhost() {
return this.cdsButton === "danger--ghost";
}
/**
* @todo remove `cds--btn--${size}` classes in v12
*/
get smallSize() {
return this.size === "sm" && !this.isExpressive;
}
get mediumSize() {
return this.size === "md" && !this.isExpressive;
}
get largeSize() {
return this.size === "lg";
}
get extraLargeSize() {
return this.size === "xl";
}
get twoExtraLargeSize() {
return this.size === "2xl";
}
// Size classes
get smallLayoutSize() {
return this.size === "sm" && !this.isExpressive;
}
get mediumLayoutSize() {
return this.size === "md" && !this.isExpressive;
}
get largeLayoutSize() {
return this.size === "lg";
}
get extraLargeLayoutSize() {
return this.size === "xl";
}
get twoExtraLargeLayoutSize() {
return this.size === "2xl";
}
}
Button.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Directive });
Button.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: Button, selector: "[cdsButton], [ibmButton]", inputs: { ibmButton: "ibmButton", cdsButton: "cdsButton", size: "size", skeleton: "skeleton", iconOnly: "iconOnly", isExpressive: "isExpressive" }, host: { properties: { "class.cds--skeleton": "this.skeleton", "class.cds--btn--icon-only": "this.iconOnly", "class.cds--btn--expressive": "this.isExpressive", "class.cds--btn": "this.baseClass", "class.cds--btn--primary": "this.primaryButton", "class.cds--btn--secondary": "this.secondaryButton", "class.cds--btn--tertiary": "this.tertiaryButton", "class.cds--btn--ghost": "this.ghostButton", "class.cds--btn--danger": "this.dangerButton", "class.cds--btn--danger--tertiary": "this.dangerTertiary", "class.cds--btn--danger--ghost": "this.dangerGhost", "class.cds--btn--sm": "this.smallSize", "class.cds--btn--md": "this.mediumSize", "class.cds--btn--lg": "this.largeSize", "class.cds--btn--xl": "this.extraLargeSize", "class.cds--btn--2xl": "this.twoExtraLargeSize", "class.cds--layout--size-sm": "this.smallLayoutSize", "class.cds--layout--size-md": "this.mediumLayoutSize", "class.cds--layout--size-lg": "this.largeLayoutSize", "class.cds--layout--size-xl": "this.extraLargeLayoutSize", "class.cds--layout--size-2xl": "this.twoExtraLargeLayoutSize" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Button, decorators: [{
type: Directive,
args: [{
selector: "[cdsButton], [ibmButton]"
}]
}], propDecorators: { ibmButton: [{
type: Input
}], cdsButton: [{
type: Input
}], size: [{
type: Input
}], skeleton: [{
type: HostBinding,
args: ["class.cds--skeleton"]
}, {
type: Input
}], iconOnly: [{
type: HostBinding,
args: ["class.cds--btn--icon-only"]
}, {
type: Input
}], isExpressive: [{
type: HostBinding,
args: ["class.cds--btn--expressive"]
}, {
type: Input
}], baseClass: [{
type: HostBinding,
args: ["class.cds--btn"]
}], primaryButton: [{
type: HostBinding,
args: ["class.cds--btn--primary"]
}], secondaryButton: [{
type: HostBinding,
args: ["class.cds--btn--secondary"]
}], tertiaryButton: [{
type: HostBinding,
args: ["class.cds--btn--tertiary"]
}], ghostButton: [{
type: HostBinding,
args: ["class.cds--btn--ghost"]
}], dangerButton: [{
type: HostBinding,
args: ["class.cds--btn--danger"]
}], dangerTertiary: [{
type: HostBinding,
args: ["class.cds--btn--danger--tertiary"]
}], dangerGhost: [{
type: HostBinding,
args: ["class.cds--btn--danger--ghost"]
}], smallSize: [{
type: HostBinding,
args: ["class.cds--btn--sm"]
}], mediumSize: [{
type: HostBinding,
args: ["class.cds--btn--md"]
}], largeSize: [{
type: HostBinding,
args: ["class.cds--btn--lg"]
}], extraLargeSize: [{
type: HostBinding,
args: ["class.cds--btn--xl"]
}], twoExtraLargeSize: [{
type: HostBinding,
args: ["class.cds--btn--2xl"]
}], smallLayoutSize: [{
type: HostBinding,
args: ["class.cds--layout--size-sm"]
}], mediumLayoutSize: [{
type: HostBinding,
args: ["class.cds--layout--size-md"]
}], largeLayoutSize: [{
type: HostBinding,
args: ["class.cds--layout--size-lg"]
}], extraLargeLayoutSize: [{
type: HostBinding,
args: ["class.cds--layout--size-xl"]
}], twoExtraLargeLayoutSize: [{
type: HostBinding,
args: ["class.cds--layout--size-2xl"]
}] } });
/**
* Get started with importing the module:
*
* ```typescript
* import { ButtonModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-button-button-set--basic)
*/
class ButtonSet {
constructor() {
this.buttonSetClass = true;
}
}
ButtonSet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ButtonSet, deps: [], target: i0.ɵɵFactoryTarget.Component });
ButtonSet.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ButtonSet, selector: "cds-button-set, ibm-button-set", host: { properties: { "class.cds--btn-set": "this.buttonSetClass" } }, ngImport: i0, template: "<ng-content></ng-content>", isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ButtonSet, decorators: [{
type: Component,
args: [{
selector: "cds-button-set, ibm-button-set",
template: "<ng-content></ng-content>"
}]
}], propDecorators: { buttonSetClass: [{
type: HostBinding,
args: ["class.cds--btn-set"]
}] } });
/**
* Base button with common input properties for configuring icon button.
* Extend class to inherit @Input meta data
*
* Used by pagination nav icon button, code snippet, etc.
*/
class BaseIconButton {
constructor() {
/**
* Set to `false` to hide caret
*/
this.caret = true;
/**
* Set to `false` to hide shadow
*/
this.dropShadow = true;
/**
* Set to `true` to enable high contrast
*/
this.highContrast = true;
/**
* Set to `true` to have the popover open by default
*/
this.isOpen = false;
/**
* Set popover alignment
*/
this.align = "bottom";
/**
* **Experimental**: Use floating-ui to position the tooltip
* This is not toggleable - should be assigned once
*/
this.autoAlign = false;
/**
* Set delay before tooltip is shown
*/
this.enterDelayMs = 100;
/**
* Set delay when tooltip disappears
*/
this.leaveDelayMs = 300;
}
}
BaseIconButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BaseIconButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
BaseIconButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BaseIconButton, selector: "ng-component", inputs: { caret: "caret", dropShadow: "dropShadow", highContrast: "highContrast", isOpen: "isOpen", align: "align", autoAlign: "autoAlign", enterDelayMs: "enterDelayMs", leaveDelayMs: "leaveDelayMs" }, ngImport: i0, template: "", isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BaseIconButton, decorators: [{
type: Component,
args: [{
template: ""
}]
}], propDecorators: { caret: [{
type: Input
}], dropShadow: [{
type: Input
}], highContrast: [{
type: Input
}], isOpen: [{
type: Input
}], align: [{
type: Input
}], autoAlign: [{
type: Input
}], enterDelayMs: [{
type: Input
}], leaveDelayMs: [{
type: Input
}] } });
/**
* Get started with importing the module:
*
* ```typescript
* import { ButtonModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-button-icon-button--basic)
*/
class IconButton extends BaseIconButton {
constructor(renderer) {
super();
this.renderer = renderer;
/**
* Override id
*/
this.buttonId = `icon-btn-${IconButton.iconButtonCounter++}`;
/**
* Sets the button type.
*/
this.kind = "primary";
/**
* Specify the size of the button.
*/
this.size = "lg";
/**
* Set button type, `button` by default
*/
this.type = "button";
/**
* Set to `true` to make button expressive
*/
this.isExpressive = false;
/**
* Set to `true` to disable button
*/
this.disabled = false;
/**
* Common button events
*/
this.click = new EventEmitter();
this.focus = new EventEmitter();
this.blur = new EventEmitter();
/**
* Event to emit when click event is fired from tooltip
*/
this.tooltipClick = new EventEmitter();
this.classList = {};
this.attributeList = {};
}
/**
* Pass global carbon classes to icon button
*/
set buttonNgClass(obj) {
this.classList = Object.assign({ "cds--btn--disabled": this.disabled }, obj);
}
get buttonNgClass() {
return this.classList;
}
/**
* @param obj: { [key: string]: string
* User can pass additional button attributes if component property does not already exist
* Key is the attribute name & value is the attribute value for the button
*/
set buttonAttributes(obj) {
if (this.button) {
// Remove old attributes
Object.keys(this.attributeList).forEach((key) => {
this.renderer.removeAttribute(this.button.nativeElement, key);
});
// Set new attributes
Object.keys(obj).forEach((key) => {
this.renderer.setAttribute(this.button.nativeElement, key, obj[key]);
});
}
// Set new attributes
this.attributeList = obj;
}
get buttonAttributes() {
return this.buttonAttributes;
}
ngAfterViewInit() {
// Set attributes once element is found
this.buttonAttributes = this.attributeList;
}
/**
* Stop propogation of click event
* Else double fires (click) event
*/
emitClickEvent(event, element = "button") {
event.preventDefault();
event.stopPropagation();
// Prevents (click) event from bubbling since it would appear user clicked the `button`
if (element === "tooltip") {
this.tooltipClick.emit(event);
return;
}
this.click.emit(event);
}
}
IconButton.iconButtonCounter = 0;
IconButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: IconButton, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
IconButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: IconButton, selector: "cds-icon-button, ibm-icon-button", inputs: { buttonNgClass: "buttonNgClass", buttonAttributes: "buttonAttributes", buttonId: "buttonId", kind: "kind", size: "size", type: "type", isExpressive: "isExpressive", disabled: "disabled", description: "description" }, outputs: { click: "click", focus: "focus", blur: "blur", tooltipClick: "tooltipClick" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
<cds-tooltip
class="cds--icon-tooltip"
[description]="description"
[disabled]="disabled"
[caret]="caret"
[dropShadow]="dropShadow"
[highContrast]="highContrast"
[isOpen]="isOpen"
[align]="align"
[autoAlign]="autoAlign"
[enterDelayMs]="enterDelayMs"
[leaveDelayMs]="leaveDelayMs"
(click)="emitClickEvent($event, 'tooltip')">
<button
#button
[id]="buttonId"
[disabled]="disabled"
[attr.type]="type"
[iconOnly]="true"
[ngClass]="buttonNgClass"
[cdsButton]="kind"
[size]="size"
[isExpressive]="isExpressive"
(click)="emitClickEvent($event)"
(focus)="focus.emit($event)"
(blur)="blur.emit($event)">
<ng-content></ng-content>
</button>
</cds-tooltip>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description", "templateContext"] }, { kind: "directive", type: Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: IconButton, decorators: [{
type: Component,
args: [{
selector: "cds-icon-button, ibm-icon-button",
template: `
<cds-tooltip
class="cds--icon-tooltip"
[description]="description"
[disabled]="disabled"
[caret]="caret"
[dropShadow]="dropShadow"
[highContrast]="highContrast"
[isOpen]="isOpen"
[align]="align"
[autoAlign]="autoAlign"
[enterDelayMs]="enterDelayMs"
[leaveDelayMs]="leaveDelayMs"
(click)="emitClickEvent($event, 'tooltip')">
<button
#button
[id]="buttonId"
[disabled]="disabled"
[attr.type]="type"
[iconOnly]="true"
[ngClass]="buttonNgClass"
[cdsButton]="kind"
[size]="size"
[isExpressive]="isExpressive"
(click)="emitClickEvent($event)"
(focus)="focus.emit($event)"
(blur)="blur.emit($event)">
<ng-content></ng-content>
</button>
</cds-tooltip>
`
}]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { buttonNgClass: [{
type: Input
}], buttonAttributes: [{
type: Input
}], button: [{
type: ViewChild,
args: ["button"]
}], buttonId: [{
type: Input
}], kind: [{
type: Input
}], size: [{
type: Input
}], type: [{
type: Input
}], isExpressive: [{
type: Input
}], disabled: [{
type: Input
}], description: [{
type: Input
}], click: [{
type: Output
}], focus: [{
type: Output
}], blur: [{
type: Output
}], tooltipClick: [{
type: Output
}] } });
class ButtonModule {
}
ButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
ButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ButtonModule, declarations: [Button,
ButtonSet,
BaseIconButton,
IconButton], imports: [CommonModule, TooltipModule], exports: [Button,
ButtonSet,
IconButton] });
ButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ButtonModule, imports: [CommonModule, TooltipModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ButtonModule, decorators: [{
type: NgModule,
args: [{
declarations: [
Button,
ButtonSet,
BaseIconButton,
IconButton
],
exports: [
Button,
ButtonSet,
IconButton
],
imports: [CommonModule, TooltipModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { BaseIconButton, Button, ButtonModule, ButtonSet, IconButton };
//# sourceMappingURL=carbon-components-angular-button.mjs.map