@natec/mef-dev-ui-kit 20.1.4 → 20.1.6

package/fesm2022/natec-mef-dev-ui-kit.mjs

@@ -14265,31 +14265,140 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                 }]
         }] });
 
+/**
+ * Individual header card component for use within md-header-card-set.
+ *
+ * @remarks
+ * Simple container component that accepts any content via ng-content projection.
+ * Styled with border, background, and padding. Use within md-header-card-set
+ * for responsive grid layout.
+ *
+ * @example
+ * ```html
+ * <md-header-card>
+ *   <div class="title">Card Title</div>
+ *   <div class="content">Card content here</div>
+ * </md-header-card>
+ * ```
+ */
 class MDHeaderCardComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MDHeaderCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: MDHeaderCardComponent, isStandalone: true, selector: "md-header-card", ngImport: i0, template: "<div class=\"md-header-card\">\n  <ng-content></ng-content>\n</div>\n", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.md-header-card{display:flex;flex-direction:column;box-sizing:border-box;position:relative;border-style:solid;border-width:1px;background-color:#eaeaea;border-color:#f3f3f3;border-radius:5px;padding:16px;height:100%;font-family:Montserrat}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: MDHeaderCardComponent, isStandalone: true, selector: "md-header-card", ngImport: i0, template: "<div class=\"md-header-card\">\n  <ng-content></ng-content>\n</div>\n", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.md-header-card{display:flex;flex-direction:column;box-sizing:border-box;position:relative;border-style:solid;border-width:1px;background-color:#eaeaea;border-color:#f3f3f3;border-radius:5px;padding:16px;height:100%;font-family:Montserrat}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MDHeaderCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'md-header-card', standalone: true, imports: [CommonModule], template: "<div class=\"md-header-card\">\n  <ng-content></ng-content>\n</div>\n", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.md-header-card{display:flex;flex-direction:column;box-sizing:border-box;position:relative;border-style:solid;border-width:1px;background-color:#eaeaea;border-color:#f3f3f3;border-radius:5px;padding:16px;height:100%;font-family:Montserrat}\n"] }]
+            args: [{ selector: 'md-header-card', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"md-header-card\">\n  <ng-content></ng-content>\n</div>\n", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.md-header-card{display:flex;flex-direction:column;box-sizing:border-box;position:relative;border-style:solid;border-width:1px;background-color:#eaeaea;border-color:#f3f3f3;border-radius:5px;padding:16px;height:100%;font-family:Montserrat}\n"] }]
         }] });
 
