@daffodil/design 0.77.0 → 0.79.0

package/fesm2022/daffodil-design-tabs.mjs

@@ -0,0 +1,431 @@
+import * as i1 from '@daffodil/design';
+import { DaffPrefixDirective, DaffSuffixDirective, DaffPrefixSuffixModule, DaffArticleEncapsulatedDirective } from '@daffodil/design';
+import * as i0 from '@angular/core';
+import { TemplateRef, Component, ChangeDetectionStrategy, Input, ViewChild, ContentChild, HostBinding, ViewEncapsulation, EventEmitter, Output, ContentChildren, ViewChildren } from '@angular/core';
+import { NgIf, NgTemplateOutlet } from '@angular/common';
+
+let tabId = 1;
+/**
+ * `DaffTabComponet` is an element in the tab list that is used as a content container to group the label of a tab panel and the tab panel together.
+ *
+ * ## Template Structure
+ * A `<daff-tab>` should include the {@link DaffTabLabelComponent} and {@link DaffTabPanelComponent} components in order to properly structure the UI.
+ *
+ * ## Usage
+ * ```html
+ * <daff-tab>
+ * 	<daff-tab-label>
+ * 		<fa-icon [icon]="faInfoCircle" daffPrefix></fa-icon>
+ * 		Tab 1
+ * 	</daff-tab-label>
+ * 	<daff-tab-panel>
+ * 		Tab 1 Panel
+ * 	</daff-tab-panel>
+ * </daff-tab>
+ * ```
+ */
+class DaffTabComponent {
+    constructor() {
+        /**
+         * Whether the tab is disabled.
+         *
+         * ```html
+         * <daff-tab [disabled]="true">
+         * </daff-tab>
+         * ```
+         */
+        this.disabled = false;
+        /**
+         * A unique id for the tab component.
+         *
+         * The `id` is automatically generated by linking the prefix 'daff-tab-' with an incrementing `tabId`. This value can be customized by passing a different `id` value via the component's `id` input.
+         *
+         * ```html
+         * <daff-tab [id]="'custom-id'"></daff-tab>
+         * ```
+         */
+        this.id = 'daff-tab-' + tabId;
+        /**
+         * @docs-private
+         */
+        this.panelId = 'daff-tab-panel-' + tabId;
+        tabId++;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: DaffTabComponent, isStandalone: true, selector: "daff-tab", inputs: { disabled: "disabled", id: "id" }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, read: TemplateRef, static: true }, { propertyName: "labelRef", first: true, predicate: ["label"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: `
+      <ng-template #label>
+        <ng-content select="daff-tab-label"></ng-content>
+      </ng-template>
+      <ng-template #content>
+        <ng-content select="daff-tab-panel"></ng-content>
+      </ng-template>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffTabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'daff-tab',
+                    template: `
+      <ng-template #label>
+        <ng-content select="daff-tab-label"></ng-content>
+      </ng-template>
+      <ng-template #content>
+        <ng-content select="daff-tab-panel"></ng-content>
+      </ng-template>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{
+                type: Input
+            }], contentRef: [{
+                type: ViewChild,
+                args: ['content', { read: TemplateRef, static: true }]
+            }], labelRef: [{
+                type: ViewChild,
+                args: ['label', { read: TemplateRef, static: true }]
+            }], id: [{
+                type: Input
+            }] } });
+
+/**
+ * DaffTabLabelComponent is used to display the label of a tab panel. Labels may optionally contain a `daffPrefix` or `daffSuffix` to add icons or badges.
+ *
+ * ```html
+ * <daff-tab-label>
+ *  <div daffPrefix></div>
+ *  Label
+ *  <div daffSuffix></div
+ * </daff-tab-Label>
+ * ```
+ */
+class DaffTabLabelComponent {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffTabLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: DaffTabLabelComponent, isStandalone: true, selector: "daff-tab-label", queries: [{ propertyName: "_prefix", first: true, predicate: DaffPrefixDirective, descendants: true }, { propertyName: "_suffix", first: true, predicate: DaffSuffixDirective, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"_prefix\">\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n</ng-container>\n<div class=\"daff-tab-label__content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"_suffix\">\n  <ng-content select=\"[daffSuffix]\"></ng-content>\n</ng-container>", styles: [":host{display:flex;gap:8px}.daff-tab-label__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DaffPrefixSuffixModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffTabLabelComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'daff-tab-label', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgIf,
+                        DaffPrefixSuffixModule,
+                    ], template: "<ng-container *ngIf=\"_prefix\">\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n</ng-container>\n<div class=\"daff-tab-label__content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"_suffix\">\n  <ng-content select=\"[daffSuffix]\"></ng-content>\n</ng-container>", styles: [":host{display:flex;gap:8px}.daff-tab-label__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}\n"] }]
+        }], propDecorators: { _prefix: [{
+                type: ContentChild,
+                args: [DaffPrefixDirective]
+            }], _suffix: [{
+                type: ContentChild,
+                args: [DaffSuffixDirective]
+            }] } });
+
+/**
+ * DaffTabPanelComponent is used to display the content panel of a tab.
+ *
+ * ```html
+ * <daff-tab-panel>
+ *  <!-- Tab panel content goes here -->
+ * </daff-tab-panel>
+ * ```
+ */
+class DaffTabPanelComponent {
+    /**
+     * Dynamically binds the tab panel's id to a unique value generated from the associated tab's panelId.
+     */
+    get tabPanelId() {
+        return this._id;
+    }
+    constructor(tab) {
+        this.tab = tab;
+        /**
+         * @docs-private
+         */
+        this.class = true;
+        /**
+         * Sets the `role` to tabpanel.
+         */
+        this.role = 'tabpanel';
+        /**
+         * `aria-labelledby` for the tab.
+         */
+        this.ariaLabelledBy = '';
+        /**
+         * Sets the `tabindex` to 0.
+         */
+        this.tabIndex = '0';
+        this._id = '';
+        /**
+         * Sets the value of `ariaLabelledBy` to the id of the tab component.
+         */
+        this.ariaLabelledBy = this.tab.id;
+        this._id = this.tab.panelId;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffTabPanelComponent, deps: [{ token: DaffTabComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: DaffTabPanelComponent, isStandalone: true, selector: "daff-tab-panel", host: { properties: { "class.daff-tab-panel": "this.class", "attr.role": "this.role", "attr.aria-labelledby": "this.ariaLabelledBy", "attr.tabindex": "this.tabIndex", "attr.id": "this.tabPanelId" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host(.daff-tab-panel){display:block;padding:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffTabPanelComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'daff-tab-panel', template: `<ng-content></ng-content>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host(.daff-tab-panel){display:block;padding:1rem}\n"] }]
+        }], ctorParameters: () => [{ type: DaffTabComponent }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-tab-panel']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], ariaLabelledBy: [{
+                type: HostBinding,
+                args: ['attr.aria-labelledby']
+            }], tabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], tabPanelId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }] } });
+
+class DaffTabActivatorComponent {
+    /**
+     * Sets `aria-selected` to true if the component is selected and false if it's not selected.
+     */
+    get ariaSelected() {
+        return this.selected ? true : false;
+    }
+    /**
+     * Sets `tabindex` to `0` if the component is selected and `-1` if it's not selected.
+     */
+    get tabIndex() {
+        return this.selected ? '0' : '-1';
+    }
+    ngOnInit() {
+        /**
+         * Sets the value of `panelId` to the `ariaControls` property
+         */
+        this.ariaControls = this.panelId;
+    }
+    constructor(el) {
+        this.el = el;
+        /**
+         * @docs-private
+         */
+        this.class = true;
+        /**
+         * Sets the `role` to tab.
+         */
+        this.role = 'tab';
+        /** Whether or not a tab is selected */
+        this.selected = false;
+        this.ariaControls = '';
+        /**
+         * The html id of the tab activator component
+         */
+        this.tabActivatorId = '';
+        this.panelId = '';
+    }
+    /**
+     * Sets focus to the native element of the component
+     */
+    focus() {
+        this.el.nativeElement.focus();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffTabActivatorComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: DaffTabActivatorComponent, isStandalone: true, selector: "button[daff-tab-activator],a[daff-tab-activator]", inputs: { selected: "selected", tabActivatorId: "tabActivatorId", panelId: "panelId" }, host: { properties: { "class.daff-tab-activator": "this.class", "attr.role": "this.role", "class.selected": "this.selected", "attr.aria-selected": "this.ariaSelected", "attr.tabindex": "this.tabIndex", "attr.aria-controls": "this.ariaControls", "attr.id": "this.tabActivatorId" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [".daff-tab-activator{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;appearance:none;background:none;border:none;color:currentColor;font-size:1rem;font-weight:400;height:2.5rem;margin:0;padding:.5rem 1.5rem}.daff-tab-activator[disabled]{cursor:not-allowed;opacity:.6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffTabActivatorComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: '' +
+                        'button[daff-tab-activator]' + ',' +
+                        'a[daff-tab-activator]', template: `<ng-content></ng-content>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".daff-tab-activator{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;appearance:none;background:none;border:none;color:currentColor;font-size:1rem;font-weight:400;height:2.5rem;margin:0;padding:.5rem 1.5rem}.daff-tab-activator[disabled]{cursor:not-allowed;opacity:.6}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-tab-activator']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], selected: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.selected']
+            }], ariaSelected: [{
+                type: HostBinding,
+                args: ['attr.aria-selected']
+            }], tabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], ariaControls: [{
+                type: HostBinding,
+                args: ['attr.aria-controls']
+            }], tabActivatorId: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.id']
+            }], panelId: [{
+                type: Input
+            }] } });
+
+/**
+ * Tabs provide a way to navigate between panels that display related content.
+ *
+ * ## Usage
+ * ```html
+ * <daff-tabs aria-label="List of tabs">
+ * 	<daff-tab>
+ * 		<daff-tab-label>
+ * 			<fa-icon [icon]="faInfoCircle" daffPrefix></fa-icon>
+ * 			Tab 1
+ * 		</daff-tab-label>
+ * 		<daff-tab-panel>
+ * 			Tab 1 Panel
+ * 		</daff-tab-panel>
+ * 	</daff-tab>
+ * 	<daff-tab>
+ * 		<daff-tab-label>
+ * 			Tab 2
+ * 			<fa-icon [icon]="faInfoCircle" daffSuffix></fa-icon>
+ * 		</daff-tab-label>
+ * 		<daff-tab-panel>
+ * 			Tab 2 Panel
+ * 		</daff-tab-panel>
+ * 	</daff-tab>
+ * </daff-tabs>
+ * ```
+ */
+class DaffTabsComponent {
+    constructor(cdRef) {
+        this.cdRef = cdRef;
+        /**
+         * @docs-private
+         */
+        this.class = true;
+        /**
+         * The tab that is initially selected on initial load. If it's not used, the first tab in the tablist will be selected by default.
+         */
+        this.initiallySelected = null;
+        /**
+         * @docs-private
+         */
+        this.externalAriaLabel = null;
+        /**
+         * aria-label for the tab.
+         */
+        this.ariaLabel = '';
+        /**
+         * Event emitted when tab selection changes.
+         */
+        this.tabChange = new EventEmitter();
+    }
+    /**
+     * @docs-private
+     */
+    ngAfterContentInit() {
+        if (this.initiallySelected) {
+            this.selectedTab = this.initiallySelected;
+        }
+        if (!this.selectedTab) {
+            this.selectedTab = this._tabs.first.id;
+        }
+    }
+    /**
+     * Selects a tab and sets focus on the selected tab.
+     */
+    select(tabId) {
+        const tabActivator = this._tabActivators.find(el => el.tabActivatorId === tabId);
+        if (!tabActivator) {
+            console.warn(`The tab '${tabId}' was not able to be selected because it does not exist. Check the id on your <daff-tab>s.`);
+            return;
+        }
+        this.tabChange.emit(tabId);
+        this.selectedTab = tabId;
+        this.cdRef.markForCheck();
+        tabActivator.focus();
+    }
+    /**
+     * Navigates through the tabs based on the given offset.
+     * Moves forward or backward in the tab array, wrapping around when necessary.
+     */
+    navigateTabs(offset) {
+        const array = this._tabs.toArray();
+        let selectedIndex = array.findIndex(el => el.id === this.selectedTab);
+        const startingIndex = selectedIndex;
+        let newIndex;
+        do {
+            newIndex = (selectedIndex + offset + array.length) % array.length;
+            selectedIndex = newIndex;
+        } while (array[newIndex].disabled && selectedIndex !== startingIndex); // Skip disabled tabs
+        this.select(array[newIndex].id);
+    }
+    /**
+     * Selects the previous tab and wraps around to the last tab if the first tab is currently selected.
+     */
+    previous() {
+        this.navigateTabs(-1);
+    }
+    /**
+     * Selects the next tab and wraps around to the first tab if the last tab is currently selected.
+     */
+    next() {
+        this.navigateTabs(1);
+    }
+    /**
+     * Selects the first tab.
+     */
+    selectFirst(event) {
+        event.preventDefault();
+        this.select(this._tabs.toArray()[0].id);
+    }
+    /**
+     * Selects the last tab.
+     */
+    selectLast(event) {
+        event.preventDefault();
+        const array = this._tabs.toArray();
+        this.select(array[array.length - 1].id);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffTabsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: DaffTabsComponent, isStandalone: true, selector: "daff-tabs", inputs: { initiallySelected: "initiallySelected", ariaLabel: ["aria-label", "ariaLabel"] }, outputs: { tabChange: "tabChange" }, host: { properties: { "class.daff-tabs": "this.class", "attr.aria-label": "this.externalAriaLabel" } }, queries: [{ propertyName: "_labels", predicate: DaffTabLabelComponent, descendants: true }, { propertyName: "_tabs", predicate: DaffTabComponent }], viewQueries: [{ propertyName: "_tabActivators", predicate: DaffTabActivatorComponent, descendants: true }], hostDirectives: [{ directive: i1.DaffArticleEncapsulatedDirective }], ngImport: i0, template: "<div class=\"daff-tabs__tab-list\"\n\trole=\"tablist\"\n\t[attr.aria-label]=\"ariaLabel\"\n\t(keydown.home)=\"selectFirst($event)\"\n\t(keydown.end)=\"selectLast($event)\">\n\t@for (tab of _tabs; track tab) {\n\t\t<button daff-tab-activator\n\t\t\t[selected]=\"tab.id === selectedTab\"\n\t\t\t(click)=\"select(tab.id)\"\n\t\t\t[panelId]=\"tab.panelId\"\n\t\t\t[disabled]=\"tab.disabled\"\n\t\t\t[tabActivatorId]=\"tab.id\"\n\t\t\t(keydown.arrowright)=\"next()\"\n\t\t\t(keydown.arrowleft)=\"previous()\">\n\t\t\t\t<ng-container *ngTemplateOutlet=\"tab.labelRef\"></ng-container>\n\t\t</button>\n\t}\n</div>\n\n@for (tab of _tabs; track tab) {\n\t@if(tab.id === selectedTab ) {\n\t\t<ng-container *ngTemplateOutlet=\"tab.contentRef\"></ng-container>\n\t}\n}", styles: [":host(.daff-tabs){max-width:100%}.daff-tabs{display:block}.daff-tabs .daff-tabs__tab-list{display:flex;overflow-x:scroll;scrollbar-width:thin}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DaffTabActivatorComponent, selector: "button[daff-tab-activator],a[daff-tab-activator]", inputs: ["selected", "tabActivatorId", "panelId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffTabsComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'daff-tabs', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgTemplateOutlet,
+                        DaffTabActivatorComponent,
+                    ], hostDirectives: [
+                        { directive: DaffArticleEncapsulatedDirective },
+                    ], template: "<div class=\"daff-tabs__tab-list\"\n\trole=\"tablist\"\n\t[attr.aria-label]=\"ariaLabel\"\n\t(keydown.home)=\"selectFirst($event)\"\n\t(keydown.end)=\"selectLast($event)\">\n\t@for (tab of _tabs; track tab) {\n\t\t<button daff-tab-activator\n\t\t\t[selected]=\"tab.id === selectedTab\"\n\t\t\t(click)=\"select(tab.id)\"\n\t\t\t[panelId]=\"tab.panelId\"\n\t\t\t[disabled]=\"tab.disabled\"\n\t\t\t[tabActivatorId]=\"tab.id\"\n\t\t\t(keydown.arrowright)=\"next()\"\n\t\t\t(keydown.arrowleft)=\"previous()\">\n\t\t\t\t<ng-container *ngTemplateOutlet=\"tab.labelRef\"></ng-container>\n\t\t</button>\n\t}\n</div>\n\n@for (tab of _tabs; track tab) {\n\t@if(tab.id === selectedTab ) {\n\t\t<ng-container *ngTemplateOutlet=\"tab.contentRef\"></ng-container>\n\t}\n}", styles: [":host(.daff-tabs){max-width:100%}.daff-tabs{display:block}.daff-tabs .daff-tabs__tab-list{display:flex;overflow-x:scroll;scrollbar-width:thin}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-tabs']
+            }], initiallySelected: [{
+                type: Input
+            }], externalAriaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
+            }], tabChange: [{
+                type: Output
+            }], _labels: [{
+                type: ContentChildren,
+                args: [DaffTabLabelComponent, { descendants: true }]
+            }], _tabs: [{
+                type: ContentChildren,
+                args: [DaffTabComponent]
+            }], _tabActivators: [{
+                type: ViewChildren,
+                args: [DaffTabActivatorComponent]
+            }] } });
+
+const DAFF_TABS_COMPONENTS = [
+    DaffTabsComponent,
+    DaffTabLabelComponent,
+    DaffTabPanelComponent,
+    DaffPrefixSuffixModule,
+    DaffTabComponent,
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DAFF_TABS_COMPONENTS, DaffTabComponent, DaffTabLabelComponent, DaffTabPanelComponent, DaffTabsComponent };
+//# sourceMappingURL=daffodil-design-tabs.mjs.map

