@propbinder/mobile-design 0.0.26 → 0.0.27

package/fesm2022/propbinder-mobile-design.mjs

@@ -4650,6 +4650,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 type: Output
             }] } });
 
+/**
+ * DsMobileTabBarComponent
+ *
+ * Pill-style tab bar for filtering/switching views
+ * Used in the purple header section of pages
+ *
+ * @example
+ * ```html
+ * <ds-mobile-tab-bar
+ *   [tabs]="[
+ *     { id: 'all', label: 'All' },
+ *     { id: 'open', label: 'Open' },
+ *     { id: 'closed', label: 'Closed' }
+ *   ]"
+ *   [activeTab]="'all'"
+ *   (tabChange)="handleTabChange($event)">
+ * </ds-mobile-tab-bar>
+ * ```
+ */
+class DsMobileTabBarComponent {
+    /**
+     * Array of tab items to display
+     */
+    tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : []));
+    /**
+     * Currently active tab ID
+     */
+    activeTab = input.required(...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    /**
+     * Emitted when a tab is clicked
+     */
+    tabChange = output();
+    handleTabClick(tabId) {
+        this.tabChange.emit(tabId);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsMobileTabBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: DsMobileTabBarComponent, isStandalone: true, selector: "ds-mobile-tab-bar", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { tabChange: "tabChange" }, ngImport: i0, template: `
+    <div class="filter-tabs">
+      @for (tab of tabs(); track tab.id) {
+        <button 
+          class="filter-tab"
+          [class.active]="activeTab() === tab.id"
+          (click)="handleTabClick(tab.id)"
+          [attr.aria-label]="tab.label"
+          [attr.aria-selected]="activeTab() === tab.id">
+          {{ tab.label }}
+          @if (tab.badge && tab.badge > 0) {
+            <span class="tab-badge">{{ tab.badge }}</span>
+          }
+        </button>
+      }
+    </div>
+  `, isInline: true, styles: [".filter-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;height:40px}.filter-tab{min-width:48px;justify-content:center;padding:0 12px;height:32px;border-radius:20px;background:transparent;border:none;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;color:#fff9;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px;white-space:nowrap}.filter-tab.active{background:var(--color-background-brand, #5d5fef);color:#fff}.filter-tab:hover:not(.active){background:#ffffff1a}.tab-badge{min-width:24px;height:16px;padding:0 6px;border-radius:10px;background:#fff3;color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1}.filter-tab.active .tab-badge{background:#ffffff4d;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsMobileTabBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-tab-bar', standalone: true, imports: [CommonModule], template: `
+    <div class="filter-tabs">
+      @for (tab of tabs(); track tab.id) {
+        <button 
+          class="filter-tab"
+          [class.active]="activeTab() === tab.id"
+          (click)="handleTabClick(tab.id)"
+          [attr.aria-label]="tab.label"
+          [attr.aria-selected]="activeTab() === tab.id">
+          {{ tab.label }}
+          @if (tab.badge && tab.badge > 0) {
+            <span class="tab-badge">{{ tab.badge }}</span>
+          }
+        </button>
+      }
+    </div>
+  `, styles: [".filter-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;height:40px}.filter-tab{min-width:48px;justify-content:center;padding:0 12px;height:32px;border-radius:20px;background:transparent;border:none;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;color:#fff9;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px;white-space:nowrap}.filter-tab.active{background:var(--color-background-brand, #5d5fef);color:#fff}.filter-tab:hover:not(.active){background:#ffffff1a}.tab-badge{min-width:24px;height:16px;padding:0 6px;border-radius:10px;background:#fff3;color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1}.filter-tab.active .tab-badge{background:#ffffff4d;color:#fff}\n"] }]
+        }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: true }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
+
 /**
  * DsMobileLightboxHeaderComponent
  *
@@ -9886,81 +9961,6 @@ const customBackTransition = (_, opts) => {
     return rootTransition;
 };
 
-/**
- * DsMobileTabBarComponent
- *
- * Pill-style tab bar for filtering/switching views
- * Used in the purple header section of pages
- *
- * @example
- * ```html
- * <ds-mobile-tab-bar
- *   [tabs]="[
- *     { id: 'all', label: 'All' },
- *     { id: 'open', label: 'Open' },
- *     { id: 'closed', label: 'Closed' }
- *   ]"
- *   [activeTab]="'all'"
- *   (tabChange)="handleTabChange($event)">
- * </ds-mobile-tab-bar>
- * ```
- */
-class DsMobileTabBarComponent {
-    /**
-     * Array of tab items to display
-     */
-    tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : []));
-    /**
-     * Currently active tab ID
-     */
-    activeTab = input.required(...(ngDevMode ? [{ debugName: "activeTab" }] : []));
-    /**
-     * Emitted when a tab is clicked
-     */
-    tabChange = output();
-    handleTabClick(tabId) {
-        this.tabChange.emit(tabId);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsMobileTabBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: DsMobileTabBarComponent, isStandalone: true, selector: "ds-mobile-tab-bar", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { tabChange: "tabChange" }, ngImport: i0, template: `
-    <div class="filter-tabs">
-      @for (tab of tabs(); track tab.id) {
-        <button 
-          class="filter-tab"
-          [class.active]="activeTab() === tab.id"
-          (click)="handleTabClick(tab.id)"
-          [attr.aria-label]="tab.label"
-          [attr.aria-selected]="activeTab() === tab.id">
-          {{ tab.label }}
-          @if (tab.badge && tab.badge > 0) {
-            <span class="tab-badge">{{ tab.badge }}</span>
-          }
-        </button>
-      }
-    </div>
-  `, isInline: true, styles: [".filter-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;height:40px}.filter-tab{min-width:48px;justify-content:center;padding:0 12px;height:32px;border-radius:20px;background:transparent;border:none;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;color:#fff9;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px;white-space:nowrap}.filter-tab.active{background:var(--color-background-brand, #5d5fef);color:#fff}.filter-tab:hover:not(.active){background:#ffffff1a}.tab-badge{min-width:24px;height:16px;padding:0 6px;border-radius:10px;background:#fff3;color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1}.filter-tab.active .tab-badge{background:#ffffff4d;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsMobileTabBarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ds-mobile-tab-bar', standalone: true, imports: [CommonModule], template: `
-    <div class="filter-tabs">
-      @for (tab of tabs(); track tab.id) {
-        <button 
-          class="filter-tab"
-          [class.active]="activeTab() === tab.id"
-          (click)="handleTabClick(tab.id)"
-          [attr.aria-label]="tab.label"
-          [attr.aria-selected]="activeTab() === tab.id">
-          {{ tab.label }}
-          @if (tab.badge && tab.badge > 0) {
-            <span class="tab-badge">{{ tab.badge }}</span>
-          }
-        </button>
-      }
-    </div>
-  `, styles: [".filter-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;height:40px}.filter-tab{min-width:48px;justify-content:center;padding:0 12px;height:32px;border-radius:20px;background:transparent;border:none;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;color:#fff9;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px;white-space:nowrap}.filter-tab.active{background:var(--color-background-brand, #5d5fef);color:#fff}.filter-tab:hover:not(.active){background:#ffffff1a}.tab-badge{min-width:24px;height:16px;padding:0 6px;border-radius:10px;background:#fff3;color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1}.filter-tab.active .tab-badge{background:#ffffff4d;color:#fff}\n"] }]
-        }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: true }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
-
 class MobileInquiriesPageComponent {
     userService;
     navCtrl;
@@ -12600,5 +12600,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionCommentComponent$1 as ActionCommentComponent, ActionLikeComponent$1 as ActionLikeComponent, ContentRowComponent, DsMobileActionsBottomSheetComponent, DsMobileAppLayoutComponent, DsMobileBottomSheetService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileInlinePhotoComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileLongPressDirective, DsMobileModalService, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostCardComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileTabsComponent$1 as DsMobileTabsComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PostActionsComponent$1 as PostActionsComponent, PostAttachmentsComponent$1 as PostAttachmentsComponent, PostContentComponent$1 as PostContentComponent, PostCreatePageComponent, PostMediaComponent$1 as PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent$1 as PostTextComponent, SectionHeaderComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, UserService, WhitelabelDemoPage, customBackTransition, customPageTransition };
+export { ActionCommentComponent$1 as ActionCommentComponent, ActionLikeComponent$1 as ActionLikeComponent, ContentRowComponent, DsMobileActionsBottomSheetComponent, DsMobileAppLayoutComponent, DsMobileBottomSheetService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileInlinePhotoComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileLongPressDirective, DsMobileModalService, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostCardComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileTabBarComponent, DsMobileTabsComponent$1 as DsMobileTabsComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PostActionsComponent$1 as PostActionsComponent, PostAttachmentsComponent$1 as PostAttachmentsComponent, PostContentComponent$1 as PostContentComponent, PostCreatePageComponent, PostMediaComponent$1 as PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent$1 as PostTextComponent, SectionHeaderComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, UserService, WhitelabelDemoPage, customBackTransition, customPageTransition };
 //# sourceMappingURL=propbinder-mobile-design.mjs.map