@daffodil/design 0.39.12 → 0.41.0

package/src/molecules/callout/README.md

@@ -0,0 +1,54 @@
+# Callout
+Callout is a versatile component that can be used to easily highlight a piece of content.
+
+## Overview
+Callouts can be used multiple times on a page. It's a flexible and extensible component that includes pre-styled content containers. It can be used alongside a product list to highlight a set of products, quickly lay out an accordion, showcase a set of features, etc.
+
+## Supported Content Types
+A `<daff-callout>` supports transclusion of any content and includes stylized `icon`, `tagline`, `title`, `subtitle`, and `body` content containers.
+
+### Icon
+`[daffCalloutIcon]` is intended for visual or branding reinforcement. It should not be used for actionable icons.
+
+### Tagline
+Callout taglines are used by adding `[daffCalloutTagline]` to a `<p>` tag. It's intended to supplement the title by providing a short, memorable description.
+
+### Title
+Callout titles are used by adding `[daffCalloutTitle]` to a `<h*>` tag.
+
+### Subtitle
+Callout subtitles are used by adding `[daffCalloutSubtitle]` to a `<p>` tag.
+
+### Body
+`[daffCalloutBody]` is a wrapper container that can be used to place all additional components and content within a `<daff-callout>` and should only be used once. The body container allows for a ton of control and customization because it's not affected by any of callout's properties and only serves as a wrapping and spacing container.
+
+## Theming
+The default background color of a callout is light gray, but it can be updated to one of the supported colors by using the `color` property.
+
+Supported colors: `primary | secondary | tertiary | black | white | theme | theme-contrast`
+
+<design-land-example-viewer-container example="callout-theming"></design-land-example-viewer-container>
+
+## Text Alignment
+Align callout-specific text with the `textAlignment` property. `textAlignment` will not cascade the alignment styles down to `[daffCalloutBody]` or any additional components or elements that is placed inside of a callout. `textAlignment` is set to `left` by default.
+
+Supported alignments: `left | center | right`
+
+<design-land-example-viewer-container example="callout-text-alignment"></design-land-example-viewer-container>
+
+## Compact Callouts
+Callouts are available in a `compact` mode, which decreases the overall padding of the callout container to suit UIs that require less negative space. To enable the mode, set the `compact` property on `<daff-callout>`.
+
+<design-land-example-viewer-container example="compact-callout"></design-land-example-viewer-container>
+
+## Gridded Callouts
+Callouts are flexible enough to support grids within them.
+
+### Callout with Two Columns
+<design-land-example-viewer-container example="callout-with-grid"></design-land-example-viewer-container>
+
+## Layout
+The `layout` property is deprecated and replaced by the [`textAlignment`](#text-alignment) property.
+
+## Size
+The `size` property is deprecated and replaced by the [`compact`](#compact-callouts) property.

package/src/molecules/card/README.md

@@ -0,0 +1,60 @@
+# Card
+Cards are versatile content containers that contain content and actions to convey information about a single subject.
+
+## Overview
+There are three types of cards: default (filled), raised, and stroked. Cards can contain anything from images, blocks of text, lists, accordions, and other components.
+
+## Basic Card
+The example below is a default, filled card that includes all of a card's pre-styled elements and a fixed width. Cards naturally do not have a fixed width, so they'll be 100% wide by default. The width is changeable with custom CSS
+
+<design-land-example-viewer-container example="basic-card"></design-land-example-viewer-container>
+
+## Supported Content Types
+A card supports a wide variety of content and includes minimally pre-styled `image`, `icon`, `tagline`, `title`, `content`, and `actions` content containers.
+
+### Image
+Image can be added to a card by using the `daffCardImage` attribute. It stretches the image to a card's defined width and ensures that its border radius is flush with a card.
+
+### Icon
+Icon can be added to a card by using the `daffCardIcon` attribute. It's intended for visual or branding reinforcement and should not be used for actionable icons.
+
+### Tagline
+Tagline can be added to a card by using the `daffCardTagline` attribute. It's intended to supplement the title by providing a short, memorable description.
+
+### Title
+Title can be added to a card by using the `daffCardTitle` attribute.
+
+### Content
+Content can be added to a card by using the `daffCardContent` attribute and should only be used once. It's a wrapper container that can be used to place all additional components and text content within a card. The content container allows for a ton of control and customization because it's not affected by any of card's properties and only serves as a wrapping and spacing container.
+
+### Actions
+Buttons can be added to a card by using the `daffCardActions` attribute. This container will always be positioned at the bottom of a card.
+
+## Properties
+
+### Orientation
+Orientation dictates how a card's content is stacked — `vertical` or `horizontal`. Cards are oriented vertically by default. The orientation of a card can be defined or updated by using the `orientation` property. Horizontal cards will stack vertically on smaller screens due to size constraints.
+
+<design-land-example-viewer-container example="card-orientation"></design-land-example-viewer-container>
+
+## Linkable Card
+Cards can be linkable by adding the component selector to the `<a>` tag. All card types are linkable.
+
+<design-land-example-viewer-container example="linkable-card"></design-land-example-viewer-container>
+
+## Raised Card
+A raised card adds elevation to the default card.
+
+<design-land-example-viewer-container example="raised-card"></design-land-example-viewer-container>
+
+## Stroked Card
+A stroked card adds a border to the default card.
+
+<design-land-example-viewer-container example="stroked-card"></design-land-example-viewer-container>
+
+### Theming
+Cards will use the base color of your application to display the default background and/or border color. A card's colors can be defined by using the `color` property.
+
+Supported colors: `primary | secondary | tertiary | white | black | theme | theme-contrast`
+
+<design-land-example-viewer-container example="card-theming"></design-land-example-viewer-container>

package/src/molecules/feature/README.md

@@ -0,0 +1,48 @@
+# Feature Component
+The feature component is deprecated.
+
+The `feature` component can be used to display feature-related content on a page.
+
+## Supported Content Types
+
+A `daff-feature` transcludes:
+
+- `[daffFeatureIcon]`
+- `[daffFeatureSubheader]`
+- `[daffFeatureTitle]`
+- `[daffFeatureSubtitle]`
+- Any additional components
+
+### Icon
+
+- Feature icon is used by adding `[daffFeatureIcon]` to any tag.
+
+### Subheader
+
+- Feature subheader is used by adding `[daffFeatureSubheader]` to any tag.
+
+### Title
+
+- Feature title is used by adding `[daffFeatureTitle]` to any tag.
+
+### Subtitle
+
+- Feature subtitle is used by adding `[daffFeatureSubtitle]` to any tag.
+
+## Modes
+
+- To define a feature mode, add `mode="[value]"` to the `<daff-feature>` tag.
+- The default mode is `normal`
+- Values: `compact` and `normal`
+
+### Usage
+
+```
+<daff-feature mode="compact">
+  <img daffFeatureIcon src="" />
+  <p daffFeatureSubheader>Subheader</p>
+  <h4 daffFeatureTitle>Title</h4>
+  <p daffFeatureSubtitle>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  Some other content
+</daff-feature>
+```

package/src/molecules/hero/README.md

@@ -0,0 +1,54 @@
+# Hero
+Hero is a top level container that is large and captivating. It should only be used once as the first container on any given page.
+
+## Overview
+Heros are the first thing users see on a page and are designed to catch their attention. It's a flexible and extensible component that includes pre-styled content containers.
+
+## Supported Content Types
+A `daff-hero` supports transclusion of any content and includes stylized `icon`, `tagline`, `title`, `subtitle`, and `body` content containers.
+
+### Icon
+`[DaffHeroIcon]` is intended for visual or branding reinforcement. It should not be used for actionable icons.
+
+### Tagline
+Hero taglines are used by adding `[daffHeroTagline]` to a `<p>` tag. It's intended to supplement the title by providing a short, memorable description.
+
+### Title
+Hero titles are used by adding `[daffHeroTitle]` to a `<h1>` tag.
+
+### Subtitle
+Hero subtitles are used by adding `[daffHeroSubtitle]` to a `<h2>` tag.
+
+### Body
+`[daffHeroBody]` is a wrapper container that can be used to place all additional components and content within a `<daff-hero>` and should only be used once. The body container allows for a ton of control and customization because it's not affected by any of hero's properties and only serves as a wrapping and spacing container.
+
+## Theming
+The default background color of a hero is light gray, but it can be updated to one of the supported colors by using the `color` property.
+
+Supported colors: `primary | secondary | tertiary | black | white | theme | theme-contrast`
+
+<design-land-example-viewer-container example="hero-theming"></design-land-example-viewer-container>
+
+## Text Alignment
+Align hero-specific text with the `textAlignment` property. `textAlignment` will not cascade the alignment styles down to `[daffHeroBody]` or any additional components or elements that are placed inside of a hero. `textAlignment` is set to `left` by default.
+
+Supported alignments: `left | center | right`
+
+<design-land-example-viewer-container example="hero-text-alignment"></design-land-example-viewer-container>
+
+## Compact Heroes
+Heroes are available in a `compact` mode, which decreases the overall padding of the hero container to suit UIs that require less negative space. To enable the mode, set the `compact` property on `<daff-hero>`.</p>
+
+<design-land-example-viewer-container example="compact-hero"></design-land-example-viewer-container>
+
+## Gridded Heroes
+Heros are flexible enough to support grids within them.
+
+### Hero with Two Columns
+<design-land-example-viewer-container example="hero-with-grid"></design-land-example-viewer-container>
+
+## Size
+The `size` property will be deprecated in v1.0.0. `compact` will be replaced by the `DaffCompactable` interface.
+
+## Layout
+The `layout` property will be deprecated in v1.0.0

package/src/molecules/image-gallery/README.md

@@ -0,0 +1,31 @@
+# Daff Image Gallery Component
+The Image Gallery component is deprecated.
+
+The daff image gallery component wraps img elements to display them in a gallery. It takes a list of imgs and an active image, and the selected image is controlled by the user. The position of the list of images changes depending on screen size.
+
+Images need to be wrapped in daff-gallery-image components, so the images can be properly wrapped and sized. The active image should be the same as the selected image, and it needs to have the attribute `daff-active-image`.
+
+## Daff Gallery Image Inputs
+
+### select
+
+```
+- boolean added for the selected image
+```
+
+## Usage
+
+```
+<daff-image-gallery>
+  <img daff-active-image src="{{selectedImage.url}}">
+  <daff-gallery-image 
+    *ngFor="let image of images"
+    [selected]="image.url === selectedImage">
+
+    <img alt="{{image.label}}"
+      src="{{image.url}}" 
+      (click)="selectedImage = image">
+
+  </daff-gallery-image>
+</daff-image-gallery>
+```

package/src/molecules/image-list/README.md

@@ -0,0 +1,14 @@
+# Daff Image List Component
+
+The daff image list component wraps elements (usually imgs) to display them in a list. The position of the list of images is vertical when the screen size is larger than 1024px, and is horizontal when the smaller.
+
+## Usage
+
+```
+<daff-image-list>
+  <img alt="label" src="url">
+  <img alt="label" src="url">
+  <img alt="label" src="url">
+  <img alt="label" src="url">
+</daff-image-list>
+```

package/src/molecules/link-set/README.md

@@ -0,0 +1,44 @@
+# Link Set
+`<daff-link-set>` is a component for displaying two or more `[daff-link-set-item]`s. `<daff-link-set>`s can be nested.
+
+## Supported Content Types
+A `<daff-link-set>` transcludes:
+* `[daffLinkSetHeading]`
+* `[daffLinkSetSubheading]`
+* `[daff-link-set-item]` component
+
+### Heading
+A link set heading is used by adding `[daffLinkSetHeading]` to any tag. This is used to define the heading of a top level link set.
+
+### Subheading
+A link set subheading is used by adding `[daffLinkSetSubheading]` to any tag. This is helpful to define the heading of a nested link set that is not actionable.
+
+### Styling links within a link set
+Use the `[daff-link-set-item]` component to style links within a link set.
+
+### Usage
+```
+<h4>Default Link Set</h4>
+<daff-link-set class="docs-link-set">
+  <a href="#" daff-link-set-item daffLinkSetHeading>Link Set Heading</a>
+  <a href="#" daff-link-set-item>Link</a>
+  <a href="#" daff-link-set-item>Link</a>
+  <a href="#" daff-link-set-item>Link</a>
+</daff-link-set>
+
+<h4>Nested Link Set</h4>
+<daff-link-set>
+  <a href="#" daff-link-set-item daffLinkSetHeading>Link Set Heading</a>
+  <a href="#" daff-link-set-item>Link</a>
+  <div daffLinkSetSubheading>Link Set Subheading</div>
+  <daff-link-set>
+    <a href="#" daff-link-set-item>Link</a>
+    <a href="#" daff-link-set-item>Link</a>
+    <a href="#" daff-link-set-item>Link</a>
+    <a href="#" daff-link-set-item>Link</a>
+  </daff-link-set>
+  <a href="#" daff-link-set-item>Link</a>
+  <a href="#" daff-link-set-item>Link</a>
+  <a href="#" daff-link-set-item>Link</a>
+</daff-link-set>
+```

package/src/molecules/list/README.md

@@ -0,0 +1,69 @@
+# List Component
+
+The `<daff-list>` component can be used to display a series of line items.
+
+## Basic List
+
+- Consists of multiple `<daff-list-item>`s
+
+### Usage
+
+```
+<daff-list>
+  <h3 daffListSubheader>Lorem Ipsum</h3>
+  <daff-list-item>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</daff-list-item>
+  <daff-list-item>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</daff-list-item>
+  <daff-list-item>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</daff-list-item>
+</daff-list>
+```
+
+## Link List (Deprecated)
+
+- `type="link"` is used for navigation lists
+
+### Usage
+
+```
+<daff-list type="link">
+  <h3 daffListSubheader>List Subheader</h3>
+  <daff-list-item><a href="#">List Item</a></daff-list-item>
+  <daff-list-item><a href="#">List Item</a></daff-list-item>
+  <daff-list-item><a href="#">List Item</a></daff-list-item>
+  <daff-list-item><a href="#">List Item</a></daff-list-item>
+  <daff-list-item><a href="#">List Item</a></daff-list-item>
+</daff-list>
+```
+
+## Multi-line List (Deprecated)
+
+- `type="multi-line"` allows you to have multiple lines per `daff-list-item`.
+
+### Usage
+
+```
+<daff-list type="multi-line">
+  <daff-list-item>
+    <h4>Lorem ipsum</h4>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula lacinia tellus quis bibendum.</p>
+  </daff-list-item>
+  <daff-list-item>
+    <h4>Lorem ipsum</h4>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula lacinia tellus quis bibendum.</p>
+  </daff-list-item>
+  <daff-list-item>
+    <h4>Lorem ipsum</h4>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula lacinia tellus quis bibendum.</p>
+  </daff-list-item>
+</daff-list>
+```
+
+### Usage
+
+```
+<daff-list>
+  <daff-list-item>
+    <i class="fab fa-twitter" daffListItemIcon></i>
+    <h4>Lorem ipsum</h4>
+  </daff-list-item>
+</daff-list>
+```

package/src/molecules/media-gallery/README.md

@@ -0,0 +1,19 @@
+# Media Gallery
+`<daff-media-gallery>` is used to display a group of `[daffThumbnail]`s in a gallery format. Media galleries are useful to showcase multiple images related to a single product or topic.
+
+## Thumbnail
+`[daffThumbnail]` should be used as a directive with `<daff-image>`. [View Image Documentation](/libs/design/src/atoms/image/README.md)
+
+It should never be used as a standalone component. The first thumbnail is selected by default and dynamically rendered as the primary image by utilizing the `<daff-media-renderer>` component. The selected thumbnail can be controlled by the enduser, and the position of the list of thumbnails is dependent on the screen size.
+
+<design-land-example-viewer-container example="basic-media-gallery"></design-land-example-viewer-container>
+
+## Image Aspect Ratio
+It's recommended to utilize the same aspect ratio for all images in the same media gallery. Otherwise, the height and width of the media gallery may change with every different aspect ratio presented by the selected thumbnail as show in the example.
+
+The thumbnail dimension is set to `80x80` pixels, so the recommended aspect ratio is `1:1`. However, it is not required since the thumbnail will horizontally and vertically center align images within a thumbnail.
+
+<design-land-example-viewer-container example="mismatched-sizes-media-gallery"></design-land-example-viewer-container>
+
+## Accessibility
+Accessibility considerations for media gallery is handled by the `DaffImageComponent`. The `alt` attribute must be defined in `<daff-image>`. It specifies an alternate text for an image. An error will appear if it's not defined. This is important because it allows screen readers to describe what's in the image for visually impaired people. [View Image Documentation](/libs/design/src/atoms/image/README.md)

package/src/molecules/modal/README.md

@@ -0,0 +1,47 @@
+# Modal Component
+
+The `DaffModalComponent` is a dynamically rendered component that floats above the rest of a page's content. It can be especially useful for interstitials that require additional user feedback.
+
+## Usage
+
+`DaffModalComponent` relies on using the `entryComponents` of the particular Angular `@NgModule`. To use the features of the `DaffModalComponent`:
+
+* Import the `DaffModalModule` as you would with any other `@daffodil/design` component
+* Add the component that you want rendered inside the modal to your `@NgModule`'s `entryComponents`
+
+```ts
+my.module.ts
+
+@NgModule({
+  declarations: [
+    MyModalContentComponent,
+  ],
+  imports: [
+    DaffModalModule,
+  ],
+  entryComponents: [
+    MyModalContentComponent
+  ]
+})
+export class ModalModule { 
+}
+```
+
+Once your `@NgModule` has been configured, you can take advantage of the `DaffModalService` that is provided by the `DaffModalModule` to `open` and `close` the instance of the `DaffModalComponent`. 
+
+```ts
+my-other.component.ts
+
+@Component({
+  template: '<button (click)="showModal()"></button>'
+})
+export class MyOtherComponent {
+  constructor(private modalService: DaffModalService) {}
+
+  showModal() {
+    this.modalService.open(MyModalContentComponent);
+  }
+}
+```
+
+> You will likely never render the `DaffModalComponent` directly like you would with other components due to its dynamic nature.

package/src/molecules/navbar/README.md

@@ -0,0 +1,41 @@
+# Navbar
+Navbar is a flexible and extensible, horizontally stacked component intended for major blocks of navigation links.
+
+## Overview
+The navbar contains minimal layout styles, allowing the content within it to be fluid and customizable. It utilizes the `flex` display and is customizable with all the flexbox properties. It's required to be used with the native HTML `<nav>` element to ensure an accessible experience by default.
+
+## Basic Navbar
+<design-land-example-viewer-container example="basic-navbar"></design-land-example-viewer-container>
+
+## Theming
+The default background color of a navbar is light gray, but it can be updated to one of the supported colors by using the `color` property.
+
+Supported colors: `primary | secondary | tertiary | black | white | theme | theme-contrast`
+
+<design-land-example-viewer-container example="navbar-theming"></design-land-example-viewer-container>
+
+## Contained Navbar
+A navbar can be contained to a specific width by using `<daff-container>`. [View Container Documentation](/libs/design/src/atoms/container/README.md) The layout styles for the navbar will be passed down to the container by utilizing the `daffManageContainerLayoutMixin`.
+
+<design-land-example-viewer-container example="contained-navbar"></design-land-example-viewer-container>
+
+## Raised Navbar
+The raised property adds elevation to a navbar. To enable it, set the `raised` property on `<nav daff-navbar>`.
+
+<design-land-example-viewer-container example="raised-navbar"></design-land-example-viewer-container>
+
+## Accessibility
+Daffodil enforces the usage of the native `<nav>` HTML element to ensure an accessible experience by default. If more than one navbar is used, every navbar should be given a meaningful label by using the `aria-labelledby` attribute.
+
+### Example
+```html
+<nav daff-navbar aria-labelledby="main-navigation">
+<!--  navigation items -->
+</nav>
+
+<footer>
+  <nav daff-navbar aria-labelledby="footer-navigation">
+  <!--  navigation items -->
+  </nav>
+</footer>
+```

package/src/molecules/paginator/README.md

@@ -0,0 +1,11 @@
+# Paginator
+Paginator is used to break up large amounts of content into multiple pages, enabling users to easily navigate between pages of content.
+
+## Truncation
+An ellipsis is used to truncate pages when the number of pages exceed the maximum display limit. Double truncation appears when the current page is separated by more than three pages from both the first and last page.
+
+## Accessibility
+Use `aria-label` or `aria-labelledby` to give a meaningful label to `daff-paginator` that describes the content controlled by the paginator. If more than one paginator component is used on a page, each will need a unique `aria-label`.
+
+## Usage
+<design-land-example-viewer-container example="basic-paginator"></design-land-example-viewer-container>

package/src/molecules/sidebar/README.md

@@ -0,0 +1,10 @@
+# Sidebar Component
+
+## Usage
+
+```
+<daff-sidebar-viewport>
+    <daff-sidebar></daff-sidebar>
+    <p>Some Content</p>
+</daff-sidebar-viewport>
+```

package/src/scss/README.md

@@ -0,0 +1,7 @@
+# `@daffodil/design` SCSS Utilities
+
+`@daffodil/design` provides several utility files for rapid application development.
+
+- `daff-util.scss` - A utility library containing things like breakpoints and sass language additions
+- `daff-typography.scss` - A typographic library
+- `daff-theme.scss` - A utility library that allows you to theme `@daffodil/design` components

package/accordion/examples/daffodil-design-accordion-examples.metadata.json

@@ -1 +0,0 @@
-{"__symbolic":"module","version":4,"metadata":{"ACCORDION_EXAMPLES":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"BasicAccordionModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@daffodil/design","name":"DaffAccordionModule","line":15,"character":4}]}]}],"members":{}},"NavAccordionModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵb"}],"exports":[{"__symbolic":"reference","name":"ɵb"}],"imports":[{"__symbolic":"reference","module":"@daffodil/design","name":"DaffAccordionModule","line":15,"character":4}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"basic-accordion","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":9,"character":19},"member":"OnPush"},"template":"<daff-accordion>\n\t<daff-accordion-item initiallyActive=\"true\">\n\t\t<h3 daffAccordionItemTitle>Details</h3>\n\t\t<div daffAccordionItemContent>\n\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo \n\t\t\t\tlacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, \n\t\t\t\tet maximus quam efficitur sed. Maecenas iaculis nisl neque, maximus sagittis libero sagittis eget.\n\t\t\t\t<a>Learn More.</a>\n\t\t</div>\n\t</daff-accordion-item>\n\t<daff-accordion-item>\n\t\t<h3 daffAccordionItemTitle>Details</h3>\n\t\t<div daffAccordionItemContent>\n\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo \n\t\t\t\tlacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, \n\t\t\t\tet maximus quam efficitur sed. Maecenas iaculis nisl neque, maximus sagittis libero sagittis eget.\n\t\t\t\t<a>Learn More.</a>\n\t\t</div>\n\t</daff-accordion-item>\n\t<daff-accordion-item>\n\t\t<h3 daffAccordionItemTitle>Details</h3>\n\t\t<div daffAccordionItemContent>\n\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo \n\t\t\t\tlacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, \n\t\t\t\tet maximus quam efficitur sed. Maecenas iaculis nisl neque, maximus sagittis libero sagittis eget.\n\t\t\t\t<a>Learn More.</a>\n\t\t</div>\n\t</daff-accordion-item>\n</daff-accordion>\n"}]}],"members":{}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"nav-accordion","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":9,"character":19},"member":"OnPush"},"template":"<daff-accordion>\n\t<daff-nav-accordion-item>\n\t\t<h3 daffAccordionItemTitle>Details</h3>\n\t\t<daff-nav-accordion-item>\n\t\t\t<h3 daffAccordionItemTitle>Details</h3>\n\t\t\t<daff-nav-accordion-item>\n\t\t\t\t<a daffAccordionItemTitle>Details</a>\n\t\t\t</daff-nav-accordion-item>\n\t\t\t<daff-nav-accordion-item>\n\t\t\t\t<a daffAccordionItemTitle>Details</a>\n\t\t\t</daff-nav-accordion-item>\n\t\t</daff-nav-accordion-item>\n\t\t<daff-nav-accordion-item>\n\t\t\t<h3 daffAccordionItemTitle>Details</h3>\n\t\t\t<daff-nav-accordion-item>\n\t\t\t\t<a daffAccordionItemTitle>Details</a>\n\t\t\t</daff-nav-accordion-item>\n\t\t\t<daff-nav-accordion-item>\n\t\t\t\t<a daffAccordionItemTitle>Details</a>\n\t\t\t</daff-nav-accordion-item>\n\t\t</daff-nav-accordion-item>\n\t</daff-nav-accordion-item>\n</daff-accordion>"}]}],"members":{}}},"origins":{"ACCORDION_EXAMPLES":"./public_api","BasicAccordionModule":"./basic-accordion/basic-accordion.module","NavAccordionModule":"./nav-accordion/nav-accordion.module","ɵa":"./basic-accordion/basic-accordion.component","ɵb":"./nav-accordion/nav-accordion.component"},"importAs":"@daffodil/design/accordion/examples"}

