@akcelik/strct 2.0.0 → 2.0.1

package/fesm2022/akcelik-strct.mjs

@@ -856,7 +856,8 @@ class StrctOverlay {
      */
     placement = input('bottom-start', { ...(ngDevMode ? { debugName: "placement" } : /* istanbul ignore next */ {}), alias: 'strctOverlayPlacement' });
     /** Match the panel width to the anchor (combobox / date / cascade fields). */
-    matchWidth = input(false, { ...(ngDevMode ? { debugName: "matchWidth" } : /* istanbul ignore next */ {}), alias: 'strctOverlayMatchWidth', transform: booleanAttribute });
+    matchWidth = input(false, { ...(ngDevMode ? { debugName: "matchWidth" } : /* istanbul ignore next */ {}), alias: 'strctOverlayMatchWidth',
+        transform: booleanAttribute });
     /** Gap between anchor and panel in pixels. */
     gap = input(5, { ...(ngDevMode ? { debugName: "gap" } : /* istanbul ignore next */ {}), alias: 'strctOverlayGap' });
     onScrollResize = () => this.position();
@@ -2089,7 +2090,9 @@ class StrctAccordionPanel {
       <span class="strct-acc__title">{{ heading() }}</span>
     </button>
     @if (expanded()) {
-      <div class="strct-acc__body" [id]="bodyId" role="region" [attr.aria-labelledby]="headId"><ng-content /></div>
+      <div class="strct-acc__body" [id]="bodyId" role="region" [attr.aria-labelledby]="headId">
+        <ng-content />
+      </div>
     }
   `, isInline: true, styles: [".strct-acc{display:block}.strct-acc+.strct-acc{border-top:1px solid var(--b2)}.strct-acc__head{display:flex;align-items:center;gap:9px;width:100%;padding:11px 14px;border:0;background:transparent;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:500;color:var(--t1);text-align:start}.strct-acc__head:hover{background:var(--bg-3)}.strct-acc__chevron{display:inline-flex;color:var(--t3);transition:transform .16s ease}.strct-acc__chevron--open{transform:rotate(90deg);color:var(--acc)}[dir=rtl] .strct-acc__chevron:not(.strct-acc__chevron--open){transform:rotate(180deg)}.strct-acc__title{flex:1}.strct-acc__body{padding:4px 14px 14px;padding-inline-start:32px;color:var(--t2);font-size:13px;border-top:1px solid var(--b1)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -2110,7 +2113,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
       <span class="strct-acc__title">{{ heading() }}</span>
     </button>
     @if (expanded()) {
-      <div class="strct-acc__body" [id]="bodyId" role="region" [attr.aria-labelledby]="headId"><ng-content /></div>
+      <div class="strct-acc__body" [id]="bodyId" role="region" [attr.aria-labelledby]="headId">
+        <ng-content />
+      </div>
     }
   `, host: { class: 'strct-acc' }, styles: [".strct-acc{display:block}.strct-acc+.strct-acc{border-top:1px solid var(--b2)}.strct-acc__head{display:flex;align-items:center;gap:9px;width:100%;padding:11px 14px;border:0;background:transparent;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:500;color:var(--t1);text-align:start}.strct-acc__head:hover{background:var(--bg-3)}.strct-acc__chevron{display:inline-flex;color:var(--t3);transition:transform .16s ease}.strct-acc__chevron--open{transform:rotate(90deg);color:var(--acc)}[dir=rtl] .strct-acc__chevron:not(.strct-acc__chevron--open){transform:rotate(180deg)}.strct-acc__title{flex:1}.strct-acc__body{padding:4px 14px 14px;padding-inline-start:32px;color:var(--t2);font-size:13px;border-top:1px solid var(--b1)}\n"] }]
         }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