+/**
+ * Container for multiple header cards with responsive CSS Grid layout.
+ *
+ * @remarks
+ * Uses CSS Grid with auto-fit to automatically determine optimal column count.
+ * Cards flex between minCardWidth and maxCardWidth to minimize empty space.
+ * Card count is automatically tracked via ContentChildren.
+ *
+ * Layout behavior:
+ * - Mobile (<768px): horizontal scroll, single row
+ * - Tablet+ (≥768px): CSS Grid with auto-fit, cards sized between min/max
+ *
+ * Features:
+ * - Automatic card count tracking (--md-header-card-count CSS variable)
+ * - Automatic column count based on available space
+ * - Configurable min/max card widths
+ * - Full-width layout with responsive padding
+ *
+ * @example
+ * ```html
+ * <md-header-card-set [gap]="8" [minCardWidth]="300" [maxCardWidth]="600">
+ *   <md-header-card>
+ *     <div class="service-name">Service Title</div>
+ *   </md-header-card>
+ *   <md-header-card>
+ *     <div class="data-item">Type: <span>Canvas</span></div>
+ *   </md-header-card>
+ * </md-header-card-set>
+ * ```
+ */
 class MDHeaderCardSetComponent {
-    gap = 16;
-    minCardWidth = 300; // Мінімальна ширина картки в px
-    maxCardWidth = 600; // Максимальна ширина картки в px
+    cards;
+    _cdr = inject(ChangeDetectorRef);
+    _cardCount = 0;
+    /**
+     * Gap between cards in pixels.
+     * @default 8
+     */
+    gap = 8;
+    /**
+     * Horizontal padding for the container in pixels.
+     * Responsive: 16px mobile, 24px tablet, 32px desktop.
+     * @default 'responsive'
+     */
+    padding = 'responsive';
+    /**
+     * Minimum card width in pixels.
+     * Cards won't shrink below this value.
+     * @default 300
+     */
+    minCardWidth = 300;
+    /**
+     * Maximum card width in pixels.
+     * Cards won't grow beyond this value.
+     * @default 570
+     */
+    maxCardWidth = 570;
+    /**
+     * Disable wrapping (force single row with horizontal scroll).
+     * Useful for mobile or specific layouts.
+     * @default false
+     */
+    noWrap = false;
+    ngAfterContentInit() {
+        this._cardCount = this.cards.length;
+        this.cards.changes.subscribe(() => {
+            this._cardCount = this.cards.length;
+            this._cdr.markForCheck();
+        });
+    }
+    /**
+     * Get CSS custom properties for the container.
+     * @internal
+     */
+    get _containerStyles() {
+        const styles = {
+            '--md-header-card-set-gap': `${this.gap}px`,
+            '--md-header-card-min-width': `${this.minCardWidth}px`,
+            '--md-header-card-max-width': `${this.maxCardWidth}px`,
+            '--md-header-card-count': `${this._cardCount}`
+        };
+        if (typeof this.padding === 'number') {
+            styles['--md-header-card-set-padding'] = `${this.padding}px`;
+        }
+        return styles;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MDHeaderCardSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: MDHeaderCardSetComponent, isStandalone: true, selector: "md-header-card-set", inputs: { gap: "gap", minCardWidth: "minCardWidth", maxCardWidth: "maxCardWidth" }, ngImport: i0, template: "<div class=\"md-header-card-set\"\n     [style.gap.px]=\"gap\"\n     [style.--min-card-width.px]=\"minCardWidth\"\n     [style.--max-card-width.px]=\"maxCardWidth\">\n  <ng-content></ng-content>\n</div>\n", styles: [".md-header-card-set{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--min-card-width, 300px),var(--max-card-width, 600px)));gap:16px;width:100%;align-items:stretch;justify-content:start}@media (max-width: 575px){.md-header-card-set{grid-template-columns:1fr;gap:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.6", type: MDHeaderCardSetComponent, isStandalone: true, selector: "md-header-card-set", inputs: { gap: "gap", padding: "padding", minCardWidth: "minCardWidth", maxCardWidth: "maxCardWidth", noWrap: ["noWrap", "noWrap", booleanAttribute] }, host: { properties: { "class.md-header-card-set-nowrap": "noWrap" }, classAttribute: "md-header-card-set" }, queries: [{ propertyName: "cards", predicate: MDHeaderCardComponent }], exportAs: ["mdHeaderCardSet"], ngImport: i0, template: "<div class=\"md-header-card-set-container\" [ngStyle]=\"_containerStyles\">\n  <div class=\"md-header-card-set-wrapper\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".md-header-card-set{display:block;width:100%;position:relative;box-sizing:border-box}.md-header-card-set-container{position:relative;width:100%;box-sizing:border-box}.md-header-card-set-wrapper{--_card-min: var(--md-header-card-min-width, 300px);--_card-max: var(--md-header-card-max-width, 570px);--_gap: var(--md-header-card-set-gap, 16px);display:grid;min-width:0;max-width:calc(var(--md-header-card-count, 1) * var(--md-header-card-max-width, 570px));box-sizing:border-box}@media (max-width: 767px){.md-header-card-set-wrapper{display:flex;gap:var(--_gap);flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.md-header-card-set-wrapper::-webkit-scrollbar{height:6px}.md-header-card-set-wrapper::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.md-header-card-set-wrapper::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.md-header-card-set-wrapper::-webkit-scrollbar-thumb:hover{background:#555}.md-header-card-set-wrapper md-header-card{flex:0 0 auto;scroll-snap-align:start;min-width:240px;max-width:280px}}@media (min-width: 768px){.md-header-card-set-wrapper{display:grid;gap:var(--_gap);grid-template-columns:repeat(auto-fit,minmax(var(--_card-min),1fr))}.md-header-card-set-wrapper md-header-card{max-width:var(--_card-max);justify-self:stretch}}.md-header-card-set-nowrap .md-header-card-set-wrapper{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;grid-template-columns:unset}.md-header-card-set-nowrap .md-header-card-set-wrapper md-header-card{flex:0 0 auto;scroll-snap-align:start;min-width:var(--_card-min);max-width:var(--_card-max)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MDHeaderCardSetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'md-header-card-set', standalone: true, imports: [CommonModule], template: "<div class=\"md-header-card-set\"\n     [style.gap.px]=\"gap\"\n     [style.--min-card-width.px]=\"minCardWidth\"\n     [style.--max-card-width.px]=\"maxCardWidth\">\n  <ng-content></ng-content>\n</div>\n", styles: [".md-header-card-set{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--min-card-width, 300px),var(--max-card-width, 600px)));gap:16px;width:100%;align-items:stretch;justify-content:start}@media (max-width: 575px){.md-header-card-set{grid-template-columns:1fr;gap:12px}}\n"] }]
-        }], propDecorators: { gap: [{
+            args: [{ selector: 'md-header-card-set', host: {
+                        class: 'md-header-card-set',
+                        '[class.md-header-card-set-nowrap]': 'noWrap',
+                    }, exportAs: 'mdHeaderCardSet', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], standalone: true, template: "<div class=\"md-header-card-set-container\" [ngStyle]=\"_containerStyles\">\n  <div class=\"md-header-card-set-wrapper\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".md-header-card-set{display:block;width:100%;position:relative;box-sizing:border-box}.md-header-card-set-container{position:relative;width:100%;box-sizing:border-box}.md-header-card-set-wrapper{--_card-min: var(--md-header-card-min-width, 300px);--_card-max: var(--md-header-card-max-width, 570px);--_gap: var(--md-header-card-set-gap, 16px);display:grid;min-width:0;max-width:calc(var(--md-header-card-count, 1) * var(--md-header-card-max-width, 570px));box-sizing:border-box}@media (max-width: 767px){.md-header-card-set-wrapper{display:flex;gap:var(--_gap);flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.md-header-card-set-wrapper::-webkit-scrollbar{height:6px}.md-header-card-set-wrapper::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.md-header-card-set-wrapper::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.md-header-card-set-wrapper::-webkit-scrollbar-thumb:hover{background:#555}.md-header-card-set-wrapper md-header-card{flex:0 0 auto;scroll-snap-align:start;min-width:240px;max-width:280px}}@media (min-width: 768px){.md-header-card-set-wrapper{display:grid;gap:var(--_gap);grid-template-columns:repeat(auto-fit,minmax(var(--_card-min),1fr))}.md-header-card-set-wrapper md-header-card{max-width:var(--_card-max);justify-self:stretch}}.md-header-card-set-nowrap .md-header-card-set-wrapper{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;grid-template-columns:unset}.md-header-card-set-nowrap .md-header-card-set-wrapper md-header-card{flex:0 0 auto;scroll-snap-align:start;min-width:var(--_card-min);max-width:var(--_card-max)}\n"] }]
+        }], propDecorators: { cards: [{
+                type: ContentChildren,
+                args: [MDHeaderCardComponent]
+            }], gap: [{
+                type: Input
+            }], padding: [{
                 type: Input
             }], minCardWidth: [{
                 type: Input
             }], maxCardWidth: [{
                 type: Input
+            }], noWrap: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }] } });
 
 class MDHeaderCardModule {