package/fesm2022/daffodil-design-tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"daffodil-design-tabs.mjs","sources":["../../../libs/design/tabs/src/tabs/tab/tab.component.ts","../../../libs/design/tabs/src/tabs/tab-label/tab-label.component.ts","../../../libs/design/tabs/src/tabs/tab-label/tab-label.component.html","../../../libs/design/tabs/src/tabs/tab-panel/tab-panel.component.ts","../../../libs/design/tabs/src/tabs/tab-activator/tab-activator.component.ts","../../../libs/design/tabs/src/tabs/tabs.component.ts","../../../libs/design/tabs/src/tabs/tabs.component.html","../../../libs/design/tabs/src/tabs.ts","../../../libs/design/tabs/src/daffodil-design-tabs.ts"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  TemplateRef,\n  ViewChild,\n  Input,\n} from '@angular/core';\n\nlet tabId = 1;\n\n/**\n * `DaffTabComponet` is an element in the tab list that is used as a content container to group the label of a tab panel and the tab panel together.\n *\n * ## Template Structure\n * A `<daff-tab>` should include the {@link DaffTabLabelComponent} and {@link DaffTabPanelComponent} components in order to properly structure the UI.\n *\n * ## Usage\n * ```html\n * <daff-tab>\n * \t<daff-tab-label>\n * \t\t<fa-icon [icon]=\"faInfoCircle\" daffPrefix></fa-icon>\n * \t\tTab 1\n * \t</daff-tab-label>\n * \t<daff-tab-panel>\n * \t\tTab 1 Panel\n * \t</daff-tab-panel>\n * </daff-tab>\n * ```\n */\n@Component({\n  standalone: true,\n  selector: 'daff-tab',\n  template: `\n      <ng-template #label>\n        <ng-content select=\"daff-tab-label\"></ng-content>\n      </ng-template>\n      <ng-template #content>\n        <ng-content select=\"daff-tab-panel\"></ng-content>\n      </ng-template>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DaffTabComponent {\n  /**\n   * Whether the tab is disabled.\n   *\n   * ```html\n   * <daff-tab [disabled]=\"true\">\n   * </daff-tab>\n   * ```\n   */\n  @Input() disabled = false;\n\n  /**\n   * @docs-private\n   */\n  @ViewChild('content', { read: TemplateRef, static: true }) contentRef: TemplateRef<any>;\n\n  /**\n   * @docs-private\n   */\n  @ViewChild('label', { read: TemplateRef, static: true }) labelRef: TemplateRef<any>;\n\n  /**\n   * A unique id for the tab component.\n   *\n   * The `id` is automatically generated by linking the prefix 'daff-tab-' with an incrementing `tabId`. This value can be customized by passing a different `id` value via the component's `id` input.\n   *\n   * ```html\n   * <daff-tab [id]=\"'custom-id'\"></daff-tab>\n   * ```\n   */\n  @Input() id = 'daff-tab-' + tabId;\n\n  /**\n   * @docs-private\n   */\n  panelId = 'daff-tab-panel-' + tabId;\n\n  constructor() {\n    tabId++;\n  }\n}\n","import { NgIf } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ContentChild,\n} from '@angular/core';\n\nimport {\n  DaffPrefixDirective,\n  DaffSuffixDirective,\n  DaffPrefixable,\n  DaffSuffixable,\n  DaffPrefixSuffixModule,\n} from '@daffodil/design';\n\n/**\n * DaffTabLabelComponent is used to display the label of a tab panel. Labels may optionally contain a `daffPrefix` or `daffSuffix` to add icons or badges.\n *\n * ```html\n * <daff-tab-label>\n *  <div daffPrefix></div>\n *  Label\n *  <div daffSuffix></div\n * </daff-tab-Label>\n * ```\n */\n@Component({\n  standalone: true,\n  selector: 'daff-tab-label',\n  templateUrl: './tab-label.component.html',\n  styleUrl: './tab-label.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    NgIf,\n    DaffPrefixSuffixModule,\n  ],\n})\nexport class DaffTabLabelComponent implements DaffPrefixable, DaffSuffixable {\n  @ContentChild(DaffPrefixDirective) _prefix: DaffPrefixDirective;\n  @ContentChild(DaffSuffixDirective) _suffix: DaffSuffixDirective;\n}\n","<ng-container *ngIf=\"_prefix\">\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n</ng-container>\n<div class=\"daff-tab-label__content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"_suffix\">\n  <ng-content select=\"[daffSuffix]\"></ng-content>\n</ng-container>","import {\n  Component,\n  HostBinding,\n  ChangeDetectionStrategy,\n} from '@angular/core';\n\nimport { DaffTabComponent } from '../tab/tab.component';\n\n/**\n * DaffTabPanelComponent is used to display the content panel of a tab.\n *\n * ```html\n * <daff-tab-panel>\n *  <!-- Tab panel content goes here -->\n * </daff-tab-panel>\n * ```\n */\n@Component({\n  standalone: true,\n  selector: 'daff-tab-panel',\n  template: `<ng-content></ng-content>`,\n  styleUrl: './tab-panel.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DaffTabPanelComponent {\n  /**\n   * @docs-private\n   */\n  @HostBinding('class.daff-tab-panel') private class = true;\n\n  /**\n   * Sets the `role` to tabpanel.\n   */\n  @HostBinding('attr.role') role = 'tabpanel';\n\n  /**\n   * `aria-labelledby` for the tab.\n   */\n  @HostBinding('attr.aria-labelledby') ariaLabelledBy = '';\n\n  /**\n   * Sets the `tabindex` to 0.\n   */\n  @HostBinding('attr.tabindex') tabIndex = '0';\n\n  private _id = '';\n\n  /**\n   * Dynamically binds the tab panel's id to a unique value generated from the associated tab's panelId.\n   */\n  @HostBinding('attr.id') get tabPanelId() {\n    return this._id;\n  }\n\n  constructor(private tab: DaffTabComponent) {\n    /**\n     * Sets the value of `ariaLabelledBy` to the id of the tab component.\n     */\n    this.ariaLabelledBy = this.tab.id;\n\n    this._id = this.tab.panelId;\n  }\n}\n","import {\n  HostBinding,\n  Input,\n  OnInit,\n  Component,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n  ElementRef,\n} from '@angular/core';\n\n@Component({\n  standalone: true,\n  selector: '' +\n    'button[daff-tab-activator]' + ',' +\n    'a[daff-tab-activator]',\n  template: `<ng-content></ng-content>`,\n  styleUrl: './tab-activator.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DaffTabActivatorComponent implements OnInit {\n  /**\n   * @docs-private\n   */\n  @HostBinding('class.daff-tab-activator') class = true;\n\n  /**\n   * Sets the `role` to tab.\n   */\n  @HostBinding('attr.role') role = 'tab';\n\n  /** Whether or not a tab is selected */\n  @Input() @HostBinding('class.selected') selected = false;\n\n  /**\n   * Sets `aria-selected` to true if the component is selected and false if it's not selected.\n   */\n  @HostBinding('attr.aria-selected') get ariaSelected() {\n    return this.selected ? true :  false;\n  }\n\n  /**\n   * Sets `tabindex` to `0` if the component is selected and `-1` if it's not selected.\n   */\n  @HostBinding('attr.tabindex') get tabIndex() {\n    return this.selected ? '0' :  '-1';\n  }\n\n  @HostBinding('attr.aria-controls') ariaControls = '';\n\n  /**\n   * The html id of the tab activator component\n   */\n  @Input() @HostBinding('attr.id') tabActivatorId = '';\n\n  @Input() panelId = '';\n\n  ngOnInit() {\n    /**\n     * Sets the value of `panelId` to the `ariaControls` property\n     */\n    this.ariaControls = this.panelId;\n  }\n\n  constructor(\n    private el: ElementRef,\n  ) {\n  }\n\n  /**\n   * Sets focus to the native element of the component\n   */\n  focus() {\n    this.el.nativeElement.focus();\n  }\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n  Component,\n  HostBinding,\n  ViewEncapsulation,\n  ChangeDetectionStrategy,\n  ContentChildren,\n  QueryList,\n  AfterContentInit,\n  Input,\n  Output,\n  EventEmitter,\n  ViewChildren,\n  ChangeDetectorRef,\n} from '@angular/core';\n\nimport { DaffArticleEncapsulatedDirective } from '@daffodil/design';\n\nimport { DaffTabComponent } from './tab/tab.component';\nimport { DaffTabActivatorComponent } from './tab-activator/tab-activator.component';\nimport { DaffTabLabelComponent } from './tab-label/tab-label.component';\n\n/**\n * Tabs provide a way to navigate between panels that display related content.\n *\n * ## Usage\n * ```html\n * <daff-tabs aria-label=\"List of tabs\">\n * \t<daff-tab>\n * \t\t<daff-tab-label>\n * \t\t\t<fa-icon [icon]=\"faInfoCircle\" daffPrefix></fa-icon>\n * \t\t\tTab 1\n * \t\t</daff-tab-label>\n * \t\t<daff-tab-panel>\n * \t\t\tTab 1 Panel\n * \t\t</daff-tab-panel>\n * \t</daff-tab>\n * \t<daff-tab>\n * \t\t<daff-tab-label>\n * \t\t\tTab 2\n * \t\t\t<fa-icon [icon]=\"faInfoCircle\" daffSuffix></fa-icon>\n * \t\t</daff-tab-label>\n * \t\t<daff-tab-panel>\n * \t\t\tTab 2 Panel\n * \t\t</daff-tab-panel>\n * \t</daff-tab>\n * </daff-tabs>\n * ```\n */\n@Component({\n  standalone: true,\n  selector: 'daff-tabs',\n  templateUrl: './tabs.component.html',\n  styleUrl: './tabs.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    NgTemplateOutlet,\n    DaffTabActivatorComponent,\n  ],\n  hostDirectives: [\n    { directive: DaffArticleEncapsulatedDirective },\n  ],\n})\n\nexport class DaffTabsComponent implements AfterContentInit {\n  /**\n   * @docs-private\n   */\n  @HostBinding('class.daff-tabs') private class = true;\n\n  /**\n   * The currently selected tab. This property is dynamically updated when a user selects a tab\n   */\n  selectedTab: string;\n\n  /**\n   * The tab that is initially selected on initial load. If it's not used, the first tab in the tablist will be selected by default.\n   */\n  @Input() initiallySelected: string = null;\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('attr.aria-label') private externalAriaLabel = null;\n\n  /**\n   * aria-label for the tab.\n   */\n  @Input('aria-label') ariaLabel = '';\n\n  /**\n   * Event emitted when tab selection changes.\n   */\n  @Output() tabChange = new EventEmitter<string>();\n\n  /**\n   * @docs-private\n   */\n  @ContentChildren(DaffTabLabelComponent, { descendants: true }) _labels: QueryList<DaffTabLabelComponent>;\n\n  /**\n   * @docs-private\n   */\n  @ContentChildren(DaffTabComponent) _tabs: QueryList<DaffTabComponent>;\n\n  /**\n   * @docs-private\n   */\n  @ViewChildren(DaffTabActivatorComponent) _tabActivators: QueryList<DaffTabActivatorComponent>;\n\n  constructor(private cdRef: ChangeDetectorRef) {}\n\n  /**\n   * @docs-private\n   */\n  ngAfterContentInit() {\n    if(this.initiallySelected) {\n      this.selectedTab = this.initiallySelected;\n    }\n\n    if (!this.selectedTab) {\n      this.selectedTab = this._tabs.first.id;\n    }\n  }\n\n  /**\n   * Selects a tab and sets focus on the selected tab.\n   */\n  select(tabId: string) {\n    const tabActivator = this._tabActivators.find(el => el.tabActivatorId === tabId);\n\n    if (!tabActivator) {\n      console.warn(`The tab '${tabId}' was not able to be selected because it does not exist. Check the id on your <daff-tab>s.`);\n      return;\n    }\n\n    this.tabChange.emit(tabId);\n    this.selectedTab = tabId;\n    this.cdRef.markForCheck();\n\n    tabActivator.focus();\n  }\n\n  /**\n   * Navigates through the tabs based on the given offset.\n   * Moves forward or backward in the tab array, wrapping around when necessary.\n   */\n  private navigateTabs(offset: number) {\n    const array = this._tabs.toArray();\n    let selectedIndex = array.findIndex(el => el.id === this.selectedTab);\n    const startingIndex = selectedIndex;\n    let newIndex;\n\n    do {\n      newIndex = (selectedIndex + offset + array.length) % array.length;\n      selectedIndex = newIndex;\n    } while (array[newIndex].disabled && selectedIndex !== startingIndex); // Skip disabled tabs\n\n    this.select(array[newIndex].id);\n  }\n\n  /**\n   * Selects the previous tab and wraps around to the last tab if the first tab is currently selected.\n   */\n  previous() {\n    this.navigateTabs(-1);\n  }\n\n  /**\n   * Selects the next tab and wraps around to the first tab if the last tab is currently selected.\n   */\n  next() {\n    this.navigateTabs(1);\n  }\n\n  /**\n   * Selects the first tab.\n   */\n  selectFirst(event: KeyboardEvent | null) {\n    event.preventDefault();\n    this.select(this._tabs.toArray()[0].id);\n  }\n\n  /**\n   * Selects the last tab.\n   */\n  selectLast(event: KeyboardEvent | null) {\n    event.preventDefault();\n    const array = this._tabs.toArray();\n    this.select(array[array.length - 1].id);\n  }\n}\n","<div class=\"daff-tabs__tab-list\"\n\trole=\"tablist\"\n\t[attr.aria-label]=\"ariaLabel\"\n\t(keydown.home)=\"selectFirst($event)\"\n\t(keydown.end)=\"selectLast($event)\">\n\t@for (tab of _tabs; track tab) {\n\t\t<button daff-tab-activator\n\t\t\t[selected]=\"tab.id === selectedTab\"\n\t\t\t(click)=\"select(tab.id)\"\n\t\t\t[panelId]=\"tab.panelId\"\n\t\t\t[disabled]=\"tab.disabled\"\n\t\t\t[tabActivatorId]=\"tab.id\"\n\t\t\t(keydown.arrowright)=\"next()\"\n\t\t\t(keydown.arrowleft)=\"previous()\">\n\t\t\t\t<ng-container *ngTemplateOutlet=\"tab.labelRef\"></ng-container>\n\t\t</button>\n\t}\n</div>\n\n@for (tab of _tabs; track tab) {\n\t@if(tab.id === selectedTab ) {\n\t\t<ng-container *ngTemplateOutlet=\"tab.contentRef\"></ng-container>\n\t}\n}","import { DaffPrefixSuffixModule } from '@daffodil/design';\n\nimport { DaffTabComponent } from './tabs/tab/tab.component';\nimport { DaffTabLabelComponent } from './tabs/tab-label/tab-label.component';\nimport { DaffTabPanelComponent } from './tabs/tab-panel/tab-panel.component';\nimport { DaffTabsComponent } from './tabs/tabs.component';\n\nexport const DAFF_TABS_COMPONENTS = <const>[\n  DaffTabsComponent,\n  DaffTabLabelComponent,\n  DaffTabPanelComponent,\n  DaffPrefixSuffixModule,\n  DaffTabComponent,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.DaffTabComponent"],"mappings":";;;;;;AAQA,IAAI,KAAK,GAAG,CAAC,CAAC;AAEd;;;;;;;;;;;;;;;;;;AAkBG;MAcU,gBAAgB,CAAA;AAqC3B,IAAA,WAAA,GAAA;AApCA;;;;;;;AAOG;QACM,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;AAY1B;;;;;;;;AAQG;AACM,QAAA,IAAA,CAAA,EAAE,GAAG,WAAW,GAAG,KAAK,CAAC;AAElC;;AAEG;AACH,QAAA,IAAA,CAAA,OAAO,GAAG,iBAAiB,GAAG,KAAK,CAAC;AAGlC,QAAA,KAAK,EAAE,CAAC;KACT;iIAvCU,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAhB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,EAcG,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,YAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,SAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAAA,WAAW,EAKb,MAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,UAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,OAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAAA,WAAW,EA7B7B,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;AAOT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAGU,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAb5B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,QAAQ,EAAE,CAAA;;;;;;;AAOT,EAAA,CAAA;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAChD,iBAAA,CAAA;wDAUU,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBAKqD,UAAU,EAAA,CAAA;sBAApE,SAAS;uBAAC,SAAS,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA;gBAKA,QAAQ,EAAA,CAAA;sBAAhE,SAAS;uBAAC,OAAO,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA;gBAW9C,EAAE,EAAA,CAAA;sBAAV,KAAK;;;ACzDR;;;;;;;;;;AAUG;MAYU,qBAAqB,CAAA;iIAArB,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;qHAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAClB,mBAAmB,EACnB,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,mBAAmB,gDCvCnC,8RAQe,EAAA,MAAA,EAAA,CAAA,gJAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDyBX,IAAI,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACJ,sBAAsB,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAGb,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAXjC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,YACN,gBAAgB,EAAA,eAAA,EAGT,uBAAuB,CAAC,MAAM,EACtC,OAAA,EAAA;wBACP,IAAI;wBACJ,sBAAsB;AACvB,qBAAA,EAAA,QAAA,EAAA,8RAAA,EAAA,MAAA,EAAA,CAAA,gJAAA,CAAA,EAAA,CAAA;8BAGkC,OAAO,EAAA,CAAA;sBAAzC,YAAY;uBAAC,mBAAmB,CAAA;gBACE,OAAO,EAAA,CAAA;sBAAzC,YAAY;uBAAC,mBAAmB,CAAA;;;AE/BnC;;;;;;;;AAQG;MAQU,qBAAqB,CAAA;AAuBhC;;AAEG;AACH,IAAA,IAA4B,UAAU,GAAA;QACpC,OAAO,IAAI,CAAC,GAAG,CAAC;KACjB;AAED,IAAA,WAAA,CAAoB,GAAqB,EAAA;QAArB,IAAG,CAAA,GAAA,GAAH,GAAG,CAAkB;AA7BzC;;AAEG;QAC0C,IAAK,CAAA,KAAA,GAAG,IAAI,CAAC;AAE1D;;AAEG;QACuB,IAAI,CAAA,IAAA,GAAG,UAAU,CAAC;AAE5C;;AAEG;QACkC,IAAc,CAAA,cAAA,GAAG,EAAE,CAAC;AAEzD;;AAEG;QAC2B,IAAQ,CAAA,QAAA,GAAG,GAAG,CAAC;QAErC,IAAG,CAAA,GAAA,GAAG,EAAE,CAAC;AAUf;;AAEG;QACH,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;QAElC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC;KAC7B;iIArCU,qBAAqB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAA,gBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAArB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,mRAJtB,CAA2B,yBAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,sDAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAI1B,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAPjC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,YACN,gBAAgB,EAAA,QAAA,EAChB,2BAA2B,EAEpB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,sDAAA,CAAA,EAAA,CAAA;kFAMF,KAAK,EAAA,CAAA;sBAAjD,WAAW;uBAAC,sBAAsB,CAAA;gBAKT,IAAI,EAAA,CAAA;sBAA7B,WAAW;uBAAC,WAAW,CAAA;gBAKa,cAAc,EAAA,CAAA;sBAAlD,WAAW;uBAAC,sBAAsB,CAAA;gBAKL,QAAQ,EAAA,CAAA;sBAArC,WAAW;uBAAC,eAAe,CAAA;gBAOA,UAAU,EAAA,CAAA;sBAArC,WAAW;uBAAC,SAAS,CAAA;;;MC9BX,yBAAyB,CAAA;AAcpC;;AAEG;AACH,IAAA,IAAuC,YAAY,GAAA;QACjD,OAAO,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAI,KAAK,CAAC;KACtC;AAED;;AAEG;AACH,IAAA,IAAkC,QAAQ,GAAA;QACxC,OAAO,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAI,IAAI,CAAC;KACpC;IAWD,QAAQ,GAAA;AACN;;AAEG;AACH,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC;KAClC;AAED,IAAA,WAAA,CACU,EAAc,EAAA;QAAd,IAAE,CAAA,EAAA,GAAF,EAAE,CAAY;AA5CxB;;AAEG;QACsC,IAAK,CAAA,KAAA,GAAG,IAAI,CAAC;AAEtD;;AAEG;QACuB,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;;QAGC,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;QAgBtB,IAAY,CAAA,YAAA,GAAG,EAAE,CAAC;AAErD;;AAEG;QAC8B,IAAc,CAAA,cAAA,GAAG,EAAE,CAAC;QAE5C,IAAO,CAAA,OAAA,GAAG,EAAE,CAAC;KAYrB;AAED;;AAEG;IACH,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;KAC/B;iIAtDU,yBAAyB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAzB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,yBAAyB,+dAL1B,CAA2B,yBAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,uVAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;2FAK1B,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAVrC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,YACN,EAAE;AACV,wBAAA,4BAA4B,GAAG,GAAG;wBAClC,uBAAuB,EAAA,QAAA,EACf,2BAA2B,EAEpB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,MAAA,EAAA,CAAA,uVAAA,CAAA,EAAA,CAAA;+EAMI,KAAK,EAAA,CAAA;sBAA7C,WAAW;uBAAC,0BAA0B,CAAA;gBAKb,IAAI,EAAA,CAAA;sBAA7B,WAAW;uBAAC,WAAW,CAAA;gBAGgB,QAAQ,EAAA,CAAA;sBAA/C,KAAK;;sBAAI,WAAW;uBAAC,gBAAgB,CAAA;gBAKC,YAAY,EAAA,CAAA;sBAAlD,WAAW;uBAAC,oBAAoB,CAAA;gBAOC,QAAQ,EAAA,CAAA;sBAAzC,WAAW;uBAAC,eAAe,CAAA;gBAIO,YAAY,EAAA,CAAA;sBAA9C,WAAW;uBAAC,oBAAoB,CAAA;gBAKA,cAAc,EAAA,CAAA;sBAA9C,KAAK;;sBAAI,WAAW;uBAAC,SAAS,CAAA;gBAEtB,OAAO,EAAA,CAAA;sBAAf,KAAK;;;ACjCR;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BG;MAiBU,iBAAiB,CAAA;AA8C5B,IAAA,WAAA,CAAoB,KAAwB,EAAA;QAAxB,IAAK,CAAA,KAAA,GAAL,KAAK,CAAmB;AA7C5C;;AAEG;QACqC,IAAK,CAAA,KAAA,GAAG,IAAI,CAAC;AAOrD;;AAEG;QACM,IAAiB,CAAA,iBAAA,GAAW,IAAI,CAAC;AAE1C;;AAEG;QACqC,IAAiB,CAAA,iBAAA,GAAG,IAAI,CAAC;AAEjE;;AAEG;QACkB,IAAS,CAAA,SAAA,GAAG,EAAE,CAAC;AAEpC;;AAEG;AACO,QAAA,IAAA,CAAA,SAAS,GAAG,IAAI,YAAY,EAAU,CAAC;KAiBD;AAEhD;;AAEG;IACH,kBAAkB,GAAA;AAChB,QAAA,IAAG,IAAI,CAAC,iBAAiB,EAAE;AACzB,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,iBAAiB,CAAC;SAC3C;AAED,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;SACxC;KACF;AAED;;AAEG;AACH,IAAA,MAAM,CAAC,KAAa,EAAA;AAClB,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,cAAc,KAAK,KAAK,CAAC,CAAC;QAEjF,IAAI,CAAC,YAAY,EAAE;AACjB,YAAA,OAAO,CAAC,IAAI,CAAC,YAAY,KAAK,CAAA,0FAAA,CAA4F,CAAC,CAAC;YAC5H,OAAO;SACR;AAED,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AAC3B,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;AACzB,QAAA,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;QAE1B,YAAY,CAAC,KAAK,EAAE,CAAC;KACtB;AAED;;;AAGG;AACK,IAAA,YAAY,CAAC,MAAc,EAAA;QACjC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;AACnC,QAAA,IAAI,aAAa,GAAG,KAAK,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC;QACtE,MAAM,aAAa,GAAG,aAAa,CAAC;AACpC,QAAA,IAAI,QAAQ,CAAC;AAEb,QAAA,GAAG;AACD,YAAA,QAAQ,GAAG,CAAC,aAAa,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC;YAClE,aAAa,GAAG,QAAQ,CAAC;AAC3B,SAAC,QAAQ,KAAK,CAAC,QAAQ,CAAC,CAAC,QAAQ,IAAI,aAAa,KAAK,aAAa,EAAE;QAEtE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;KACjC;AAED;;AAEG;IACH,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;KACvB;AAED;;AAEG;IACH,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;KACtB;AAED;;AAEG;AACH,IAAA,WAAW,CAAC,KAA2B,EAAA;QACrC,KAAK,CAAC,cAAc,EAAE,CAAC;AACvB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;KACzC;AAED;;AAEG;AACH,IAAA,UAAU,CAAC,KAA2B,EAAA;QACpC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;AACnC,QAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;KACzC;iIA9HU,iBAAiB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;qHAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,SAAA,EAAA,CAAA,YAAA,EAAA,WAAA,CAAA,EAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,wBAAA,EAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,SAAA,EAAA,SAAA,EAkCX,qBAAqB,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,EAAA,SAAA,EAKrB,gBAAgB,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,SAAA,EAKnB,yBAAyB,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,gCAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC7GzC,svBAuBC,EAAA,MAAA,EAAA,CAAA,kJAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDkCG,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,yBAAyB,EAAA,QAAA,EAAA,kDAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,gBAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;2FAOhB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAhB7B,SAAS;iCACI,IAAI,EAAA,QAAA,EACN,WAAW,EAAA,aAAA,EAGN,iBAAiB,CAAC,IAAI,EACpB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACtC,OAAA,EAAA;wBACP,gBAAgB;wBAChB,yBAAyB;qBAC1B,EACe,cAAA,EAAA;wBACd,EAAE,SAAS,EAAE,gCAAgC,EAAE;AAChD,qBAAA,EAAA,QAAA,EAAA,svBAAA,EAAA,MAAA,EAAA,CAAA,kJAAA,CAAA,EAAA,CAAA;sFAOuC,KAAK,EAAA,CAAA;sBAA5C,WAAW;uBAAC,iBAAiB,CAAA;gBAUrB,iBAAiB,EAAA,CAAA;sBAAzB,KAAK;gBAKkC,iBAAiB,EAAA,CAAA;sBAAxD,WAAW;uBAAC,iBAAiB,CAAA;gBAKT,SAAS,EAAA,CAAA;sBAA7B,KAAK;uBAAC,YAAY,CAAA;gBAKT,SAAS,EAAA,CAAA;sBAAlB,MAAM;gBAKwD,OAAO,EAAA,CAAA;sBAArE,eAAe;AAAC,gBAAA,IAAA,EAAA,CAAA,qBAAqB,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,CAAA;gBAK1B,KAAK,EAAA,CAAA;sBAAvC,eAAe;uBAAC,gBAAgB,CAAA;gBAKQ,cAAc,EAAA,CAAA;sBAAtD,YAAY;uBAAC,yBAAyB,CAAA;;;AEtG5B,MAAA,oBAAoB,GAAU;IACzC,iBAAiB;IACjB,qBAAqB;IACrB,qBAAqB;IACrB,sBAAsB;IACtB,gBAAgB;;;ACZlB;;AAEG;;;;"}

