@akcelik/strct 0.10.1 → 0.11.0

package/fesm2022/akcelik-strct.mjs

@@ -3157,6 +3157,145 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
   `, host: { class: 'strct-pg', role: 'navigation', 'aria-label': 'Pagination' }, styles: [".strct-pg{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--t2)}.strct-pg__btn{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 7px;border-radius:6px;font-family:var(--font);font-size:12px;cursor:pointer;color:var(--t2);background:transparent;border:1px solid transparent;transition:background .14s ease,border-color .14s ease,color .14s ease}.strct-pg__btn:hover{background:var(--bg-3)}.strct-pg__btn--active{color:var(--acc);border-color:var(--acc30);background:var(--acc-m)}.strct-pg__btn:disabled{color:var(--t4);cursor:not-allowed;background:transparent}.strct-pg__nav{color:var(--t2)}.strct-pg__dots{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:30px;color:var(--t3)}\n"] }]
         }], propDecorators: { total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }] } });
 
+/**
+ * A two-level navigation menu: categories (level 1) each holding a flat list of
+ * items (level 2) — not a tree. Categories can be collapsible (chevrons) or
+ * static section labels, and item/category icons can be hidden.
+ *
+ *   <strct-section-menu [sections]="nav" [(activeId)]="active"
+ *                       [collapsible]="true" [showIcons]="true"
+ *                       (select)="go($event)" />
+ */
+class StrctSectionMenu {
+    /** Categories with their items (max two levels). */
+    sections = input.required(...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
+    /** Active item id (two-way). */
+    activeId = model(null, ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+    /** Categories collapse via a chevron; `false` renders static section labels. */
+    collapsible = input(true, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Show category / item icons. */
+    showIcons = input(true, { ...(ngDevMode ? { debugName: "showIcons" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accessible label for the nav landmark. */
+    ariaLabel = input('Sections', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Emitted when an item is chosen. */
+    select = output();
+    /** Per-section open overrides (keyed by label); absent ⇒ use `expanded`. */
+    overrides = signal(new Map(), ...(ngDevMode ? [{ debugName: "overrides" }] : /* istanbul ignore next */ []));
+    isOpen(sec) {
+        if (!this.collapsible())
+            return true;
+        return this.overrides().get(sec.label) ?? sec.expanded !== false;
+    }
+    toggle(sec) {
+        const open = this.isOpen(sec);
+        const next = new Map(this.overrides());
+        next.set(sec.label, !open);
+        this.overrides.set(next);
+    }
+    pick(item) {
+        if (item.disabled)
+            return;
+        this.activeId.set(item.id);
+        this.select.emit(item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctSectionMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctSectionMenu, isStandalone: true, selector: "strct-section-menu", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: true, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeId: "activeIdChange", select: "select" }, host: { classAttribute: "strct-sm-host" }, ngImport: i0, template: `
+    <nav class="strct-sm" [attr.aria-label]="ariaLabel()">
+      @for (sec of sections(); track sec.label) {
+        <div class="strct-sm__section" [class.strct-sm__section--collapsible]="collapsible()">
+          @if (collapsible()) {
+            <button
+              type="button"
+              class="strct-sm__cat"
+              [attr.aria-expanded]="isOpen(sec)"
+              (click)="toggle(sec)"
+            >
+              <span class="strct-sm__chevron" [class.strct-sm__chevron--open]="isOpen(sec)">
+                <strct-icon name="chevronRight" [size]="12" [strokeWidth]="1.7" />
+              </span>
+              @if (showIcons() && sec.icon) {
+                <strct-icon class="strct-sm__cat-icon" [name]="sec.icon" [size]="15" [strokeWidth]="1.4" />
+              }
+              <span class="strct-sm__cat-label">{{ sec.label }}</span>
+            </button>
+          } @else {
+            <div class="strct-sm__cat-static">{{ sec.label }}</div>
+          }
+
+          @if (isOpen(sec)) {
+            <div class="strct-sm__items" role="group">
+              @for (item of sec.items; track item.id) {
+                <button
+                  type="button"
+                  class="strct-sm__item"
+                  [class.strct-sm__item--active]="item.id === activeId()"
+                  [disabled]="item.disabled"
+                  [attr.aria-current]="item.id === activeId() ? 'page' : null"
+                  (click)="pick(item)"
+                >
+                  @if (showIcons() && item.icon) {
+                    <strct-icon class="strct-sm__item-icon" [name]="item.icon" [size]="15" [strokeWidth]="1.4" />
+                  }
+                  <span class="strct-sm__item-label">{{ item.label }}</span>
+                </button>
+              }
+            </div>
+          }
+        </div>
+      }
+    </nav>
+  `, isInline: true, styles: [".strct-sm{display:flex;flex-direction:column;gap:1px}.strct-sm__section--collapsible+.strct-sm__section--collapsible{margin-top:1px}.strct-sm__cat{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;border:0;border-radius:6px;background:transparent;color:var(--t2);font-size:13px;font-weight:500;font-family:var(--font);cursor:pointer;text-align:left;transition:background .13s ease,color .13s ease}.strct-sm__cat:hover{background:var(--bg-3);color:var(--t1)}.strct-sm__cat:focus-visible,.strct-sm__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-sm__chevron{display:inline-flex;color:var(--t3);flex-shrink:0;transition:transform .15s ease}.strct-sm__chevron--open{transform:rotate(90deg)}.strct-sm__cat-icon{color:var(--t3);flex-shrink:0}.strct-sm__cat-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-sm__cat-static{padding:11px 10px 5px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--t3)}.strct-sm__items{display:flex;flex-direction:column}.strct-sm__item{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border:0;border-radius:6px;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);cursor:pointer;text-align:left;transition:background .13s ease}.strct-sm__section--collapsible .strct-sm__item{padding-left:31px}.strct-sm__item:hover:not(:disabled){background:var(--bg-3)}.strct-sm__item--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-sm__item--active .strct-sm__item-icon{color:var(--acc)}.strct-sm__item:disabled{opacity:.5;cursor:not-allowed}.strct-sm__item-icon{color:var(--t2);flex-shrink:0}.strct-sm__item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctSectionMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-section-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
+    <nav class="strct-sm" [attr.aria-label]="ariaLabel()">
+      @for (sec of sections(); track sec.label) {
+        <div class="strct-sm__section" [class.strct-sm__section--collapsible]="collapsible()">
+          @if (collapsible()) {
+            <button
+              type="button"
+              class="strct-sm__cat"
+              [attr.aria-expanded]="isOpen(sec)"
+              (click)="toggle(sec)"
+            >
+              <span class="strct-sm__chevron" [class.strct-sm__chevron--open]="isOpen(sec)">
+                <strct-icon name="chevronRight" [size]="12" [strokeWidth]="1.7" />
+              </span>
+              @if (showIcons() && sec.icon) {
+                <strct-icon class="strct-sm__cat-icon" [name]="sec.icon" [size]="15" [strokeWidth]="1.4" />
+              }
+              <span class="strct-sm__cat-label">{{ sec.label }}</span>
+            </button>
+          } @else {
+            <div class="strct-sm__cat-static">{{ sec.label }}</div>
+          }
+
+          @if (isOpen(sec)) {
+            <div class="strct-sm__items" role="group">
+              @for (item of sec.items; track item.id) {
+                <button
+                  type="button"
+                  class="strct-sm__item"
+                  [class.strct-sm__item--active]="item.id === activeId()"
+                  [disabled]="item.disabled"
+                  [attr.aria-current]="item.id === activeId() ? 'page' : null"
+                  (click)="pick(item)"
+                >
+                  @if (showIcons() && item.icon) {
+                    <strct-icon class="strct-sm__item-icon" [name]="item.icon" [size]="15" [strokeWidth]="1.4" />
+                  }
+                  <span class="strct-sm__item-label">{{ item.label }}</span>
+                </button>
+              }
+            </div>
+          }
+        </div>
+      }
+    </nav>
+  `, host: { class: 'strct-sm-host' }, styles: [".strct-sm{display:flex;flex-direction:column;gap:1px}.strct-sm__section--collapsible+.strct-sm__section--collapsible{margin-top:1px}.strct-sm__cat{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;border:0;border-radius:6px;background:transparent;color:var(--t2);font-size:13px;font-weight:500;font-family:var(--font);cursor:pointer;text-align:left;transition:background .13s ease,color .13s ease}.strct-sm__cat:hover{background:var(--bg-3);color:var(--t1)}.strct-sm__cat:focus-visible,.strct-sm__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-sm__chevron{display:inline-flex;color:var(--t3);flex-shrink:0;transition:transform .15s ease}.strct-sm__chevron--open{transform:rotate(90deg)}.strct-sm__cat-icon{color:var(--t3);flex-shrink:0}.strct-sm__cat-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-sm__cat-static{padding:11px 10px 5px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--t3)}.strct-sm__items{display:flex;flex-direction:column}.strct-sm__item{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border:0;border-radius:6px;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);cursor:pointer;text-align:left;transition:background .13s ease}.strct-sm__section--collapsible .strct-sm__item{padding-left:31px}.strct-sm__item:hover:not(:disabled){background:var(--bg-3)}.strct-sm__item--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-sm__item--active .strct-sm__item-icon{color:var(--acc)}.strct-sm__item:disabled{opacity:.5;cursor:not-allowed}.strct-sm__item-icon{color:var(--t2);flex-shrink:0}.strct-sm__item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+        }], propDecorators: { sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: true }] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: false }] }, { type: i0.Output, args: ["activeIdChange"] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], showIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcons", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] } });
+
 let fieldCounter = 0;
 /**
  * Form-field wrapper: a label (with optional required marker), the projected
@@ -7749,5 +7888,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_MASKS, STRCT_PALETTES, STRCT_RAW_ICONS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCascadeHost, StrctCascadeNode, StrctCascadeSelect, StrctCellDef, StrctChart, StrctCheckbox, StrctChips, StrctColorPicker, StrctCombobox, StrctContextMenu, StrctContextMenuTrigger, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctEmptyState, StrctField, StrctFile, StrctFooter, StrctGauge, StrctHeader, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKnob, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMetricTile, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRating, StrctRowDetailDef, StrctShell, StrctShellService, StrctSignpost, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctStack, StrctStackItem, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctThemeService, StrctThemeSwitcher, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctTooltip, StrctTree, StrctTreeNode, StrctVerticalNav, StrctWizard, registerStrctIcon };
+export { STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_MASKS, STRCT_PALETTES, STRCT_RAW_ICONS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCascadeHost, StrctCascadeNode, StrctCascadeSelect, StrctCellDef, StrctChart, StrctCheckbox, StrctChips, StrctColorPicker, StrctCombobox, StrctContextMenu, StrctContextMenuTrigger, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctEmptyState, StrctField, StrctFile, StrctFooter, StrctGauge, StrctHeader, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKnob, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMetricTile, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRating, StrctRowDetailDef, StrctSectionMenu, StrctShell, StrctShellService, StrctSignpost, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctStack, StrctStackItem, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctThemeService, StrctThemeSwitcher, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctTooltip, StrctTree, StrctTreeNode, StrctVerticalNav, StrctWizard, registerStrctIcon };
 //# sourceMappingURL=akcelik-strct.mjs.map