@daffodil/design 0.75.0 → 0.76.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/article/src/article-theme.scss +18 -8
- package/breadcrumb/README.md +52 -0
- package/breadcrumb/breadcrumb/breadcrumb.component.d.ts +7 -0
- package/breadcrumb/breadcrumb-item/breadcrumb-item.directive.d.ts +9 -0
- package/breadcrumb/breadcrumb.d.ts +3 -0
- package/breadcrumb/breadcrumb.module.d.ts +9 -0
- package/breadcrumb/examples/basic-breadcrumb/basic-breadcrumb.component.d.ts +5 -0
- package/breadcrumb/examples/index.d.ts +1 -0
- package/breadcrumb/examples/public_api.d.ts +2 -0
- package/breadcrumb/index.d.ts +1 -0
- package/breadcrumb/public_api.d.ts +4 -0
- package/breadcrumb/src/breadcrumb-theme.scss +13 -0
- package/core/article-encapsulated/article-encapsulated.directive.d.ts +17 -5
- package/core/colorable/colorable.directive.d.ts +29 -2
- package/core/compactable/compactable.directive.d.ts +31 -2
- package/core/manage-container-layout/manage-container-layout.directive.d.ts +38 -1
- package/core/sizable/sizable.directive.d.ts +46 -3
- package/core/skeletonable/skeletonable.directive.d.ts +36 -3
- package/core/statusable/statusable.directive.d.ts +33 -6
- package/core/text-alignable/text-alignable.directive.d.ts +35 -4
- package/esm2022/article/article/article.component.mjs +2 -2
- package/esm2022/breadcrumb/breadcrumb/breadcrumb.component.mjs +25 -0
- package/esm2022/breadcrumb/breadcrumb-item/breadcrumb-item.directive.mjs +33 -0
- package/esm2022/breadcrumb/breadcrumb.mjs +7 -0
- package/esm2022/breadcrumb/breadcrumb.module.mjs +26 -0
- package/esm2022/breadcrumb/daffodil-design-breadcrumb.mjs +5 -0
- package/esm2022/breadcrumb/examples/basic-breadcrumb/basic-breadcrumb.component.mjs +15 -0
- package/esm2022/breadcrumb/examples/daffodil-design-breadcrumb-examples.mjs +5 -0
- package/esm2022/breadcrumb/examples/index.mjs +2 -0
- package/esm2022/breadcrumb/examples/public_api.mjs +5 -0
- package/esm2022/breadcrumb/index.mjs +2 -0
- package/esm2022/breadcrumb/public_api.mjs +5 -0
- package/esm2022/core/article-encapsulated/article-encapsulated.directive.mjs +18 -6
- package/esm2022/core/colorable/colorable.directive.mjs +30 -3
- package/esm2022/core/compactable/compactable.directive.mjs +32 -3
- package/esm2022/core/manage-container-layout/manage-container-layout.directive.mjs +39 -2
- package/esm2022/core/sizable/sizable.directive.mjs +47 -4
- package/esm2022/core/skeletonable/skeletonable.directive.mjs +37 -4
- package/esm2022/core/statusable/statusable.directive.mjs +34 -7
- package/esm2022/core/text-alignable/text-alignable.directive.mjs +36 -5
- package/esm2022/modal/examples/basic-modal/basic-modal.component.mjs +2 -2
- package/esm2022/modal/modal/modal-config.mjs +1 -1
- package/esm2022/modal/service/modal.service.mjs +4 -1
- package/esm2022/sidebar/helper/is-docked-mode.mjs +9 -0
- package/esm2022/sidebar/helper/is-floating-mode.mjs +9 -0
- package/esm2022/sidebar/public_api.mjs +5 -1
- package/esm2022/sidebar/service/registration.type.mjs +2 -0
- package/esm2022/sidebar/service/sidebar.service.mjs +36 -0
- package/esm2022/sidebar/sidebar-viewport/sidebar-viewport.component.mjs +3 -3
- package/esm2022/tree/tree/tree.component.mjs +2 -2
- package/esm2022/tree/tree-item/tree-item.directive.mjs +3 -3
- package/fesm2022/daffodil-design-article.mjs +2 -2
- package/fesm2022/daffodil-design-article.mjs.map +1 -1
- package/fesm2022/daffodil-design-breadcrumb-examples.mjs +26 -0
- package/fesm2022/daffodil-design-breadcrumb-examples.mjs.map +1 -0
- package/fesm2022/daffodil-design-breadcrumb.mjs +90 -0
- package/fesm2022/daffodil-design-breadcrumb.mjs.map +1 -0
- package/fesm2022/daffodil-design-modal-examples.mjs +1 -1
- package/fesm2022/daffodil-design-modal-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-modal.mjs +3 -0
- package/fesm2022/daffodil-design-modal.mjs.map +1 -1
- package/fesm2022/daffodil-design-sidebar.mjs +57 -5
- package/fesm2022/daffodil-design-sidebar.mjs.map +1 -1
- package/fesm2022/daffodil-design-tree.mjs +4 -4
- package/fesm2022/daffodil-design-tree.mjs.map +1 -1
- package/fesm2022/daffodil-design.mjs +265 -26
- package/fesm2022/daffodil-design.mjs.map +1 -1
- package/modal/README.md +14 -1
- package/modal/modal/modal-config.d.ts +2 -0
- package/package.json +1 -1
- package/scss/theme.scss +2 -0
- package/scss/theming/_theme-css-variables.scss +1 -1
- package/sidebar/helper/is-docked-mode.d.ts +5 -0
- package/sidebar/helper/is-floating-mode.d.ts +5 -0
- package/sidebar/public_api.d.ts +4 -0
- package/sidebar/service/registration.type.d.ts +11 -0
- package/sidebar/service/sidebar.service.d.ts +25 -0
@@ -0,0 +1,25 @@
|
|
1
|
+
import { Component, ChangeDetectionStrategy, HostBinding, ViewEncapsulation, } from '@angular/core';
|
2
|
+
import { DaffArticleEncapsulatedDirective, DaffSkeletonableDirective, } from '@daffodil/design';
|
3
|
+
import * as i0 from "@angular/core";
|
4
|
+
import * as i1 from "@daffodil/design";
|
5
|
+
export class DaffBreadcrumbComponent {
|
6
|
+
constructor() {
|
7
|
+
this.class = true;
|
8
|
+
}
|
9
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
10
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: DaffBreadcrumbComponent, isStandalone: true, selector: "ol[daff-breadcrumb]", host: { properties: { "class.daff-breadcrumb": "this.class" } }, hostDirectives: [{ directive: i1.DaffArticleEncapsulatedDirective }, { directive: i1.DaffSkeletonableDirective, inputs: ["skeleton", "skeleton"] }], ngImport: i0, template: "<ng-content select=\"[daffBreadcrumbItem]\"></ng-content>", styles: [".daff-breadcrumb{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}.daff-breadcrumb__item{font-size:1rem}.daff-breadcrumb__item a{text-decoration:none}.daff-breadcrumb__item a:hover{text-decoration:underline}.daff-breadcrumb__item.active{font-weight:500}.daff-breadcrumb__item:not(:last-child):after{content:\"/\";color:currentColor;font-weight:400;margin:0 .5rem}.daff-breadcrumb.daff-skeleton{display:flex;position:relative;max-width:290px;width:100%}.daff-breadcrumb.daff-skeleton:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:24px;width:100%;position:absolute;top:0;left:0}.daff-breadcrumb.daff-skeleton .daff-breadcrumb__item{visibility:hidden}.daff-breadcrumb.daff-skeleton .daff-breadcrumb__item:before{content:unset}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
11
|
+
}
|
12
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffBreadcrumbComponent, decorators: [{
|
13
|
+
type: Component,
|
14
|
+
args: [{ selector: 'ol[daff-breadcrumb]', hostDirectives: [
|
15
|
+
{ directive: DaffArticleEncapsulatedDirective },
|
16
|
+
{
|
17
|
+
directive: DaffSkeletonableDirective,
|
18
|
+
inputs: ['skeleton'],
|
19
|
+
},
|
20
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, template: "<ng-content select=\"[daffBreadcrumbItem]\"></ng-content>", styles: [".daff-breadcrumb{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}.daff-breadcrumb__item{font-size:1rem}.daff-breadcrumb__item a{text-decoration:none}.daff-breadcrumb__item a:hover{text-decoration:underline}.daff-breadcrumb__item.active{font-weight:500}.daff-breadcrumb__item:not(:last-child):after{content:\"/\";color:currentColor;font-weight:400;margin:0 .5rem}.daff-breadcrumb.daff-skeleton{display:flex;position:relative;max-width:290px;width:100%}.daff-breadcrumb.daff-skeleton:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:24px;width:100%;position:absolute;top:0;left:0}.daff-breadcrumb.daff-skeleton .daff-breadcrumb__item{visibility:hidden}.daff-breadcrumb.daff-skeleton .daff-breadcrumb__item:before{content:unset}\n"] }]
|
21
|
+
}], propDecorators: { class: [{
|
22
|
+
type: HostBinding,
|
23
|
+
args: ['class.daff-breadcrumb']
|
24
|
+
}] } });
|
25
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWRjcnVtYi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL2Rlc2lnbi9icmVhZGNydW1iL3NyYy9icmVhZGNydW1iL2JyZWFkY3J1bWIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vbGlicy9kZXNpZ24vYnJlYWRjcnVtYi9zcmMvYnJlYWRjcnVtYi9icmVhZGNydW1iLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsdUJBQXVCLEVBQ3ZCLFdBQVcsRUFDWCxpQkFBaUIsR0FDbEIsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUNMLGdDQUFnQyxFQUNoQyx5QkFBeUIsR0FDMUIsTUFBTSxrQkFBa0IsQ0FBQzs7O0FBbUIxQixNQUFNLE9BQU8sdUJBQXVCO0lBakJwQztRQWtCd0MsVUFBSyxHQUFHLElBQUksQ0FBQztLQUNwRDtrSUFGWSx1QkFBdUI7c0hBQXZCLHVCQUF1QixxU0M3QnBDLDJEQUF1RDs7NEZENkIxQyx1QkFBdUI7a0JBakJuQyxTQUFTOytCQUVFLHFCQUFxQixrQkFHZjt3QkFDZCxFQUFFLFNBQVMsRUFBRSxnQ0FBZ0MsRUFBRTt3QkFDL0M7NEJBQ0UsU0FBUyxFQUFFLHlCQUF5Qjs0QkFDcEMsTUFBTSxFQUFFLENBQUMsVUFBVSxDQUFDO3lCQUNyQjtxQkFDRixtQkFDZ0IsdUJBQXVCLENBQUMsTUFBTSxpQkFDaEMsaUJBQWlCLENBQUMsSUFBSSxjQUN6QixJQUFJOzhCQUlzQixLQUFLO3NCQUExQyxXQUFXO3VCQUFDLHVCQUF1QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIEhvc3RCaW5kaW5nLFxuICBWaWV3RW5jYXBzdWxhdGlvbixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7XG4gIERhZmZBcnRpY2xlRW5jYXBzdWxhdGVkRGlyZWN0aXZlLFxuICBEYWZmU2tlbGV0b25hYmxlRGlyZWN0aXZlLFxufSBmcm9tICdAZGFmZm9kaWwvZGVzaWduJztcblxuQENvbXBvbmVudCh7XG4gIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAYW5ndWxhci1lc2xpbnQvY29tcG9uZW50LXNlbGVjdG9yXG4gIHNlbGVjdG9yOiAnb2xbZGFmZi1icmVhZGNydW1iXScsXG4gIHRlbXBsYXRlVXJsOiAnLi9icmVhZGNydW1iLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vYnJlYWRjcnVtYi5jb21wb25lbnQuc2NzcyddLFxuICBob3N0RGlyZWN0aXZlczogW1xuICAgIHsgZGlyZWN0aXZlOiBEYWZmQXJ0aWNsZUVuY2Fwc3VsYXRlZERpcmVjdGl2ZSB9LFxuICAgIHtcbiAgICAgIGRpcmVjdGl2ZTogRGFmZlNrZWxldG9uYWJsZURpcmVjdGl2ZSxcbiAgICAgIGlucHV0czogWydza2VsZXRvbiddLFxuICAgIH0sXG4gIF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBzdGFuZGFsb25lOiB0cnVlLFxufSlcblxuZXhwb3J0IGNsYXNzIERhZmZCcmVhZGNydW1iQ29tcG9uZW50IHtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5kYWZmLWJyZWFkY3J1bWInKSBjbGFzcyA9IHRydWU7XG59XG4iLCI8bmctY29udGVudCBzZWxlY3Q9XCJbZGFmZkJyZWFkY3J1bWJJdGVtXVwiPjwvbmctY29udGVudD4iXX0=
|
@@ -0,0 +1,33 @@
|
|
1
|
+
import { Directive, HostBinding, Input, } from '@angular/core';
|
2
|
+
import * as i0 from "@angular/core";
|
3
|
+
export class DaffBreadcrumbItemDirective {
|
4
|
+
constructor() {
|
5
|
+
this.class = true;
|
6
|
+
/** Whether or not the breadcrumb item is active */
|
7
|
+
this.active = false;
|
8
|
+
}
|
9
|
+
get ariaCurrent() {
|
10
|
+
return this.active ? 'page' : 'false';
|
11
|
+
}
|
12
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffBreadcrumbItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
13
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: DaffBreadcrumbItemDirective, isStandalone: true, selector: "li[daffBreadcrumbItem]", inputs: { active: "active" }, host: { properties: { "class.daff-breadcrumb__item": "this.class", "attr.aria-current": "this.ariaCurrent", "class.active": "this.active" } }, ngImport: i0 }); }
|
14
|
+
}
|
15
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffBreadcrumbItemDirective, decorators: [{
|
16
|
+
type: Directive,
|
17
|
+
args: [{
|
18
|
+
selector: 'li[daffBreadcrumbItem]',
|
19
|
+
standalone: true,
|
20
|
+
}]
|
21
|
+
}], propDecorators: { class: [{
|
22
|
+
type: HostBinding,
|
23
|
+
args: ['class.daff-breadcrumb__item']
|
24
|
+
}], ariaCurrent: [{
|
25
|
+
type: HostBinding,
|
26
|
+
args: ['attr.aria-current']
|
27
|
+
}], active: [{
|
28
|
+
type: Input
|
29
|
+
}, {
|
30
|
+
type: HostBinding,
|
31
|
+
args: ['class.active']
|
32
|
+
}] } });
|
33
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWRjcnVtYi1pdGVtLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMvZGVzaWduL2JyZWFkY3J1bWIvc3JjL2JyZWFkY3J1bWItaXRlbS9icmVhZGNydW1iLWl0ZW0uZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsV0FBVyxFQUNYLEtBQUssR0FDTixNQUFNLGVBQWUsQ0FBQzs7QUFNdkIsTUFBTSxPQUFPLDJCQUEyQjtJQUp4QztRQUs4QyxVQUFLLEdBQUcsSUFBSSxDQUFDO1FBTXpELG1EQUFtRDtRQUNiLFdBQU0sR0FBRyxLQUFLLENBQUM7S0FFdEQ7SUFQQyxJQUFzQyxXQUFXO1FBQy9DLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUM7SUFDeEMsQ0FBQztrSUFMVSwyQkFBMkI7c0hBQTNCLDJCQUEyQjs7NEZBQTNCLDJCQUEyQjtrQkFKdkMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsd0JBQXdCO29CQUNsQyxVQUFVLEVBQUUsSUFBSTtpQkFDakI7OEJBRTZDLEtBQUs7c0JBQWhELFdBQVc7dUJBQUMsNkJBQTZCO2dCQUVKLFdBQVc7c0JBQWhELFdBQVc7dUJBQUMsbUJBQW1CO2dCQUtNLE1BQU07c0JBQTNDLEtBQUs7O3NCQUFJLFdBQVc7dUJBQUMsY0FBYyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIERpcmVjdGl2ZSxcbiAgSG9zdEJpbmRpbmcsXG4gIElucHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnbGlbZGFmZkJyZWFkY3J1bWJJdGVtXScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG59KVxuZXhwb3J0IGNsYXNzIERhZmZCcmVhZGNydW1iSXRlbURpcmVjdGl2ZSB7XG4gIEBIb3N0QmluZGluZygnY2xhc3MuZGFmZi1icmVhZGNydW1iX19pdGVtJykgY2xhc3MgPSB0cnVlO1xuXG4gIEBIb3N0QmluZGluZygnYXR0ci5hcmlhLWN1cnJlbnQnKSBnZXQgYXJpYUN1cnJlbnQoKSB7XG4gICAgcmV0dXJuIHRoaXMuYWN0aXZlID8gJ3BhZ2UnIDogJ2ZhbHNlJztcbiAgfVxuXG4gIC8qKiBXaGV0aGVyIG9yIG5vdCB0aGUgYnJlYWRjcnVtYiBpdGVtIGlzIGFjdGl2ZSAqL1xuICBASW5wdXQoKSBASG9zdEJpbmRpbmcoJ2NsYXNzLmFjdGl2ZScpIGFjdGl2ZSA9IGZhbHNlO1xuXG59XG4iXX0=
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import { DaffBreadcrumbComponent } from './breadcrumb/breadcrumb.component';
|
2
|
+
import { DaffBreadcrumbItemDirective } from './breadcrumb-item/breadcrumb-item.directive';
|
3
|
+
export const DAFF_BREADCRUMB_COMPONENTS = [
|
4
|
+
DaffBreadcrumbComponent,
|
5
|
+
DaffBreadcrumbItemDirective,
|
6
|
+
];
|
7
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWRjcnVtYi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2xpYnMvZGVzaWduL2JyZWFkY3J1bWIvc3JjL2JyZWFkY3J1bWIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sbUNBQW1DLENBQUM7QUFDNUUsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sNkNBQTZDLENBQUM7QUFFMUYsTUFBTSxDQUFDLE1BQU0sMEJBQTBCLEdBQVc7SUFDaEQsdUJBQXVCO0lBQ3ZCLDJCQUEyQjtDQUM1QixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGFmZkJyZWFkY3J1bWJDb21wb25lbnQgfSBmcm9tICcuL2JyZWFkY3J1bWIvYnJlYWRjcnVtYi5jb21wb25lbnQnO1xuaW1wb3J0IHsgRGFmZkJyZWFkY3J1bWJJdGVtRGlyZWN0aXZlIH0gZnJvbSAnLi9icmVhZGNydW1iLWl0ZW0vYnJlYWRjcnVtYi1pdGVtLmRpcmVjdGl2ZSc7XG5cbmV4cG9ydCBjb25zdCBEQUZGX0JSRUFEQ1JVTUJfQ09NUE9ORU5UUyA9IDxjb25zdD4gW1xuICBEYWZmQnJlYWRjcnVtYkNvbXBvbmVudCxcbiAgRGFmZkJyZWFkY3J1bWJJdGVtRGlyZWN0aXZlLFxuXTtcbiJdfQ==
|
@@ -0,0 +1,26 @@
|
|
1
|
+
import { NgModule } from '@angular/core';
|
2
|
+
import { DaffBreadcrumbComponent } from './breadcrumb/breadcrumb.component';
|
3
|
+
import { DaffBreadcrumbItemDirective } from './breadcrumb-item/breadcrumb-item.directive';
|
4
|
+
import * as i0 from "@angular/core";
|
5
|
+
/** @deprecated in favor of {@link DAFF_BREADCRUMB_COMPONENTS} */
|
6
|
+
export class DaffBreadcrumbModule {
|
7
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffBreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
8
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: DaffBreadcrumbModule, imports: [DaffBreadcrumbComponent,
|
9
|
+
DaffBreadcrumbItemDirective], exports: [DaffBreadcrumbComponent,
|
10
|
+
DaffBreadcrumbItemDirective] }); }
|
11
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffBreadcrumbModule }); }
|
12
|
+
}
|
13
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffBreadcrumbModule, decorators: [{
|
14
|
+
type: NgModule,
|
15
|
+
args: [{
|
16
|
+
imports: [
|
17
|
+
DaffBreadcrumbComponent,
|
18
|
+
DaffBreadcrumbItemDirective,
|
19
|
+
],
|
20
|
+
exports: [
|
21
|
+
DaffBreadcrumbComponent,
|
22
|
+
DaffBreadcrumbItemDirective,
|
23
|
+
],
|
24
|
+
}]
|
25
|
+
}] });
|
26
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWRjcnVtYi5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9saWJzL2Rlc2lnbi9icmVhZGNydW1iL3NyYy9icmVhZGNydW1iLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRXpDLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBQzVFLE9BQU8sRUFBRSwyQkFBMkIsRUFBRSxNQUFNLDZDQUE2QyxDQUFDOztBQUUxRixpRUFBaUU7QUFXakUsTUFBTSxPQUFPLG9CQUFvQjtrSUFBcEIsb0JBQW9CO21JQUFwQixvQkFBb0IsWUFSN0IsdUJBQXVCO1lBQ3ZCLDJCQUEyQixhQUczQix1QkFBdUI7WUFDdkIsMkJBQTJCO21JQUdsQixvQkFBb0I7OzRGQUFwQixvQkFBb0I7a0JBVmhDLFFBQVE7bUJBQUM7b0JBQ1IsT0FBTyxFQUFFO3dCQUNQLHVCQUF1Qjt3QkFDdkIsMkJBQTJCO3FCQUM1QjtvQkFDRCxPQUFPLEVBQUU7d0JBQ1AsdUJBQXVCO3dCQUN2QiwyQkFBMkI7cUJBQzVCO2lCQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgRGFmZkJyZWFkY3J1bWJDb21wb25lbnQgfSBmcm9tICcuL2JyZWFkY3J1bWIvYnJlYWRjcnVtYi5jb21wb25lbnQnO1xuaW1wb3J0IHsgRGFmZkJyZWFkY3J1bWJJdGVtRGlyZWN0aXZlIH0gZnJvbSAnLi9icmVhZGNydW1iLWl0ZW0vYnJlYWRjcnVtYi1pdGVtLmRpcmVjdGl2ZSc7XG5cbi8qKiBAZGVwcmVjYXRlZCBpbiBmYXZvciBvZiB7QGxpbmsgREFGRl9CUkVBRENSVU1CX0NPTVBPTkVOVFN9ICovXG5ATmdNb2R1bGUoe1xuICBpbXBvcnRzOiBbXG4gICAgRGFmZkJyZWFkY3J1bWJDb21wb25lbnQsXG4gICAgRGFmZkJyZWFkY3J1bWJJdGVtRGlyZWN0aXZlLFxuICBdLFxuICBleHBvcnRzOiBbXG4gICAgRGFmZkJyZWFkY3J1bWJDb21wb25lbnQsXG4gICAgRGFmZkJyZWFkY3J1bWJJdGVtRGlyZWN0aXZlLFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBEYWZmQnJlYWRjcnVtYk1vZHVsZSB7IH1cbiJdfQ==
|
@@ -0,0 +1,5 @@
|
|
1
|
+
/**
|
2
|
+
* Generated bundle index. Do not edit.
|
3
|
+
*/
|
4
|
+
export * from './index';
|
5
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGFmZm9kaWwtZGVzaWduLWJyZWFkY3J1bWIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9saWJzL2Rlc2lnbi9icmVhZGNydW1iL3NyYy9kYWZmb2RpbC1kZXNpZ24tYnJlYWRjcnVtYi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ==
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import { ChangeDetectionStrategy, Component, } from '@angular/core';
|
2
|
+
import { DAFF_BREADCRUMB_COMPONENTS } from '@daffodil/design/breadcrumb';
|
3
|
+
import * as i0 from "@angular/core";
|
4
|
+
import * as i1 from "@daffodil/design/breadcrumb";
|
5
|
+
export class BasicBreadcrumbComponent {
|
6
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: BasicBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
7
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: BasicBreadcrumbComponent, isStandalone: true, selector: "basic-breadcrumb", ngImport: i0, template: "<nav aria-label=\"Breadcrumb\">\n\t<ol daff-breadcrumb>\n\t\t<li daffBreadcrumbItem>\n\t\t\t<a routerLink=\"/link\">Link</a>\n\t\t</li>\n\t\t<li daffBreadcrumbItem [active]=\"true\">Active Link</li>\n\t</ol>\n</nav>", dependencies: [{ kind: "component", type: i1.DaffBreadcrumbComponent, selector: "ol[daff-breadcrumb]" }, { kind: "directive", type: i1.DaffBreadcrumbItemDirective, selector: "li[daffBreadcrumbItem]", inputs: ["active"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
8
|
+
}
|
9
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: BasicBreadcrumbComponent, decorators: [{
|
10
|
+
type: Component,
|
11
|
+
args: [{ selector: 'basic-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
12
|
+
DAFF_BREADCRUMB_COMPONENTS,
|
13
|
+
], template: "<nav aria-label=\"Breadcrumb\">\n\t<ol daff-breadcrumb>\n\t\t<li daffBreadcrumbItem>\n\t\t\t<a routerLink=\"/link\">Link</a>\n\t\t</li>\n\t\t<li daffBreadcrumbItem [active]=\"true\">Active Link</li>\n\t</ol>\n</nav>" }]
|
14
|
+
}] });
|
15
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFzaWMtYnJlYWRjcnVtYi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2Rlc2lnbi9icmVhZGNydW1iL2V4YW1wbGVzL3NyYy9iYXNpYy1icmVhZGNydW1iL2Jhc2ljLWJyZWFkY3J1bWIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9kZXNpZ24vYnJlYWRjcnVtYi9leGFtcGxlcy9zcmMvYmFzaWMtYnJlYWRjcnVtYi9iYXNpYy1icmVhZGNydW1iLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxHQUNWLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxNQUFNLDZCQUE2QixDQUFDOzs7QUFZekUsTUFBTSxPQUFPLHdCQUF3QjtrSUFBeEIsd0JBQXdCO3NIQUF4Qix3QkFBd0IsNEVDakJyQyx5TkFPTTs7NEZEVU8sd0JBQXdCO2tCQVZwQyxTQUFTOytCQUVFLGtCQUFrQixtQkFFWCx1QkFBdUIsQ0FBQyxNQUFNLGNBQ25DLElBQUksV0FDUDt3QkFDUCwwQkFBMEI7cUJBQzNCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IERBRkZfQlJFQURDUlVNQl9DT01QT05FTlRTIH0gZnJvbSAnQGRhZmZvZGlsL2Rlc2lnbi9icmVhZGNydW1iJztcblxuQENvbXBvbmVudCh7XG4gIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAYW5ndWxhci1lc2xpbnQvY29tcG9uZW50LXNlbGVjdG9yXG4gIHNlbGVjdG9yOiAnYmFzaWMtYnJlYWRjcnVtYicsXG4gIHRlbXBsYXRlVXJsOiAnLi9iYXNpYy1icmVhZGNydW1iLmNvbXBvbmVudC5odG1sJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtcbiAgICBEQUZGX0JSRUFEQ1JVTUJfQ09NUE9ORU5UUyxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgQmFzaWNCcmVhZGNydW1iQ29tcG9uZW50IHt9XG4iLCI8bmF2IGFyaWEtbGFiZWw9XCJCcmVhZGNydW1iXCI+XG5cdDxvbCBkYWZmLWJyZWFkY3J1bWI+XG5cdFx0PGxpIGRhZmZCcmVhZGNydW1iSXRlbT5cblx0XHRcdDxhIHJvdXRlckxpbms9XCIvbGlua1wiPkxpbms8L2E+XG5cdFx0PC9saT5cblx0XHQ8bGkgZGFmZkJyZWFkY3J1bWJJdGVtIFthY3RpdmVdPVwidHJ1ZVwiPkFjdGl2ZSBMaW5rPC9saT5cblx0PC9vbD5cbjwvbmF2PiJdfQ==
|
@@ -0,0 +1,5 @@
|
|
1
|
+
/**
|
2
|
+
* Generated bundle index. Do not edit.
|
3
|
+
*/
|
4
|
+
export * from './index';
|
5
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGFmZm9kaWwtZGVzaWduLWJyZWFkY3J1bWItZXhhbXBsZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL2Rlc2lnbi9icmVhZGNydW1iL2V4YW1wbGVzL3NyYy9kYWZmb2RpbC1kZXNpZ24tYnJlYWRjcnVtYi1leGFtcGxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ==
|
@@ -0,0 +1,2 @@
|
|
1
|
+
export * from './public_api';
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL2Rlc2lnbi9icmVhZGNydW1iL2V4YW1wbGVzL3NyYy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vcHVibGljX2FwaSc7XG4iXX0=
|
@@ -0,0 +1,5 @@
|
|
1
|
+
import { BasicBreadcrumbComponent } from './basic-breadcrumb/basic-breadcrumb.component';
|
2
|
+
export const BREADCRUMB_EXAMPLES = [
|
3
|
+
BasicBreadcrumbComponent,
|
4
|
+
];
|
5
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMvZGVzaWduL2JyZWFkY3J1bWIvZXhhbXBsZXMvc3JjL3B1YmxpY19hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sK0NBQStDLENBQUM7QUFFekYsTUFBTSxDQUFDLE1BQU0sbUJBQW1CLEdBQUc7SUFDakMsd0JBQXdCO0NBQ3pCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCYXNpY0JyZWFkY3J1bWJDb21wb25lbnQgfSBmcm9tICcuL2Jhc2ljLWJyZWFkY3J1bWIvYmFzaWMtYnJlYWRjcnVtYi5jb21wb25lbnQnO1xuXG5leHBvcnQgY29uc3QgQlJFQURDUlVNQl9FWEFNUExFUyA9IFtcbiAgQmFzaWNCcmVhZGNydW1iQ29tcG9uZW50LFxuXTtcbiJdfQ==
|
@@ -0,0 +1,2 @@
|
|
1
|
+
export * from './public_api';
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9saWJzL2Rlc2lnbi9icmVhZGNydW1iL3NyYy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vcHVibGljX2FwaSc7XG4iXX0=
|
@@ -0,0 +1,5 @@
|
|
1
|
+
export * from './breadcrumb/breadcrumb.component';
|
2
|
+
export * from './breadcrumb-item/breadcrumb-item.directive';
|
3
|
+
export { DAFF_BREADCRUMB_COMPONENTS } from './breadcrumb';
|
4
|
+
export { DaffBreadcrumbModule } from './breadcrumb.module';
|
5
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2xpYnMvZGVzaWduL2JyZWFkY3J1bWIvc3JjL3B1YmxpY19hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxtQ0FBbUMsQ0FBQztBQUNsRCxjQUFjLDZDQUE2QyxDQUFDO0FBQzVELE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxNQUFNLGNBQWMsQ0FBQztBQUMxRCxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vYnJlYWRjcnVtYi9icmVhZGNydW1iLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2JyZWFkY3J1bWItaXRlbS9icmVhZGNydW1iLWl0ZW0uZGlyZWN0aXZlJztcbmV4cG9ydCB7IERBRkZfQlJFQURDUlVNQl9DT01QT05FTlRTIH0gZnJvbSAnLi9icmVhZGNydW1iJztcbmV4cG9ydCB7IERhZmZCcmVhZGNydW1iTW9kdWxlIH0gZnJvbSAnLi9icmVhZGNydW1iLm1vZHVsZSc7XG4iXX0=
|
@@ -1,17 +1,29 @@
|
|
1
1
|
import { Directive, HostBinding, } from '@angular/core';
|
2
2
|
import * as i0 from "@angular/core";
|
3
3
|
/**
|
4
|
-
*
|
5
|
-
*
|
4
|
+
* `DaffArticleEncapsulatedDirective` is used to encapsulate custom components within an article,
|
5
|
+
* preventing {@link DaffArticleComponent } styles from bleeding into the component.
|
6
6
|
*
|
7
|
-
* ##
|
7
|
+
* ## Usage
|
8
|
+
*
|
9
|
+
* ### Implementing it as an attribute directive
|
8
10
|
*
|
9
11
|
* ```html
|
10
12
|
* <my-custom-component daffArticleEncapsulated></my-custom-component>
|
11
13
|
* ```
|
12
14
|
*
|
13
|
-
*
|
14
|
-
*
|
15
|
+
* ### Implementing it as an Angular host directive
|
16
|
+
*
|
17
|
+
* ```ts
|
18
|
+
* @Component({
|
19
|
+
* standalone: true,
|
20
|
+
* selector: 'custom-component',
|
21
|
+
* template: 'custom-component.html',
|
22
|
+
* hostDirectives: [{ directive: DaffArticleEncapsulatedDirective }],
|
23
|
+
* })
|
24
|
+
* export class CustomComponent { }
|
25
|
+
*
|
26
|
+
* This directive will apply the `daff-ae` class to your component, ensuring that it is encapsulated from the article's styles.
|
15
27
|
*/
|
16
28
|
export class DaffArticleEncapsulatedDirective {
|
17
29
|
constructor() {
|
@@ -30,4 +42,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
|
|
30
42
|
type: HostBinding,
|
31
43
|
args: ['class.daff-ae']
|
32
44
|
}] } });
|
33
|
-
//# sourceMappingURL=data:application/json;base64,
|
45
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXJ0aWNsZS1lbmNhcHN1bGF0ZWQuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy9kZXNpZ24vc3JjL2NvcmUvYXJ0aWNsZS1lbmNhcHN1bGF0ZWQvYXJ0aWNsZS1lbmNhcHN1bGF0ZWQuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsV0FBVyxHQUNaLE1BQU0sZUFBZSxDQUFDOztBQUV2Qjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBd0JHO0FBS0gsTUFBTSxPQUFPLGdDQUFnQztJQUo3QztRQUtnQyxVQUFLLEdBQUcsSUFBSSxDQUFDO0tBQzVDO2tJQUZZLGdDQUFnQztzSEFBaEMsZ0NBQWdDOzs0RkFBaEMsZ0NBQWdDO2tCQUo1QyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSwyQkFBMkI7b0JBQ3JDLFVBQVUsRUFBRSxJQUFJO2lCQUNqQjs4QkFFK0IsS0FBSztzQkFBbEMsV0FBVzt1QkFBQyxlQUFlIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgRGlyZWN0aXZlLFxuICBIb3N0QmluZGluZyxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbi8qKlxuICogYERhZmZBcnRpY2xlRW5jYXBzdWxhdGVkRGlyZWN0aXZlYCBpcyB1c2VkIHRvIGVuY2Fwc3VsYXRlIGN1c3RvbSBjb21wb25lbnRzIHdpdGhpbiBhbiBhcnRpY2xlLFxuICogcHJldmVudGluZyB7QGxpbmsgRGFmZkFydGljbGVDb21wb25lbnQgfSBzdHlsZXMgZnJvbSBibGVlZGluZyBpbnRvIHRoZSBjb21wb25lbnQuXG4gKlxuICogIyMgVXNhZ2VcbiAqXG4gKiAjIyMgSW1wbGVtZW50aW5nIGl0IGFzIGFuIGF0dHJpYnV0ZSBkaXJlY3RpdmVcbiAqXG4gKiBgYGBodG1sXG4gKiA8bXktY3VzdG9tLWNvbXBvbmVudCBkYWZmQXJ0aWNsZUVuY2Fwc3VsYXRlZD48L215LWN1c3RvbS1jb21wb25lbnQ+XG4gKiBgYGBcbiAqXG4gKiAjIyMgSW1wbGVtZW50aW5nIGl0IGFzIGFuIEFuZ3VsYXIgaG9zdCBkaXJlY3RpdmVcbiAqXG4gKiBgYGB0c1xuICogQENvbXBvbmVudCh7XG4gKiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAqICBzZWxlY3RvcjogJ2N1c3RvbS1jb21wb25lbnQnLFxuICogIHRlbXBsYXRlOiAnY3VzdG9tLWNvbXBvbmVudC5odG1sJyxcbiAqICBob3N0RGlyZWN0aXZlczogW3sgZGlyZWN0aXZlOiBEYWZmQXJ0aWNsZUVuY2Fwc3VsYXRlZERpcmVjdGl2ZSB9XSxcbiAqIH0pXG4gKiBleHBvcnQgY2xhc3MgQ3VzdG9tQ29tcG9uZW50IHsgfVxuICpcbiAqIFRoaXMgZGlyZWN0aXZlIHdpbGwgYXBwbHkgdGhlIGBkYWZmLWFlYCBjbGFzcyB0byB5b3VyIGNvbXBvbmVudCwgZW5zdXJpbmcgdGhhdCBpdCBpcyBlbmNhcHN1bGF0ZWQgZnJvbSB0aGUgYXJ0aWNsZSdzIHN0eWxlcy5cbiAqL1xuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW2RhZmZBcnRpY2xlRW5jYXBzdWxhdGVkXScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG59KVxuZXhwb3J0IGNsYXNzIERhZmZBcnRpY2xlRW5jYXBzdWxhdGVkRGlyZWN0aXZlIHtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5kYWZmLWFlJykgY2xhc3MgPSB0cnVlO1xufVxuIl19
|
@@ -8,18 +8,45 @@ const validateColor = (color) => {
|
|
8
8
|
}
|
9
9
|
};
|
10
10
|
/**
|
11
|
-
*
|
11
|
+
* `DaffColorableDirective` allows a component to conditionally apply color-specific
|
12
12
|
* styles by setting CSS classes based on the specified color. This directive is useful
|
13
13
|
* for applying different color palettes to a component in an Angular application.
|
14
14
|
*
|
15
15
|
* ## Usage
|
16
16
|
*
|
17
|
-
*
|
17
|
+
* ### Implementing it as an attribute directive
|
18
18
|
*
|
19
19
|
* ```html
|
20
20
|
* <div daffColorable [color]="componentColor">Colored content</div>
|
21
21
|
* ```
|
22
22
|
*
|
23
|
+
* ### Implementing it as an Angular host directive
|
24
|
+
*
|
25
|
+
* ```ts
|
26
|
+
* @Component({
|
27
|
+
* standalone: true,
|
28
|
+
* selector: 'custom-component',
|
29
|
+
* template: 'custom-component.html',
|
30
|
+
* hostDirectives: [
|
31
|
+
* {
|
32
|
+
* directive: DaffColorableDirective,
|
33
|
+
* inputs: ['color'],
|
34
|
+
* },
|
35
|
+
* ],
|
36
|
+
* })
|
37
|
+
* export class CustomComponent { }
|
38
|
+
* ```
|
39
|
+
*
|
40
|
+
* ```scss
|
41
|
+
* .custom-component {
|
42
|
+
*
|
43
|
+
* &.daff-primary {
|
44
|
+
* background: daff-color($primary, 10);
|
45
|
+
* color: daff-color($primary, 90);
|
46
|
+
* }
|
47
|
+
* }
|
48
|
+
* ```
|
49
|
+
*
|
23
50
|
* ## Styles
|
24
51
|
*
|
25
52
|
* The directive applies the following CSS classes based on the color:
|
@@ -74,4 +101,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
|
|
74
101
|
}], color: [{
|
75
102
|
type: Input
|
76
103
|
}] } });
|
77
|
-
//# sourceMappingURL=data:application/json;base64,
|
104
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3JhYmxlLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMvZGVzaWduL3NyYy9jb3JlL2NvbG9yYWJsZS9jb2xvcmFibGUuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsV0FBVyxFQUNYLEtBQUssR0FJTixNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBR0wsZUFBZSxHQUNoQixNQUFNLGFBQWEsQ0FBQzs7QUFFckIsTUFBTSxjQUFjLEdBQUcsQ0FBQyxLQUFhLEVBQUUsRUFBRSxDQUFPLE1BQU8sQ0FBQyxNQUFNLENBQUMsZUFBZSxDQUFDLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO0FBRWhHLE1BQU0sYUFBYSxHQUFHLENBQUMsS0FBYSxFQUFFLEVBQUU7SUFDdEMsSUFBSSxLQUFLLEtBQUssU0FBUyxJQUFJLENBQUMsY0FBYyxDQUFDLEtBQUssQ0FBQyxFQUFFO1FBQ2pELE9BQU8sQ0FBQyxJQUFJLENBQUMsS0FBSyxHQUFHLHNDQUFzQyxDQUFDLENBQUM7S0FDOUQ7QUFDSCxDQUFDLENBQUM7QUFFRjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBbURHO0FBS0gsTUFBTSxPQUFPLHNCQUFzQjtJQUVqQzs7O09BR0c7SUFDSCxJQUEwQixLQUFLO1FBQzdCLE9BQU87WUFDTCxjQUFjLEVBQUUsSUFBSSxDQUFDLEtBQUssS0FBSyxlQUFlLENBQUMsT0FBTztZQUN0RCxnQkFBZ0IsRUFBRSxJQUFJLENBQUMsS0FBSyxLQUFLLGVBQWUsQ0FBQyxTQUFTO1lBQzFELGVBQWUsRUFBRSxJQUFJLENBQUMsS0FBSyxLQUFLLGVBQWUsQ0FBQyxRQUFRO1lBQ3hELFlBQVksRUFBRSxJQUFJLENBQUMsS0FBSyxLQUFLLGVBQWUsQ0FBQyxLQUFLO1lBQ2xELFlBQVksRUFBRSxJQUFJLENBQUMsS0FBSyxLQUFLLGVBQWUsQ0FBQyxLQUFLO1lBQ2xELFlBQVksRUFBRSxJQUFJLENBQUMsS0FBSyxLQUFLLGVBQWUsQ0FBQyxLQUFLO1lBQ2xELHFCQUFxQixFQUFFLElBQUksQ0FBQyxLQUFLLEtBQUssZUFBZSxDQUFDLGFBQWE7U0FDcEUsQ0FBQztJQUNKLENBQUM7SUFZRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsWUFBWSxFQUFFO1lBQy9CLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQztTQUNoQztJQUNILENBQUM7SUFFRCxRQUFRO1FBQ04sYUFBYSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUMxQixJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRTtZQUNmLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQztTQUNoQztJQUNILENBQUM7a0lBdkNVLHNCQUFzQjtzSEFBdEIsc0JBQXNCOzs0RkFBdEIsc0JBQXNCO2tCQUpsQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxpQkFBaUI7b0JBQzNCLFVBQVUsRUFBRSxJQUFJO2lCQUNqQjs4QkFPMkIsS0FBSztzQkFBOUIsV0FBVzt1QkFBQyxPQUFPO2dCQWVYLEtBQUs7c0JBQWIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIERpcmVjdGl2ZSxcbiAgSG9zdEJpbmRpbmcsXG4gIElucHV0LFxuICBPbkNoYW5nZXMsXG4gIE9uSW5pdCxcbiAgU2ltcGxlQ2hhbmdlcyxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7XG4gIERhZmZDb2xvcmFibGUsXG4gIERhZmZQYWxldHRlLFxuICBEYWZmUGFsZXR0ZUVudW0sXG59IGZyb20gJy4vY29sb3JhYmxlJztcblxuY29uc3QgY29sb3JJblBhbGV0dGUgPSAoY29sb3I6IHN0cmluZykgPT4gKDxhbnk+T2JqZWN0KS52YWx1ZXMoRGFmZlBhbGV0dGVFbnVtKS5pbmNsdWRlcyhjb2xvcik7XG5cbmNvbnN0IHZhbGlkYXRlQ29sb3IgPSAoY29sb3I6IHN0cmluZykgPT4ge1xuICBpZiAoY29sb3IgIT09IHVuZGVmaW5lZCAmJiAhY29sb3JJblBhbGV0dGUoY29sb3IpKSB7XG4gICAgY29uc29sZS53YXJuKGNvbG9yICsgJyBpcyBub3QgYSB2YWxpZCBjb2xvciBpbiBEYWZmUGFsZXR0ZScpO1xuICB9XG59O1xuXG4vKipcbiAqIGBEYWZmQ29sb3JhYmxlRGlyZWN0aXZlYCBhbGxvd3MgYSBjb21wb25lbnQgdG8gY29uZGl0aW9uYWxseSBhcHBseSBjb2xvci1zcGVjaWZpY1xuICogc3R5bGVzIGJ5IHNldHRpbmcgQ1NTIGNsYXNzZXMgYmFzZWQgb24gdGhlIHNwZWNpZmllZCBjb2xvci4gVGhpcyBkaXJlY3RpdmUgaXMgdXNlZnVsXG4gKiBmb3IgYXBwbHlpbmcgZGlmZmVyZW50IGNvbG9yIHBhbGV0dGVzIHRvIGEgY29tcG9uZW50IGluIGFuIEFuZ3VsYXIgYXBwbGljYXRpb24uXG4gKlxuICogIyMgVXNhZ2VcbiAqXG4gKiAjIyMgSW1wbGVtZW50aW5nIGl0IGFzIGFuIGF0dHJpYnV0ZSBkaXJlY3RpdmVcbiAqXG4gKiBgYGBodG1sXG4gKiA8ZGl2IGRhZmZDb2xvcmFibGUgW2NvbG9yXT1cImNvbXBvbmVudENvbG9yXCI+Q29sb3JlZCBjb250ZW50PC9kaXY+XG4gKiBgYGBcbiAqXG4gKiAjIyMgSW1wbGVtZW50aW5nIGl0IGFzIGFuIEFuZ3VsYXIgaG9zdCBkaXJlY3RpdmVcbiAqXG4gKiBgYGB0c1xuICogQENvbXBvbmVudCh7XG4gKiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAqICBzZWxlY3RvcjogJ2N1c3RvbS1jb21wb25lbnQnLFxuICogIHRlbXBsYXRlOiAnY3VzdG9tLWNvbXBvbmVudC5odG1sJyxcbiAqICBob3N0RGlyZWN0aXZlczogW1xuICogICAge1xuICogICAgICBkaXJlY3RpdmU6IERhZmZDb2xvcmFibGVEaXJlY3RpdmUsXG4gKiAgICAgIGlucHV0czogWydjb2xvciddLFxuICogICAgfSxcbiAqICBdLFxuICogfSlcbiAqIGV4cG9ydCBjbGFzcyBDdXN0b21Db21wb25lbnQgeyB9XG4gKiBgYGBcbiAqXG4gKiBgYGBzY3NzXG4gKiAuY3VzdG9tLWNvbXBvbmVudCB7XG4gKlxuICogICYuZGFmZi1wcmltYXJ5IHtcbiAqICAgIGJhY2tncm91bmQ6IGRhZmYtY29sb3IoJHByaW1hcnksIDEwKTtcbiAqICAgIGNvbG9yOiBkYWZmLWNvbG9yKCRwcmltYXJ5LCA5MCk7XG4gKiAgfVxuICogfVxuICogYGBgXG4gKlxuICogIyMgU3R5bGVzXG4gKlxuICogVGhlIGRpcmVjdGl2ZSBhcHBsaWVzIHRoZSBmb2xsb3dpbmcgQ1NTIGNsYXNzZXMgYmFzZWQgb24gdGhlIGNvbG9yOlxuICpcbiAqIC0gYGRhZmYtcHJpbWFyeWA6IEFwcGxpZWQgd2hlbiB0aGUgY29sb3IgaXMgYHByaW1hcnlgLlxuICogLSBgZGFmZi1zZWNvbmRhcnlgOiBBcHBsaWVkIHdoZW4gdGhlIGNvbG9yIGlzIGBzZWNvbmRhcnlgLlxuICogLSBgZGFmZi10ZXJ0aWFyeWA6IEFwcGxpZWQgd2hlbiB0aGUgY29sb3IgaXMgYHRlcnRpYXJ5YC5cbiAqIC0gYGRhZmYtYmxhY2tgOiBBcHBsaWVkIHdoZW4gdGhlIGNvbG9yIGlzIGBibGFja2AuXG4gKiAtIGBkYWZmLXdoaXRlYDogQXBwbGllZCB3aGVuIHRoZSBjb2xvciBpcyBgd2hpdGVgLlxuICogLSBgZGFmZi10aGVtZWA6IEFwcGxpZWQgd2hlbiB0aGUgY29sb3IgaXMgYHRoZW1lYC5cbiAqIC0gYGRhZmYtdGhlbWUtY29udHJhc3RgOiBBcHBsaWVkIHdoZW4gdGhlIGNvbG9yIGlzIGB0aGVtZS1jb250cmFzdGAuXG4gKi9cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tkYWZmQ29sb3JhYmxlXScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG59KVxuZXhwb3J0IGNsYXNzIERhZmZDb2xvcmFibGVEaXJlY3RpdmUgaW1wbGVtZW50cyBEYWZmQ29sb3JhYmxlLCBPbkNoYW5nZXMsIE9uSW5pdCB7XG5cbiAgLyoqXG4gICAqIER5bmFtaWNhbGx5IHNldHMgdGhlIENTUyBjbGFzc2VzIGJhc2VkIG9uIHRoZSBjb2xvci5cbiAgICogQGRvY3MtcHJpdmF0ZVxuICAgKi9cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpIGdldCBjbGFzcygpIHtcbiAgICByZXR1cm4ge1xuICAgICAgJ2RhZmYtcHJpbWFyeSc6IHRoaXMuY29sb3IgPT09IERhZmZQYWxldHRlRW51bS5QcmltYXJ5LFxuICAgICAgJ2RhZmYtc2Vjb25kYXJ5JzogdGhpcy5jb2xvciA9PT0gRGFmZlBhbGV0dGVFbnVtLlNlY29uZGFyeSxcbiAgICAgICdkYWZmLXRlcnRpYXJ5JzogdGhpcy5jb2xvciA9PT0gRGFmZlBhbGV0dGVFbnVtLlRlcnRpYXJ5LFxuICAgICAgJ2RhZmYtYmxhY2snOiB0aGlzLmNvbG9yID09PSBEYWZmUGFsZXR0ZUVudW0uQmxhY2ssXG4gICAgICAnZGFmZi13aGl0ZSc6IHRoaXMuY29sb3IgPT09IERhZmZQYWxldHRlRW51bS5XaGl0ZSxcbiAgICAgICdkYWZmLXRoZW1lJzogdGhpcy5jb2xvciA9PT0gRGFmZlBhbGV0dGVFbnVtLlRoZW1lLFxuICAgICAgJ2RhZmYtdGhlbWUtY29udHJhc3QnOiB0aGlzLmNvbG9yID09PSBEYWZmUGFsZXR0ZUVudW0uVGhlbWVDb250cmFzdCxcbiAgICB9O1xuICB9XG5cbiAgLyoqXG4gICAqIFNldHMgdGhlIGNvbG9yIG9uIGEgY29tcG9uZW50LlxuICAgKi9cbiAgQElucHV0KCkgY29sb3I6IERhZmZQYWxldHRlO1xuXG4gIC8qKlxuICAgKiBTZXRzIGEgZGVmYXVsdCBjb2xvci5cbiAgICovXG4gIGRlZmF1bHRDb2xvcjogRGFmZlBhbGV0dGU7XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcykge1xuICAgIGlmICghY2hhbmdlcy5jb2xvci5jdXJyZW50VmFsdWUpIHtcbiAgICAgIHRoaXMuY29sb3IgPSB0aGlzLmRlZmF1bHRDb2xvcjtcbiAgICB9XG4gIH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICB2YWxpZGF0ZUNvbG9yKHRoaXMuY29sb3IpO1xuICAgIGlmICghdGhpcy5jb2xvcikge1xuICAgICAgdGhpcy5jb2xvciA9IHRoaXMuZGVmYXVsdENvbG9yO1xuICAgIH1cbiAgfVxufVxuXG4iXX0=
|
@@ -1,11 +1,13 @@
|
|
1
1
|
import { Directive, HostBinding, Input, } from '@angular/core';
|
2
2
|
import * as i0 from "@angular/core";
|
3
3
|
/**
|
4
|
-
*
|
4
|
+
* `DaffCompactableDirective` allows a component to conditionally apply a compact
|
5
5
|
* style by toggling a CSS class. This is useful for creating components that can
|
6
6
|
* switch between regular and compact styles based on the `compact` property.
|
7
7
|
*
|
8
|
-
* ##
|
8
|
+
* ## Usage
|
9
|
+
*
|
10
|
+
* ### Implementing it as an attribute directive
|
9
11
|
*
|
10
12
|
* ```html
|
11
13
|
* <div daffCompactable [compact]="isCompact">Content goes here</div>
|
@@ -14,6 +16,33 @@ import * as i0 from "@angular/core";
|
|
14
16
|
* In this example, the `daff-compact` class is applied to the `div` element when
|
15
17
|
* `isCompact` is `true`, making the `div` display its compact state.
|
16
18
|
*
|
19
|
+
* ### Implementing it as an Angular host directive
|
20
|
+
*
|
21
|
+
* ```ts
|
22
|
+
* @Component({
|
23
|
+
* standalone: true,
|
24
|
+
* selector: 'custom-component',
|
25
|
+
* template: 'custom-component.html',
|
26
|
+
* hostDirectives: [
|
27
|
+
* {
|
28
|
+
* directive: DaffCompactableDirective,
|
29
|
+
* inputs: ['compact'],
|
30
|
+
* },
|
31
|
+
* ],
|
32
|
+
* })
|
33
|
+
* export class CustomComponent { }
|
34
|
+
* ```
|
35
|
+
*
|
36
|
+
* ```scss
|
37
|
+
* .custom-component {
|
38
|
+
* padding: 8px 16px;
|
39
|
+
*
|
40
|
+
* &.daff-compact {
|
41
|
+
* padding: 4px 8px;
|
42
|
+
* }
|
43
|
+
* }
|
44
|
+
* ```
|
45
|
+
*
|
17
46
|
* ## Styles
|
18
47
|
*
|
19
48
|
* The `daff-compact` class should be defined in your styles to display the compact
|
@@ -38,4 +67,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
|
|
38
67
|
type: HostBinding,
|
39
68
|
args: ['class.daff-compact']
|
40
69
|
}] } });
|
41
|
-
//# sourceMappingURL=data:application/json;base64,
|
70
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tcGFjdGFibGUuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy9kZXNpZ24vc3JjL2NvcmUvY29tcGFjdGFibGUvY29tcGFjdGFibGUuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsV0FBVyxFQUNYLEtBQUssR0FDTixNQUFNLGVBQWUsQ0FBQzs7QUFFdkI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBK0NHO0FBS0gsTUFBTSxPQUFPLHdCQUF3QjtJQUpyQztRQUs4QyxZQUFPLEdBQUcsS0FBSyxDQUFDO0tBQzdEO2tJQUZZLHdCQUF3QjtzSEFBeEIsd0JBQXdCOzs0RkFBeEIsd0JBQXdCO2tCQUpwQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxtQkFBbUI7b0JBQzdCLFVBQVUsRUFBRSxJQUFJO2lCQUNqQjs4QkFFNkMsT0FBTztzQkFBbEQsS0FBSzs7c0JBQUksV0FBVzt1QkFBQyxvQkFBb0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBEaXJlY3RpdmUsXG4gIEhvc3RCaW5kaW5nLFxuICBJbnB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbi8qKlxuICogYERhZmZDb21wYWN0YWJsZURpcmVjdGl2ZWAgYWxsb3dzIGEgY29tcG9uZW50IHRvIGNvbmRpdGlvbmFsbHkgYXBwbHkgYSBjb21wYWN0XG4gKiBzdHlsZSBieSB0b2dnbGluZyBhIENTUyBjbGFzcy4gVGhpcyBpcyB1c2VmdWwgZm9yIGNyZWF0aW5nIGNvbXBvbmVudHMgdGhhdCBjYW5cbiAqIHN3aXRjaCBiZXR3ZWVuIHJlZ3VsYXIgYW5kIGNvbXBhY3Qgc3R5bGVzIGJhc2VkIG9uIHRoZSBgY29tcGFjdGAgcHJvcGVydHkuXG4gKlxuICogIyMgVXNhZ2VcbiAqXG4gKiAjIyMgSW1wbGVtZW50aW5nIGl0IGFzIGFuIGF0dHJpYnV0ZSBkaXJlY3RpdmVcbiAqXG4gKiBgYGBodG1sXG4gKiA8ZGl2IGRhZmZDb21wYWN0YWJsZSBbY29tcGFjdF09XCJpc0NvbXBhY3RcIj5Db250ZW50IGdvZXMgaGVyZTwvZGl2PlxuICogYGBgXG4gKlxuICogSW4gdGhpcyBleGFtcGxlLCB0aGUgYGRhZmYtY29tcGFjdGAgY2xhc3MgaXMgYXBwbGllZCB0byB0aGUgYGRpdmAgZWxlbWVudCB3aGVuXG4gKiBgaXNDb21wYWN0YCBpcyBgdHJ1ZWAsIG1ha2luZyB0aGUgYGRpdmAgZGlzcGxheSBpdHMgY29tcGFjdCBzdGF0ZS5cbiAqXG4gKiAjIyMgSW1wbGVtZW50aW5nIGl0IGFzIGFuIEFuZ3VsYXIgaG9zdCBkaXJlY3RpdmVcbiAqXG4gKiBgYGB0c1xuICogQENvbXBvbmVudCh7XG4gKiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAqICBzZWxlY3RvcjogJ2N1c3RvbS1jb21wb25lbnQnLFxuICogIHRlbXBsYXRlOiAnY3VzdG9tLWNvbXBvbmVudC5odG1sJyxcbiAqICBob3N0RGlyZWN0aXZlczogW1xuICogICAge1xuICogICAgICBkaXJlY3RpdmU6IERhZmZDb21wYWN0YWJsZURpcmVjdGl2ZSxcbiAqICAgICAgaW5wdXRzOiBbJ2NvbXBhY3QnXSxcbiAqICAgIH0sXG4gKiAgXSxcbiAqIH0pXG4gKiBleHBvcnQgY2xhc3MgQ3VzdG9tQ29tcG9uZW50IHsgfVxuICogYGBgXG4gKlxuICogYGBgc2Nzc1xuICogLmN1c3RvbS1jb21wb25lbnQge1xuICogIHBhZGRpbmc6IDhweCAxNnB4O1xuICpcbiAqICAmLmRhZmYtY29tcGFjdCB7XG4gKiAgICBwYWRkaW5nOiA0cHggOHB4O1xuICogIH1cbiAqIH1cbiAqIGBgYFxuICpcbiAqICMjIFN0eWxlc1xuICpcbiAqIFRoZSBgZGFmZi1jb21wYWN0YCBjbGFzcyBzaG91bGQgYmUgZGVmaW5lZCBpbiB5b3VyIHN0eWxlcyB0byBkaXNwbGF5IHRoZSBjb21wYWN0XG4gKiBzdGF0ZSBhcyBkZXNpcmVkLlxuICovXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbZGFmZkNvbXBhY3RhYmxlXScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG59KVxuZXhwb3J0IGNsYXNzIERhZmZDb21wYWN0YWJsZURpcmVjdGl2ZSB7XG4gIEBJbnB1dCgpIEBIb3N0QmluZGluZygnY2xhc3MuZGFmZi1jb21wYWN0JykgY29tcGFjdCA9IGZhbHNlO1xufVxuIl19
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import { Directive, HostBinding, } from '@angular/core';
|
2
2
|
import * as i0 from "@angular/core";
|
3
3
|
/**
|
4
|
-
*
|
4
|
+
* `DaffManageContainerLayoutDirective` gives a component the ability to manage a `DaffContainerComponent`'s layout.
|
5
5
|
* By including this directive, predetermined layout styles are passed down to the container.
|
6
6
|
*
|
7
7
|
* To understand the motivation for this directive, consider:
|
@@ -22,6 +22,43 @@ import * as i0 from "@angular/core";
|
|
22
22
|
* The former may inappropriately constrain the width of its child elements,
|
23
23
|
* while the latter (without `DaffManageContainerLayoutDirective`) may unexpectedly
|
24
24
|
* interfere in the layout features of its parent element (i.e. display: grid, display: flex).
|
25
|
+
*
|
26
|
+
* ## Usage
|
27
|
+
*
|
28
|
+
* ### Implementing it as an attribute directive
|
29
|
+
*
|
30
|
+
* ```html
|
31
|
+
* <my-custom-component daffManageContainerLayout>
|
32
|
+
* <daff-container size="lg"></daff-container>
|
33
|
+
* </my-custom-component>
|
34
|
+
* ```
|
35
|
+
*
|
36
|
+
* ```scss
|
37
|
+
* :host {
|
38
|
+
* display: grid;
|
39
|
+
* grid-template-columns: 1fr 1fr;
|
40
|
+
* }
|
41
|
+
* ```
|
42
|
+
*
|
43
|
+
* ### Implementing it as an Angular host directive
|
44
|
+
*
|
45
|
+
* ```ts
|
46
|
+
* @Component({
|
47
|
+
* standalone: true,
|
48
|
+
* selector: 'my-custom-component',
|
49
|
+
* template: 'my-custom-component.html',
|
50
|
+
* hostDirectives: [{ directive: DaffManageContainerLayoutDirective }],
|
51
|
+
* })
|
52
|
+
* export class MyCustomComponent { }
|
53
|
+
*
|
54
|
+
* ```scss
|
55
|
+
* :host {
|
56
|
+
* display: grid;
|
57
|
+
* grid-template-columns: 1fr 1fr;
|
58
|
+
* }
|
59
|
+
* ```
|
60
|
+
*
|
61
|
+
* This directive will apply the `daff-manage-container-layout` class to your component, ensuring that the styles set on `:host` are passed down to the container.
|
25
62
|
*/
|
26
63
|
export class DaffManageContainerLayoutDirective {
|
27
64
|
constructor() {
|
@@ -40,4 +77,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
|
|
40
77
|
type: HostBinding,
|
41
78
|
args: ['class.daff-manage-container-layout']
|
42
79
|
}] } });
|
43
|
-
//# sourceMappingURL=data:application/json;base64,
|
80
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFuYWdlLWNvbnRhaW5lci1sYXlvdXQuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy9kZXNpZ24vc3JjL2NvcmUvbWFuYWdlLWNvbnRhaW5lci1sYXlvdXQvbWFuYWdlLWNvbnRhaW5lci1sYXlvdXQuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsV0FBVyxHQUNaLE1BQU0sZUFBZSxDQUFDOztBQUV2Qjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0EyREc7QUFNSCxNQUFNLE9BQU8sa0NBQWtDO0lBSi9DO1FBS3FELFVBQUssR0FBRyxJQUFJLENBQUM7S0FDakU7a0lBRlksa0NBQWtDO3NIQUFsQyxrQ0FBa0M7OzRGQUFsQyxrQ0FBa0M7a0JBSjlDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLDZCQUE2QjtvQkFDdkMsVUFBVSxFQUFFLElBQUk7aUJBQ2pCOzhCQUVvRCxLQUFLO3NCQUF2RCxXQUFXO3VCQUFDLG9DQUFvQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIERpcmVjdGl2ZSxcbiAgSG9zdEJpbmRpbmcsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG4vKipcbiAqIGBEYWZmTWFuYWdlQ29udGFpbmVyTGF5b3V0RGlyZWN0aXZlYCBnaXZlcyBhIGNvbXBvbmVudCB0aGUgYWJpbGl0eSB0byBtYW5hZ2UgYSBgRGFmZkNvbnRhaW5lckNvbXBvbmVudGAncyBsYXlvdXQuXG4gKiBCeSBpbmNsdWRpbmcgdGhpcyBkaXJlY3RpdmUsIHByZWRldGVybWluZWQgbGF5b3V0IHN0eWxlcyBhcmUgcGFzc2VkIGRvd24gdG8gdGhlIGNvbnRhaW5lci5cbiAqXG4gKiBUbyB1bmRlcnN0YW5kIHRoZSBtb3RpdmF0aW9uIGZvciB0aGlzIGRpcmVjdGl2ZSwgY29uc2lkZXI6XG4gKlxuICogYGBgaHRtbFxuICogPGRhZmYtY29udGFpbmVyPlxuICogIDxkYWZmLWhlcm8+PC9kYWZmLWhlcm8+XG4gKiA8L2RhZmYtY29udGFpbmVyPlxuICogYGBgXG4gKiB2cy5cbiAqXG4gKiBgYGBodG1sXG4gKiA8ZGFmZi1oZXJvPlxuICogICA8ZGFmZi1jb250YWluZXI+PC9kYWZmLWNvbnRhaW5lcj5cbiAqIDwvZGFmZi1oZXJvPlxuICogYGBgXG4gKlxuICogVGhlIGZvcm1lciBtYXkgaW5hcHByb3ByaWF0ZWx5IGNvbnN0cmFpbiB0aGUgd2lkdGggb2YgaXRzIGNoaWxkIGVsZW1lbnRzLFxuICogd2hpbGUgdGhlIGxhdHRlciAod2l0aG91dCBgRGFmZk1hbmFnZUNvbnRhaW5lckxheW91dERpcmVjdGl2ZWApIG1heSB1bmV4cGVjdGVkbHlcbiAqIGludGVyZmVyZSBpbiB0aGUgbGF5b3V0IGZlYXR1cmVzIG9mIGl0cyBwYXJlbnQgZWxlbWVudCAoaS5lLiBkaXNwbGF5OiBncmlkLCBkaXNwbGF5OiBmbGV4KS5cbiAqXG4gKiAjIyBVc2FnZVxuICpcbiAqICMjIyBJbXBsZW1lbnRpbmcgaXQgYXMgYW4gYXR0cmlidXRlIGRpcmVjdGl2ZVxuICpcbiAqIGBgYGh0bWxcbiAqIDxteS1jdXN0b20tY29tcG9uZW50IGRhZmZNYW5hZ2VDb250YWluZXJMYXlvdXQ+XG4gKiAgPGRhZmYtY29udGFpbmVyIHNpemU9XCJsZ1wiPjwvZGFmZi1jb250YWluZXI+XG4gKiA8L215LWN1c3RvbS1jb21wb25lbnQ+XG4gKiBgYGBcbiAqXG4gKiBgYGBzY3NzXG4gKiA6aG9zdCB7XG4gKiAgZGlzcGxheTogZ3JpZDtcbiAqICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDFmciAxZnI7XG4gKiB9XG4gKiBgYGBcbiAqXG4gKiAjIyMgSW1wbGVtZW50aW5nIGl0IGFzIGFuIEFuZ3VsYXIgaG9zdCBkaXJlY3RpdmVcbiAqXG4gKiBgYGB0c1xuICogQENvbXBvbmVudCh7XG4gKiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAqICBzZWxlY3RvcjogJ215LWN1c3RvbS1jb21wb25lbnQnLFxuICogIHRlbXBsYXRlOiAnbXktY3VzdG9tLWNvbXBvbmVudC5odG1sJyxcbiAqICBob3N0RGlyZWN0aXZlczogW3sgZGlyZWN0aXZlOiBEYWZmTWFuYWdlQ29udGFpbmVyTGF5b3V0RGlyZWN0aXZlIH1dLFxuICogfSlcbiAqIGV4cG9ydCBjbGFzcyBNeUN1c3RvbUNvbXBvbmVudCB7IH1cbiAqXG4gKiBgYGBzY3NzXG4gKiA6aG9zdCB7XG4gKiAgZGlzcGxheTogZ3JpZDtcbiAqICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDFmciAxZnI7XG4gKiB9XG4gKiBgYGBcbiAqXG4gKiBUaGlzIGRpcmVjdGl2ZSB3aWxsIGFwcGx5IHRoZSBgZGFmZi1tYW5hZ2UtY29udGFpbmVyLWxheW91dGAgY2xhc3MgdG8geW91ciBjb21wb25lbnQsIGVuc3VyaW5nIHRoYXQgdGhlIHN0eWxlcyBzZXQgb24gYDpob3N0YCBhcmUgcGFzc2VkIGRvd24gdG8gdGhlIGNvbnRhaW5lci5cbiAqL1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbZGFmZk1hbmFnZUNvbnRhaW5lckxheW91dF0nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxufSlcbmV4cG9ydCBjbGFzcyBEYWZmTWFuYWdlQ29udGFpbmVyTGF5b3V0RGlyZWN0aXZlIHtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5kYWZmLW1hbmFnZS1jb250YWluZXItbGF5b3V0JykgY2xhc3MgPSB0cnVlO1xufVxuIl19
|
@@ -2,14 +2,57 @@ import { Directive, HostBinding, Input, } from '@angular/core';
|
|
2
2
|
import { DaffSizableEnum, } from './sizable';
|
3
3
|
import * as i0 from "@angular/core";
|
4
4
|
/**
|
5
|
-
*
|
5
|
+
* `DaffSizableDirective` allows for dynamic sizing of a component by setting
|
6
6
|
* CSS classes based on the specified size.
|
7
7
|
*
|
8
|
-
* ##
|
8
|
+
* ## Usage
|
9
|
+
*
|
10
|
+
* ### Implementing it as an attribute directive
|
9
11
|
*
|
10
12
|
* ```html
|
11
|
-
* <div daffSizable [size]="
|
13
|
+
* <div daffSizable [size]="small">Sized content</div>
|
14
|
+
* ```
|
15
|
+
* In this example, the `daff-small` class is applied to the `div` element, allowing you to
|
16
|
+
* use the class to style the `div`.
|
17
|
+
*
|
18
|
+
* ### Implementing it as an Angular host directive
|
19
|
+
*
|
20
|
+
* ```ts
|
21
|
+
* @Component({
|
22
|
+
* standalone: true,
|
23
|
+
* selector: 'custom-component',
|
24
|
+
* template: 'custom-component.html',
|
25
|
+
* hostDirectives: [
|
26
|
+
* {
|
27
|
+
* directive: DaffSizableDirective,
|
28
|
+
* inputs: ['size'],
|
29
|
+
* },
|
30
|
+
* ],
|
31
|
+
* })
|
32
|
+
* export class CustomComponent { }
|
33
|
+
* ```
|
34
|
+
*
|
35
|
+
* ```scss
|
36
|
+
* .custom-component {
|
37
|
+
* &.daff-sm {
|
38
|
+
* width: 24px;
|
39
|
+
* }
|
40
|
+
*
|
41
|
+
* &.daff-md {
|
42
|
+
* width: 32px;
|
43
|
+
* }
|
44
|
+
* }
|
12
45
|
* ```
|
46
|
+
*
|
47
|
+
* ## Styles
|
48
|
+
*
|
49
|
+
* The directive applies the following CSS classes based on the size:
|
50
|
+
*
|
51
|
+
* - `daff-xs`: Applied when the size is `xs`.
|
52
|
+
* - `daff-sm`: Applied when the size is `sm`.
|
53
|
+
* - `daff-md`: Applied when the size is `md`.
|
54
|
+
* - `daff-lg`: Applied when the size is `lg`.
|
55
|
+
* - `daff-xl`: Applied when the size is `xl`.
|
13
56
|
*/
|
14
57
|
export class DaffSizableDirective {
|
15
58
|
/**
|
@@ -50,4 +93,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
|
|
50
93
|
}], size: [{
|
51
94
|
type: Input
|
52
95
|
}] } });
|
53
|
-
//# sourceMappingURL=data:application/json;base64,
|
96
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2l6YWJsZS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL2Rlc2lnbi9zcmMvY29yZS9zaXphYmxlL3NpemFibGUuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsV0FBVyxFQUNYLEtBQUssR0FJTixNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBRUwsZUFBZSxHQUVoQixNQUFNLFdBQVcsQ0FBQzs7QUFFbkI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FvREc7QUFLSCxNQUFNLE9BQU8sb0JBQW9CO0lBRS9COzs7T0FHRztJQUNILElBQTBCLEtBQUs7UUFDN0IsT0FBTztZQUNMLFNBQVMsRUFBRSxJQUFJLENBQUMsSUFBSSxLQUFLLGVBQWUsQ0FBQyxNQUFNO1lBQy9DLFNBQVMsRUFBRSxJQUFJLENBQUMsSUFBSSxLQUFLLGVBQWUsQ0FBQyxLQUFLO1lBQzlDLFNBQVMsRUFBRSxJQUFJLENBQUMsSUFBSSxLQUFLLGVBQWUsQ0FBQyxNQUFNO1lBQy9DLFNBQVMsRUFBRSxJQUFJLENBQUMsSUFBSSxLQUFLLGVBQWUsQ0FBQyxLQUFLO1lBQzlDLFNBQVMsRUFBRSxJQUFJLENBQUMsSUFBSSxLQUFLLGVBQWUsQ0FBQyxNQUFNO1NBQ2hELENBQUM7SUFDSixDQUFDO0lBWUQsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUcsQ0FBQyxPQUFPLENBQUMsSUFBSSxFQUFFLFlBQVksRUFBRTtZQUM5QixJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUM7U0FDOUI7SUFDSCxDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUcsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFO1lBQ2IsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDO1NBQzlCO0lBQ0gsQ0FBQztrSUFwQ1Usb0JBQW9CO3NIQUFwQixvQkFBb0I7OzRGQUFwQixvQkFBb0I7a0JBSmhDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGVBQWU7b0JBQ3pCLFVBQVUsRUFBRSxJQUFJO2lCQUNqQjs4QkFPMkIsS0FBSztzQkFBOUIsV0FBVzt1QkFBQyxPQUFPO2dCQWFYLElBQUk7c0JBQVosS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIERpcmVjdGl2ZSxcbiAgSG9zdEJpbmRpbmcsXG4gIElucHV0LFxuICBPbkNoYW5nZXMsXG4gIE9uSW5pdCxcbiAgU2ltcGxlQ2hhbmdlcyxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7XG4gIERhZmZTaXphYmxlLFxuICBEYWZmU2l6YWJsZUVudW0sXG4gIERhZmZTaXplQWxsVHlwZSxcbn0gZnJvbSAnLi9zaXphYmxlJztcblxuLyoqXG4gKiBgRGFmZlNpemFibGVEaXJlY3RpdmVgIGFsbG93cyBmb3IgZHluYW1pYyBzaXppbmcgb2YgYSBjb21wb25lbnQgYnkgc2V0dGluZ1xuICogQ1NTIGNsYXNzZXMgYmFzZWQgb24gdGhlIHNwZWNpZmllZCBzaXplLlxuICpcbiAqICMjIFVzYWdlXG4gKlxuICogIyMjIEltcGxlbWVudGluZyBpdCBhcyBhbiBhdHRyaWJ1dGUgZGlyZWN0aXZlXG4gKlxuICogYGBgaHRtbFxuICogPGRpdiBkYWZmU2l6YWJsZSBbc2l6ZV09XCJzbWFsbFwiPlNpemVkIGNvbnRlbnQ8L2Rpdj5cbiAqIGBgYFxuICogSW4gdGhpcyBleGFtcGxlLCB0aGUgYGRhZmYtc21hbGxgIGNsYXNzIGlzIGFwcGxpZWQgdG8gdGhlIGBkaXZgIGVsZW1lbnQsIGFsbG93aW5nIHlvdSB0b1xuICogdXNlIHRoZSBjbGFzcyB0byBzdHlsZSB0aGUgYGRpdmAuXG4gKlxuICogIyMjIEltcGxlbWVudGluZyBpdCBhcyBhbiBBbmd1bGFyIGhvc3QgZGlyZWN0aXZlXG4gKlxuICogYGBgdHNcbiAqIEBDb21wb25lbnQoe1xuICogIHN0YW5kYWxvbmU6IHRydWUsXG4gKiAgc2VsZWN0b3I6ICdjdXN0b20tY29tcG9uZW50JyxcbiAqICB0ZW1wbGF0ZTogJ2N1c3RvbS1jb21wb25lbnQuaHRtbCcsXG4gKiAgaG9zdERpcmVjdGl2ZXM6IFtcbiAqICAgIHtcbiAqICAgICAgZGlyZWN0aXZlOiBEYWZmU2l6YWJsZURpcmVjdGl2ZSxcbiAqICAgICAgaW5wdXRzOiBbJ3NpemUnXSxcbiAqICAgIH0sXG4gKiAgXSxcbiAqIH0pXG4gKiBleHBvcnQgY2xhc3MgQ3VzdG9tQ29tcG9uZW50IHsgfVxuICogYGBgXG4gKlxuICogYGBgc2Nzc1xuICogLmN1c3RvbS1jb21wb25lbnQge1xuICogICYuZGFmZi1zbSB7XG4gKiAgICB3aWR0aDogMjRweDtcbiAqICB9XG4gKlxuICogICYuZGFmZi1tZCB7XG4gKiAgICB3aWR0aDogMzJweDtcbiAqICB9XG4gKiB9XG4gKiBgYGBcbiAqXG4gKiAjIyBTdHlsZXNcbiAqXG4gKiBUaGUgZGlyZWN0aXZlIGFwcGxpZXMgdGhlIGZvbGxvd2luZyBDU1MgY2xhc3NlcyBiYXNlZCBvbiB0aGUgc2l6ZTpcbiAqXG4gKiAtIGBkYWZmLXhzYDogQXBwbGllZCB3aGVuIHRoZSBzaXplIGlzIGB4c2AuXG4gKiAtIGBkYWZmLXNtYDogQXBwbGllZCB3aGVuIHRoZSBzaXplIGlzIGBzbWAuXG4gKiAtIGBkYWZmLW1kYDogQXBwbGllZCB3aGVuIHRoZSBzaXplIGlzIGBtZGAuXG4gKiAtIGBkYWZmLWxnYDogQXBwbGllZCB3aGVuIHRoZSBzaXplIGlzIGBsZ2AuXG4gKiAtIGBkYWZmLXhsYDogQXBwbGllZCB3aGVuIHRoZSBzaXplIGlzIGB4bGAuXG4gKi9cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tkYWZmU2l6YWJsZV0nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxufSlcbmV4cG9ydCBjbGFzcyBEYWZmU2l6YWJsZURpcmVjdGl2ZTxUIGV4dGVuZHMgRGFmZlNpemVBbGxUeXBlPiBpbXBsZW1lbnRzIERhZmZTaXphYmxlPFQ+LCBPbkNoYW5nZXMsIE9uSW5pdCB7XG5cbiAgLyoqXG4gICAqIER5bmFtaWNhbGx5IHNldHMgdGhlIENTUyBjbGFzc2VzIGJhc2VkIG9uIHRoZSBzaXplLlxuICAgKiBAZG9jcy1wcml2YXRlXG4gICAqL1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzJykgZ2V0IGNsYXNzKCkge1xuICAgIHJldHVybiB7XG4gICAgICAnZGFmZi14cyc6IHRoaXMuc2l6ZSA9PT0gRGFmZlNpemFibGVFbnVtLlhTbWFsbCxcbiAgICAgICdkYWZmLXNtJzogdGhpcy5zaXplID09PSBEYWZmU2l6YWJsZUVudW0uU21hbGwsXG4gICAgICAnZGFmZi1tZCc6IHRoaXMuc2l6ZSA9PT0gRGFmZlNpemFibGVFbnVtLk1lZGl1bSxcbiAgICAgICdkYWZmLWxnJzogdGhpcy5zaXplID09PSBEYWZmU2l6YWJsZUVudW0uTGFyZ2UsXG4gICAgICAnZGFmZi14bCc6IHRoaXMuc2l6ZSA9PT0gRGFmZlNpemFibGVFbnVtLlhMYXJnZSxcbiAgICB9O1xuICB9XG5cbiAgLyoqXG4gICAqIFRoZSBzaXplIG9mIGEgY29tcG9uZW50LlxuICAgKi9cbiAgQElucHV0KCkgc2l6ZTogVDtcblxuICAvKipcbiAgICogU2V0cyBhIGRlZmF1bHQgc2l6ZSB3aGVuIG5vIHNpemUgaXMgcHJvdmlkZWQuXG4gICAqL1xuICBwdWJsaWMgZGVmYXVsdFNpemU6IFQ7XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcykge1xuICAgIGlmKCFjaGFuZ2VzLnNpemU/LmN1cnJlbnRWYWx1ZSkge1xuICAgICAgdGhpcy5zaXplID0gdGhpcy5kZWZhdWx0U2l6ZTtcbiAgICB9XG4gIH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICBpZighdGhpcy5zaXplKSB7XG4gICAgICB0aGlzLnNpemUgPSB0aGlzLmRlZmF1bHRTaXplO1xuICAgIH1cbiAgfVxufVxuXG4iXX0=
|
@@ -1,15 +1,48 @@
|
|
1
1
|
import { Directive, HostBinding, Input, } from '@angular/core';
|
2
2
|
import * as i0 from "@angular/core";
|
3
3
|
/**
|
4
|
-
*
|
4
|
+
* `DaffSkeletonableDirective` allows a component to display a skeleton loading
|
5
5
|
* state by conditionally applying a CSS class. This is useful for indicating to
|
6
6
|
* users that content is loading or being processed. This directive can be used to
|
7
7
|
* apply a skeleton loading state to any component by toggling the `skeleton`
|
8
8
|
* input property. When `skeleton` is `true`, the `daff-skeleton` CSS class
|
9
9
|
* is applied, which should style the component to look like a loading placeholder.
|
10
10
|
*
|
11
|
-
*
|
12
|
-
*
|
11
|
+
* ## Usage
|
12
|
+
*
|
13
|
+
* ### Implementing it as an attribute directive
|
14
|
+
*
|
15
|
+
* ```html
|
16
|
+
* <div daffSkeletonable [skeleton]="isLoading">Content</div>
|
17
|
+
* ```
|
18
|
+
*
|
19
|
+
* ### Implementing it as an Angular host directive
|
20
|
+
*
|
21
|
+
* ```ts
|
22
|
+
* @Component({
|
23
|
+
* standalone: true,
|
24
|
+
* selector: 'custom-component',
|
25
|
+
* template: 'custom-component.html',
|
26
|
+
* hostDirectives: [
|
27
|
+
* {
|
28
|
+
* directive: DaffSkeletonableDirective,
|
29
|
+
* inputs: ['skeleton'],
|
30
|
+
* },
|
31
|
+
* ],
|
32
|
+
* })
|
33
|
+
* export class CustomComponent { }
|
34
|
+
* ```
|
35
|
+
*
|
36
|
+
* ```scss
|
37
|
+
* .daff-skeleton {
|
38
|
+
* @include state.skeleton-screen(48px, 24px);
|
39
|
+
* }
|
40
|
+
* ```
|
41
|
+
*
|
42
|
+
* ## Styles
|
43
|
+
*
|
44
|
+
* The `daff-skeleton` class should be defined in your styles to display the loading
|
45
|
+
* state as desired. It can be used in conjuction with the `skeleton-screen` mixin, which provides predefined loading styles.
|
13
46
|
*/
|
14
47
|
export class DaffSkeletonableDirective {
|
15
48
|
constructor() {
|
@@ -30,4 +63,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
|
|
30
63
|
type: HostBinding,
|
31
64
|
args: ['class.daff-skeleton']
|
32
65
|
}] } });
|
33
|
-
//# sourceMappingURL=data:application/json;base64,
|
66
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b25hYmxlLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMvZGVzaWduL3NyYy9jb3JlL3NrZWxldG9uYWJsZS9za2VsZXRvbmFibGUuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsV0FBVyxFQUNYLEtBQUssR0FDTixNQUFNLGVBQWUsQ0FBQzs7QUFFdkI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0EyQ0c7QUFLSCxNQUFNLE9BQU8seUJBQXlCO0lBSnRDO1FBSytDLGFBQVEsR0FBRyxLQUFLLENBQUM7S0FDL0Q7a0lBRlkseUJBQXlCO3NIQUF6Qix5QkFBeUI7OzRGQUF6Qix5QkFBeUI7a0JBSnJDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLG9CQUFvQjtvQkFDOUIsVUFBVSxFQUFFLElBQUk7aUJBQ2pCOzhCQUU4QyxRQUFRO3NCQUFwRCxLQUFLOztzQkFBSSxXQUFXO3VCQUFDLHFCQUFxQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIERpcmVjdGl2ZSxcbiAgSG9zdEJpbmRpbmcsXG4gIElucHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuLyoqXG4gKiBgRGFmZlNrZWxldG9uYWJsZURpcmVjdGl2ZWAgYWxsb3dzIGEgY29tcG9uZW50IHRvIGRpc3BsYXkgYSBza2VsZXRvbiBsb2FkaW5nXG4gKiBzdGF0ZSBieSBjb25kaXRpb25hbGx5IGFwcGx5aW5nIGEgQ1NTIGNsYXNzLiBUaGlzIGlzIHVzZWZ1bCBmb3IgaW5kaWNhdGluZyB0b1xuICogdXNlcnMgdGhhdCBjb250ZW50IGlzIGxvYWRpbmcgb3IgYmVpbmcgcHJvY2Vzc2VkLiBUaGlzIGRpcmVjdGl2ZSBjYW4gYmUgdXNlZCB0b1xuICogYXBwbHkgYSBza2VsZXRvbiBsb2FkaW5nIHN0YXRlIHRvIGFueSBjb21wb25lbnQgYnkgdG9nZ2xpbmcgdGhlIGBza2VsZXRvbmBcbiAqIGlucHV0IHByb3BlcnR5LiBXaGVuIGBza2VsZXRvbmAgaXMgYHRydWVgLCB0aGUgYGRhZmYtc2tlbGV0b25gIENTUyBjbGFzc1xuICogaXMgYXBwbGllZCwgd2hpY2ggc2hvdWxkIHN0eWxlIHRoZSBjb21wb25lbnQgdG8gbG9vayBsaWtlIGEgbG9hZGluZyBwbGFjZWhvbGRlci5cbiAqXG4gKiAjIyBVc2FnZVxuICpcbiAqICMjIyBJbXBsZW1lbnRpbmcgaXQgYXMgYW4gYXR0cmlidXRlIGRpcmVjdGl2ZVxuICpcbiAqIGBgYGh0bWxcbiAqIDxkaXYgZGFmZlNrZWxldG9uYWJsZSBbc2tlbGV0b25dPVwiaXNMb2FkaW5nXCI+Q29udGVudDwvZGl2PlxuICogYGBgXG4gKlxuICogIyMjIEltcGxlbWVudGluZyBpdCBhcyBhbiBBbmd1bGFyIGhvc3QgZGlyZWN0aXZlXG4gKlxuICogYGBgdHNcbiAqIEBDb21wb25lbnQoe1xuICogIHN0YW5kYWxvbmU6IHRydWUsXG4gKiAgc2VsZWN0b3I6ICdjdXN0b20tY29tcG9uZW50JyxcbiAqICB0ZW1wbGF0ZTogJ2N1c3RvbS1jb21wb25lbnQuaHRtbCcsXG4gKiAgaG9zdERpcmVjdGl2ZXM6IFtcbiAqICAgIHtcbiAqICAgICAgZGlyZWN0aXZlOiBEYWZmU2tlbGV0b25hYmxlRGlyZWN0aXZlLFxuICogICAgICBpbnB1dHM6IFsnc2tlbGV0b24nXSxcbiAqICAgIH0sXG4gKiAgXSxcbiAqIH0pXG4gKiBleHBvcnQgY2xhc3MgQ3VzdG9tQ29tcG9uZW50IHsgfVxuICogYGBgXG4gKlxuICogYGBgc2Nzc1xuICogLmRhZmYtc2tlbGV0b24ge1xuICogIEBpbmNsdWRlIHN0YXRlLnNrZWxldG9uLXNjcmVlbig0OHB4LCAyNHB4KTtcbiAqIH1cbiAqIGBgYFxuICpcbiAqICMjIFN0eWxlc1xuICpcbiAqIFRoZSBgZGFmZi1za2VsZXRvbmAgY2xhc3Mgc2hvdWxkIGJlIGRlZmluZWQgaW4geW91ciBzdHlsZXMgdG8gZGlzcGxheSB0aGUgbG9hZGluZ1xuICogc3RhdGUgYXMgZGVzaXJlZC4gSXQgY2FuIGJlIHVzZWQgaW4gY29uanVjdGlvbiB3aXRoIHRoZSBgc2tlbGV0b24tc2NyZWVuYCBtaXhpbiwgd2hpY2ggcHJvdmlkZXMgcHJlZGVmaW5lZCBsb2FkaW5nIHN0eWxlcy5cbiAqL1xuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW2RhZmZTa2VsZXRvbmFibGVdJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbn0pXG5leHBvcnQgY2xhc3MgRGFmZlNrZWxldG9uYWJsZURpcmVjdGl2ZSB7XG4gIEBJbnB1dCgpIEBIb3N0QmluZGluZygnY2xhc3MuZGFmZi1za2VsZXRvbicpIHNrZWxldG9uID0gZmFsc2U7XG59XG4iXX0=
|