package/fesm2022/daffodil-design-text-snippet-examples.mjs

@@ -0,0 +1,25 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { DaffTextSnippetComponent } from '@daffodil/design/text-snippet';
+
+class BasicTextSnippetComponent {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: BasicTextSnippetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: BasicTextSnippetComponent, isStandalone: true, selector: "basic-text-snippet", ngImport: i0, template: "<daff-text-snippet>\n\tLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</daff-text-snippet>", dependencies: [{ kind: "component", type: DaffTextSnippetComponent, selector: "daff-text-snippet", inputs: ["condensed", "html"], outputs: ["toggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: BasicTextSnippetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'basic-text-snippet', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        DaffTextSnippetComponent,
+                    ], template: "<daff-text-snippet>\n\tLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</daff-text-snippet>" }]
+        }] });
+
+const TEXT_SNIPPET_EXAMPLES = [
+    BasicTextSnippetComponent,
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TEXT_SNIPPET_EXAMPLES };
+//# sourceMappingURL=daffodil-design-text-snippet-examples.mjs.map

package/fesm2022/daffodil-design-text-snippet-examples.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"daffodil-design-text-snippet-examples.mjs","sources":["../../../libs/design/text-snippet/examples/src/basic-text-snippet/basic-text-snippet.component.ts","../../../libs/design/text-snippet/examples/src/basic-text-snippet/basic-text-snippet.component.html","../../../libs/design/text-snippet/examples/src/public_api.ts","../../../libs/design/text-snippet/examples/src/daffodil-design-text-snippet-examples.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\nimport { DaffTextSnippetComponent } from '@daffodil/design/text-snippet';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'basic-text-snippet',\n  templateUrl: './basic-text-snippet.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [\n    DaffTextSnippetComponent,\n  ],\n})\nexport class BasicTextSnippetComponent {}\n","<daff-text-snippet>\n\tLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</daff-text-snippet>","import { BasicTextSnippetComponent } from './basic-text-snippet/basic-text-snippet.component';\n\nexport const TEXT_SNIPPET_EXAMPLES = [\n  BasicTextSnippetComponent,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAiBa,yBAAyB,CAAA;iIAAzB,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;qHAAzB,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjBtC,4eAEoB,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDYhB,wBAAwB,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAGf,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAVrC,SAAS;AAEE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,oBAAoB,mBAEb,uBAAuB,CAAC,MAAM,EAAA,UAAA,EACnC,IAAI,EACP,OAAA,EAAA;wBACP,wBAAwB;AACzB,qBAAA,EAAA,QAAA,EAAA,4eAAA,EAAA,CAAA;;;AEbU,MAAA,qBAAqB,GAAG;IACnC,yBAAyB;;;ACH3B;;AAEG;;;;"}

