@ifsworld/granite-components 3.0.0-beta.6 → 4.0.0-beta.1

package/bundles/ifsworld-granite-components.umd.js

@@ -4,17 +4,6 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ifsworld = global.ifsworld || {}, global.ifsworld['granite-components'] = {}), global.ng.core, global.ng.common, global.ng.cdk.coercion, global.rxjs, global.rxjs.operators, global.ng.cdk.testing, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.cdk.a11y, global.ng.cdk.keycodes, global.ng.animations, global.ng.cdk.bidi, global.ng.cdk.platform));
 }(this, (function (exports, core, common, coercion, rxjs, operators, testing, overlay, portal, a11y, keycodes, animations, bidi, platform) { 'use strict';
 
-    var GraniteComponentsModule = /** @class */ (function () {
-        function GraniteComponentsModule() {
-        }
-        return GraniteComponentsModule;
-    }());
-    GraniteComponentsModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: [common.CommonModule],
-                },] }
-    ];
-
     var GraniteArrangeGridItemComponent = /** @class */ (function () {
         function GraniteArrangeGridItemComponent(element) {
             this.element = element;
@@ -1513,7 +1502,7 @@
                     providers: [
                         { provide: GRANITE_MENU_PANEL, useExisting: GraniteMenuComponent },
                     ],
-                    styles: [".granite-menu:not(.granite-device-output-touch){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;min-height:var(--granite-spacing-xl);max-height:calc(100vh - var(--granite-spacing-xl));outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.08)) drop-shadow(0 4px 20px rgba(0,0,0,.1));min-width:calc(var(--granite-spacing-m) * 7)}.granite-menu:not(.granite-device-output-touch).ng-animating{pointer-events:none}.granite-menu.granite-device-output-touch{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;min-height:var(--granite-spacing-xl);max-height:calc(100vh - var(--granite-spacing-xl));outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.08)) drop-shadow(0 4px 20px rgba(0,0,0,.1));border-radius:calc(var(--granite-radius-m) / 2);-webkit-margin-start:var(--granite-spacing-xs);margin-inline-start:var(--granite-spacing-xs);-webkit-margin-end:var(--granite-spacing-xs);margin-inline-end:var(--granite-spacing-xs);-webkit-margin-after:var(--granite-spacing-xs);margin-block-end:var(--granite-spacing-xs);max-height:calc(100% - var(--granite-spacing-m) * 7)}.granite-menu.granite-device-output-touch.ng-animating{pointer-events:none}.granite-menu.granite-device-output-touch .header-container{position:-webkit-sticky;position:sticky;top:0;background-color:var(--granite-color-background-variant);z-index:1}.granite-menu.granite-device-output-touch .footer-container{position:-webkit-sticky;position:sticky;bottom:0;height:0}.close:not(:empty){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;min-height:var(--granite-spacing-xl);max-height:calc(100vh - var(--granite-spacing-xl));outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.08)) drop-shadow(0 4px 20px rgba(0,0,0,.1));border-radius:calc(var(--granite-radius-m) / 2);-webkit-margin-start:var(--granite-spacing-xs);margin-inline-start:var(--granite-spacing-xs);-webkit-margin-end:var(--granite-spacing-xs);margin-inline-end:var(--granite-spacing-xs);-webkit-margin-after:var(--granite-spacing-xs);margin-block-end:var(--granite-spacing-xs)}.close:not(:empty).ng-animating{pointer-events:none}"]
+                    styles: [".granite-menu:not(.granite-device-output-touch){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;min-height:var(--granite-spacing-xl);max-height:calc(100vh - var(--granite-spacing-xl));outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.08)) drop-shadow(0 4px 20px rgba(0,0,0,.1));min-width:calc(var(--granite-spacing-m) * 7);overflow-x:hidden;overflow-y:hidden}.granite-menu:not(.granite-device-output-touch).ng-animating{pointer-events:none}.granite-menu:not(.granite-device-output-touch):hover{overflow-y:auto}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar{width:var(--granite-spacing-xs)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-thumb{background-color:var(--granite-color-border-hard);border-radius:calc(var(--granite-spacing-m) * .125)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-track{background-color:var(--granite-color-background-hover)}.granite-menu.granite-device-output-touch{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;min-height:var(--granite-spacing-xl);max-height:calc(100vh - var(--granite-spacing-xl));outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.08)) drop-shadow(0 4px 20px rgba(0,0,0,.1));border-radius:calc(var(--granite-radius-m) / 2);-webkit-margin-start:var(--granite-spacing-xs);margin-inline-start:var(--granite-spacing-xs);-webkit-margin-end:var(--granite-spacing-xs);margin-inline-end:var(--granite-spacing-xs);-webkit-margin-after:var(--granite-spacing-xs);margin-block-end:var(--granite-spacing-xs);max-height:calc(100% - var(--granite-spacing-m) * 7)}.granite-menu.granite-device-output-touch.ng-animating{pointer-events:none}.granite-menu.granite-device-output-touch .header-container{position:-webkit-sticky;position:sticky;top:0;background-color:var(--granite-color-background-variant);z-index:1}.granite-menu.granite-device-output-touch .footer-container{position:-webkit-sticky;position:sticky;bottom:0;height:0}.close:not(:empty){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;min-height:var(--granite-spacing-xl);max-height:calc(100vh - var(--granite-spacing-xl));outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.08)) drop-shadow(0 4px 20px rgba(0,0,0,.1));border-radius:calc(var(--granite-radius-m) / 2);-webkit-margin-start:var(--granite-spacing-xs);margin-inline-start:var(--granite-spacing-xs);-webkit-margin-end:var(--granite-spacing-xs);margin-inline-end:var(--granite-spacing-xs);-webkit-margin-after:var(--granite-spacing-xs);margin-block-end:var(--granite-spacing-xs)}.close:not(:empty).ng-animating{pointer-events:none}"]
                 },] }
     ];
 