package/article/examples/daffodil-design-article-examples.metadata.json

@@ -1 +0,0 @@
-{"__symbolic":"module","version":4,"metadata":{"ArticleHeadingsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"article-headings","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":9,"character":19},"member":"OnPush"},"template":"<daff-article>\n  <h1>This is a h1 heading.</h1>\n  <h2>This is a h2 heading.</h2>\n  <h3>This is a h3 heading.</h3>\n  <h4>This is a h4 heading.</h4>\n  <h5>This is a h5 heading.</h5>\n  <h6>This is a h6 heading.</h6>\n</daff-article>"}]}],"members":{}},"ArticleCodeInlineComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"article-code-inline","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":9,"character":19},"member":"OnPush"},"template":"<daff-article>\n  <p>We could be discussing <code>functions</code> or <code>types</code>, but we should indicate the difference between these elements and regular text!</p>\n</daff-article>"}]}],"members":{}},"ArticleHrComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"article-hr","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":9,"character":19},"member":"OnPush"},"template":"<daff-article>\n  <hr>\n</daff-article>"}]}],"members":{}},"ArticleOlComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"article-ol","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":9,"character":19},"member":"OnPush"},"template":"<daff-article>\n  <ol>\n    <li>This is an ordered list.</li>\n    <li>This is an ordered list.</li>\n    <li>This is an ordered list.</li>\n    <li>This is an ordered list.</li>\n    <li>This is an ordered list.</li>\n    <li>This is an ordered list.</li>\n  </ol>\n</daff-article>"}]}],"members":{}},"ArticleUlComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"article-ul","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":9,"character":19},"member":"OnPush"},"template":"<daff-article>\n  <ul>\n    <li>This is an unordered list.</li>\n    <li>This is an unordered list.</li>\n    <li>This is an unordered list.</li>\n    <li>This is an unordered list.</li>\n    <li>This is an unordered list.</li>\n    <li>This is an unordered list.</li>\n  </ul>\n</daff-article>"}]}],"members":{}},"ArticleMetaComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"article-meta","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":9,"character":19},"member":"OnPush"},"template":"<daff-article>\n  <p daffArticleMeta>Some interesting information about an article</p>\n</daff-article>"}]}],"members":{}},"ArticleLinkComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"article-link","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":9,"character":19},"member":"OnPush"},"template":"<daff-article>\n  <a href=\"#\">This is a link.</a>\n</daff-article>"}]}],"members":{}},"ArticleLeadComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"article-lead","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":9,"character":19},"member":"OnPush"},"template":"<daff-article>\n  <p daffArticleLead>This is an Article Lead.</p>\n</daff-article>"}]}],"members":{}},"ArticleBlockquoteComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"article-blockquote","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":9,"character":19},"member":"OnPush"},"template":"<daff-article>\n  <blockquote>\n    This is a blockquote. This can be used for customer testimonals, document references, etc.\n    <cite>Name your quote source here.</cite>\n  </blockquote>\n</daff-article>"}]}],"members":{}},"ArticleTableComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"article-table","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":9,"character":19},"member":"OnPush"},"template":"<daff-article>\n  <table>\n    <thead>\n      <tr>\n        <th>Product Name</th>\n        <th>Description</th>\n        <th>Price</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <td>T-Shirt</td>\n        <td>White Crew Neck T-Shirt</td>\n        <td>$20.00</td>\n      </tr>\n      <tr>\n        <td>Shorts</td>\n        <td>Black Denim Shorts</td>\n        <td>$40.00</td>\n      </tr>\n      <tr>\n        <td>Shoes</td>\n        <td>White Sneakers</td>\n        <td>$100.00</td>\n      </tr>\n    </tbody>\n  </table>\n</daff-article>"}]}],"members":{}},"ArticleExamplesModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"spread","expression":{"__symbolic":"reference","name":"ARTICLE_EXAMPLES"}}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffArticleModule","line":13,"character":4}],"entryComponents":[{"__symbolic":"spread","expression":{"__symbolic":"reference","name":"ARTICLE_EXAMPLES"}}]}]}],"members":{}},"ARTICLE_EXAMPLES":[{"__symbolic":"reference","name":"ArticleBlockquoteComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ArticleCodeInlineComponent"},{"__symbolic":"reference","name":"ArticleHeadingsComponent"},{"__symbolic":"reference","name":"ArticleHrComponent"},{"__symbolic":"reference","name":"ArticleLeadComponent"},{"__symbolic":"reference","name":"ArticleLinkComponent"},{"__symbolic":"reference","name":"ArticleMetaComponent"},{"__symbolic":"reference","name":"ArticleOlComponent"},{"__symbolic":"reference","name":"ArticleUlComponent"},{"__symbolic":"reference","name":"ArticleTableComponent"}],"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"article-code-block","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":9,"character":19},"member":"OnPush"},"template":"<daff-article>\n<pre><code>This is a line of code.\nThis is another line of code.\n</code></pre>\n</daff-article>\n"}]}],"members":{}}},"origins":{"ArticleHeadingsComponent":"./article-headings/article-headings.component","ArticleCodeInlineComponent":"./article-code-inline/article-code-inline.component","ArticleHrComponent":"./article-hr/article-hr.component","ArticleOlComponent":"./article-ol/article-ol.component","ArticleUlComponent":"./article-ul/article-ul.component","ArticleMetaComponent":"./article-meta/article-meta.component","ArticleLinkComponent":"./article-link/article-link.component","ArticleLeadComponent":"./article-lead/article-lead.component","ArticleBlockquoteComponent":"./article-blockquote/article-blockquote.component","ArticleTableComponent":"./article-table/article-table.component","ArticleExamplesModule":"./article-examples.module","ARTICLE_EXAMPLES":"./examples","ɵa":"./article-code-block/article-code-block.component"},"importAs":"@daffodil/design/article/examples"}