@daffodil/design 0.40.1 → 0.41.0

package/image/examples/basic-image/basic-image.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class BasicImageComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<BasicImageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BasicImageComponent, "basic-image", never, {}, {}, never, never>;
+}

package/image/examples/basic-image/basic-image.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./basic-image.component";
+import * as i2 from "@daffodil/design";
+export declare class BasicImageModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<BasicImageModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<BasicImageModule, [typeof i1.BasicImageComponent], [typeof i2.DaffImageModule], [typeof i1.BasicImageComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<BasicImageModule>;
+}

package/image/examples/daffodil-design-image-examples.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@daffodil/design/image/examples" />
+export * from './index';

package/image/examples/index.d.ts

@@ -0,0 +1 @@
+export * from './public_api';

package/image/examples/load-image/load-image.component.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+export declare class LoadImageComponent {
+    loaded: boolean;
+    load(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LoadImageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LoadImageComponent, "load-image", never, {}, {}, never, never>;
+}

package/image/examples/load-image/load-image.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./load-image.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@daffodil/design";
+export declare class LoadImageModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<LoadImageModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<LoadImageModule, [typeof i1.LoadImageComponent], [typeof i2.CommonModule, typeof i3.DaffImageModule], [typeof i1.LoadImageComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<LoadImageModule>;
+}

package/image/examples/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@daffodil/design/image/examples",
+  "module": "../../fesm2015/daffodil-design-image-examples.mjs",
+  "es2020": "../../fesm2020/daffodil-design-image-examples.mjs",
+  "esm2020": "../../esm2020/image/examples/daffodil-design-image-examples.mjs",
+  "fesm2020": "../../fesm2020/daffodil-design-image-examples.mjs",
+  "fesm2015": "../../fesm2015/daffodil-design-image-examples.mjs",
+  "typings": "daffodil-design-image-examples.d.ts",
+  "sideEffects": false
+}

package/image/examples/public_api.d.ts