@@ -2223,12 +2228,7 @@ class StrctTabs {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: StrctTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: StrctTabs, isStandalone: true, selector: "strct-tabs", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, keepAlive: { classPropertyName: "keepAlive", publicName: "keepAlive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange" }, host: { classAttribute: "strct-tabs" }, queries: [{ propertyName: "tabs", predicate: StrctTab, isSignal: true }], ngImport: i0, template: `
-    <div
-      class="strct-tabs__bar"
-      role="tablist"
-      #bar
-      (keydown)="onKeydown($event, bar)"
-    >
+    <div class="strct-tabs__bar" role="tablist" #bar (keydown)="onKeydown($event, bar)">
       @for (tab of tabs(); track tab; let i = $index) {
         <button
           type="button"
@@ -2252,12 +2252,7 @@ class StrctTabs {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: StrctTabs, decorators: [{
             type: Component,
             args: [{ selector: 'strct-tabs', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
-    <div
-      class="strct-tabs__bar"
-      role="tablist"
-      #bar
-      (keydown)="onKeydown($event, bar)"
-    >
+    <div class="strct-tabs__bar" role="tablist" #bar (keydown)="onKeydown($event, bar)">
       @for (tab of tabs(); track tab; let i = $index) {
         <button
           type="button"
@@ -2797,7 +2792,11 @@ class StrctTreeNode {
         }
         // APG typeahead: a printable character jumps to the next matching visible
         // node. Space is excluded — it activates the row (keydown.space above).
-        if (event.key.length === 1 && event.key !== ' ' && !event.ctrlKey && !event.altKey && !event.metaKey) {
+        if (event.key.length === 1 &&
+            event.key !== ' ' &&
+            !event.ctrlKey &&
+            !event.altKey &&
+            !event.metaKey) {
             event.preventDefault();
             event.stopPropagation();
             this.tree.typeahead(this, event.key);
@@ -4849,11 +4848,15 @@ class StrctBreadcrumb {
     /** Accessible label for the navigation region (localizable). */
     regionLabel = input('Breadcrumb', ...(ngDevMode ? [{ debugName: "regionLabel" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: StrctBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: StrctBreadcrumb, isStandalone: true, selector: "strct-breadcrumb", inputs: { regionLabel: { classPropertyName: "regionLabel", publicName: "regionLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "regionLabel()" }, classAttribute: "strct-bc" }, ngImport: i0, template: `<ol class="strct-bc__list"><ng-content /></ol>`, isInline: true, styles: [".strct-bc__list{display:flex;align-items:center;flex-wrap:wrap;gap:2px;margin:0;padding:0;list-style:none;font-size:13px}.strct-bc__item:not(:last-child):after{content:\"/\";margin:0 8px;color:var(--t3);font-weight:400}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: StrctBreadcrumb, isStandalone: true, selector: "strct-breadcrumb", inputs: { regionLabel: { classPropertyName: "regionLabel", publicName: "regionLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "regionLabel()" }, classAttribute: "strct-bc" }, ngImport: i0, template: `<ol class="strct-bc__list">
+    <ng-content />
+  </ol>`, isInline: true, styles: [".strct-bc__list{display:flex;align-items:center;flex-wrap:wrap;gap:2px;margin:0;padding:0;list-style:none;font-size:13px}.strct-bc__item:not(:last-child):after{content:\"/\";margin:0 8px;color:var(--t3);font-weight:400}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: StrctBreadcrumb, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<ol class="strct-bc__list"><ng-content /></ol>`, host: { class: 'strct-bc', role: 'navigation', '[attr.aria-label]': 'regionLabel()' }, styles: [".strct-bc__list{display:flex;align-items:center;flex-wrap:wrap;gap:2px;margin:0;padding:0;list-style:none;font-size:13px}.strct-bc__item:not(:last-child):after{content:\"/\";margin:0 8px;color:var(--t3);font-weight:400}\n"] }]
+            args: [{ selector: 'strct-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<ol class="strct-bc__list">
+    <ng-content />
+  </ol>`, host: { class: 'strct-bc', role: 'navigation', '[attr.aria-label]': 'regionLabel()' }, styles: [".strct-bc__list{display:flex;align-items:center;flex-wrap:wrap;gap:2px;margin:0;padding:0;list-style:none;font-size:13px}.strct-bc__item:not(:last-child):after{content:\"/\";margin:0 8px;color:var(--t3);font-weight:400}\n"] }]
         }], propDecorators: { regionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "regionLabel", required: false }] }] } });
 /** One crumb. Mark the final one `current`. */
 class StrctBreadcrumbItem {
@@ -5765,7 +5768,9 @@ class StrctCopy {
       class="strct-copy"
       [class.strct-copy--done]="done()"
       [class.strct-copy--error]="error()"
-      [attr.aria-label]="done() ? copiedLabel() : error() ? failedLabel() : ariaLabel() || copyLabel()"
+      [attr.aria-label]="
+        done() ? copiedLabel() : error() ? failedLabel() : ariaLabel() || copyLabel()
+      "
       (click)="copy()"
     >
       <strct-icon [name]="done() ? 'check' : 'copy'" [size]="13" [strokeWidth]="1.6" />
@@ -5788,7 +5793,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
       class="strct-copy"
       [class.strct-copy--done]="done()"
       [class.strct-copy--error]="error()"
-      [attr.aria-label]="done() ? copiedLabel() : error() ? failedLabel() : ariaLabel() || copyLabel()"
+      [attr.aria-label]="
+        done() ? copiedLabel() : error() ? failedLabel() : ariaLabel() || copyLabel()
+      "
       (click)="copy()"
     >
       <strct-icon [name]="done() ? 'check' : 'copy'" [size]="13" [strokeWidth]="1.6" />
@@ -7054,7 +7061,8 @@ class StrctFile {
     >
       <strct-icon name="upload" [size]="20" />
       <div class="strct-file__prompt">
-        <strong>{{ dropLabel() }}</strong> or <span class="strct-file__browse">{{ browseLabel() }}</span>
+        <strong>{{ dropLabel() }}</strong> or
+        <span class="strct-file__browse">{{ browseLabel() }}</span>
       </div>
       <input
         #input
@@ -7108,7 +7116,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
     >
       <strct-icon name="upload" [size]="20" />
       <div class="strct-file__prompt">
-        <strong>{{ dropLabel() }}</strong> or <span class="strct-file__browse">{{ browseLabel() }}</span>
+        <strong>{{ dropLabel() }}</strong> or
+        <span class="strct-file__browse">{{ browseLabel() }}</span>
       </div>
       <input
         #input
@@ -7357,13 +7366,9 @@ class StrctChips {
       (keydown.space)="input.focus()"
     >
       @for (chip of value(); track $index) {
-        <strct-tag
-          status="accent"
-          removable
-          [disabled]="isDisabled()"
-          (removed)="remove($index)"
-          >{{ chip }}</strct-tag
-        >
+        <strct-tag status="accent" removable [disabled]="isDisabled()" (removed)="remove($index)">{{
+          chip
+        }}</strct-tag>
       }
       <input
         #input
@@ -7393,13 +7398,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
       (keydown.space)="input.focus()"
     >
       @for (chip of value(); track $index) {
-        <strct-tag
-          status="accent"
-          removable
-          [disabled]="isDisabled()"
-          (removed)="remove($index)"
-          >{{ chip }}</strct-tag
-        >
+        <strct-tag status="accent" removable [disabled]="isDisabled()" (removed)="remove($index)">{{
+          chip
+        }}</strct-tag>
       }
       <input
         #input
@@ -9268,9 +9269,12 @@ class StrctDatepicker {
         <div class="strct-dp__gridwrap" role="grid" [attr.aria-labelledby]="titleId">
           <div class="strct-dp__dow" role="row">
             @for (d of dow(); track $index; let i = $index) {
-              <span role="columnheader" [attr.aria-label]="dowFull()[i]" [attr.abbr]="dowFull()[i]">{{
-                d
-              }}</span>
+              <span
+                role="columnheader"
+                [attr.aria-label]="dowFull()[i]"
+                [attr.abbr]="dowFull()[i]"
+                >{{ d }}</span
+              >
             }
           </div>
           @for (week of weeks(); track $index) {
@@ -9361,9 +9365,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
         <div class="strct-dp__gridwrap" role="grid" [attr.aria-labelledby]="titleId">
           <div class="strct-dp__dow" role="row">
             @for (d of dow(); track $index; let i = $index) {
-              <span role="columnheader" [attr.aria-label]="dowFull()[i]" [attr.abbr]="dowFull()[i]">{{
-                d
-              }}</span>
+              <span
+                role="columnheader"
+                [attr.aria-label]="dowFull()[i]"
+                [attr.abbr]="dowFull()[i]"
+                >{{ d }}</span
+              >
             }
           </div>
           @for (week of weeks(); track $index) {
@@ -10877,9 +10884,7 @@ class StrctDatagrid {
         if (!rows.length)
             return -1;
         const active = this.activeTreeRow();
-        const current = active != null && rows.some((r) => this.rowKey(r) === active)
-            ? active
-            : this.rowKey(rows[0]);
+        const current = active != null && rows.some((r) => this.rowKey(r) === active) ? active : this.rowKey(rows[0]);
         return current === this.rowKey(row) ? 0 : -1;
     }
     onTreeRowKeydown(row, event) {
@@ -12479,11 +12484,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
 /** Vertical timeline container. Wraps `<strct-timeline-item>` children. */
 class StrctTimeline {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: StrctTimeline, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: StrctTimeline, isStandalone: true, selector: "strct-timeline", host: { classAttribute: "strct-tl" }, ngImport: i0, template: `<ol class="strct-tl__list"><ng-content /></ol>`, isInline: true, styles: [".strct-tl{display:flex;flex-direction:column}.strct-tl__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: StrctTimeline, isStandalone: true, selector: "strct-timeline", host: { classAttribute: "strct-tl" }, ngImport: i0, template: `<ol class="strct-tl__list">
+    <ng-content />
+  </ol>`, isInline: true, styles: [".strct-tl{display:flex;flex-direction:column}.strct-tl__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: StrctTimeline, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-timeline', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<ol class="strct-tl__list"><ng-content /></ol>`, host: { class: 'strct-tl' }, styles: [".strct-tl{display:flex;flex-direction:column}.strct-tl__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}\n"] }]
+            args: [{ selector: 'strct-timeline', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<ol class="strct-tl__list">
+    <ng-content />
+  </ol>`, host: { class: 'strct-tl' }, styles: [".strct-tl{display:flex;flex-direction:column}.strct-tl__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}\n"] }]
         }] });
 /** A timeline entry: a node on the rail plus a title and projected body. */
 class StrctTimelineItem {
@@ -13488,7 +13497,10 @@ class StrctChart {
         if (this.isMulti()) {
             const series = this.multiSeries().map((s) => {
                 const reals = s.data.filter(isVal);
-                return { label: s.label || 'series', latest: reals.length ? f(reals[reals.length - 1]) : '' };
+                return {
+                    label: s.label || 'series',
+                    latest: reals.length ? f(reals[reals.length - 1]) : '',
+                };
             });
             if (custom)
                 return custom({ count: series.length, series });
@@ -19690,10 +19702,7 @@ class StrctDatetimePicker {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: StrctDatetimePicker, isStandalone: true, selector: "strct-datetime-picker", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, monthNames: { classPropertyName: "monthNames", publicName: "monthNames", isSignal: true, isRequired: false, transformFunction: null }, weekdayNames: { classPropertyName: "weekdayNames", publicName: "weekdayNames", isSignal: true, isRequired: false, transformFunction: null }, weekdayNamesFull: { classPropertyName: "weekdayNamesFull", publicName: "weekdayNamesFull", isSignal: true, isRequired: false, transformFunction: null }, weekStart: { classPropertyName: "weekStart", publicName: "weekStart", isSignal: true, isRequired: false, transformFunction: null }, prevMonthLabel: { classPropertyName: "prevMonthLabel", publicName: "prevMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, nextMonthLabel: { classPropertyName: "nextMonthLabel", publicName: "nextMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, hourLabel: { classPropertyName: "hourLabel", publicName: "hourLabel", isSignal: true, isRequired: false, transformFunction: null }, minuteLabel: { classPropertyName: "minuteLabel", publicName: "minuteLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-dtp" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctDatetimePicker), multi: true },
         ], ngImport: i0, template: `
-    <div
-      class="strct-control strct-dtp__field"
-      [class.strct-dtp__field--disabled]="isDisabled()"
-    >
+    <div class="strct-control strct-dtp__field" [class.strct-dtp__field--disabled]="isDisabled()">
       <strct-datepicker
         class="strct-dtp__date"
         [(ngModel)]="date"
@@ -19736,10 +19745,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
             args: [{ selector: 'strct-datetime-picker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctDatepicker, FormsModule], providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctDatetimePicker), multi: true },
                     ], template: `
-    <div
-      class="strct-control strct-dtp__field"
-      [class.strct-dtp__field--disabled]="isDisabled()"
-    >
+    <div class="strct-control strct-dtp__field" [class.strct-dtp__field--disabled]="isDisabled()">
       <strct-datepicker
         class="strct-dtp__date"
         [(ngModel)]="date"
@@ -19947,7 +19953,7 @@ class StrctInlineEdit {
     /** Accessible label of the pencil edit button and the input (localizable). */
     editLabel = input('Edit', ...(ngDevMode ? [{ debugName: "editLabel" }] : /* istanbul ignore next */ []));
     /** Builds the live-region announcement after a commit (localizable). */
-    announcement = input((value) => (value ? `Changed to ${value}` : 'Value cleared'), ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+    announcement = input((value) => value ? `Changed to ${value}` : 'Value cleared', ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
     /** Committed value — the CVA model. */
     value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     /** In-progress text while editing. */