npm - @updevs/components - Versions diffs - 1.0.0-alpha.98 → 1.0.0-beta.1 - Mend

@updevs/components 1.0.0-alpha.98 → 1.0.0-beta.1

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.

Files changed (688) hide show

package/fesm2022/updevs-components-card.mjs CHANGED Viewed

@@ -11,12 +11,13 @@ class CardActionsDirective {
     constructor() {
         this.templateRef = inject((TemplateRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CardActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: CardActionsDirective, selector: "ng-template[updCardActions]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.4", type: CardActionsDirective, isStandalone: false, selector: "ng-template[updCardActions]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CardActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardActionsDirective, decorators: [{
             type: Directive,
             args: [{
+                    standalone: false,
                     selector: 'ng-template[updCardActions]'
                 }]
         }] });
@@ -25,12 +26,13 @@ class CardFooterDirective {
     constructor() {
         this.templateRef = inject((TemplateRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CardFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: CardFooterDirective, selector: "ng-template[updCardFooter]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.4", type: CardFooterDirective, isStandalone: false, selector: "ng-template[updCardFooter]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CardFooterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardFooterDirective, decorators: [{
             type: Directive,
             args: [{
+                    standalone: false,
                     selector: 'ng-template[updCardFooter]'
                 }]
         }] });
@@ -39,12 +41,13 @@ class CardHeaderDirective {
     constructor() {
         this.templateRef = inject((TemplateRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: CardHeaderDirective, selector: "ng-template[updCardHeader]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.4", type: CardHeaderDirective, isStandalone: false, selector: "ng-template[updCardHeader]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CardHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardHeaderDirective, decorators: [{
             type: Directive,
             args: [{
+                    standalone: false,
                     selector: 'ng-template[updCardHeader]'
                 }]
         }] });
@@ -53,12 +56,13 @@ class CardImageDirective {
     constructor() {
         this.templateRef = inject((TemplateRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CardImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: CardImageDirective, selector: "ng-template[updCardImage]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.4", type: CardImageDirective, isStandalone: false, selector: "ng-template[updCardImage]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CardImageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardImageDirective, decorators: [{
             type: Directive,
             args: [{
+                    standalone: false,
                     selector: 'ng-template[updCardImage]'
                 }]
         }] });