package/fesm2022/daffodil-design-text-snippet.mjs

@@ -0,0 +1,53 @@
+import { NgIf } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, ElementRef, Component, ChangeDetectionStrategy, Input, ViewChild, Output } from '@angular/core';
+import * as i2 from '@daffodil/design/button';
+import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
+import * as i1 from '@daffodil/design';
+
+class DaffTextSnippetComponent {
+    constructor() {
+        /**
+         * A property to track whether or not the component
+         * should render a condensed version of the content.
+         */
+        this.condensed = true;
+        this.html = '';
+        /**
+         * An output event that can be used to track the state of the component externally.
+         */
+        this.toggle = new EventEmitter();
+    }
+    toggleSnippet() {
+        this.condensed = !this.condensed;
+        this.toggle.emit(this.condensed);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffTextSnippetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: DaffTextSnippetComponent, isStandalone: true, selector: "daff-text-snippet", inputs: { condensed: "condensed", html: "html" }, outputs: { toggle: "toggle" }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["contentEl"], descendants: true, read: ElementRef }, { propertyName: "htmlRef", first: true, predicate: ["htmlEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"daff-text-snippet__content daff-text-snippet__html\" #htmlEl [class.condensed]=\"condensed\" [innerHtml]=\"html\" *ngIf=\"html\"></div>\n<div class=\"daff-text-snippet__content daff-text-snippet__ngcontent\" #contentEl [class.condensed]=\"condensed\" *ngIf=\"!html\">\n  <ng-content></ng-content>\n</div>\n<button daff-underline-button color=\"theme-contrast\" [attr.aria-expanded]=\"!condensed ? true : false\" (click)=\"toggleSnippet()\">\n  <ng-container *ngIf=\"condensed\">Show More</ng-container>\n  <ng-container *ngIf=\"!condensed\">Show Less</ng-container>\n</button>\n", styles: [":host{display:block;position:relative}:host ::ng-deep .daff-text-snippet__content>*:first-child{margin-top:0}:host ::ng-deep .daff-text-snippet__content>*:last-child{margin-bottom:0}:host ::ng-deep h2:first-of-type{margin-top:0}.daff-text-snippet__content{display:block}.daff-text-snippet__content.condensed{display:-webkit-box;line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i1.DaffPrefixSuffixModule }, { kind: "component", type: i2.DaffUnderlineButtonComponent, selector: "button[daff-underline-button],a[daff-underline-button]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffTextSnippetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'daff-text-snippet', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        NgIf,
+                        DAFF_BUTTON_COMPONENTS,
+                    ], template: "<div class=\"daff-text-snippet__content daff-text-snippet__html\" #htmlEl [class.condensed]=\"condensed\" [innerHtml]=\"html\" *ngIf=\"html\"></div>\n<div class=\"daff-text-snippet__content daff-text-snippet__ngcontent\" #contentEl [class.condensed]=\"condensed\" *ngIf=\"!html\">\n  <ng-content></ng-content>\n</div>\n<button daff-underline-button color=\"theme-contrast\" [attr.aria-expanded]=\"!condensed ? true : false\" (click)=\"toggleSnippet()\">\n  <ng-container *ngIf=\"condensed\">Show More</ng-container>\n  <ng-container *ngIf=\"!condensed\">Show Less</ng-container>\n</button>\n", styles: [":host{display:block;position:relative}:host ::ng-deep .daff-text-snippet__content>*:first-child{margin-top:0}:host ::ng-deep .daff-text-snippet__content>*:last-child{margin-bottom:0}:host ::ng-deep h2:first-of-type{margin-top:0}.daff-text-snippet__content{display:block}.daff-text-snippet__content.condensed{display:-webkit-box;line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;width:100%}\n"] }]
+        }], propDecorators: { condensed: [{
+                type: Input
+            }], html: [{
+                type: Input
+            }], contentRef: [{
+                type: ViewChild,
+                args: ['contentEl', { read: ElementRef }]
+            }], htmlRef: [{
+                type: ViewChild,
+                args: ['htmlEl', { read: ElementRef }]
+            }], toggle: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DaffTextSnippetComponent };
+//# sourceMappingURL=daffodil-design-text-snippet.mjs.map

