@propbinder/mobile-design 0.2.89 → 0.2.91

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 (4) hide show
  1. package/fesm2022/propbinder-mobile-design.mjs +25 -5
  2. package/fesm2022/propbinder-mobile-design.mjs.map +1 -1
  3. package/index.d.ts +7 -6
  4. package/package.json +1 -1
package/fesm2022/propbinder-mobile-design.mjs CHANGED
@@ -6282,37 +6282,57 @@ class DsMobileInlineTabsComponent {
6282
6282
  <button
6283
6283
  class="filter-tab"
6284
6284
  [class.active]="activeTab() === tab.id"
6285
+ [class.has-envelope]="tab.badgeType === 'envelope'"
6285
6286
  (click)="handleTabClick(tab.id)"
6286
6287
  [attr.aria-label]="tab.label"
6287
6288
  [attr.aria-selected]="activeTab() === tab.id">
6288
6289
  {{ tab.label }}
6289
- @if (tab.badge && tab.badge > 0) {
6290
+ @if (tab.badgeType === 'envelope') {
6291
+ <div class="envelope-wrapper">
6292
+ <ds-icon name="remixMailFill" size="20px" class="tw-text-current"></ds-icon>
6293
+ @if (tab.badge && tab.badge > 0) {
6294
+ <span class="envelope-badge">
6295
+ {{ tab.badge }}
6296
+ </span>
6297
+ }
6298
+ </div>
6299
+ } @else if (tab.badge && tab.badge > 0) {
6290
6300
  <span class="tab-badge">{{ tab.badge }}</span>
6291
6301
  }
6292
6302
  </button>
6293
6303
  }
6294
6304
  </div>
6295
- `, 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:500;color:rgba(var(--header-content-color-rgb, 255, 255, 255),.6);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px;white-space:nowrap}.filter-tab.active{background:var(--color-header-accent, #5d5fef);color:var(--color-on-header-accent, white)}.filter-tab:hover:not(.active){background:rgba(var(--header-content-color-rgb, 255, 255, 255),.1)}.tab-badge{min-width:24px;height:16px;padding:0 6px;border-radius:10px;background:rgba(var(--header-content-color-rgb, 255, 255, 255),.2);color:var(--header-content-color, white);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:rgba(var(--color-on-header-accent-rgb, 255, 255, 255),.3);color:var(--color-on-header-accent, white)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
6305
+ `, 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:500;color:rgba(var(--header-content-color-rgb, 255, 255, 255),.6);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px;white-space:nowrap}.filter-tab.active{background:var(--color-header-accent, #5d5fef);color:var(--color-on-header-accent, white)}.filter-tab:hover:not(.active){background:rgba(var(--header-content-color-rgb, 255, 255, 255),.1)}.tab-badge{min-width:24px;height:16px;padding:0 6px;border-radius:10px;background:rgba(var(--header-content-color-rgb, 255, 255, 255),.2);color:var(--header-content-color, white);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:rgba(var(--color-on-header-accent-rgb, 255, 255, 255),.3);color:var(--color-on-header-accent, white)}.filter-tab.has-envelope{gap:0}.envelope-wrapper{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-left:4px}.envelope-badge{position:absolute;top:-3px;right:-5px;background-color:#ff3b30;color:#fff;font-size:10px;font-weight:700;border-radius:9999px;min-width:12px;height:12px;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;box-shadow:0 1px 2px #00000026;z-index:10}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }] });
6296
6306
  }
6297
6307
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileInlineTabsComponent, decorators: [{
6298
6308
  type: Component,
6299
- args: [{ selector: 'ds-mobile-inline-tabs', standalone: true, imports: [CommonModule], template: `
6309
+ args: [{ selector: 'ds-mobile-inline-tabs', standalone: true, imports: [CommonModule, DsIconComponent], template: `
6300
6310
  <div class="filter-tabs">
6301
6311
  @for (tab of tabs(); track tab.id) {
6302
6312
  <button
6303
6313
  class="filter-tab"
6304
6314
  [class.active]="activeTab() === tab.id"
6315
+ [class.has-envelope]="tab.badgeType === 'envelope'"
6305
6316
  (click)="handleTabClick(tab.id)"
6306
6317
  [attr.aria-label]="tab.label"
6307
6318
  [attr.aria-selected]="activeTab() === tab.id">
6308
6319
  {{ tab.label }}
6309
- @if (tab.badge && tab.badge > 0) {
6320
+ @if (tab.badgeType === 'envelope') {
6321
+ <div class="envelope-wrapper">
6322
+ <ds-icon name="remixMailFill" size="20px" class="tw-text-current"></ds-icon>
6323
+ @if (tab.badge && tab.badge > 0) {
6324
+ <span class="envelope-badge">
6325
+ {{ tab.badge }}
6326
+ </span>
6327
+ }
6328
+ </div>
6329
+ } @else if (tab.badge && tab.badge > 0) {
6310
6330
  <span class="tab-badge">{{ tab.badge }}</span>
6311
6331
  }
6312
6332
  </button>
6313
6333
  }
6314
6334
  </div>
6315
- `, 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:500;color:rgba(var(--header-content-color-rgb, 255, 255, 255),.6);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px;white-space:nowrap}.filter-tab.active{background:var(--color-header-accent, #5d5fef);color:var(--color-on-header-accent, white)}.filter-tab:hover:not(.active){background:rgba(var(--header-content-color-rgb, 255, 255, 255),.1)}.tab-badge{min-width:24px;height:16px;padding:0 6px;border-radius:10px;background:rgba(var(--header-content-color-rgb, 255, 255, 255),.2);color:var(--header-content-color, white);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:rgba(var(--color-on-header-accent-rgb, 255, 255, 255),.3);color:var(--color-on-header-accent, white)}\n"] }]
6335
+ `, 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:500;color:rgba(var(--header-content-color-rgb, 255, 255, 255),.6);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px;white-space:nowrap}.filter-tab.active{background:var(--color-header-accent, #5d5fef);color:var(--color-on-header-accent, white)}.filter-tab:hover:not(.active){background:rgba(var(--header-content-color-rgb, 255, 255, 255),.1)}.tab-badge{min-width:24px;height:16px;padding:0 6px;border-radius:10px;background:rgba(var(--header-content-color-rgb, 255, 255, 255),.2);color:var(--header-content-color, white);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:rgba(var(--color-on-header-accent-rgb, 255, 255, 255),.3);color:var(--color-on-header-accent, white)}.filter-tab.has-envelope{gap:0}.envelope-wrapper{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-left:4px}.envelope-badge{position:absolute;top:-3px;right:-5px;background-color:#ff3b30;color:#fff;font-size:10px;font-weight:700;border-radius:9999px;min-width:12px;height:12px;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;box-shadow:0 1px 2px #00000026;z-index:10}\n"] }]
6316
6336
  }], 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"] }] } });
6317
6337
 
6318
6338
  /**