@@ -117,12 +121,12 @@ class CardComponent {
             this.wrapperClasses = 'card ' + lClasses.join(' ');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: CardComponent, selector: "upd-card", inputs: { wrapperClasses: "wrapperClasses", title: "title", subtitle: "subtitle", hoverEffect: "hoverEffect", state: "state", type: "type", imagePosition: "imagePosition", bgColor: "bgColor", stampIcon: "stampIcon", stampBackground: "stampBackground", statusBackground: "statusBackground", statusPosition: "statusPosition", ribbonBackground: "ribbonBackground", ribbonStyle: "ribbonStyle", ribbonIcon: "ribbonIcon", ribbonText: "ribbonText", rotate: "rotate", removeBorder: "removeBorder", useLightHeader: "useLightHeader", showHeader: "showHeader", isFooterTransparent: "isFooterTransparent", footerText: "footerText", showProgressBar: "showProgressBar", progress: "progress", actions: "actions" }, host: { properties: { "class": "this.wrapperClasses" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: CardHeaderDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: CardFooterDirective, descendants: true }, { propertyName: "imageTemplate", first: true, predicate: CardImageDirective, descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: CardActionsDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template *ngIf=\"!hoverEffect; else linkTpl\" [ngTemplateOutlet]=\"structureTpl\"></ng-template>\n\n<!-- Template for cards that are links -->\n<ng-template #linkTpl>\n    <a href=\"#\" class=\"card\" [ngClass]=\"classes\">\n        <ng-template [ngTemplateOutlet]=\"structureTpl\"></ng-template>\n    </a>\n</ng-template>\n\n<ng-template #structureTpl>\n    <!-- Ribbon -->\n    <div *ngIf=\"!!ribbonBackground\" class=\"ribbon {{ribbonStyle === 'default' ? '' : 'ribbon-' + ribbonStyle}} bg-{{ribbonBackground}}\">\n        <span *ngIf=\"!!ribbonText; else ribbonIconTpl\">{{ribbonText}}</span>\n        <ng-template #ribbonIconTpl>\n            <upd-icon [model]=\"ribbonIcon\" wrapperClasses=\"icon\" [removeDefaultClasses]=\"true\"></upd-icon>\n        </ng-template>\n    </div>\n\n    <!-- Status -->\n    <div *ngIf=\"!!statusBackground\" class=\"card-status-{{statusPosition}} bg-{{statusBackground}}\"></div>\n\n    <!-- Stamp -->\n    <div *ngIf=\"!!stampIcon\" class=\"card-stamp\">\n        <div class=\"card-stamp-icon bg-{{stampBackground}}\">\n            <upd-icon [model]=\"stampIcon\" wrapperClasses=\"icon\" [removeDefaultClasses]=\"true\"></upd-icon>\n        </div>\n    </div>\n\n    <!-- Header section -->\n    <div *ngIf=\"showHeader && (!!title || !!headerTemplate?.templateRef)\" class=\"card-header\" [class.card-header-light]=\"useLightHeader\">\n        <ng-container *ngIf=\"!headerTemplate?.templateRef; else customHeaderTpl\">\n            <h3 class=\"card-title\">{{title}} <span *ngIf=\"!!subtitle\" class=\"card-subtitle\">{{subtitle}}</span></h3>\n        </ng-container>\n        <ng-template #customHeaderTpl [ngTemplateOutlet]=\"headerTemplate?.templateRef || null\"></ng-template>\n\n        <!-- Actions -->\n        <div *ngIf=\"!!actionsTemplate || actions.length > 0\" class=\"card-actions\">\n            <ng-container *ngIf=\"actions.length > 0; else customActionsTpl\">\n                <upd-button *ngFor=\"let btn of actions\" [model]=\"btn\" customClasses=\"me-1\"></upd-button>\n            </ng-container>\n            <ng-template #customActionsTpl [ngTemplateOutlet]=\"actionsTemplate?.templateRef || null\"></ng-template>\n        </div>\n    </div>\n\n    <!-- Body -->\n    <ng-container *ngIf=\"!!imageTemplate; else bodyTpl\">\n        <ng-template *ngIf=\"imagePosition === 'left' || imagePosition === 'right'; else bodyWithTopBottomImageTpl\"\n            [ngTemplateOutlet]=\"bodyWithSideImageTpl\"></ng-template>\n    </ng-container>\n\n    <!-- Footer -->\n    <div *ngIf=\"!!footerText || !!footerTemplate\" class=\"card-footer\" [class.card-footer-transparent]=\"isFooterTransparent\">\n        <ng-container *ngIf=\"!footerTemplate?.templateRef; else customFooterTpl\">\n            <span *ngIf=\"!!footerText\">{{footerText}}</span>\n        </ng-container>\n        <ng-template #customFooterTpl [ngTemplateOutlet]=\"footerTemplate?.templateRef || null\"></ng-template>\n    </div>\n\n    <!-- Progress bar -->\n    <div *ngIf=\"showProgressBar\" class=\"progress progress-sm card-progress\">\n        <div class=\"progress-bar\" [style.width.%]=\"progress\" role=\"progressbar\" [attr.aria-valuenow]=\"progress\" aria-valuemin=\"0\"\n            aria-valuemax=\"100\">\n        </div>\n    </div>\n</ng-template>\n\n<!-- Body with an image on either side -->\n<ng-template #bodyWithSideImageTpl>\n    <div class=\"row row-0\">\n        <div class=\"col-3\" [class.order-md-last]=\"imagePosition === 'right'\">\n            <div class=\"card-image-{{imagePosition}}\">\n                <ng-template [ngTemplateOutlet]=\"imageTemplate!.templateRef\"></ng-template>\n            </div>\n        </div>\n        <div class=\"col\">\n            <ng-template [ngTemplateOutlet]=\"bodyTpl\"></ng-template>\n        </div>\n    </div>\n</ng-template>\n\n<!-- Body with an image on top or bottom -->\n<ng-template #bodyWithTopBottomImageTpl>\n    <div *ngIf=\"imagePosition === 'top'\" class=\"img-responsive-21x9 card-img-top\">\n        <div class=\"card-image-{{imagePosition}}\">\n            <ng-template [ngTemplateOutlet]=\"imageTemplate!.templateRef\"></ng-template>\n        </div>\n    </div>\n    <ng-template [ngTemplateOutlet]=\"bodyTpl\"></ng-template>\n    <div *ngIf=\"imagePosition === 'bottom'\" class=\"img-responsive-21x9 card-img-bottom\">\n        <div class=\"card-image-{{imagePosition}}\">\n            <ng-template [ngTemplateOutlet]=\"imageTemplate!.templateRef\"></ng-template>\n        </div>\n    </div>\n</ng-template>\n\n<!-- Body -->\n<ng-template #bodyTpl>\n    <div class=\"card-body\">\n        <!-- If title was set, but the header section is hidden, we add the title to the body -->\n        <ng-container *ngIf=\"!showHeader && !!title\">\n            <h3 class=\"card-title\">{{title}} <span *ngIf=\"!!subtitle\" class=\"card-subtitle\">{{subtitle}}</span></h3>\n        </ng-container>\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i3.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title", "stopPropagation"], outputs: ["clicked"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: CardComponent, isStandalone: false, selector: "upd-card", inputs: { wrapperClasses: "wrapperClasses", title: "title", subtitle: "subtitle", hoverEffect: "hoverEffect", state: "state", type: "type", imagePosition: "imagePosition", bgColor: "bgColor", stampIcon: "stampIcon", stampBackground: "stampBackground", statusBackground: "statusBackground", statusPosition: "statusPosition", ribbonBackground: "ribbonBackground", ribbonStyle: "ribbonStyle", ribbonIcon: "ribbonIcon", ribbonText: "ribbonText", rotate: "rotate", removeBorder: "removeBorder", useLightHeader: "useLightHeader", showHeader: "showHeader", isFooterTransparent: "isFooterTransparent", footerText: "footerText", showProgressBar: "showProgressBar", progress: "progress", actions: "actions" }, host: { properties: { "class": "this.wrapperClasses" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: CardHeaderDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: CardFooterDirective, descendants: true }, { propertyName: "imageTemplate", first: true, predicate: CardImageDirective, descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: CardActionsDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (!hoverEffect) {\n  <ng-template [ngTemplateOutlet]=\"structureTpl\"></ng-template>\n} @else {\n  <a href=\"#\" class=\"card\" [ngClass]=\"classes\">\n    <ng-template [ngTemplateOutlet]=\"structureTpl\"></ng-template>\n  </a>\n}\n\n<!-- Template for cards that are links -->\n\n<ng-template #structureTpl>\n  <!-- Ribbon -->\n  @if (!!ribbonBackground) {\n    <div class=\"ribbon {{ribbonStyle === 'default' ? '' : 'ribbon-' + ribbonStyle}} bg-{{ribbonBackground}}\">\n      @if (!!ribbonText) {\n        <span>{{ribbonText}}</span>\n      } @else {\n        <upd-icon [model]=\"ribbonIcon\" wrapperClasses=\"icon\" [removeDefaultClasses]=\"true\"></upd-icon>\n      }\n    </div>\n  }\n\n  <!-- Status -->\n  @if (!!statusBackground) {\n    <div class=\"card-status-{{statusPosition}} bg-{{statusBackground}}\"></div>\n  }\n\n  <!-- Stamp -->\n  @if (!!stampIcon) {\n    <div class=\"card-stamp\">\n      <div class=\"card-stamp-icon bg-{{stampBackground}}\">\n        <upd-icon [model]=\"stampIcon\" wrapperClasses=\"icon\" [removeDefaultClasses]=\"true\"></upd-icon>\n      </div>\n    </div>\n  }\n\n  <!-- Header section -->\n  @if (showHeader && (!!title || !!headerTemplate?.templateRef)) {\n    <div class=\"card-header\" [class.card-header-light]=\"useLightHeader\">\n      @if (!headerTemplate?.templateRef) {\n        <h3 class=\"card-title\">{{title}} @if (!!subtitle) {\n          <span class=\"card-subtitle\">{{subtitle}}</span>\n        }</h3>\n      } @else {\n        <ng-template [ngTemplateOutlet]=\"headerTemplate?.templateRef || null\"></ng-template>\n      }\n      <!-- Actions -->\n      @if (!!actionsTemplate || actions.length > 0) {\n        <div class=\"card-actions\">\n          @if (actions.length > 0) {\n            @for (btn of actions; track btn) {\n              <upd-button [model]=\"btn\" customClasses=\"me-1\"></upd-button>\n            }\n          } @else {\n            <ng-template [ngTemplateOutlet]=\"actionsTemplate?.templateRef || null\"></ng-template>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Body -->\n  @if (!!imageTemplate) {\n    @if (imagePosition === 'left' || imagePosition === 'right') {\n      <ng-template\n      [ngTemplateOutlet]=\"bodyWithSideImageTpl\"></ng-template>\n    } @else {\n      @if (imagePosition === 'top') {\n        <div class=\"img-responsive-21x9 card-img-top\">\n          <div class=\"card-image-{{imagePosition}}\">\n            <ng-template [ngTemplateOutlet]=\"imageTemplate!.templateRef\"></ng-template>\n          </div>\n        </div>\n      }\n      <ng-template [ngTemplateOutlet]=\"bodyTpl\"></ng-template>\n      @if (imagePosition === 'bottom') {\n        <div class=\"img-responsive-21x9 card-img-bottom\">\n          <div class=\"card-image-{{imagePosition}}\">\n            <ng-template [ngTemplateOutlet]=\"imageTemplate!.templateRef\"></ng-template>\n          </div>\n        </div>\n      }\n    }\n  } @else {\n    <ng-template [ngTemplateOutlet]=\"bodyTpl\"></ng-template>\n  }\n\n  <!-- Footer -->\n  @if (!!footerText || !!footerTemplate) {\n    <div class=\"card-footer\" [class.card-footer-transparent]=\"isFooterTransparent\">\n      @if (!footerTemplate?.templateRef) {\n        @if (!!footerText) {\n          <span>{{footerText}}</span>\n        }\n      } @else {\n        <ng-template [ngTemplateOutlet]=\"footerTemplate?.templateRef || null\"></ng-template>\n      }\n    </div>\n  }\n\n  <!-- Progress bar -->\n  @if (showProgressBar) {\n    <div class=\"progress progress-sm card-progress\">\n      <div class=\"progress-bar\" [style.width.%]=\"progress\" role=\"progressbar\" [attr.aria-valuenow]=\"progress\" aria-valuemin=\"0\"\n        aria-valuemax=\"100\">\n      </div>\n    </div>\n  }\n</ng-template>\n\n<!-- Body with an image on either side -->\n<ng-template #bodyWithSideImageTpl>\n  <div class=\"row row-0\">\n    <div class=\"col-3\" [class.order-md-last]=\"imagePosition === 'right'\">\n      <div class=\"card-image-{{imagePosition}}\">\n        <ng-template [ngTemplateOutlet]=\"imageTemplate!.templateRef\"></ng-template>\n      </div>\n    </div>\n    <div class=\"col\">\n      <ng-template [ngTemplateOutlet]=\"bodyTpl\"></ng-template>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Body with an image on top or bottom -->\n\n<!-- Body -->\n<ng-template #bodyTpl>\n  <div class=\"card-body\">\n    <!-- If title was set, but the header section is hidden, we add the title to the body -->\n    @if (!showHeader && !!title) {\n      <h3 class=\"card-title\">{{title}} @if (!!subtitle) {\n        <span class=\"card-subtitle\">{{subtitle}}</span>\n      }</h3>\n    }\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i3.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title", "stopPropagation"], outputs: ["clicked"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-card', encapsulation: ViewEncapsulation.None, template: "<ng-template *ngIf=\"!hoverEffect; else linkTpl\" [ngTemplateOutlet]=\"structureTpl\"></ng-template>\n\n<!-- Template for cards that are links -->\n<ng-template #linkTpl>\n    <a href=\"#\" class=\"card\" [ngClass]=\"classes\">\n        <ng-template [ngTemplateOutlet]=\"structureTpl\"></ng-template>\n    </a>\n</ng-template>\n\n<ng-template #structureTpl>\n    <!-- Ribbon -->\n    <div *ngIf=\"!!ribbonBackground\" class=\"ribbon {{ribbonStyle === 'default' ? '' : 'ribbon-' + ribbonStyle}} bg-{{ribbonBackground}}\">\n        <span *ngIf=\"!!ribbonText; else ribbonIconTpl\">{{ribbonText}}</span>\n        <ng-template #ribbonIconTpl>\n            <upd-icon [model]=\"ribbonIcon\" wrapperClasses=\"icon\" [removeDefaultClasses]=\"true\"></upd-icon>\n        </ng-template>\n    </div>\n\n    <!-- Status -->\n    <div *ngIf=\"!!statusBackground\" class=\"card-status-{{statusPosition}} bg-{{statusBackground}}\"></div>\n\n    <!-- Stamp -->\n    <div *ngIf=\"!!stampIcon\" class=\"card-stamp\">\n        <div class=\"card-stamp-icon bg-{{stampBackground}}\">\n            <upd-icon [model]=\"stampIcon\" wrapperClasses=\"icon\" [removeDefaultClasses]=\"true\"></upd-icon>\n        </div>\n    </div>\n\n    <!-- Header section -->\n    <div *ngIf=\"showHeader && (!!title || !!headerTemplate?.templateRef)\" class=\"card-header\" [class.card-header-light]=\"useLightHeader\">\n        <ng-container *ngIf=\"!headerTemplate?.templateRef; else customHeaderTpl\">\n            <h3 class=\"card-title\">{{title}} <span *ngIf=\"!!subtitle\" class=\"card-subtitle\">{{subtitle}}</span></h3>\n        </ng-container>\n        <ng-template #customHeaderTpl [ngTemplateOutlet]=\"headerTemplate?.templateRef || null\"></ng-template>\n\n        <!-- Actions -->\n        <div *ngIf=\"!!actionsTemplate || actions.length > 0\" class=\"card-actions\">\n            <ng-container *ngIf=\"actions.length > 0; else customActionsTpl\">\n                <upd-button *ngFor=\"let btn of actions\" [model]=\"btn\" customClasses=\"me-1\"></upd-button>\n            </ng-container>\n            <ng-template #customActionsTpl [ngTemplateOutlet]=\"actionsTemplate?.templateRef || null\"></ng-template>\n        </div>\n    </div>\n\n    <!-- Body -->\n    <ng-container *ngIf=\"!!imageTemplate; else bodyTpl\">\n        <ng-template *ngIf=\"imagePosition === 'left' || imagePosition === 'right'; else bodyWithTopBottomImageTpl\"\n            [ngTemplateOutlet]=\"bodyWithSideImageTpl\"></ng-template>\n    </ng-container>\n\n    <!-- Footer -->\n    <div *ngIf=\"!!footerText || !!footerTemplate\" class=\"card-footer\" [class.card-footer-transparent]=\"isFooterTransparent\">\n        <ng-container *ngIf=\"!footerTemplate?.templateRef; else customFooterTpl\">\n            <span *ngIf=\"!!footerText\">{{footerText}}</span>\n        </ng-container>\n        <ng-template #customFooterTpl [ngTemplateOutlet]=\"footerTemplate?.templateRef || null\"></ng-template>\n    </div>\n\n    <!-- Progress bar -->\n    <div *ngIf=\"showProgressBar\" class=\"progress progress-sm card-progress\">\n        <div class=\"progress-bar\" [style.width.%]=\"progress\" role=\"progressbar\" [attr.aria-valuenow]=\"progress\" aria-valuemin=\"0\"\n            aria-valuemax=\"100\">\n        </div>\n    </div>\n</ng-template>\n\n<!-- Body with an image on either side -->\n<ng-template #bodyWithSideImageTpl>\n    <div class=\"row row-0\">\n        <div class=\"col-3\" [class.order-md-last]=\"imagePosition === 'right'\">\n            <div class=\"card-image-{{imagePosition}}\">\n                <ng-template [ngTemplateOutlet]=\"imageTemplate!.templateRef\"></ng-template>\n            </div>\n        </div>\n        <div class=\"col\">\n            <ng-template [ngTemplateOutlet]=\"bodyTpl\"></ng-template>\n        </div>\n    </div>\n</ng-template>\n\n<!-- Body with an image on top or bottom -->\n<ng-template #bodyWithTopBottomImageTpl>\n    <div *ngIf=\"imagePosition === 'top'\" class=\"img-responsive-21x9 card-img-top\">\n        <div class=\"card-image-{{imagePosition}}\">\n            <ng-template [ngTemplateOutlet]=\"imageTemplate!.templateRef\"></ng-template>\n        </div>\n    </div>\n    <ng-template [ngTemplateOutlet]=\"bodyTpl\"></ng-template>\n    <div *ngIf=\"imagePosition === 'bottom'\" class=\"img-responsive-21x9 card-img-bottom\">\n        <div class=\"card-image-{{imagePosition}}\">\n            <ng-template [ngTemplateOutlet]=\"imageTemplate!.templateRef\"></ng-template>\n        </div>\n    </div>\n</ng-template>\n\n<!-- Body -->\n<ng-template #bodyTpl>\n    <div class=\"card-body\">\n        <!-- If title was set, but the header section is hidden, we add the title to the body -->\n        <ng-container *ngIf=\"!showHeader && !!title\">\n            <h3 class=\"card-title\">{{title}} <span *ngIf=\"!!subtitle\" class=\"card-subtitle\">{{subtitle}}</span></h3>\n        </ng-container>\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n" }]
+            args: [{ standalone: false, selector: 'upd-card', encapsulation: ViewEncapsulation.None, template: "@if (!hoverEffect) {\n  <ng-template [ngTemplateOutlet]=\"structureTpl\"></ng-template>\n} @else {\n  <a href=\"#\" class=\"card\" [ngClass]=\"classes\">\n    <ng-template [ngTemplateOutlet]=\"structureTpl\"></ng-template>\n  </a>\n}\n\n<!-- Template for cards that are links -->\n\n<ng-template #structureTpl>\n  <!-- Ribbon -->\n  @if (!!ribbonBackground) {\n    <div class=\"ribbon {{ribbonStyle === 'default' ? '' : 'ribbon-' + ribbonStyle}} bg-{{ribbonBackground}}\">\n      @if (!!ribbonText) {\n        <span>{{ribbonText}}</span>\n      } @else {\n        <upd-icon [model]=\"ribbonIcon\" wrapperClasses=\"icon\" [removeDefaultClasses]=\"true\"></upd-icon>\n      }\n    </div>\n  }\n\n  <!-- Status -->\n  @if (!!statusBackground) {\n    <div class=\"card-status-{{statusPosition}} bg-{{statusBackground}}\"></div>\n  }\n\n  <!-- Stamp -->\n  @if (!!stampIcon) {\n    <div class=\"card-stamp\">\n      <div class=\"card-stamp-icon bg-{{stampBackground}}\">\n        <upd-icon [model]=\"stampIcon\" wrapperClasses=\"icon\" [removeDefaultClasses]=\"true\"></upd-icon>\n      </div>\n    </div>\n  }\n\n  <!-- Header section -->\n  @if (showHeader && (!!title || !!headerTemplate?.templateRef)) {\n    <div class=\"card-header\" [class.card-header-light]=\"useLightHeader\">\n      @if (!headerTemplate?.templateRef) {\n        <h3 class=\"card-title\">{{title}} @if (!!subtitle) {\n          <span class=\"card-subtitle\">{{subtitle}}</span>\n        }</h3>\n      } @else {\n        <ng-template [ngTemplateOutlet]=\"headerTemplate?.templateRef || null\"></ng-template>\n      }\n      <!-- Actions -->\n      @if (!!actionsTemplate || actions.length > 0) {\n        <div class=\"card-actions\">\n          @if (actions.length > 0) {\n            @for (btn of actions; track btn) {\n              <upd-button [model]=\"btn\" customClasses=\"me-1\"></upd-button>\n            }\n          } @else {\n            <ng-template [ngTemplateOutlet]=\"actionsTemplate?.templateRef || null\"></ng-template>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Body -->\n  @if (!!imageTemplate) {\n    @if (imagePosition === 'left' || imagePosition === 'right') {\n      <ng-template\n      [ngTemplateOutlet]=\"bodyWithSideImageTpl\"></ng-template>\n    } @else {\n      @if (imagePosition === 'top') {\n        <div class=\"img-responsive-21x9 card-img-top\">\n          <div class=\"card-image-{{imagePosition}}\">\n            <ng-template [ngTemplateOutlet]=\"imageTemplate!.templateRef\"></ng-template>\n          </div>\n        </div>\n      }\n      <ng-template [ngTemplateOutlet]=\"bodyTpl\"></ng-template>\n      @if (imagePosition === 'bottom') {\n        <div class=\"img-responsive-21x9 card-img-bottom\">\n          <div class=\"card-image-{{imagePosition}}\">\n            <ng-template [ngTemplateOutlet]=\"imageTemplate!.templateRef\"></ng-template>\n          </div>\n        </div>\n      }\n    }\n  } @else {\n    <ng-template [ngTemplateOutlet]=\"bodyTpl\"></ng-template>\n  }\n\n  <!-- Footer -->\n  @if (!!footerText || !!footerTemplate) {\n    <div class=\"card-footer\" [class.card-footer-transparent]=\"isFooterTransparent\">\n      @if (!footerTemplate?.templateRef) {\n        @if (!!footerText) {\n          <span>{{footerText}}</span>\n        }\n      } @else {\n        <ng-template [ngTemplateOutlet]=\"footerTemplate?.templateRef || null\"></ng-template>\n      }\n    </div>\n  }\n\n  <!-- Progress bar -->\n  @if (showProgressBar) {\n    <div class=\"progress progress-sm card-progress\">\n      <div class=\"progress-bar\" [style.width.%]=\"progress\" role=\"progressbar\" [attr.aria-valuenow]=\"progress\" aria-valuemin=\"0\"\n        aria-valuemax=\"100\">\n      </div>\n    </div>\n  }\n</ng-template>\n\n<!-- Body with an image on either side -->\n<ng-template #bodyWithSideImageTpl>\n  <div class=\"row row-0\">\n    <div class=\"col-3\" [class.order-md-last]=\"imagePosition === 'right'\">\n      <div class=\"card-image-{{imagePosition}}\">\n        <ng-template [ngTemplateOutlet]=\"imageTemplate!.templateRef\"></ng-template>\n      </div>\n    </div>\n    <div class=\"col\">\n      <ng-template [ngTemplateOutlet]=\"bodyTpl\"></ng-template>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Body with an image on top or bottom -->\n\n<!-- Body -->\n<ng-template #bodyTpl>\n  <div class=\"card-body\">\n    <!-- If title was set, but the header section is hidden, we add the title to the body -->\n    @if (!showHeader && !!title) {\n      <h3 class=\"card-title\">{{title}} @if (!!subtitle) {\n        <span class=\"card-subtitle\">{{subtitle}}</span>\n      }</h3>\n    }\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { wrapperClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -191,8 +195,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
             }] } });
 class UpdCardModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: UpdCardModule, declarations: [CardComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: UpdCardModule, declarations: [CardComponent,
             CardHeaderDirective,
             CardFooterDirective,
             CardImageDirective,
@@ -202,11 +206,11 @@ class UpdCardModule {
             CardHeaderDirective,
             CardFooterDirective,
             CardImageDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdCardModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdCardModule, imports: [CommonModule,
             UpdIconsModule,
             UpdButtonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdCardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdCardModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/updevs-components-card.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"updevs-components-card.mjs","sources":["../../../../libs/components/card/src/directives/card-actions.directive.ts","../../../../libs/components/card/src/directives/card-footer.directive.ts","../../../../libs/components/card/src/directives/card-header.directive.ts","../../../../libs/components/card/src/directives/card-image.directive.ts","../../../../libs/components/card/src/card.component.ts","../../../../libs/components/card/src/card.component.html","../../../../libs/components/card/src/upd-card.module.ts","../../../../libs/components/card/src/updevs-components-card.ts"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\n\n@Directive({\n selector: 'ng-template[updCardActions]'\n})\nexport class CardActionsDirective {\n public readonly templateRef = inject(TemplateRef<any>);\n}\n","import { Directive, TemplateRef, inject } from '@angular/core';\n\n@Directive({\n selector: 'ng-template[updCardFooter]'\n})\nexport class CardFooterDirective {\n public readonly templateRef = inject(TemplateRef<any>);\n}\n","import { Directive, TemplateRef, inject } from '@angular/core';\n\n@Directive({\n selector: 'ng-template[updCardHeader]'\n})\nexport class CardHeaderDirective {\n public readonly templateRef = inject(TemplateRef<any>);\n}\n","import { Directive, TemplateRef, inject } from '@angular/core';\n\n@Directive({\n selector: 'ng-template[updCardImage]'\n})\nexport class CardImageDirective {\n public readonly templateRef = inject(TemplateRef<any>);\n}\n","import {\n Component,\n Input,\n ContentChild,\n SimpleChanges,\n OnInit,\n OnChanges,\n ViewEncapsulation, HostBinding\n} from '@angular/core';\nimport { ButtonModel } from '@updevs/sdk/layout';\nimport { TopBottomLeftRightType, BgColorStyleType } from '@updevs/sdk/types';\nimport { IconModel } from '@updevs/icons';\n\nimport { CardFooterDirective } from './directives/card-footer.directive';\nimport { CardHeaderDirective } from './directives/card-header.directive';\nimport { HoverEffectType } from './types/hover-effect.type';\nimport { CardStateType } from './types/card-state.type';\nimport { StatusPositionType } from './types/status-position.type';\nimport { RibbonStyleType } from './types/ribbon-style.type';\nimport { CardStyleType } from './types/card-style.type';\nimport { CardImageDirective } from './directives/card-image.directive';\nimport { CardActionsDirective } from './directives/card-actions.directive';\n\n@Component({\n selector: 'upd-card',\n templateUrl: './card.component.html',\n styleUrls: ['./card.component.scss'],\n encapsulation: ViewEncapsulation.None\n})\nexport class CardComponent implements OnInit, OnChanges {\n @HostBinding('class') @Input() wrapperClasses = '';\n @ContentChild(CardHeaderDirective) headerTemplate?: CardHeaderDirective;\n @ContentChild(CardFooterDirective) footerTemplate?: CardFooterDirective;\n @ContentChild(CardImageDirective) imageTemplate?: CardImageDirective;\n @ContentChild(CardActionsDirective) actionsTemplate?: CardActionsDirective;\n\n @Input() title?: string;\n @Input() subtitle?: string;\n @Input() hoverEffect?: HoverEffectType;\n @Input() state?: CardStateType;\n @Input() type?: CardStyleType;\n @Input() imagePosition?: TopBottomLeftRightType;\n @Input() bgColor?: BgColorStyleType;\n @Input() stampIcon?: IconModel;\n @Input() stampBackground: BgColorStyleType = 'primary';\n @Input() statusBackground?: BgColorStyleType;\n @Input() statusPosition: StatusPositionType = 'top';\n @Input() ribbonBackground?: BgColorStyleType;\n @Input() ribbonStyle: RibbonStyleType = 'default';\n @Input() ribbonIcon?: IconModel = { tablerIcon: 'star' };\n @Input() ribbonText?: string;\n @Input() rotate?: 'right' \| 'left';\n @Input() removeBorder = false;\n @Input() useLightHeader = false;\n /*\n Whether the header should be displayed.\n /\n @Input() showHeader = true;\n @Input() isFooterTransparent = false;\n @Input() footerText?: string;\n @Input() showProgressBar = false;\n @Input() progress?: number;\n @Input() actions: ButtonModel[] = [];\n\n classes: string[] = [];\n\n ngOnInit(): void {\n this.updateClasses();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n this.updateClasses();\n }\n\n private updateClasses(): void {\n const lClasses: string[] = [];\n\n if (this.removeBorder) {\n lClasses.push('card-borderless');\n }\n\n if (!!this.hoverEffect) {\n lClasses.push('card-link');\n\n if (this.hoverEffect !== 'default') {\n lClasses.push(`card-link-${this.hoverEffect}`);\n }\n }\n\n if (!!this.state) {\n lClasses.push(`card-${this.state}`);\n }\n\n if (!!this.bgColor) {\n lClasses.push(`bg-${this.bgColor}`);\n }\n\n if (!!this.rotate) {\n lClasses.push(`card-rotate-${this.rotate}`);\n }\n\n if (!!this.type) {\n lClasses.push(`card-${this.type}`);\n }\n\n if (!!this.hoverEffect) {\n this.classes = [...lClasses];\n } else {\n this.wrapperClasses = 'card ' + lClasses.join(' ');\n }\n }\n}\n","<ng-template ngIf=\"!hoverEffect; else linkTpl\" [ngTemplateOutlet]=\"structureTpl\"></ng-template>\n\n<!-- Template for cards that are links -->\n<ng-template #linkTpl>\n <a href=\"#\" class=\"card\" [ngClass]=\"classes\">\n <ng-template [ngTemplateOutlet]=\"structureTpl\"></ng-template>\n </a>\n</ng-template>\n\n<ng-template #structureTpl>\n <!-- Ribbon -->\n <div ngIf=\"!!ribbonBackground\" class=\"ribbon {{ribbonStyle === 'default' ? '' : 'ribbon-' + ribbonStyle}} bg-{{ribbonBackground}}\">\n <span ngIf=\"!!ribbonText; else ribbonIconTpl\">{{ribbonText}}</span>\n <ng-template #ribbonIconTpl>\n <upd-icon [model]=\"ribbonIcon\" wrapperClasses=\"icon\" [removeDefaultClasses]=\"true\"></upd-icon>\n </ng-template>\n </div>\n\n <!-- Status -->\n <div ngIf=\"!!statusBackground\" class=\"card-status-{{statusPosition}} bg-{{statusBackground}}\"></div>\n\n <!-- Stamp -->\n <div ngIf=\"!!stampIcon\" class=\"card-stamp\">\n <div class=\"card-stamp-icon bg-{{stampBackground}}\">\n <upd-icon [model]=\"stampIcon\" wrapperClasses=\"icon\" [removeDefaultClasses]=\"true\"></upd-icon>\n </div>\n </div>\n\n <!-- Header section -->\n <div ngIf=\"showHeader && (!!title \|\| !!headerTemplate?.templateRef)\" class=\"card-header\" [class.card-header-light]=\"useLightHeader\">\n <ng-container ngIf=\"!headerTemplate?.templateRef; else customHeaderTpl\">\n <h3 class=\"card-title\">{{title}} <span ngIf=\"!!subtitle\" class=\"card-subtitle\">{{subtitle}}</span></h3>\n </ng-container>\n <ng-template #customHeaderTpl [ngTemplateOutlet]=\"headerTemplate?.templateRef \|\| null\"></ng-template>\n\n <!-- Actions -->\n <div ngIf=\"!!actionsTemplate \|\| actions.length > 0\" class=\"card-actions\">\n <ng-container ngIf=\"actions.length > 0; else customActionsTpl\">\n <upd-button ngFor=\"let btn of actions\" [model]=\"btn\" customClasses=\"me-1\"></upd-button>\n </ng-container>\n <ng-template #customActionsTpl [ngTemplateOutlet]=\"actionsTemplate?.templateRef \|\| null\"></ng-template>\n </div>\n </div>\n\n <!-- Body -->\n <ng-container ngIf=\"!!imageTemplate; else bodyTpl\">\n <ng-template ngIf=\"imagePosition === 'left' \|\| imagePosition === 'right'; else bodyWithTopBottomImageTpl\"\n [ngTemplateOutlet]=\"bodyWithSideImageTpl\"></ng-template>\n </ng-container>\n\n <!-- Footer -->\n <div ngIf=\"!!footerText \|\| !!footerTemplate\" class=\"card-footer\" [class.card-footer-transparent]=\"isFooterTransparent\">\n <ng-container ngIf=\"!footerTemplate?.templateRef; else customFooterTpl\">\n <span ngIf=\"!!footerText\">{{footerText}}</span>\n </ng-container>\n <ng-template #customFooterTpl [ngTemplateOutlet]=\"footerTemplate?.templateRef \|\| null\"></ng-template>\n </div>\n\n <!-- Progress bar -->\n <div ngIf=\"showProgressBar\" class=\"progress progress-sm card-progress\">\n <div class=\"progress-bar\" [style.width.%]=\"progress\" role=\"progressbar\" [attr.aria-valuenow]=\"progress\" aria-valuemin=\"0\"\n aria-valuemax=\"100\">\n </div>\n </div>\n</ng-template>\n\n<!-- Body with an image on either side -->\n<ng-template #bodyWithSideImageTpl>\n <div class=\"row row-0\">\n <div class=\"col-3\" [class.order-md-last]=\"imagePosition === 'right'\">\n <div class=\"card-image-{{imagePosition}}\">\n <ng-template [ngTemplateOutlet]=\"imageTemplate!.templateRef\"></ng-template>\n </div>\n </div>\n <div class=\"col\">\n <ng-template [ngTemplateOutlet]=\"bodyTpl\"></ng-template>\n </div>\n </div>\n</ng-template>\n\n<!-- Body with an image on top or bottom -->\n<ng-template #bodyWithTopBottomImageTpl>\n <div ngIf=\"imagePosition === 'top'\" class=\"img-responsive-21x9 card-img-top\">\n <div class=\"card-image-{{imagePosition}}\">\n <ng-template [ngTemplateOutlet]=\"imageTemplate!.templateRef\"></ng-template>\n </div>\n </div>\n <ng-template [ngTemplateOutlet]=\"bodyTpl\"></ng-template>\n <div ngIf=\"imagePosition === 'bottom'\" class=\"img-responsive-21x9 card-img-bottom\">\n <div class=\"card-image-{{imagePosition}}\">\n <ng-template [ngTemplateOutlet]=\"imageTemplate!.templateRef\"></ng-template>\n </div>\n </div>\n</ng-template>\n\n<!-- Body -->\n<ng-template #bodyTpl>\n <div class=\"card-body\">\n <!-- If title was set, but the header section is hidden, we add the title to the body -->\n <ng-container ngIf=\"!showHeader && !!title\">\n <h3 class=\"card-title\">{{title}} <span ngIf=\"!!subtitle\" class=\"card-subtitle\">{{subtitle}}</span></h3>\n </ng-container>\n <ng-content></ng-content>\n </div>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { UpdIconsModule } from '@updevs/icons';\nimport { UpdButtonModule } from '@updevs/components/button';\n\nimport { CardComponent } from './card.component';\nimport { CardHeaderDirective } from './directives/card-header.directive';\nimport { CardFooterDirective } from './directives/card-footer.directive';\nimport { CardImageDirective } from './directives/card-image.directive';\nimport { CardActionsDirective } from './directives/card-actions.directive';\n\n@NgModule({\n imports: [\n CommonModule,\n UpdIconsModule,\n UpdButtonModule\n ],\n declarations: [\n CardComponent,\n CardHeaderDirective,\n CardFooterDirective,\n CardImageDirective,\n CardActionsDirective\n ],\n exports: [\n CardComponent,\n CardHeaderDirective,\n CardFooterDirective,\n CardImageDirective\n ]\n})\nexport class UpdCardModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"updevs-components-card.mjs","sources":["../../../../libs/components/card/src/directives/card-actions.directive.ts","../../../../libs/components/card/src/directives/card-footer.directive.ts","../../../../libs/components/card/src/directives/card-header.directive.ts","../../../../libs/components/card/src/directives/card-image.directive.ts","../../../../libs/components/card/src/card.component.ts","../../../../libs/components/card/src/card.component.html","../../../../libs/components/card/src/upd-card.module.ts","../../../../libs/components/card/src/updevs-components-card.ts"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\n\n@Directive({\n standalone: false,\n selector: 'ng-template[updCardActions]'\n})\nexport class CardActionsDirective {\n public readonly templateRef = inject(TemplateRef<any>);\n}\n","import { Directive, TemplateRef, inject } from '@angular/core';\n\n@Directive({\n standalone: false,\n selector: 'ng-template[updCardFooter]'\n})\nexport class CardFooterDirective {\n public readonly templateRef = inject(TemplateRef<any>);\n}\n","import { Directive, TemplateRef, inject } from '@angular/core';\n\n@Directive({\n standalone: false,\n selector: 'ng-template[updCardHeader]'\n})\nexport class CardHeaderDirective {\n public readonly templateRef = inject(TemplateRef<any>);\n}\n","import { Directive, TemplateRef, inject } from '@angular/core';\n\n@Directive({\n standalone: false,\n selector: 'ng-template[updCardImage]'\n})\nexport class CardImageDirective {\n public readonly templateRef = inject(TemplateRef<any>);\n}\n","import {\n Component,\n Input,\n ContentChild,\n SimpleChanges,\n OnInit,\n OnChanges,\n ViewEncapsulation, HostBinding\n} from '@angular/core';\nimport { ButtonModel } from '@updevs/sdk/layout';\nimport { TopBottomLeftRightType, BgColorStyleType } from '@updevs/sdk/types';\nimport { IconModel } from '@updevs/icons';\n\nimport { CardFooterDirective } from './directives/card-footer.directive';\nimport { CardHeaderDirective } from './directives/card-header.directive';\nimport { HoverEffectType } from './types/hover-effect.type';\nimport { CardStateType } from './types/card-state.type';\nimport { StatusPositionType } from './types/status-position.type';\nimport { RibbonStyleType } from './types/ribbon-style.type';\nimport { CardStyleType } from './types/card-style.type';\nimport { CardImageDirective } from './directives/card-image.directive';\nimport { CardActionsDirective } from './directives/card-actions.directive';\n\n@Component({\n standalone: false,\n selector: 'upd-card',\n templateUrl: './card.component.html',\n styleUrls: ['./card.component.scss'],\n encapsulation: ViewEncapsulation.None\n})\nexport class CardComponent implements OnInit, OnChanges {\n @HostBinding('class') @Input() wrapperClasses = '';\n @ContentChild(CardHeaderDirective) headerTemplate?: CardHeaderDirective;\n @ContentChild(CardFooterDirective) footerTemplate?: CardFooterDirective;\n @ContentChild(CardImageDirective) imageTemplate?: CardImageDirective;\n @ContentChild(CardActionsDirective) actionsTemplate?: CardActionsDirective;\n\n @Input() title?: string;\n @Input() subtitle?: string;\n @Input() hoverEffect?: HoverEffectType;\n @Input() state?: CardStateType;\n @Input() type?: CardStyleType;\n @Input() imagePosition?: TopBottomLeftRightType;\n @Input() bgColor?: BgColorStyleType;\n @Input() stampIcon?: IconModel;\n @Input() stampBackground: BgColorStyleType = 'primary';\n @Input() statusBackground?: BgColorStyleType;\n @Input() statusPosition: StatusPositionType = 'top';\n @Input() ribbonBackground?: BgColorStyleType;\n @Input() ribbonStyle: RibbonStyleType = 'default';\n @Input() ribbonIcon?: IconModel = { tablerIcon: 'star' };\n @Input() ribbonText?: string;\n @Input() rotate?: 'right' \| 'left';\n @Input() removeBorder = false;\n @Input() useLightHeader = false;\n /*\n Whether the header should be displayed.\n /\n @Input() showHeader = true;\n @Input() isFooterTransparent = false;\n @Input() footerText?: string;\n @Input() showProgressBar = false;\n @Input() progress?: number;\n @Input() actions: ButtonModel[] = [];\n\n classes: string[] = [];\n\n ngOnInit(): void {\n this.updateClasses();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n this.updateClasses();\n }\n\n private updateClasses(): void {\n const lClasses: string[] = [];\n\n if (this.removeBorder) {\n lClasses.push('card-borderless');\n }\n\n if (!!this.hoverEffect) {\n lClasses.push('card-link');\n\n if (this.hoverEffect !== 'default') {\n lClasses.push(`card-link-${this.hoverEffect}`);\n }\n }\n\n if (!!this.state) {\n lClasses.push(`card-${this.state}`);\n }\n\n if (!!this.bgColor) {\n lClasses.push(`bg-${this.bgColor}`);\n }\n\n if (!!this.rotate) {\n lClasses.push(`card-rotate-${this.rotate}`);\n }\n\n if (!!this.type) {\n lClasses.push(`card-${this.type}`);\n }\n\n if (!!this.hoverEffect) {\n this.classes = [...lClasses];\n } else {\n this.wrapperClasses = 'card ' + lClasses.join(' ');\n }\n }\n}\n","@if (!hoverEffect) {\n <ng-template [ngTemplateOutlet]=\"structureTpl\"></ng-template>\n} @else {\n <a href=\"#\" class=\"card\" [ngClass]=\"classes\">\n <ng-template [ngTemplateOutlet]=\"structureTpl\"></ng-template>\n </a>\n}\n\n<!-- Template for cards that are links -->\n\n<ng-template #structureTpl>\n <!-- Ribbon -->\n @if (!!ribbonBackground) {\n <div class=\"ribbon {{ribbonStyle === 'default' ? '' : 'ribbon-' + ribbonStyle}} bg-{{ribbonBackground}}\">\n @if (!!ribbonText) {\n <span>{{ribbonText}}</span>\n } @else {\n <upd-icon [model]=\"ribbonIcon\" wrapperClasses=\"icon\" [removeDefaultClasses]=\"true\"></upd-icon>\n }\n </div>\n }\n\n <!-- Status -->\n @if (!!statusBackground) {\n <div class=\"card-status-{{statusPosition}} bg-{{statusBackground}}\"></div>\n }\n\n <!-- Stamp -->\n @if (!!stampIcon) {\n <div class=\"card-stamp\">\n <div class=\"card-stamp-icon bg-{{stampBackground}}\">\n <upd-icon [model]=\"stampIcon\" wrapperClasses=\"icon\" [removeDefaultClasses]=\"true\"></upd-icon>\n </div>\n </div>\n }\n\n <!-- Header section -->\n @if (showHeader && (!!title \|\| !!headerTemplate?.templateRef)) {\n <div class=\"card-header\" [class.card-header-light]=\"useLightHeader\">\n @if (!headerTemplate?.templateRef) {\n <h3 class=\"card-title\">{{title}} @if (!!subtitle) {\n <span class=\"card-subtitle\">{{subtitle}}</span>\n }</h3>\n } @else {\n <ng-template [ngTemplateOutlet]=\"headerTemplate?.templateRef \|\| null\"></ng-template>\n }\n <!-- Actions -->\n @if (!!actionsTemplate \|\| actions.length > 0) {\n <div class=\"card-actions\">\n @if (actions.length > 0) {\n @for (btn of actions; track btn) {\n <upd-button [model]=\"btn\" customClasses=\"me-1\"></upd-button>\n }\n } @else {\n <ng-template [ngTemplateOutlet]=\"actionsTemplate?.templateRef \|\| null\"></ng-template>\n }\n </div>\n }\n </div>\n }\n\n <!-- Body -->\n @if (!!imageTemplate) {\n @if (imagePosition === 'left' \|\| imagePosition === 'right') {\n <ng-template\n [ngTemplateOutlet]=\"bodyWithSideImageTpl\"></ng-template>\n } @else {\n @if (imagePosition === 'top') {\n <div class=\"img-responsive-21x9 card-img-top\">\n <div class=\"card-image-{{imagePosition}}\">\n <ng-template [ngTemplateOutlet]=\"imageTemplate!.templateRef\"></ng-template>\n </div>\n </div>\n }\n <ng-template [ngTemplateOutlet]=\"bodyTpl\"></ng-template>\n @if (imagePosition === 'bottom') {\n <div class=\"img-responsive-21x9 card-img-bottom\">\n <div class=\"card-image-{{imagePosition}}\">\n <ng-template [ngTemplateOutlet]=\"imageTemplate!.templateRef\"></ng-template>\n </div>\n </div>\n }\n }\n } @else {\n <ng-template [ngTemplateOutlet]=\"bodyTpl\"></ng-template>\n }\n\n <!-- Footer -->\n @if (!!footerText \|\| !!footerTemplate) {\n <div class=\"card-footer\" [class.card-footer-transparent]=\"isFooterTransparent\">\n @if (!footerTemplate?.templateRef) {\n @if (!!footerText) {\n <span>{{footerText}}</span>\n }\n } @else {\n <ng-template [ngTemplateOutlet]=\"footerTemplate?.templateRef \|\| null\"></ng-template>\n }\n </div>\n }\n\n <!-- Progress bar -->\n @if (showProgressBar) {\n <div class=\"progress progress-sm card-progress\">\n <div class=\"progress-bar\" [style.width.%]=\"progress\" role=\"progressbar\" [attr.aria-valuenow]=\"progress\" aria-valuemin=\"0\"\n aria-valuemax=\"100\">\n </div>\n </div>\n }\n</ng-template>\n\n<!-- Body with an image on either side -->\n<ng-template #bodyWithSideImageTpl>\n <div class=\"row row-0\">\n <div class=\"col-3\" [class.order-md-last]=\"imagePosition === 'right'\">\n <div class=\"card-image-{{imagePosition}}\">\n <ng-template [ngTemplateOutlet]=\"imageTemplate!.templateRef\"></ng-template>\n </div>\n </div>\n <div class=\"col\">\n <ng-template [ngTemplateOutlet]=\"bodyTpl\"></ng-template>\n </div>\n </div>\n</ng-template>\n\n<!-- Body with an image on top or bottom -->\n\n<!-- Body -->\n<ng-template #bodyTpl>\n <div class=\"card-body\">\n <!-- If title was set, but the header section is hidden, we add the title to the body -->\n @if (!showHeader && !!title) {\n <h3 class=\"card-title\">{{title}} @if (!!subtitle) {\n <span class=\"card-subtitle\">{{subtitle}}</span>\n }</h3>\n }\n <ng-content></ng-content>\n </div>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { UpdIconsModule } from '@updevs/icons';\nimport { UpdButtonModule } from '@updevs/components/button';\n\nimport { CardComponent } from './card.component';\nimport { CardHeaderDirective } from './directives/card-header.directive';\nimport { CardFooterDirective } from './directives/card-footer.directive';\nimport { CardImageDirective } from './directives/card-image.directive';\nimport { CardActionsDirective } from './directives/card-actions.directive';\n\n@NgModule({\n imports: [\n CommonModule,\n UpdIconsModule,\n UpdButtonModule\n ],\n declarations: [\n CardComponent,\n CardHeaderDirective,\n CardFooterDirective,\n CardImageDirective,\n CardActionsDirective\n ],\n exports: [\n CardComponent,\n CardHeaderDirective,\n CardFooterDirective,\n CardImageDirective\n ]\n})\nexport class UpdCardModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/updevs-components-drag-and-drop.mjs CHANGED Viewed

@@ -13,7 +13,7 @@ class DragAndDropItemModel {
         this.isDisabled = false;
         this.canDrag = true;
         this.canBeEmpty = true; // TODO: implement
-        this.isBeingDragged = signal(false);
+        this.isBeingDragged = signal(false, ...(ngDevMode ? [{ debugName: "isBeingDragged" }] : []));
         Object.assign(this, init);
     }
 }
@@ -21,19 +21,19 @@ class DragAndDropItemModel {
 class DragAndDropColumnModel {
     constructor(init) {
         Object.assign(this, init);
-        this.items = signal(init.items.map(i => new DragAndDropItemModel(i)));
+        this.items = signal(init.items.map(i => new DragAndDropItemModel(i)), ...(ngDevMode ? [{ debugName: "items" }] : []));
     }
 }
 class DragAndDropComponent {
     constructor() {
-        this.config = input.required();
-        this.columns = model([]);
-        this.showHandler = computed(() => this.config().showHandler || false);
-        this.canReorder = computed(() => this.config().canReorder || false);
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.columns = model([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+        this.showHandler = computed(() => this.config().showHandler || false, ...(ngDevMode ? [{ debugName: "showHandler" }] : []));
+        this.canReorder = computed(() => this.config().canReorder || false, ...(ngDevMode ? [{ debugName: "canReorder" }] : []));
         this.textService = inject(TextService);
-        this.isReordering = signal(false);
-        this.draggedItem = signal(undefined);
+        this.isReordering = signal(false, ...(ngDevMode ? [{ debugName: "isReordering" }] : []));
+        this.draggedItem = signal(undefined, ...(ngDevMode ? [{ debugName: "draggedItem" }] : []));
         this.dragEnterCounter = 0;
     }
     ngOnInit() {
@@ -146,22 +146,22 @@ class DragAndDropComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DragAndDropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: DragAndDropComponent, selector: "upd-drag-and-drop", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columns: "columnsChange" }, ngImport: i0, template: "<div class=\"d-flex w-100\">\n    @for (col of columns(); track col.name) {\n        <div class=\"d-flex flex-column w-100 me-2 bg-body p-4 rounded\" (drop)=\"drop($event, col.name)\"\n            (dragover)=\"dragOver($event, col.name)\" (dragenter)=\"dragEnter()\" (dragleave)=\"dragLeave(col.name)\">\n            @if (!!col.title) {\n                <div class=\"mb-2\">\n                    <h1>{{ textService.getText(col.title) }}</h1>\n                </div>\n            }\n            @for (item of col.items(); track item.name) {\n                <div class=\"d-flex border p-2 mb-1 bg-muted-lt rounded\" [attr.draggable]=\"item.isDraggable\" [attr.id]=\"item.name\"\n                    [class.draggable]=\"item.isDraggable\" [class.opacity-25]=\"item.isBeingDragged()\"\n                    (dragstart)=\"startDrag($event, item, col.name)\" (dragend)=\"endDrag(item)\">\n                    @if (canShowHandler(item)) {\n                        <upd-icon tablerIcon=\"grip-vertical\" customClasses=\"me-2\"></upd-icon>\n                    }\n                    <div class=\"flex-grow-1 align-content-center\">\n                        <span>{{ textService.getText(item.text) }}</span>\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</div>\n", styles: [".draggable{cursor:move;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DragAndDropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: DragAndDropComponent, isStandalone: false, selector: "upd-drag-and-drop", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columns: "columnsChange" }, ngImport: i0, template: "<div class=\"d-flex w-100\">\n    @for (col of columns(); track col.name) {\n        <div class=\"d-flex flex-column w-100 me-2 bg-body p-4 rounded\" (drop)=\"drop($event, col.name)\"\n            (dragover)=\"dragOver($event, col.name)\" (dragenter)=\"dragEnter()\" (dragleave)=\"dragLeave(col.name)\">\n            @if (!!col.title) {\n                <div class=\"mb-2\">\n                    <h1>{{ textService.getText(col.title) }}</h1>\n                </div>\n            }\n            @for (item of col.items(); track item.name) {\n                <div class=\"d-flex border p-2 mb-1 bg-muted-lt rounded\" [attr.draggable]=\"item.isDraggable\" [attr.id]=\"item.name\"\n                    [class.draggable]=\"item.isDraggable\" [class.opacity-25]=\"item.isBeingDragged()\"\n                    (dragstart)=\"startDrag($event, item, col.name)\" (dragend)=\"endDrag(item)\">\n                    @if (canShowHandler(item)) {\n                        <upd-icon tablerIcon=\"grip-vertical\" customClasses=\"me-2\"></upd-icon>\n                    }\n                    <div class=\"flex-grow-1 align-content-center\">\n                        <span>{{ textService.getText(item.text) }}</span>\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</div>\n", styles: [".draggable{cursor:move;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DragAndDropComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DragAndDropComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-drag-and-drop', template: "<div class=\"d-flex w-100\">\n    @for (col of columns(); track col.name) {\n        <div class=\"d-flex flex-column w-100 me-2 bg-body p-4 rounded\" (drop)=\"drop($event, col.name)\"\n            (dragover)=\"dragOver($event, col.name)\" (dragenter)=\"dragEnter()\" (dragleave)=\"dragLeave(col.name)\">\n            @if (!!col.title) {\n                <div class=\"mb-2\">\n                    <h1>{{ textService.getText(col.title) }}</h1>\n                </div>\n            }\n            @for (item of col.items(); track item.name) {\n                <div class=\"d-flex border p-2 mb-1 bg-muted-lt rounded\" [attr.draggable]=\"item.isDraggable\" [attr.id]=\"item.name\"\n                    [class.draggable]=\"item.isDraggable\" [class.opacity-25]=\"item.isBeingDragged()\"\n                    (dragstart)=\"startDrag($event, item, col.name)\" (dragend)=\"endDrag(item)\">\n                    @if (canShowHandler(item)) {\n                        <upd-icon tablerIcon=\"grip-vertical\" customClasses=\"me-2\"></upd-icon>\n                    }\n                    <div class=\"flex-grow-1 align-content-center\">\n                        <span>{{ textService.getText(item.text) }}</span>\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</div>\n", styles: [".draggable{cursor:move;-webkit-user-select:none;user-select:none}\n"] }]
-        }] });
+            args: [{ standalone: false, selector: 'upd-drag-and-drop', template: "<div class=\"d-flex w-100\">\n    @for (col of columns(); track col.name) {\n        <div class=\"d-flex flex-column w-100 me-2 bg-body p-4 rounded\" (drop)=\"drop($event, col.name)\"\n            (dragover)=\"dragOver($event, col.name)\" (dragenter)=\"dragEnter()\" (dragleave)=\"dragLeave(col.name)\">\n            @if (!!col.title) {\n                <div class=\"mb-2\">\n                    <h1>{{ textService.getText(col.title) }}</h1>\n                </div>\n            }\n            @for (item of col.items(); track item.name) {\n                <div class=\"d-flex border p-2 mb-1 bg-muted-lt rounded\" [attr.draggable]=\"item.isDraggable\" [attr.id]=\"item.name\"\n                    [class.draggable]=\"item.isDraggable\" [class.opacity-25]=\"item.isBeingDragged()\"\n                    (dragstart)=\"startDrag($event, item, col.name)\" (dragend)=\"endDrag(item)\">\n                    @if (canShowHandler(item)) {\n                        <upd-icon tablerIcon=\"grip-vertical\" customClasses=\"me-2\"></upd-icon>\n                    }\n                    <div class=\"flex-grow-1 align-content-center\">\n                        <span>{{ textService.getText(item.text) }}</span>\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</div>\n", styles: [".draggable{cursor:move;-webkit-user-select:none;user-select:none}\n"] }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }, { type: i0.Output, args: ["columnsChange"] }] } });
 class UpdDragAndDropModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdDragAndDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: UpdDragAndDropModule, declarations: [DragAndDropComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdDragAndDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: UpdDragAndDropModule, declarations: [DragAndDropComponent], imports: [CommonModule,
             UpdIconsModule], exports: [DragAndDropComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdDragAndDropModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdDragAndDropModule, imports: [CommonModule,
             UpdIconsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdDragAndDropModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdDragAndDropModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/updevs-components-drag-and-drop.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"updevs-components-drag-and-drop.mjs","sources":["../../../../libs/components/drag-and-drop/src/models/drag-and-drop-item.model.ts","../../../../libs/components/drag-and-drop/src/models/drag-and-drop-column.model.ts","../../../../libs/components/drag-and-drop/src/drag-and-drop.component.ts","../../../../libs/components/drag-and-drop/src/drag-and-drop.component.html","../../../../libs/components/drag-and-drop/src/upd-drag-and-drop.module.ts","../../../../libs/components/drag-and-drop/src/updevs-components-drag-and-drop.ts"],"sourcesContent":["import { signal } from '@angular/core';\nimport { TextModel } from '@updevs/sdk';\n\nimport { DragAndDropItem } from './drag-and-drop-item';\n\nexport class DragAndDropItemModel implements DragAndDropItem {\n name!: string;\n text!: TextModel;\n isDisabled = false;\n canDrag = true;\n canBeEmpty = true; // TODO: implement\n isBeingDragged = signal(false);\n origin?: string;\n get isDraggable(): boolean {\n return this.canDrag && !this.isDisabled;\n }\n\n constructor(init: DragAndDropItem) {\n Object.assign(this, init);\n }\n}\n","import { WritableSignal, signal } from '@angular/core';\nimport { TextModel } from '@updevs/sdk';\n\nimport { DragAndDropColumnConfig } from './drag-and-drop-column.config';\nimport { DragAndDropItemModel } from './drag-and-drop-item.model';\n\nexport class DragAndDropColumnModel {\n name!: string;\n title?: TextModel;\n items!: WritableSignal<DragAndDropItemModel[]>;\n\n constructor(init: DragAndDropColumnConfig) {\n Object.assign(this, init);\n this.items = signal(init.items.map(i => new DragAndDropItemModel(i)));\n }\n}\n","import { Component, input, inject, computed, signal, model, OnInit } from '@angular/core';\nimport { TextService } from '@updevs/sdk';\nimport { OptionalType } from '@updevs/sdk/types';\n\nimport { DragAndDropItemModel } from './models/drag-and-drop-item.model';\nimport { DragAndDropColumnModel } from './models/drag-and-drop-column.model';\nimport { DragAndDropConfig } from './models/drag-and-drop.config';\n\n@Component({\n selector: 'upd-drag-and-drop',\n templateUrl: './drag-and-drop.component.html',\n styleUrl: './drag-and-drop.component.scss'\n})\nexport class DragAndDropComponent implements OnInit {\n config = input.required<DragAndDropConfig>();\n columns = model<DragAndDropColumnModel[]>([]);\n\n readonly showHandler = computed(() => this.config().showHandler \|\| false);\n readonly canReorder = computed(() => this.config().canReorder \|\| false);\n readonly textService = inject(TextService);\n\n private readonly isReordering = signal(false);\n private readonly draggedItem = signal<OptionalType<DragAndDropItemModel>>(undefined);\n private dragEnterCounter = 0;\n\n ngOnInit(): void {\n this.columns.set(this.config().columns.map(c => new DragAndDropColumnModel(c)));\n }\n\n canShowHandler(item: DragAndDropItemModel): boolean {\n return this.showHandler() && item.isDraggable;\n }\n\n startDrag(event: DragEvent, item: DragAndDropItemModel, origin: string): void {\n item.origin = origin;\n\n this.draggedItem.set(item);\n item.isBeingDragged.set(true);\n\n event.dataTransfer!.effectAllowed = 'move';\n }\n\n endDrag(item: DragAndDropItemModel): void {\n item.isBeingDragged.set(false);\n this.draggedItem.set(undefined);\n }\n\n drop(event: DragEvent, destination: string): void {\n event.preventDefault();\n\n this.dragEnterCounter = 0;\n const dataTransfer = event.dataTransfer!;\n dataTransfer.dropEffect = 'move';\n const itemName = this.draggedItem()?.name;\n const origin = this.draggedItem()?.origin;\n const item = this.columns().find(c => c.name === origin)?.items().find(i => i.name === itemName);\n\n if (!!item && (this.canReorder() \|\| destination !== origin)) {\n const destinationColumn = this.columns().find(c => c.name === destination);\n const originColumn = this.columns().find(c => c.name === origin)!;\n\n if (!!destinationColumn) {\n item.isBeingDragged.set(false);\n this.draggedItem.set(undefined);\n\n // We only move items if it's a move between containers, if it's a reorder, nothing needs to be done.\n // The item was correctly replaced during dragOver.\n if (destination !== origin) {\n const originIdx = originColumn.items().findIndex(i => i.name === itemName);\n const destinationIdx = destinationColumn.items().findIndex(i => i.name === itemName);\n\n originColumn.items().splice(originIdx, 1);\n\n // This is required, because the item may have been added during dragOver. TODO: check\n if (destinationIdx >= 0) {\n dataTransfer.clearData();\n return;\n }\n\n destinationColumn.items().push(item);\n\n const destinationColumnIdx = this.columns().findIndex(c => c.name === destination);\n\n this.columns.update(curr => {\n curr[destinationColumnIdx] = destinationColumn;\n return [...curr];\n });\n }\n\n dataTransfer.clearData();\n }\n }\n }\n\n dragOver(event: DragEvent, destination: string): void {\n event.preventDefault();\n const destinationColumn = this.columns().find(c => c.name === destination)!;\n\n if (this.isReordering() \|\| destinationColumn.items().length === 0) {\n return;\n }\n\n event.dataTransfer!.dropEffect = 'move';\n\n this.isReordering.set(true);\n const element = event.target as HTMLElement;\n\n if (!!element.id && !!this.draggedItem() && element.id !== this.draggedItem()!.name) {\n const destinationHoverIdx = destinationColumn.items().findIndex(i => i.name === element.id);\n const rect = element.getBoundingClientRect();\n const y = event.clientY - rect.top;\n const newOverZone = y <= rect.height / 2 ? 'top' : 'bottom';\n\n destinationColumn.items.update(curr => {\n const originalArray = [...curr];\n\n if (destinationHoverIdx >= 0) {\n if (destinationHoverIdx === 0 && newOverZone === 'top') {\n originalArray.unshift(this.draggedItem()!);\n } else if (destinationHoverIdx === curr.length - 1 && newOverZone === 'bottom') {\n originalArray.push(this.draggedItem()!);\n } else {\n const originalItem = curr[destinationHoverIdx];\n originalArray.splice(destinationHoverIdx, 1);\n originalArray.splice(destinationHoverIdx + (newOverZone === 'top' ? -1 : 1), 0, originalItem);\n }\n } else if (!!this.draggedItem()) {\n originalArray.push(this.draggedItem()!);\n }\n\n return originalArray;\n });\n\n const destinationColumnIdx = this.columns().findIndex(c => c.name === destination);\n\n this.columns.update(curr => {\n curr[destinationColumnIdx] = destinationColumn;\n return [...curr];\n });\n }\n\n this.isReordering.set(false);\n }\n\n dragEnter(): void {\n this.dragEnterCounter++;\n }\n\n dragLeave(columnName: string): void {\n this.dragEnterCounter--;\n\n if (this.dragEnterCounter === 0 && !!this.draggedItem()?.origin && this.draggedItem()?.origin !== columnName) {\n const column = this.columns().find(c => c.name === columnName)!;\n const idx = column.items().findIndex(i => i.name === this.draggedItem()?.name);\n\n if (idx >= 0) {\n column.items.update(curr => {\n curr.splice(idx, 1);\n return [...curr];\n });\n }\n }\n }\n}\n","<div class=\"d-flex w-100\">\n @for (col of columns(); track col.name) {\n <div class=\"d-flex flex-column w-100 me-2 bg-body p-4 rounded\" (drop)=\"drop($event, col.name)\"\n (dragover)=\"dragOver($event, col.name)\" (dragenter)=\"dragEnter()\" (dragleave)=\"dragLeave(col.name)\">\n @if (!!col.title) {\n <div class=\"mb-2\">\n <h1>{{ textService.getText(col.title) }}</h1>\n </div>\n }\n @for (item of col.items(); track item.name) {\n <div class=\"d-flex border p-2 mb-1 bg-muted-lt rounded\" [attr.draggable]=\"item.isDraggable\" [attr.id]=\"item.name\"\n [class.draggable]=\"item.isDraggable\" [class.opacity-25]=\"item.isBeingDragged()\"\n (dragstart)=\"startDrag($event, item, col.name)\" (dragend)=\"endDrag(item)\">\n @if (canShowHandler(item)) {\n <upd-icon tablerIcon=\"grip-vertical\" customClasses=\"me-2\"></upd-icon>\n }\n <div class=\"flex-grow-1 align-content-center\">\n <span>{{ textService.getText(item.text) }}</span>\n </div>\n </div>\n }\n </div>\n }\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { UpdIconsModule } from '@updevs/icons';\n\nimport { DragAndDropComponent } from './drag-and-drop.component';\n\n@NgModule({\n imports: [\n CommonModule,\n UpdIconsModule\n ],\n declarations: [\n DragAndDropComponent\n ],\n exports: [\n DragAndDropComponent\n ]\n})\nexport class UpdDragAndDropModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"updevs-components-drag-and-drop.mjs","sources":["../../../../libs/components/drag-and-drop/src/models/drag-and-drop-item.model.ts","../../../../libs/components/drag-and-drop/src/models/drag-and-drop-column.model.ts","../../../../libs/components/drag-and-drop/src/drag-and-drop.component.ts","../../../../libs/components/drag-and-drop/src/drag-and-drop.component.html","../../../../libs/components/drag-and-drop/src/upd-drag-and-drop.module.ts","../../../../libs/components/drag-and-drop/src/updevs-components-drag-and-drop.ts"],"sourcesContent":["import { signal } from '@angular/core';\nimport { TextModel } from '@updevs/sdk';\n\nimport { DragAndDropItem } from './drag-and-drop-item';\n\nexport class DragAndDropItemModel implements DragAndDropItem {\n name!: string;\n text!: TextModel;\n isDisabled = false;\n canDrag = true;\n canBeEmpty = true; // TODO: implement\n isBeingDragged = signal(false);\n origin?: string;\n get isDraggable(): boolean {\n return this.canDrag && !this.isDisabled;\n }\n\n constructor(init: DragAndDropItem) {\n Object.assign(this, init);\n }\n}\n","import { WritableSignal, signal } from '@angular/core';\nimport { TextModel } from '@updevs/sdk';\n\nimport { DragAndDropColumnConfig } from './drag-and-drop-column.config';\nimport { DragAndDropItemModel } from './drag-and-drop-item.model';\n\nexport class DragAndDropColumnModel {\n name!: string;\n title?: TextModel;\n items!: WritableSignal<DragAndDropItemModel[]>;\n\n constructor(init: DragAndDropColumnConfig) {\n Object.assign(this, init);\n this.items = signal(init.items.map(i => new DragAndDropItemModel(i)));\n }\n}\n","import { Component, input, inject, computed, signal, model, OnInit } from '@angular/core';\nimport { TextService } from '@updevs/sdk';\nimport { OptionalType } from '@updevs/sdk/types';\n\nimport { DragAndDropItemModel } from './models/drag-and-drop-item.model';\nimport { DragAndDropColumnModel } from './models/drag-and-drop-column.model';\nimport { DragAndDropConfig } from './models/drag-and-drop.config';\n\n@Component({\n standalone: false,\n selector: 'upd-drag-and-drop',\n templateUrl: './drag-and-drop.component.html',\n styleUrl: './drag-and-drop.component.scss'\n})\nexport class DragAndDropComponent implements OnInit {\n config = input.required<DragAndDropConfig>();\n columns = model<DragAndDropColumnModel[]>([]);\n\n readonly showHandler = computed(() => this.config().showHandler \|\| false);\n readonly canReorder = computed(() => this.config().canReorder \|\| false);\n readonly textService = inject(TextService);\n\n private readonly isReordering = signal(false);\n private readonly draggedItem = signal<OptionalType<DragAndDropItemModel>>(undefined);\n private dragEnterCounter = 0;\n\n ngOnInit(): void {\n this.columns.set(this.config().columns.map(c => new DragAndDropColumnModel(c)));\n }\n\n canShowHandler(item: DragAndDropItemModel): boolean {\n return this.showHandler() && item.isDraggable;\n }\n\n startDrag(event: DragEvent, item: DragAndDropItemModel, origin: string): void {\n item.origin = origin;\n\n this.draggedItem.set(item);\n item.isBeingDragged.set(true);\n\n event.dataTransfer!.effectAllowed = 'move';\n }\n\n endDrag(item: DragAndDropItemModel): void {\n item.isBeingDragged.set(false);\n this.draggedItem.set(undefined);\n }\n\n drop(event: DragEvent, destination: string): void {\n event.preventDefault();\n\n this.dragEnterCounter = 0;\n const dataTransfer = event.dataTransfer!;\n dataTransfer.dropEffect = 'move';\n const itemName = this.draggedItem()?.name;\n const origin = this.draggedItem()?.origin;\n const item = this.columns().find(c => c.name === origin)?.items().find(i => i.name === itemName);\n\n if (!!item && (this.canReorder() \|\| destination !== origin)) {\n const destinationColumn = this.columns().find(c => c.name === destination);\n const originColumn = this.columns().find(c => c.name === origin)!;\n\n if (!!destinationColumn) {\n item.isBeingDragged.set(false);\n this.draggedItem.set(undefined);\n\n // We only move items if it's a move between containers, if it's a reorder, nothing needs to be done.\n // The item was correctly replaced during dragOver.\n if (destination !== origin) {\n const originIdx = originColumn.items().findIndex(i => i.name === itemName);\n const destinationIdx = destinationColumn.items().findIndex(i => i.name === itemName);\n\n originColumn.items().splice(originIdx, 1);\n\n // This is required, because the item may have been added during dragOver. TODO: check\n if (destinationIdx >= 0) {\n dataTransfer.clearData();\n return;\n }\n\n destinationColumn.items().push(item);\n\n const destinationColumnIdx = this.columns().findIndex(c => c.name === destination);\n\n this.columns.update(curr => {\n curr[destinationColumnIdx] = destinationColumn;\n return [...curr];\n });\n }\n\n dataTransfer.clearData();\n }\n }\n }\n\n dragOver(event: DragEvent, destination: string): void {\n event.preventDefault();\n const destinationColumn = this.columns().find(c => c.name === destination)!;\n\n if (this.isReordering() \|\| destinationColumn.items().length === 0) {\n return;\n }\n\n event.dataTransfer!.dropEffect = 'move';\n\n this.isReordering.set(true);\n const element = event.target as HTMLElement;\n\n if (!!element.id && !!this.draggedItem() && element.id !== this.draggedItem()!.name) {\n const destinationHoverIdx = destinationColumn.items().findIndex(i => i.name === element.id);\n const rect = element.getBoundingClientRect();\n const y = event.clientY - rect.top;\n const newOverZone = y <= rect.height / 2 ? 'top' : 'bottom';\n\n destinationColumn.items.update(curr => {\n const originalArray = [...curr];\n\n if (destinationHoverIdx >= 0) {\n if (destinationHoverIdx === 0 && newOverZone === 'top') {\n originalArray.unshift(this.draggedItem()!);\n } else if (destinationHoverIdx === curr.length - 1 && newOverZone === 'bottom') {\n originalArray.push(this.draggedItem()!);\n } else {\n const originalItem = curr[destinationHoverIdx];\n originalArray.splice(destinationHoverIdx, 1);\n originalArray.splice(destinationHoverIdx + (newOverZone === 'top' ? -1 : 1), 0, originalItem);\n }\n } else if (!!this.draggedItem()) {\n originalArray.push(this.draggedItem()!);\n }\n\n return originalArray;\n });\n\n const destinationColumnIdx = this.columns().findIndex(c => c.name === destination);\n\n this.columns.update(curr => {\n curr[destinationColumnIdx] = destinationColumn;\n return [...curr];\n });\n }\n\n this.isReordering.set(false);\n }\n\n dragEnter(): void {\n this.dragEnterCounter++;\n }\n\n dragLeave(columnName: string): void {\n this.dragEnterCounter--;\n\n if (this.dragEnterCounter === 0 && !!this.draggedItem()?.origin && this.draggedItem()?.origin !== columnName) {\n const column = this.columns().find(c => c.name === columnName)!;\n const idx = column.items().findIndex(i => i.name === this.draggedItem()?.name);\n\n if (idx >= 0) {\n column.items.update(curr => {\n curr.splice(idx, 1);\n return [...curr];\n });\n }\n }\n }\n}\n","<div class=\"d-flex w-100\">\n @for (col of columns(); track col.name) {\n <div class=\"d-flex flex-column w-100 me-2 bg-body p-4 rounded\" (drop)=\"drop($event, col.name)\"\n (dragover)=\"dragOver($event, col.name)\" (dragenter)=\"dragEnter()\" (dragleave)=\"dragLeave(col.name)\">\n @if (!!col.title) {\n <div class=\"mb-2\">\n <h1>{{ textService.getText(col.title) }}</h1>\n </div>\n }\n @for (item of col.items(); track item.name) {\n <div class=\"d-flex border p-2 mb-1 bg-muted-lt rounded\" [attr.draggable]=\"item.isDraggable\" [attr.id]=\"item.name\"\n [class.draggable]=\"item.isDraggable\" [class.opacity-25]=\"item.isBeingDragged()\"\n (dragstart)=\"startDrag($event, item, col.name)\" (dragend)=\"endDrag(item)\">\n @if (canShowHandler(item)) {\n <upd-icon tablerIcon=\"grip-vertical\" customClasses=\"me-2\"></upd-icon>\n }\n <div class=\"flex-grow-1 align-content-center\">\n <span>{{ textService.getText(item.text) }}</span>\n </div>\n </div>\n }\n </div>\n }\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { UpdIconsModule } from '@updevs/icons';\n\nimport { DragAndDropComponent } from './drag-and-drop.component';\n\n@NgModule({\n imports: [\n CommonModule,\n UpdIconsModule\n ],\n declarations: [\n DragAndDropComponent\n ],\n exports: [\n DragAndDropComponent\n ]\n})\nexport class UpdDragAndDropModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/updevs-components-dropdown.mjs CHANGED Viewed

@@ -48,7 +48,7 @@ class DropdownComponent extends BaseComponent {
         this.isOpenChange = new EventEmitter();
         this.selectedItem = new EventEmitter();
         this.checkboxChanged = new EventEmitter();
-        this.textOverflowStrategy = input('wrap');
+        this.textOverflowStrategy = input('wrap', ...(ngDevMode ? [{ debugName: "textOverflowStrategy" }] : []));
         this.textService = inject(TextService);
         this.baseWrapperClasses = 'dropdown-menu';
         this._isOpen = false;
@@ -164,12 +164,12 @@ class DropdownComponent extends BaseComponent {
         this.renderer.setStyle(ddElement, 'left', `${result.x - widthOffset}px`, RendererStyleFlags2.Important);
         this.renderer.setStyle(ddElement, 'top', `${result.y}px`, RendererStyleFlags2.Important);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: DropdownComponent, selector: "upd-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: false, isRequired: false, transformFunction: null }, shouldCloseOnOutsideClick: { classPropertyName: "shouldCloseOnOutsideClick", publicName: "shouldCloseOnOutsideClick", isSignal: false, isRequired: false, transformFunction: null }, arrowType: { classPropertyName: "arrowType", publicName: "arrowType", isSignal: false, isRequired: false, transformFunction: null }, wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: false, isRequired: false, transformFunction: null }, elementsExcludedFromOutsideClick: { classPropertyName: "elementsExcludedFromOutsideClick", publicName: "elementsExcludedFromOutsideClick", isSignal: false, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: false, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: false, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: false, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: false, isRequired: false, transformFunction: null }, dropdownReference: { classPropertyName: "dropdownReference", publicName: "dropdownReference", isSignal: false, isRequired: false, transformFunction: null }, dropdownReferencePosition: { classPropertyName: "dropdownReferencePosition", publicName: "dropdownReferencePosition", isSignal: false, isRequired: false, transformFunction: null }, textOverflowStrategy: { classPropertyName: "textOverflowStrategy", publicName: "textOverflowStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpenChange: "isOpenChange", selectedItem: "selectedItem", checkboxChanged: "checkboxChanged" }, host: { properties: { "class": "this.localWrapperClasses" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!!header) {\n    <h6 class=\"dropdown-header\">{{ header }}</h6>\n}\n\n@for (item of items; track trackByItemId($index, item)) {\n    @switch (item.type) {\n        @case ('divider') {\n            <div class=\"dropdown-divider\"></div>\n        }\n        @case ('default') {\n            <upd-button [customClasses]=\"getButtonClasses(item)\"\n                [shouldIgnoreBtnClass]=\"true\" (clicked)=\"onSelect(item)\">\n                @if (!!item.icon) {\n                    <upd-icon [model]=\"item.icon\" customClasses=\"dropdown-item-icon\"></upd-icon>\n                }\n\n                @if (!!item.leftBoxText || !!item.leftBoxImage) {\n                    <span style=\"background-image: url({{item.leftBoxImage}})\"\n                        class=\"avatar avatar-xs rounded me-2\">{{ item.leftBoxText }}</span>\n                }\n\n                {{ textService.getText(item.text) }}\n\n                @if (!!item.badgeColor) {\n                    <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n                }\n            </upd-button>\n        }\n        @case ('radio') {\n            <upd-radio (selected)=\"onSelect(item)\" [label]=\"item.text\" [isChecked]=\"item.isChecked || false\"\n                [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') + (item.isActive ? ' active' : '')\"></upd-radio>\n        }\n        @case ('checkbox') {\n            <upd-checkbox (changed)=\"onCheckboxChange(item, $event)\" [label]=\"item.text\" [isChecked]=\"item.isChecked || false\"\n                [isSwitch]=\"item.isSwitch || false\"\n                [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') + (item.isActive ? ' active' : '')\"></upd-checkbox>\n        }\n        @case ('with-toolbar') {\n            <div class=\"dropdown-item\" [class.disabled]=\"item.isDisabled\" [class.active]=\"item.isActive\" (click)=\"onSelect(item)\">\n                @if (!!item.icon) {\n                    <upd-icon [model]=\"item.icon\" customClasses=\"dropdown-item-icon\"></upd-icon>\n                }\n\n                @if (!!item.leftBoxText || !!item.leftBoxImage) {\n                    <span style=\"background-image: url({{item.leftBoxImage}})\"\n                        class=\"avatar avatar-xs rounded me-2\">{{ item.leftBoxText }}</span>\n                }\n\n                <span [ngClass]=\"overflowClass\">\n                    {{ textService.getText(item.text) }}\n                </span>\n\n                @if ((item.actionButtons?.length || 0) > 0) {\n                    <div class=\"ms-auto d-flex\" [class.btn-group]=\"item.toolbarType === 'grouped'\"\n                        [class.gap-1]=\"item.toolbarType === 'spaced'\">\n                        @for (btn of item.actionButtons; track btn) {\n                            <upd-button [model]=\"adaptAction(btn, item)\"></upd-button>\n                        }\n                    </div>\n                }\n\n                @if (!!item.badgeColor) {\n                    <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n                }\n            </div>\n        }\n    }\n}\n\n<ng-content></ng-content>\n", styles: [".dropdown-show{display:inline-block!important;width:100%!important;position:relative;top:0!important;margin-bottom:1rem!important}.dropdown-item>.form-check{margin-bottom:0!important}.dropdown-item{cursor:pointer!important}.dropdown-overflow{overflow-y:auto!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i3.RadioComponent, selector: "upd-radio", inputs: ["wrapperClasses", "value", "customClasses", "isChecked", "isInline"], outputs: ["selected"] }, { kind: "component", type: i4.CheckboxComponent, selector: "upd-checkbox", inputs: ["wrapperClasses", "value", "customClasses", "isChecked", "isInline", "isSwitch", "isIndeterminate"], outputs: ["changed", "isCheckedChange", "isIndeterminateChange"] }, { kind: "component", type: i5.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title", "stopPropagation"], outputs: ["clicked"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: DropdownComponent, isStandalone: false, selector: "upd-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: false, isRequired: false, transformFunction: null }, shouldCloseOnOutsideClick: { classPropertyName: "shouldCloseOnOutsideClick", publicName: "shouldCloseOnOutsideClick", isSignal: false, isRequired: false, transformFunction: null }, arrowType: { classPropertyName: "arrowType", publicName: "arrowType", isSignal: false, isRequired: false, transformFunction: null }, wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: false, isRequired: false, transformFunction: null }, elementsExcludedFromOutsideClick: { classPropertyName: "elementsExcludedFromOutsideClick", publicName: "elementsExcludedFromOutsideClick", isSignal: false, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: false, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: false, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: false, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: false, isRequired: false, transformFunction: null }, dropdownReference: { classPropertyName: "dropdownReference", publicName: "dropdownReference", isSignal: false, isRequired: false, transformFunction: null }, dropdownReferencePosition: { classPropertyName: "dropdownReferencePosition", publicName: "dropdownReferencePosition", isSignal: false, isRequired: false, transformFunction: null }, textOverflowStrategy: { classPropertyName: "textOverflowStrategy", publicName: "textOverflowStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpenChange: "isOpenChange", selectedItem: "selectedItem", checkboxChanged: "checkboxChanged" }, host: { properties: { "class": "this.localWrapperClasses" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!!header) {\n    <h6 class=\"dropdown-header\">{{ header }}</h6>\n}\n\n@for (item of items; track trackByItemId($index, item)) {\n    @switch (item.type) {\n        @case ('divider') {\n            <div class=\"dropdown-divider\"></div>\n        }\n        @case ('default') {\n            <upd-button [customClasses]=\"getButtonClasses(item)\"\n                [shouldIgnoreBtnClass]=\"true\" (clicked)=\"onSelect(item)\">\n                @if (!!item.icon) {\n                    <upd-icon [model]=\"item.icon\" customClasses=\"dropdown-item-icon\"></upd-icon>\n                }\n\n                @if (!!item.leftBoxText || !!item.leftBoxImage) {\n                    <span style=\"background-image: url({{item.leftBoxImage}})\"\n                        class=\"avatar avatar-xs rounded me-2\">{{ item.leftBoxText }}</span>\n                }\n\n                {{ textService.getText(item.text) }}\n\n                @if (!!item.badgeColor) {\n                    <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n                }\n            </upd-button>\n        }\n        @case ('radio') {\n            <upd-radio (selected)=\"onSelect(item)\" [label]=\"item.text\" [isChecked]=\"item.isChecked || false\"\n                [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') + (item.isActive ? ' active' : '')\"></upd-radio>\n        }\n        @case ('checkbox') {\n            <upd-checkbox (changed)=\"onCheckboxChange(item, $event)\" [label]=\"item.text\" [isChecked]=\"item.isChecked || false\"\n                [isSwitch]=\"item.isSwitch || false\"\n                [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') + (item.isActive ? ' active' : '')\"></upd-checkbox>\n        }\n        @case ('with-toolbar') {\n            <div class=\"dropdown-item\" [class.disabled]=\"item.isDisabled\" [class.active]=\"item.isActive\" (click)=\"onSelect(item)\">\n                @if (!!item.icon) {\n                    <upd-icon [model]=\"item.icon\" customClasses=\"dropdown-item-icon\"></upd-icon>\n                }\n\n                @if (!!item.leftBoxText || !!item.leftBoxImage) {\n                    <span style=\"background-image: url({{item.leftBoxImage}})\"\n                        class=\"avatar avatar-xs rounded me-2\">{{ item.leftBoxText }}</span>\n                }\n\n                <span [ngClass]=\"overflowClass\">\n                    {{ textService.getText(item.text) }}\n                </span>\n\n                @if ((item.actionButtons?.length || 0) > 0) {\n                    <div class=\"ms-auto d-flex\" [class.btn-group]=\"item.toolbarType === 'grouped'\"\n                        [class.gap-1]=\"item.toolbarType === 'spaced'\">\n                        @for (btn of item.actionButtons; track btn) {\n                            <upd-button [model]=\"adaptAction(btn, item)\"></upd-button>\n                        }\n                    </div>\n                }\n\n                @if (!!item.badgeColor) {\n                    <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n                }\n            </div>\n        }\n    }\n}\n\n<ng-content></ng-content>\n", styles: [".dropdown-show{display:inline-block!important;width:100%!important;position:relative;top:0!important;margin-bottom:1rem!important}.dropdown-item>.form-check{margin-bottom:0!important}.dropdown-item{cursor:pointer!important}.dropdown-overflow{overflow-y:auto!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i3.RadioComponent, selector: "upd-radio", inputs: ["wrapperClasses", "value", "customClasses", "isChecked", "isInline"], outputs: ["selected"] }, { kind: "component", type: i4.CheckboxComponent, selector: "upd-checkbox", inputs: ["wrapperClasses", "value", "customClasses", "isChecked", "isInline", "isSwitch", "isIndeterminate"], outputs: ["changed", "isCheckedChange", "isIndeterminateChange"] }, { kind: "component", type: i5.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title", "stopPropagation"], outputs: ["clicked"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-dropdown', encapsulation: ViewEncapsulation.None, template: "@if (!!header) {\n    <h6 class=\"dropdown-header\">{{ header }}</h6>\n}\n\n@for (item of items; track trackByItemId($index, item)) {\n    @switch (item.type) {\n        @case ('divider') {\n            <div class=\"dropdown-divider\"></div>\n        }\n        @case ('default') {\n            <upd-button [customClasses]=\"getButtonClasses(item)\"\n                [shouldIgnoreBtnClass]=\"true\" (clicked)=\"onSelect(item)\">\n                @if (!!item.icon) {\n                    <upd-icon [model]=\"item.icon\" customClasses=\"dropdown-item-icon\"></upd-icon>\n                }\n\n                @if (!!item.leftBoxText || !!item.leftBoxImage) {\n                    <span style=\"background-image: url({{item.leftBoxImage}})\"\n                        class=\"avatar avatar-xs rounded me-2\">{{ item.leftBoxText }}</span>\n                }\n\n                {{ textService.getText(item.text) }}\n\n                @if (!!item.badgeColor) {\n                    <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n                }\n            </upd-button>\n        }\n        @case ('radio') {\n            <upd-radio (selected)=\"onSelect(item)\" [label]=\"item.text\" [isChecked]=\"item.isChecked || false\"\n                [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') + (item.isActive ? ' active' : '')\"></upd-radio>\n        }\n        @case ('checkbox') {\n            <upd-checkbox (changed)=\"onCheckboxChange(item, $event)\" [label]=\"item.text\" [isChecked]=\"item.isChecked || false\"\n                [isSwitch]=\"item.isSwitch || false\"\n                [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') + (item.isActive ? ' active' : '')\"></upd-checkbox>\n        }\n        @case ('with-toolbar') {\n            <div class=\"dropdown-item\" [class.disabled]=\"item.isDisabled\" [class.active]=\"item.isActive\" (click)=\"onSelect(item)\">\n                @if (!!item.icon) {\n                    <upd-icon [model]=\"item.icon\" customClasses=\"dropdown-item-icon\"></upd-icon>\n                }\n\n                @if (!!item.leftBoxText || !!item.leftBoxImage) {\n                    <span style=\"background-image: url({{item.leftBoxImage}})\"\n                        class=\"avatar avatar-xs rounded me-2\">{{ item.leftBoxText }}</span>\n                }\n\n                <span [ngClass]=\"overflowClass\">\n                    {{ textService.getText(item.text) }}\n                </span>\n\n                @if ((item.actionButtons?.length || 0) > 0) {\n                    <div class=\"ms-auto d-flex\" [class.btn-group]=\"item.toolbarType === 'grouped'\"\n                        [class.gap-1]=\"item.toolbarType === 'spaced'\">\n                        @for (btn of item.actionButtons; track btn) {\n                            <upd-button [model]=\"adaptAction(btn, item)\"></upd-button>\n                        }\n                    </div>\n                }\n\n                @if (!!item.badgeColor) {\n                    <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n                }\n            </div>\n        }\n    }\n}\n\n<ng-content></ng-content>\n", styles: [".dropdown-show{display:inline-block!important;width:100%!important;position:relative;top:0!important;margin-bottom:1rem!important}.dropdown-item>.form-check{margin-bottom:0!important}.dropdown-item{cursor:pointer!important}.dropdown-overflow{overflow-y:auto!important}\n"] }]
+            args: [{ standalone: false, selector: 'upd-dropdown', encapsulation: ViewEncapsulation.None, template: "@if (!!header) {\n    <h6 class=\"dropdown-header\">{{ header }}</h6>\n}\n\n@for (item of items; track trackByItemId($index, item)) {\n    @switch (item.type) {\n        @case ('divider') {\n            <div class=\"dropdown-divider\"></div>\n        }\n        @case ('default') {\n            <upd-button [customClasses]=\"getButtonClasses(item)\"\n                [shouldIgnoreBtnClass]=\"true\" (clicked)=\"onSelect(item)\">\n                @if (!!item.icon) {\n                    <upd-icon [model]=\"item.icon\" customClasses=\"dropdown-item-icon\"></upd-icon>\n                }\n\n                @if (!!item.leftBoxText || !!item.leftBoxImage) {\n                    <span style=\"background-image: url({{item.leftBoxImage}})\"\n                        class=\"avatar avatar-xs rounded me-2\">{{ item.leftBoxText }}</span>\n                }\n\n                {{ textService.getText(item.text) }}\n\n                @if (!!item.badgeColor) {\n                    <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n                }\n            </upd-button>\n        }\n        @case ('radio') {\n            <upd-radio (selected)=\"onSelect(item)\" [label]=\"item.text\" [isChecked]=\"item.isChecked || false\"\n                [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') + (item.isActive ? ' active' : '')\"></upd-radio>\n        }\n        @case ('checkbox') {\n            <upd-checkbox (changed)=\"onCheckboxChange(item, $event)\" [label]=\"item.text\" [isChecked]=\"item.isChecked || false\"\n                [isSwitch]=\"item.isSwitch || false\"\n                [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') + (item.isActive ? ' active' : '')\"></upd-checkbox>\n        }\n        @case ('with-toolbar') {\n            <div class=\"dropdown-item\" [class.disabled]=\"item.isDisabled\" [class.active]=\"item.isActive\" (click)=\"onSelect(item)\">\n                @if (!!item.icon) {\n                    <upd-icon [model]=\"item.icon\" customClasses=\"dropdown-item-icon\"></upd-icon>\n                }\n\n                @if (!!item.leftBoxText || !!item.leftBoxImage) {\n                    <span style=\"background-image: url({{item.leftBoxImage}})\"\n                        class=\"avatar avatar-xs rounded me-2\">{{ item.leftBoxText }}</span>\n                }\n\n                <span [ngClass]=\"overflowClass\">\n                    {{ textService.getText(item.text) }}\n                </span>\n\n                @if ((item.actionButtons?.length || 0) > 0) {\n                    <div class=\"ms-auto d-flex\" [class.btn-group]=\"item.toolbarType === 'grouped'\"\n                        [class.gap-1]=\"item.toolbarType === 'spaced'\">\n                        @for (btn of item.actionButtons; track btn) {\n                            <upd-button [model]=\"adaptAction(btn, item)\"></upd-button>\n                        }\n                    </div>\n                }\n\n                @if (!!item.badgeColor) {\n                    <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n                }\n            </div>\n        }\n    }\n}\n\n<ng-content></ng-content>\n", styles: [".dropdown-show{display:inline-block!important;width:100%!important;position:relative;top:0!important;margin-bottom:1rem!important}.dropdown-item>.form-check{margin-bottom:0!important}.dropdown-item{cursor:pointer!important}.dropdown-overflow{overflow-y:auto!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { localWrapperClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -205,22 +205,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                 type: Output
             }], checkboxChanged: [{
                 type: Output
-            }] } });
+            }], textOverflowStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "textOverflowStrategy", required: false }] }] } });
 class UpdDropdownModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: UpdDropdownModule, declarations: [DropdownComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: UpdDropdownModule, declarations: [DropdownComponent], imports: [CommonModule,
             UpdIconsModule,
             UpdRadioModule,
             UpdCheckboxModule,
             UpdButtonModule], exports: [DropdownComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdDropdownModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdDropdownModule, imports: [CommonModule,
             UpdIconsModule,
             UpdRadioModule,
             UpdCheckboxModule,
             UpdButtonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdDropdownModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdDropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [