@ni/nimble-angular 1.0.0-beta.142 → 1.0.0-beta.146

package/README.md

@@ -10,38 +10,77 @@ NI-styled UI components for Angular applications
 
 ## Getting started
 
-*This guide assumes you have an existing Angular application and are using NPM 7 or greater.*
+The steps to use components from Nimble Angular are similar to using components from any other Angular library. You can see the [Example Client App](/angular-workspace/projects/example-client-app) project for an example.
 
 1. Install Nimble Angular from the [public NPM registry](https://www.npmjs.com/package/@ni/nimble-angular) by running `npm install @ni/nimble-angular`.
-2. The steps to use components from Nimble Angular are similar to using components from any other Angular library. You can see the [Example Client App](/angular-workspace/projects/example-client-app) project for an example.
-   1. Update your `app.module.ts` to import the module for each component you want to use:
-        ```ts
-        import { NimbleDrawerModule } from '@ni/nimble-angular';
-
-        @NgModule ({
-            imports: [
-                NimbleDrawerModule,
-            ]
-        })
-        class AppModule {}
-        ```
-   2. Add the component to your `app.component.html` (or to the template for another component in your application):
-        ```html
-        <nimble-drawer #drawerReference location="right">This is a drawer</nimble-drawer>
-        ```
-   3. If needed, import the Nimble component's directive and types in `app.component.ts` (or the TypeScript file backing another component) to use its programmatic API: 
-        ```ts
-        import { NimbleDrawerDirective } from '@ni/nimble-angular';
-
-        @Component({ /* ... */ })
-        class AppComponent {
-            @ViewChild('drawerReference', { read: NimbleDrawerDirective }) public drawer: NimbleDrawerDirective;
-
-            public openDrawer() {
-                this.drawer.show();
-            }
+
+    *This guide assumes you have an existing Angular application and are using NPM 7 or greater.*
+
+2. Each application should update `app.module.ts` to import the module for `NimbleThemeProviderModule`. Additionally, import modules for the components you want to use:
+
+    ```ts
+    import {
+        NimbleDrawerModule,
+        NimbleThemeProviderModule
+    } from '@ni/nimble-angular';
+
+    @NgModule ({
+        imports: [
+            NimbleDrawerModule,
+            NimbleThemeProviderModule
+        ]
+    })
+    class AppModule {}
+    ```
+
+3. Each application should add the `<nimble-theme-provider>` element to `app.component.html` and set its `theme` attribute. The theme provider has no appearance of its own but defines tokens that are used by descendant components.
+
+    ```html
+    <nimble-theme-provider theme="light">
+        <router-outlet></router-outlet>
+    </nimble-theme-provider>
+    ```
+
+4. Each application should import the Nimble fonts once in the root `src/styles.scss`. Nimble recommends using SCSS for capabilities such as build time property checking.
+
+    ```scss
+    @import '~@ni/nimble-angular/styles/fonts';
+    ```
+
+5. As needed, import the theme-aware design tokens in each SCSS file that will leverage the tokens for other parts of your application (for colors, fonts, etc).
+
+    ```scss
+    @import '~@ni/nimble-angular/styles/tokens';
+
+    .my-element {
+        font-family: $ni-nimble-font-family
+    }
+    ```
+
+    See [the theming documentation in `nimble-components`](/packages/nimble-components/README.md#theming) for more information.
+
+6. As needed, add Nimble components to the templates in your application:
+
+    ```html
+    <nimble-drawer #drawerReference location="right">This is a drawer</nimble-drawer>
+    ```
+
+7. As needed, import the Nimble component's directive and types in your component scripts to use programmatic APIs:
+
+    ```ts
+    import { NimbleDrawerDirective } from '@ni/nimble-angular';
+
+    @Component({ /* ... */ })
+    class AppComponent {
+        @ViewChild('drawerReference', { read: NimbleDrawerDirective }) public drawer: NimbleDrawerDirective;
+
+        public openDrawer() {
+            this.drawer.show();
         }
-        ```
+    }
+    ```
+
+   Note: Nimble components are exposed in Angular as Angular Directives and have the suffix `Directive`.
 
 ### Learn more
 

package/bundles/ni-nimble-angular.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@ni/nimble-components/dist/esm/button/types'), require('@angular/common'), require('@ni/nimble-components/dist/esm/button'), require('@angular/forms'), require('@ni/nimble-components/dist/esm/checkbox'), require('@ni/nimble-components/dist/esm/drawer/types'), require('@ni/nimble-components/dist/esm/drawer'), require('@ni/nimble-components/dist/esm/listbox-option'), require('@ni/nimble-components/dist/esm/menu'), require('@ni/nimble-components/dist/esm/menu-item'), require('@ni/nimble-components/dist/esm/number-field'), require('@ni/nimble-components/dist/esm/select'), require('@ni/nimble-components/dist/esm/tab'), require('@ni/nimble-components/dist/esm/tab-panel'), require('@ni/nimble-components/dist/esm/tabs'), require('@ni/nimble-components/dist/esm/tabs-toolbar'), require('@ni/nimble-components/dist/esm/text-field/types'), require('@ni/nimble-components/dist/esm/text-field'), require('@ni/nimble-components/dist/esm/theme-provider/types'), require('@ni/nimble-components/dist/esm/theme-provider'), require('@ni/nimble-components/dist/esm/tree-item'), require('@ni/nimble-components/dist/esm/tree-view/types'), require('@ni/nimble-components/dist/esm/tree-view'), require('@ni/nimble-components/dist/esm/testing/async-helpers')) :
     typeof define === 'function' && define.amd ? define('@ni/nimble-angular', ['exports', '@angular/core', '@ni/nimble-components/dist/esm/button/types', '@angular/common', '@ni/nimble-components/dist/esm/button', '@angular/forms', '@ni/nimble-components/dist/esm/checkbox', '@ni/nimble-components/dist/esm/drawer/types', '@ni/nimble-components/dist/esm/drawer', '@ni/nimble-components/dist/esm/listbox-option', '@ni/nimble-components/dist/esm/menu', '@ni/nimble-components/dist/esm/menu-item', '@ni/nimble-components/dist/esm/number-field', '@ni/nimble-components/dist/esm/select', '@ni/nimble-components/dist/esm/tab', '@ni/nimble-components/dist/esm/tab-panel', '@ni/nimble-components/dist/esm/tabs', '@ni/nimble-components/dist/esm/tabs-toolbar', '@ni/nimble-components/dist/esm/text-field/types', '@ni/nimble-components/dist/esm/text-field', '@ni/nimble-components/dist/esm/theme-provider/types', '@ni/nimble-components/dist/esm/theme-provider', '@ni/nimble-components/dist/esm/tree-item', '@ni/nimble-components/dist/esm/tree-view/types', '@ni/nimble-components/dist/esm/tree-view', '@ni/nimble-components/dist/esm/testing/async-helpers'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ni = global.ni || {}, global.ni['nimble-angular'] = {}), global.ng.core, global.types, global.ng.common, null, global.ng.forms, null, global.types$1, null, null, null, null, null, null, null, null, null, null, global.types$2, null, global.types$3, null, null, global.types$4, null, global.asyncHelpers));
-}(this, (function (exports, core, types, common, button, forms, checkbox, types$1, drawer, listboxOption, menu, menuItem, numberField, select, tab, tabPanel, tabs, tabsToolbar, types$2, textField, types$3, themeProvider, treeItem, types$4, treeView, asyncHelpers) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ni = global.ni || {}, global.ni["nimble-angular"] = {}), global.ng.core, global.types, global.ng.common, null, global.ng.forms, null, global.types$1, null, null, null, null, null, null, null, null, null, null, global.types$2, null, global.types$3, null, null, global.types$4, null, global.asyncHelpers));
+})(this, (function (exports, core, types, common, button, forms, checkbox, types$1, drawer, listboxOption, menu, menuItem, numberField, select, tab, tabPanel, tabs, tabsToolbar, types$2, textField, types$3, themeProvider, treeItem, types$4, treeView, asyncHelpers) { 'use strict';
 
     /**
      * Conversion helpers for values coming from template attributes or property bindings
@@ -79,6 +79,18 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(NimbleButtonDirective.prototype, "contentHidden", {
+            get: function () {
+                return this.elementRef.nativeElement.contentHidden;
+            },
+            // contentHidden property intentionally maps to the content-hidden attribute
+            // eslint-disable-next-line @angular-eslint/no-input-rename
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'contentHidden', toBooleanProperty(value));
+            },
+            enumerable: false,
+            configurable: true
+        });
         return NimbleButtonDirective;
     }());
     NimbleButtonDirective.decorators = [
@@ -93,7 +105,8 @@
     NimbleButtonDirective.propDecorators = {
         appearance: [{ type: core.Input }],
         disabled: [{ type: core.Input }],
-        type: [{ type: core.Input }]
+        type: [{ type: core.Input }],
+        contentHidden: [{ type: core.Input, args: ['content-hidden',] }]
     };
 
     var NimbleButtonModule = /** @class */ (function () {
@@ -1300,45 +1313,31 @@
 
     Object.defineProperty(exports, 'ButtonAppearance', {
         enumerable: true,
-        get: function () {
-            return types.ButtonAppearance;
-        }
+        get: function () { return types.ButtonAppearance; }
     });
     Object.defineProperty(exports, 'DrawerLocation', {
         enumerable: true,
-        get: function () {
-            return types$1.DrawerLocation;
-        }
+        get: function () { return types$1.DrawerLocation; }
     });
     Object.defineProperty(exports, 'DrawerState', {
         enumerable: true,
-        get: function () {
-            return types$1.DrawerState;
-        }
+        get: function () { return types$1.DrawerState; }
     });
     Object.defineProperty(exports, 'TextFieldType', {
         enumerable: true,
-        get: function () {
-            return types$2.TextFieldType;
-        }
+        get: function () { return types$2.TextFieldType; }
     });
     Object.defineProperty(exports, 'NimbleTheme', {
         enumerable: true,
-        get: function () {
-            return types$3.NimbleTheme;
-        }
+        get: function () { return types$3.NimbleTheme; }
     });
     Object.defineProperty(exports, 'TreeViewSelectionMode', {
         enumerable: true,
-        get: function () {
-            return types$4.TreeViewSelectionMode;
-        }
+        get: function () { return types$4.TreeViewSelectionMode; }
     });
     Object.defineProperty(exports, 'processUpdates', {
         enumerable: true,
-        get: function () {
-            return asyncHelpers.processUpdates;
-        }
+        get: function () { return asyncHelpers.processUpdates; }
     });
     exports.NimbleButtonDirective = NimbleButtonDirective;
     exports.NimbleButtonModule = NimbleButtonModule;
@@ -1380,5 +1379,5 @@
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=ni-nimble-angular.umd.js.map