@skyux/forms 15.0.0-alpha.14 → 15.0.0-alpha.16

package/fesm2022/skyux-forms.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
-import { CommonModule, formatNumber } from '@angular/common';
+import { CommonModule, formatNumber, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { NgModule, Pipe, inject, ChangeDetectorRef, Input, ChangeDetectionStrategy, Component, Directive, InjectionToken, HostBinding, booleanAttribute, numberAttribute, EventEmitter, ElementRef, ViewChild, Output, Injectable, DOCUMENT, input, computed, linkedSignal, RendererFactory2, Renderer2, ContentChild, ViewEncapsulation, KeyValueDiffers, forwardRef, ContentChildren, HostListener, NgZone } from '@angular/core';
+import { NgModule, Pipe, inject, ChangeDetectorRef, Input, ChangeDetectionStrategy, Component, Directive, InjectionToken, HostBinding, booleanAttribute, numberAttribute, EventEmitter, ElementRef, ViewChild, Output, Injectable, DOCUMENT, input, computed, linkedSignal, RendererFactory2, Renderer2, ContentChild, ViewEncapsulation, KeyValueDiffers, forwardRef, ContentChildren, HostListener, NgZone, output } from '@angular/core';
 import * as i2$1 from '@angular/forms';
 import { NG_VALIDATORS, FormsModule, ReactiveFormsModule, Validators, NG_VALUE_ACCESSOR, NgControl, FormControlDirective, FormControlName, NgModel } from '@angular/forms';
 import * as i6 from '@skyux/i18n';
@@ -19,6 +19,8 @@ import { SkyStatusIndicatorModule } from '@skyux/indicators';
 import { Subject, BehaviorSubject, ReplaySubject, takeUntil as takeUntil$1 } from 'rxjs';
 import { takeUntil, take } from 'rxjs/operators';
 import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i2$2 from '@skyux/router';
+import { SkyAppLinkModule, SkyHrefModule } from '@skyux/router';
 
 /* istanbul ignore file */
 /**
@@ -4865,9 +4867,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                 }]
         }] });
 
+/**
+ * Buttons provide interactive elements for users to trigger actions in the system.
+ */
+class SkyButton {
+    constructor() {
+        /**
+         * Whether the button is displayed as a block element that fills the horizontal space of its container.
+         * @default false
+         */
+        this.block = input(false, { ...(ngDevMode ? { debugName: "block" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * The display style of the button.
+         * @default "default"
+         */
+        this.buttonStyle = input('default', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "buttonStyle" }] : /* istanbul ignore next */ []));
+        /**
+         * The type of the underlying HTML button element.
+         * @default "button"
+         */
+        this.buttonType = input('button', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "buttonType" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the button is disabled.
+         * @default false
+         */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * The name of the icon to display.
+         */
+        this.iconName = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether to hide the button's label. When the label is hidden, `labelText` is used as the button's ARIA label.
+         * @default false
+         */
+        this.labelHidden = input(false, { ...(ngDevMode ? { debugName: "labelHidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * The text to display as the button's label.
+         * @required
+         */
+        this.labelText = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the icon is a logo icon.
+         * @default false
+         */
+        this.logo = input(false, { ...(ngDevMode ? { debugName: "logo" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * The link for the button.
+         */
+        this.permalink = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "permalink" }] : /* istanbul ignore next */ []));
+        /**
+         * Fires when the button is clicked.
+         */
+        this.buttonClick = output();
+        this.ariaLabel = computed(() => this.labelHidden() ? this.labelText() : null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.buttonClass = computed(() => {
+            let buttonClass = `sky-btn sky-btn-${this.buttonStyle()}`;
+            if (this.block()) {
+                buttonClass += ' sky-btn-block';
+            }
+            return buttonClass;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "buttonClass" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SkyButton, isStandalone: true, selector: "sky-button", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, buttonStyle: { classPropertyName: "buttonStyle", publicName: "buttonStyle", isSignal: true, isRequired: false, transformFunction: null }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, labelHidden: { classPropertyName: "labelHidden", publicName: "labelHidden", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: true, transformFunction: null }, logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: false, transformFunction: null }, permalink: { classPropertyName: "permalink", publicName: "permalink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "@if (!disabled() && permalink(); as permalink) {\n  @if (permalink.route?.commands) {\n    <a\n      href=\"\"\n      [aria-label]=\"ariaLabel()\"\n      [class]=\"buttonClass()\"\n      [fragment]=\"permalink.route.extras?.fragment\"\n      [queryParams]=\"permalink.route.extras?.queryParams\"\n      [queryParamsHandling]=\"permalink.route.extras?.queryParamsHandling\"\n      [skyAppLink]=\"permalink.route.commands\"\n      (click)=\"buttonClick.emit($event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent\" />\n    </a>\n  } @else if (permalink.url) {\n    <a\n      href=\"\"\n      [aria-label]=\"ariaLabel()\"\n      [class]=\"buttonClass()\"\n      [skyHref]=\"permalink.url\"\n      (click)=\"buttonClick.emit($event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent\" />\n    </a>\n  }\n} @else {\n  <button\n    [aria-label]=\"ariaLabel()\"\n    [class]=\"buttonClass()\"\n    [disabled]=\"disabled()\"\n    [type]=\"buttonType()\"\n    (click)=\"buttonClick.emit($event)\"\n  >\n    <ng-container *ngTemplateOutlet=\"buttonContent\" />\n  </button>\n}\n\n<ng-template #buttonContent>\n  @if (iconName(); as iconName) {\n    <sky-icon [class.sky-btn-block-logo]=\"logo()\" [iconName]=\"iconName\" />\n  }\n\n  @if (!labelHidden()) {\n    <!-- Wrapping text in a span prevents extra space from rendering between the icon and text -->\n    <span>{{ labelText() }}</span>\n  }\n</ng-template>\n", styles: [":host{display:inline}:host:has(>.sky-btn-block){display:block}sky-icon:has(+span){margin-right:var(--sky-space-gap-icon-s)}.sky-btn:has(sky-icon:only-child){padding:var(--sky-comp-button-icon-space-inset-top) var(--sky-comp-button-icon-space-inset-right) var(--sky-comp-button-icon-space-inset-bottom) var(--sky-comp-button-icon-space-inset-left)}\n"], dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i4.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyAppLinkModule }, { kind: "directive", type: i2$2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "ngmodule", type: SkyHrefModule }, { kind: "directive", type: i2$2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-button', imports: [SkyIconModule, NgTemplateOutlet, SkyAppLinkModule, SkyHrefModule], template: "@if (!disabled() && permalink(); as permalink) {\n  @if (permalink.route?.commands) {\n    <a\n      href=\"\"\n      [aria-label]=\"ariaLabel()\"\n      [class]=\"buttonClass()\"\n      [fragment]=\"permalink.route.extras?.fragment\"\n      [queryParams]=\"permalink.route.extras?.queryParams\"\n      [queryParamsHandling]=\"permalink.route.extras?.queryParamsHandling\"\n      [skyAppLink]=\"permalink.route.commands\"\n      (click)=\"buttonClick.emit($event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent\" />\n    </a>\n  } @else if (permalink.url) {\n    <a\n      href=\"\"\n      [aria-label]=\"ariaLabel()\"\n      [class]=\"buttonClass()\"\n      [skyHref]=\"permalink.url\"\n      (click)=\"buttonClick.emit($event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent\" />\n    </a>\n  }\n} @else {\n  <button\n    [aria-label]=\"ariaLabel()\"\n    [class]=\"buttonClass()\"\n    [disabled]=\"disabled()\"\n    [type]=\"buttonType()\"\n    (click)=\"buttonClick.emit($event)\"\n  >\n    <ng-container *ngTemplateOutlet=\"buttonContent\" />\n  </button>\n}\n\n<ng-template #buttonContent>\n  @if (iconName(); as iconName) {\n    <sky-icon [class.sky-btn-block-logo]=\"logo()\" [iconName]=\"iconName\" />\n  }\n\n  @if (!labelHidden()) {\n    <!-- Wrapping text in a span prevents extra space from rendering between the icon and text -->\n    <span>{{ labelText() }}</span>\n  }\n</ng-template>\n", styles: [":host{display:inline}:host:has(>.sky-btn-block){display:block}sky-icon:has(+span){margin-right:var(--sky-space-gap-icon-s)}.sky-btn:has(sky-icon:only-child){padding:var(--sky-comp-button-icon-space-inset-top) var(--sky-comp-button-icon-space-inset-right) var(--sky-comp-button-icon-space-inset-bottom) var(--sky-comp-button-icon-space-inset-left)}\n"] }]
+        }], propDecorators: { block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], buttonStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonStyle", required: false }] }], buttonType: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonType", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], labelHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelHidden", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: true }] }], logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: false }] }], permalink: [{ type: i0.Input, args: [{ isSignal: true, alias: "permalink", required: false }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SKY_FORM_ERRORS_ENABLED, SkyCharacterCounterModule, SkyCheckboxModule, SkyFieldGroupModule, SkyFileAttachmentModule, SkyFileAttachmentsModule, SkyFileDropModule, SkyFileSizePipe, SkyFormErrorModule, SkyFormErrorsModule, SkyInputBoxHostService, SkyInputBoxModule, SkyRadioModule, SkyRequiredStateDirective, SkySelectionBoxModule, SkyToggleSwitchModule, SkyCharacterCounterIndicatorComponent as λ1, SkyInputBoxComponent as λ10, SkyRadioGroupComponent as λ11, SkyRadioLabelComponent as λ12, SkyRadioComponent as λ13, SkySelectionBoxDescriptionComponent as λ14, SkySelectionBoxGridComponent as λ15, SkySelectionBoxHeaderComponent as λ16, SkySelectionBoxComponent as λ17, SkyToggleSwitchComponent as λ19, SkyCharacterCounterInputDirective as λ2, SkyInputBoxControlDirective as λ20, SkyFormErrorsComponent as λ21, SkyFormErrorComponent as λ22, SkyCharacterCounterScreenReaderPipe as λ23, SkyCheckboxGroupComponent as λ24, SkyFieldGroupComponent as λ25, SkyInputBoxHintTextPipe as λ26, SkyCheckboxComponent as λ3, SkyCheckboxLabelComponent as λ4, SkyFileAttachmentComponent as λ7, SkyFileDropComponent as λ8, SkyFileItemComponent as λ9 };
+export { SKY_FORM_ERRORS_ENABLED, SkyButton, SkyCharacterCounterModule, SkyCheckboxModule, SkyFieldGroupModule, SkyFileAttachmentModule, SkyFileAttachmentsModule, SkyFileDropModule, SkyFileSizePipe, SkyFormErrorModule, SkyFormErrorsModule, SkyInputBoxHostService, SkyInputBoxModule, SkyRadioModule, SkyRequiredStateDirective, SkySelectionBoxModule, SkyToggleSwitchModule, SkyCharacterCounterIndicatorComponent as λ1, SkyInputBoxComponent as λ10, SkyRadioGroupComponent as λ11, SkyRadioLabelComponent as λ12, SkyRadioComponent as λ13, SkySelectionBoxDescriptionComponent as λ14, SkySelectionBoxGridComponent as λ15, SkySelectionBoxHeaderComponent as λ16, SkySelectionBoxComponent as λ17, SkyToggleSwitchComponent as λ19, SkyCharacterCounterInputDirective as λ2, SkyInputBoxControlDirective as λ20, SkyFormErrorsComponent as λ21, SkyFormErrorComponent as λ22, SkyCharacterCounterScreenReaderPipe as λ23, SkyCheckboxGroupComponent as λ24, SkyFieldGroupComponent as λ25, SkyInputBoxHintTextPipe as λ26, SkyCheckboxComponent as λ3, SkyCheckboxLabelComponent as λ4, SkyFileAttachmentComponent as λ7, SkyFileDropComponent as λ8, SkyFileItemComponent as λ9 };
 //# sourceMappingURL=skyux-forms.mjs.map