package/fesm2022/daffodil-design-text-snippet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"daffodil-design-text-snippet.mjs","sources":["../../../libs/design/text-snippet/src/text-snippet.component.ts","../../../libs/design/text-snippet/src/text-snippet.component.html","../../../libs/design/text-snippet/src/daffodil-design-text-snippet.ts"],"sourcesContent":["import { NgIf } from '@angular/common';\nimport {\n  Component,\n  Input,\n  ChangeDetectionStrategy,\n  EventEmitter,\n  Output,\n  ElementRef,\n  ViewChild,\n} from '@angular/core';\n\nimport { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';\n\n@Component({\n  selector: 'daff-text-snippet',\n  templateUrl: './text-snippet.component.html',\n  styleUrls: ['./text-snippet.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [\n    NgIf,\n    DAFF_BUTTON_COMPONENTS,\n  ],\n})\nexport class DaffTextSnippetComponent {\n\n  /**\n   * A property to track whether or not the component\n   * should render a condensed version of the content.\n   */\n  @Input() condensed = true;\n\n  @Input() html = '';\n\n  @ViewChild('contentEl', { read: ElementRef }) contentRef: ElementRef;\n  @ViewChild('htmlEl', { read: ElementRef }) htmlRef: ElementRef;\n\n  /**\n   * An output event that can be used to track the state of the component externally.\n   */\n  @Output() toggle: EventEmitter<boolean> = new EventEmitter();\n\n  toggleSnippet() {\n    this.condensed = !this.condensed;\n    this.toggle.emit(this.condensed);\n  }\n}\n","<div class=\"daff-text-snippet__content daff-text-snippet__html\" #htmlEl [class.condensed]=\"condensed\" [innerHtml]=\"html\" *ngIf=\"html\"></div>\n<div class=\"daff-text-snippet__content daff-text-snippet__ngcontent\" #contentEl [class.condensed]=\"condensed\" *ngIf=\"!html\">\n  <ng-content></ng-content>\n</div>\n<button daff-underline-button color=\"theme-contrast\" [attr.aria-expanded]=\"!condensed ? true : false\" (click)=\"toggleSnippet()\">\n  <ng-container *ngIf=\"condensed\">Show More</ng-container>\n  <ng-container *ngIf=\"!condensed\">Show Less</ng-container>\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;MAwBa,wBAAwB,CAAA;AAXrC,IAAA,WAAA,GAAA;AAaE;;;AAGG;QACM,IAAS,CAAA,SAAA,GAAG,IAAI,CAAC;QAEjB,IAAI,CAAA,IAAA,GAAG,EAAE,CAAC;AAKnB;;AAEG;AACO,QAAA,IAAA,CAAA,MAAM,GAA0B,IAAI,YAAY,EAAE,CAAC;AAM9D,KAAA;IAJC,aAAa,GAAA;AACX,QAAA,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;QACjC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KAClC;iIArBU,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAxB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,kPAUH,UAAU,EAAA,EAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,QAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EACb,UAAU,ECnCzC,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,ilBAQA,6dDYI,IAAI,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,EAAA,CAAA,sBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,4BAAA,EAAA,QAAA,EAAA,wDAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAIK,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAXpC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,mBAGZ,uBAAuB,CAAC,MAAM,EAAA,UAAA,EACnC,IAAI,EACP,OAAA,EAAA;wBACP,IAAI;wBACJ,sBAAsB;AACvB,qBAAA,EAAA,QAAA,EAAA,ilBAAA,EAAA,MAAA,EAAA,CAAA,qaAAA,CAAA,EAAA,CAAA;8BAQQ,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBAEG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAEwC,UAAU,EAAA,CAAA;sBAAvD,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,WAAW,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAA;gBACD,OAAO,EAAA,CAAA;sBAAjD,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,QAAQ,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAA;gBAK/B,MAAM,EAAA,CAAA;sBAAf,MAAM;;;AExCT;;AAEG;;;;"}