@@ -0,0 +1,2 @@
+import { ComponentExample } from '@daffodil/design';
+export declare const IMAGE_EXAMPLES: ComponentExample[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@daffodil/design",
-  "version": "0.40.1",
+  "version": "0.41.0",
   "author": "Graycore LLC",
   "license": "MIT",
   "bugs": {
@@ -21,7 +21,7 @@
     "@fortawesome/angular-fontawesome": "^0.10.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-solid-svg-icons": "^5.10.0",
-    "rxjs": "6.6.3"
+    "rxjs": "7.5.5"
   },
   "optionalDependencies": {
     "@faker-js/faker": "^5.5.3"
@@ -108,6 +108,14 @@
       "node": "./fesm2015/daffodil-design-hero-examples.mjs",
       "default": "./fesm2020/daffodil-design-hero-examples.mjs"
     },
+    "./image/examples": {
+      "types": "./image/examples/daffodil-design-image-examples.d.ts",
+      "esm2020": "./esm2020/image/examples/daffodil-design-image-examples.mjs",
+      "es2020": "./fesm2020/daffodil-design-image-examples.mjs",
+      "es2015": "./fesm2015/daffodil-design-image-examples.mjs",
+      "node": "./fesm2015/daffodil-design-image-examples.mjs",
+      "default": "./fesm2020/daffodil-design-image-examples.mjs"
+    },
     "./list/examples": {
       "types": "./list/examples/daffodil-design-list-examples.d.ts",
       "esm2020": "./esm2020/list/examples/daffodil-design-list-examples.mjs",

package/quantity-field/examples/public_api.d.ts

@@ -1,9 +1,10 @@
-export { QUANTITY_FIELD_EXAMPLES } from './examples';
-export { BasicQuantityFieldModule } from './basic/basic-quantity-field.module';
-export { BasicQuantityFieldComponent } from './basic/basic-quantity-field.component';
-export { CustomRangeQuantityFieldModule } from './customRange/custom-range-quantity-field.module';
-export { CustomRangeQuantityFieldComponent } from './customRange/custom-range-quantity-field.component';
-export { DisabledQuantityFieldModule } from './disabled/disabled-quantity-field.module';
-export { DisabledQuantityFieldComponent } from './disabled/disabled-quantity-field.component';
-export { SelectMaxQuantityFieldModule } from './selectMax/select-max-quantity-field.module';
-export { SelectMaxQuantityFieldComponent } from './selectMax/select-max-quantity-field.component';
+import { BasicQuantityFieldComponent } from './basic-quantity-field/basic-quantity-field.component';
+import { CustomRangeQuantityFieldComponent } from './custom-range-quantity-field/custom-range-quantity-field.component';
+import { DisabledQuantityFieldComponent } from './disabled-quantity-field/disabled-quantity-field.component';
+import { SelectMaxQuantityFieldComponent } from './select-max-quantity-field/select-max-quantity-field.component';
+export { BasicQuantityFieldModule } from './basic-quantity-field/basic-quantity-field.module';
+export { CustomRangeQuantityFieldModule } from './custom-range-quantity-field/custom-range-quantity-field.module';
+export { DisabledQuantityFieldModule } from './disabled-quantity-field/disabled-quantity-field.module';
+export { SelectMaxQuantityFieldModule } from './select-max-quantity-field/select-max-quantity-field.module';
+export declare const QUANTITY_FIELD_EXAMPLES: (typeof BasicQuantityFieldComponent)[];
+export { BasicQuantityFieldComponent, CustomRangeQuantityFieldComponent, DisabledQuantityFieldComponent, SelectMaxQuantityFieldComponent, };

package/src/atoms/form/quantity-field/README.md

@@ -1,25 +1,24 @@
 # Quantity Field
-DaffQuantityFieldComponent is a form control element that switches between a native select and input element. It is intended for use with cart item and product quantities. The maximum number accepted in a quantity select is 10 by default. It will switch to a quantity input if 10+ is selected.
+Quantity field is a form control element that switches between a native select and input element.
 
-The select max number is configurable. See below usage.
+## Overview
+Quantity field is intended for use with cart items and product quantities. The maximum number accepted in a quantity select is configurable and set to 10 by default. It will switch to a quantity input if 10+ is selected.
 
 ## Range Limits
-The default allowed range of numbers is 1 to 500. This can be changed by passing in the desired min and max values as inputs. Note that this does not validate the actual input, it merely informs the select which options it should generate and sets the input's min and max attributes. See [input#min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#min) and [input#max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#max) for more info.
+The default allowed range of numbers is 1 to 500. This can be changed by passing in the desired min and max values as inputs. Note that this does not validate the actual input. It merely informs the select which options it should generate and sets the input's min and max attributes. See [input#min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#min) and [input#max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#max) for more information.
 
 ## Usage
 
-### With Form Control
+### Basic
+<design-land-example-viewer-container example="basic-quantity-field"></design-land-example-viewer-container>
 
-```html
-<daff-quantity-field [formControl]="control"></daff-quantity-field>
-```
+### Disabled
+<design-land-example-viewer-container example="disabled-quantity-field"></design-land-example-viewer-container>
 
-### Custom Max Select Value
-```html
-<daff-quantity-field [selectMax]="15"></daff-quantity-field>
-```
+### Custom Select Max Value (15)
+The maximum value at which the field will switch to using an input is configurable.
+<design-land-example-viewer-container example="select-max-quantity-field"></design-land-example-viewer-container>
 
-### Custom Range Limits
-```html
-<daff-quantity-field [min]="5" [max]="50"></daff-quantity-field>
-```
+### Custom Range Limits (5 - 50)
+Custom range limits is the absolute minimum and maximum values can be specified.
+<design-land-example-viewer-container example="custom-range-quantity-field"></design-land-example-viewer-container>

package/src/atoms/image/README.md

@@ -1,21 +1,31 @@
 # Image
-`<daff-image>` uses the native HTML `<img>` tag to place responsive images on a page. It helps to prevent content jumping while images are loading.
+Image utilizes the native HTML `<img>` element to display responsive images on a page and prevent content jumping while images are loading. `<daff-image>` is an opinionated version that encourages friendly end-user usage.
 
 ## Attributes
-The `alt`, `width`, and `height` attributes must be defined. If they are not defined, errors will appear.
+The `src`, `width`, `height`, and `alt` attributes must be defined. An error will be thrown any of these attributes are missing.
 
-`width` and `height` are necessary to calculate the aspect ratio of an image, used for the [aspect ratio padding trick](https://css-tricks.com/aspect-ratio-boxes/) that helps to prevent content jumping while images are loaded.
+`width` and `height` are required to calculate the aspect ratio of an image, used for the [aspect ratio padding trick](https://css-tricks.com/aspect-ratio-boxes/) that helps to prevent content jumping while images are loading. The `width` and `height` values are rendered as pixels.
 
 ## Errors
 
-### DaffImageComponent must have a defined alt attribute.
+**DaffImageComponent must have a defined src attribute.**
+This error appears when `<daff-image>` is missing a `src` attribute.
+
+**DaffImageComponent must have a defined alt attribute.**
 This error appears when `<daff-image>` is missing an `alt` attribute. The `alt` tag specifies an alternate text for an image.
 
-### DaffImageComponent must have a defined width attribute.
+**DaffImageComponent must have a defined width attribute.**
 This error appears when `<daff-image>` is missing a `width` attribute. The width must be defined in order to correctly calculate the aspect ratio of the image.
 
-### DaffImageComponent must have a defined height attribute.
+**DaffImageComponent must have a defined height attribute.**
 This error appears when `<daff-image>` is missing a `height` attribute. The height must be defined in order to correctly calculate the aspect ratio of the image.
 
+## Accessbility
+Images should be given a meaningful description using the native `alt` attribute to ensure an accessible experience by default. An error will be thrown if the `alt` attribute is missing.
+
 ## Usage
-`<daff-image src="/assets/card/uber-logo.svg" alt="Uber Logo" width="300" height="119"></daff-image>`
+### Basic Image
+<design-land-example-viewer-container example="load-image"></design-land-example-viewer-container>
+
+### Image Load Output
+<design-land-example-viewer-container example="load-image"></design-land-example-viewer-container>

package/esm2020/quantity-field/examples/examples.mjs

@@ -1,11 +0,0 @@
-import { BasicQuantityFieldComponent } from './basic/basic-quantity-field.component';
-import { CustomRangeQuantityFieldComponent } from './customRange/custom-range-quantity-field.component';
-import { DisabledQuantityFieldComponent } from './disabled/disabled-quantity-field.component';
-import { SelectMaxQuantityFieldComponent } from './selectMax/select-max-quantity-field.component';
-export const QUANTITY_FIELD_EXAMPLES = [
-    BasicQuantityFieldComponent,
-    CustomRangeQuantityFieldComponent,
-    DisabledQuantityFieldComponent,
-    SelectMaxQuantityFieldComponent,
-];
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhhbXBsZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL2Rlc2lnbi9xdWFudGl0eS1maWVsZC9leGFtcGxlcy9zcmMvZXhhbXBsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sd0NBQXdDLENBQUM7QUFDckYsT0FBTyxFQUFFLGlDQUFpQyxFQUFFLE1BQU0scURBQXFELENBQUM7QUFDeEcsT0FBTyxFQUFFLDhCQUE4QixFQUFFLE1BQU0sOENBQThDLENBQUM7QUFDOUYsT0FBTyxFQUFFLCtCQUErQixFQUFFLE1BQU0saURBQWlELENBQUM7QUFFbEcsTUFBTSxDQUFDLE1BQU0sdUJBQXVCLEdBQUc7SUFDckMsMkJBQTJCO0lBQzNCLGlDQUFpQztJQUNqQyw4QkFBOEI7SUFDOUIsK0JBQStCO0NBQ2hDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCYXNpY1F1YW50aXR5RmllbGRDb21wb25lbnQgfSBmcm9tICcuL2Jhc2ljL2Jhc2ljLXF1YW50aXR5LWZpZWxkLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBDdXN0b21SYW5nZVF1YW50aXR5RmllbGRDb21wb25lbnQgfSBmcm9tICcuL2N1c3RvbVJhbmdlL2N1c3RvbS1yYW5nZS1xdWFudGl0eS1maWVsZC5jb21wb25lbnQnO1xuaW1wb3J0IHsgRGlzYWJsZWRRdWFudGl0eUZpZWxkQ29tcG9uZW50IH0gZnJvbSAnLi9kaXNhYmxlZC9kaXNhYmxlZC1xdWFudGl0eS1maWVsZC5jb21wb25lbnQnO1xuaW1wb3J0IHsgU2VsZWN0TWF4UXVhbnRpdHlGaWVsZENvbXBvbmVudCB9IGZyb20gJy4vc2VsZWN0TWF4L3NlbGVjdC1tYXgtcXVhbnRpdHktZmllbGQuY29tcG9uZW50JztcblxuZXhwb3J0IGNvbnN0IFFVQU5USVRZX0ZJRUxEX0VYQU1QTEVTID0gW1xuICBCYXNpY1F1YW50aXR5RmllbGRDb21wb25lbnQsXG4gIEN1c3RvbVJhbmdlUXVhbnRpdHlGaWVsZENvbXBvbmVudCxcbiAgRGlzYWJsZWRRdWFudGl0eUZpZWxkQ29tcG9uZW50LFxuICBTZWxlY3RNYXhRdWFudGl0eUZpZWxkQ29tcG9uZW50LFxuXTtcbiJdfQ==

package/quantity-field/examples/examples.d.ts

@@ -1,2 +0,0 @@
-import { BasicQuantityFieldComponent } from './basic/basic-quantity-field.component';
-export declare const QUANTITY_FIELD_EXAMPLES: (typeof BasicQuantityFieldComponent)[];