@@ -2582,8 +2571,7 @@
             this.ariaLabelledby = null;
             this.valueChange = new core.EventEmitter();
             this.toggleChange = new core.EventEmitter();
-            // eslint-disable-next-line @angular-eslint/no-output-native
-            this.blur = new core.EventEmitter();
+            this.toggleBlur = new core.EventEmitter();
             this._positionBefore = false;
             this._toggleSwitchDisabled = false;
         }
@@ -2612,7 +2600,7 @@
             this._focusMonitor.focusVia(this._getInputElement(), origin, options);
         };
         GraniteToggleSwitchComponent.prototype._onBlur = function () {
-            this.blur.emit();
+            this.toggleBlur.emit();
         };
         GraniteToggleSwitchComponent.prototype._toggleSwitchChange = function () {
             this.checked = this._getInputElement().checked;
@@ -2655,7 +2643,7 @@
         ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }],
         valueChange: [{ type: core.Output }],
         toggleChange: [{ type: core.Output }],
-        blur: [{ type: core.Output }],
+        toggleBlur: [{ type: core.Output }],
         _inputElement: [{ type: core.ViewChild, args: ['input',] }]
     };
 
@@ -2817,6 +2805,167 @@
                 },] }
     ];
 
+    var GraniteFormFieldComponent = /** @class */ (function () {
+        function GraniteFormFieldComponent() {
+        }
+        return GraniteFormFieldComponent;
+    }());
+    GraniteFormFieldComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'granite-form-field',
+                    exportAs: 'graniteFormField',
+                    template: "<ng-content></ng-content>\n",
+                    host: {
+                        class: 'granite-form-field',
+                    },
+                    encapsulation: core.ViewEncapsulation.None,
+                    styles: [""]
+                },] }
+    ];
+
+    var GraniteFormFieldModule = /** @class */ (function () {
+        function GraniteFormFieldModule() {
+        }
+        return GraniteFormFieldModule;
+    }());
+    GraniteFormFieldModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [common.CommonModule],
+                    declarations: [GraniteFormFieldComponent],
+                    exports: [GraniteFormFieldComponent],
+                },] }
+    ];
+
+    var GRANITE_INPUT_INCLUDES = ['text', 'number', 'password', 'textArea'];
+    var GraniteInputFieldComponent = /** @class */ (function () {
+        function GraniteInputFieldComponent() {
+            this.id = '';
+            this.name = '';
+            this.value = null;
+            this.isRequired = false;
+            this.isReadOnly = false;
+            this.isInvalid = false;
+            this.isDisabled = false;
+            this.placeholderText = '';
+            this.prefixIcon = '';
+            this.maxLength = 255;
+            this.enableCharacterCount = false;
+            this.ariaLabel = null;
+            this.ariaLabelledby = null;
+            this.valueChange = new core.EventEmitter();
+            this.isSupported = true;
+            this.isEmpty = false;
+            this.passwordFieldIcon = 'view';
+            this.currentCharCount = 0;
+            this._type = 'text';
+            this._hasError = false;
+        }
+        Object.defineProperty(GraniteInputFieldComponent.prototype, "type", {
+            get: function () {
+                return this._type;
+            },
+            set: function (value) {
+                this._type = value || 'text';
+                this._validateType();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(GraniteInputFieldComponent.prototype, "hasError", {
+            get: function () {
+                return this._hasError;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        GraniteInputFieldComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.value) {
+                this.isEmpty = this.value == null || this.value === '';
+            }
+        };
+        GraniteInputFieldComponent.prototype.ngOnInit = function () {
+            this.isEmpty = this.value == null || this.value === '';
+        };
+        GraniteInputFieldComponent.prototype.togglePassword = function () {
+            if (this.isPasswordToggled) {
+                this.isPasswordToggled = false;
+                this._type = 'password';
+                this.passwordFieldIcon = 'view';
+            }
+            else {
+                this.isPasswordToggled = true;
+                this._type = 'text';
+                this.passwordFieldIcon = 'view-disabled';
+            }
+        };
+        GraniteInputFieldComponent.prototype.onKeyUp = function (event) {
+            var inputEvent = event.target;
+            this.applyCharacterCount(inputEvent.value);
+            this.valueChange.emit(inputEvent.value);
+        };
+        GraniteInputFieldComponent.prototype.onInput = function (event) {
+            var inputEvent = event.target;
+            this.valueChange.emit(inputEvent.value);
+        };
+        GraniteInputFieldComponent.prototype.applyCharacterCount = function (inputString) {
+            if (this.enableCharacterCount) {
+                this.currentCharCount = inputString.length;
+                if (this.currentCharCount > this.maxLength) {
+                    inputString = inputString.slice(0, this.maxLength);
+                    this.currentCharCount = this.maxLength;
+                }
+            }
+        };
+        GraniteInputFieldComponent.prototype._validateType = function () {
+            if (GRANITE_INPUT_INCLUDES.indexOf(this.type) < 0) {
+                this.isSupported = false;
+                throw Error("Input type \"" + this.type + "\" isn't supported by graniteInputField.");
+            }
+        };
+        return GraniteInputFieldComponent;
+    }());
+    GraniteInputFieldComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'granite-input-field',
+                    exportAs: 'graniteInputField',
+                    template: "<div class=\"granite-input-container\" *ngIf=\"isSupported\">\n  <div class=\"granite-input-top-row\">\n    <div class=\"granite-input-prepend\" *ngIf=\"prefixIcon != ''\">\n      <granite-icon class=\"granite-input-prepend-icon\">\n        {{ prefixIcon }}\n      </granite-icon>\n    </div>\n\n    <input\n      [id]=\"id\"\n      [name]=\"name\"\n      [attr.type]=\"type\"\n      [required]=\"isRequired\"\n      [readonly]=\"isReadOnly\"\n      [disabled]=\"isDisabled\"\n      [placeholder]=\"placeholderText\"\n      [value]=\"value\"\n      [maxLength]=\"maxLength\"\n      (keyup)=\"onKeyUp($event)\"\n      (input)=\"onInput($event)\"\n      *ngIf=\"type != 'textArea'\"\n      class=\"granite-input-base\"\n      [class.invalid]=\"isInvalid\"\n      [class.empty]=\"isEmpty\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [attr.aria-required]=\"isRequired\"\n      [attr.aria-invalid]=\"isInvalid\"\n    />\n\n    <button\n      class=\"granite-input-append\"\n      *ngIf=\"type == 'password' || isPasswordToggled != null\"\n      (click)=\"togglePassword()\"\n    >\n      <granite-icon class=\"granite-input-password-toggle-icon\">\n        {{ passwordFieldIcon }}\n      </granite-icon>\n    </button>\n\n    <textarea\n      [id]=\"id\"\n      [name]=\"name\"\n      [attr.type]=\"type\"\n      [required]=\"isRequired\"\n      [readonly]=\"isReadOnly\"\n      [disabled]=\"isDisabled\"\n      [placeholder]=\"placeholderText\"\n      [value]=\"value\"\n      [maxLength]=\"maxLength\"\n      (keyup)=\"onKeyUp($event)\"\n      (input)=\"onInput($event)\"\n      *ngIf=\"type == 'textArea'\"\n      class=\"granite-input-base granite-text-area\"\n      [class.invalid]=\"isInvalid\"\n      [class.empty]=\"isEmpty\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [attr.aria-required]=\"isRequired\"\n      [attr.aria-invalid]=\"isInvalid\"\n      rows=\"1\"\n    ></textarea>\n  </div>\n\n  <div class=\"granite-input-bottom-row\">\n    <div class=\"granite-input-char-count\" *ngIf=\"enableCharacterCount\">\n      {{ currentCharCount }}/{{ maxLength }}\n    </div>\n  </div>\n\n  <div><br /></div>\n</div>\n",
+                    host: {
+                        class: 'granite-input-field',
+                    },
+                    styles: [":host{transition:all .2s ease-out;width:14.5rem;box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}.granite-input-container{height:2rem;width:inherit;font-size:.75rem}.granite-input-container :hover{box-shadow:0 .0625rem 0 var(--granite-color-focus)}.granite-input-container :hover .granite-input-base::-moz-placeholder{color:var(--granite-color-text)}.granite-input-container :hover .granite-input-base:-ms-input-placeholder{color:var(--granite-color-text)}.granite-input-container :hover .granite-input-base::placeholder{color:var(--granite-color-text)}.granite-input-container :hover .granite-input-base:focus::-moz-placeholder{color:transparent}.granite-input-container :hover .granite-input-base:focus:-ms-input-placeholder{color:transparent}.granite-input-container :hover .granite-input-base:focus::placeholder{color:transparent}.granite-input-container .granite-input-base{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background);padding:.5rem;width:inherit;height:inherit;color:var(--granite-color-text);font:inherit;font-weight:400;line-height:100%}.granite-input-container .granite-input-base.invalid{color:var(--granite-color-signal-failure);box-shadow:0 .0625rem 0 var(--granite-color-signal-failure)}.granite-input-container .granite-input-base:required.empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-base:-moz-read-only{background-color:var(--granite-color-background-variant-2)}.granite-input-container .granite-input-base:read-only{background-color:var(--granite-color-background-variant-2)}.granite-input-container .granite-input-base::-moz-placeholder{color:var(--granite-color-text-hint)}.granite-input-container .granite-input-base:-ms-input-placeholder{color:var(--granite-color-text-hint)}.granite-input-container .granite-input-base::placeholder{color:var(--granite-color-text-hint)}.granite-input-container .granite-input-base:focus::-moz-placeholder{color:transparent}.granite-input-container .granite-input-base:focus:-ms-input-placeholder{color:transparent}.granite-input-container .granite-input-base:focus::placeholder{color:transparent}.granite-input-container .granite-input-top-row{display:inline-flex;background:var(--granite-color-background);width:inherit;height:inherit}.granite-input-container .granite-input-top-row :focus-within{box-shadow:0 -.0625rem 0 var(--granite-color-focus),-.0625rem 0 0 var(--granite-color-focus),.0625rem 0 0 var(--granite-color-focus),0 .0625rem 0 var(--granite-color-focus)}.granite-input-container .granite-input-top-row :focus-within.invalid{box-shadow:0 -.0625rem 0 var(--granite-color-focus),-.0625rem 0 0 var(--granite-color-focus),.0625rem 0 0 var(--granite-color-focus),0 .0625rem 0 var(--granite-color-signal-failure)}.granite-input-container .granite-input-top-row .granite-text-area{min-width:13.5rem;min-height:2rem}.granite-input-container .granite-input-prepend{display:flex;align-items:center;padding:0 .5rem;background:var(--granite-color-background)}.granite-input-container .granite-input-prepend :hover{box-shadow:none}.granite-input-container .granite-input-prepend .granite-input-prepend-icon{width:1rem;height:1rem}.granite-input-container .granite-input-append{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;-webkit-margin-start:.05rem;margin-inline-start:.05rem;background:var(--granite-color-background);position:relative}.granite-input-container .granite-input-append :hover{box-shadow:none}.granite-input-container .granite-input-append .granite-input-password-toggle-icon{width:-webkit-max-content;width:-moz-max-content;width:max-content;height:-webkit-max-content;height:-moz-max-content;height:max-content}.granite-input-container .granite-input-char-count{background:var(--granite-color-background-warning);border-radius:0 0 .25rem .25rem;padding:.5rem;background-size:contain;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}"]
+                },] }
+    ];
+    GraniteInputFieldComponent.propDecorators = {
+        id: [{ type: core.Input }],
+        name: [{ type: core.Input }],
+        value: [{ type: core.Input }],
+        isRequired: [{ type: core.Input }],
+        isReadOnly: [{ type: core.Input }],
+        isInvalid: [{ type: core.Input }],
+        isDisabled: [{ type: core.Input }],
+        placeholderText: [{ type: core.Input }],
+        prefixIcon: [{ type: core.Input }],
+        maxLength: [{ type: core.Input }],
+        enableCharacterCount: [{ type: core.Input }],
+        ariaLabel: [{ type: core.Input, args: ['aria-label',] }],
+        ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }],
+        valueChange: [{ type: core.Output }],
+        type: [{ type: core.Input }]
+    };
+
+    var GraniteInputFieldModule = /** @class */ (function () {
+        function GraniteInputFieldModule() {
+        }
+        return GraniteInputFieldModule;
+    }());
+    GraniteInputFieldModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [common.CommonModule, GraniteIconModule, GraniteButtonModule],
+                    declarations: [GraniteInputFieldComponent],
+                    exports: [GraniteInputFieldComponent],
+                },] }
+    ];
+
     var ɵ0 = deviceDesktop.output;
     /**
      * Directive used to tell components and their sub components that client output
@@ -2928,6 +3077,10 @@
                 },] }
     ];
 
+    /*
+     * Public API Surface of ui
+     */
+
     /**
      * Generated bundle index. Do not edit.
      */
@@ -2947,14 +3100,17 @@
     exports.GraniteBadgeModule = GraniteBadgeModule;
     exports.GraniteButtonComponent = GraniteButtonComponent;
     exports.GraniteButtonModule = GraniteButtonModule;
-    exports.GraniteComponentsModule = GraniteComponentsModule;
     exports.GraniteCoreModule = GraniteCoreModule;
     exports.GraniteDividerDirective = GraniteDividerDirective;
+    exports.GraniteFormFieldComponent = GraniteFormFieldComponent;
+    exports.GraniteFormFieldModule = GraniteFormFieldModule;
     exports.GraniteGridComponent = GraniteGridComponent;
     exports.GraniteGridItemComponent = GraniteGridItemComponent;
     exports.GraniteGridModule = GraniteGridModule;
     exports.GraniteIconComponent = GraniteIconComponent;
     exports.GraniteIconModule = GraniteIconModule;
+    exports.GraniteInputFieldComponent = GraniteInputFieldComponent;
+    exports.GraniteInputFieldModule = GraniteInputFieldModule;
     exports.GraniteMenuComponent = GraniteMenuComponent;
     exports.GraniteMenuHarness = GraniteMenuHarness;
     exports.GraniteMenuItemComponent = GraniteMenuItemComponent;