mtrl 0.2.6 → 0.2.7

package/src/components/top-app-bar/_styles.scss

@@ -0,0 +1,225 @@
+// src/components/top-app-bar/_styles.scss
+@use 'sass:map';
+@use '../../styles/abstract/base' as base;
+@use '../../styles/abstract/variables' as v;
+@use '../../styles/abstract/functions' as f;
+@use '../../styles/abstract/mixins' as m;
+@use '../../styles/abstract/theme' as t;
+
+$component: '#{base.$prefix}-top-app-bar';
+
+.#{$component} {
+  // Core Properties
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: f.get-z-index('fixed');
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background-color: t.color('surface');
+  
+  // Default type (small) - 64dp height as per specs
+  height: 64px;
+  padding: 0 16px;
+  
+  // Apply transition for scroll behavior
+  transition: 
+    box-shadow 0.3s ease-in-out,
+    background-color 0.3s ease-in-out,
+    height 0.3s ease-in-out;
+  
+  // Container for the headline
+  &-headline {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    @include m.typography('title-large');
+    color: t.color('on-surface');
+    margin: 0;
+    padding: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: 
+      font-size 0.3s ease-in-out,
+      margin 0.3s ease-in-out,
+      padding 0.3s ease-in-out;
+  }
+  
+  // Leading section (usually navigation icon)
+  &-leading {
+    display: flex;
+    align-items: center;
+    margin-right: 24px;
+  }
+  
+  // Trailing section (usually action icons)
+  &-trailing {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: auto;
+  }
+  
+  // Center-aligned top app bar
+  &--center {
+    .#{$component}-headline {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      text-align: center;
+      flex: 0;
+    }
+  }
+  
+  // Medium top app bar - 112dp height
+  &--medium {
+    height: 112px;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 0;
+    
+    .#{$component}-row {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: 0 16px;
+      
+      &:first-child {
+        margin-top: 20px;
+      }
+    }
+    
+    .#{$component}-headline {
+      margin-bottom: 24px;
+      margin-left: 16px;
+      @include m.typography('headline-small');
+    }
+  }
+  
+  // Large top app bar - 152dp height
+  &--large {
+    height: 152px;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 0;
+    
+    .#{$component}-row {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: 0 16px;
+      
+      &:first-child {
+        margin-top: 20px;
+      }
+    }
+    
+    .#{$component}-headline {
+      margin-bottom: 28px;
+      margin-left: 16px;
+      @include m.typography('headline-medium');
+    }
+  }
+  
+  // States for on-scroll behavior
+  &--scrolled {
+    background-color: t.color('surface-container');
+    @include m.elevation(1);
+    
+    // Compress medium and large variants to small on scroll if compressible
+    &.#{$component}--medium.#{$component}--compressible,
+    &.#{$component}--large.#{$component}--compressible {
+      height: 64px;
+      flex-direction: row;
+      align-items: center;
+      padding: 0 16px;
+      
+      .#{$component}-row {
+        display: none;
+      }
+      
+      .#{$component}-headline {
+        margin: 0;
+        @include m.typography('title-large');
+      }
+      
+      // Fix for headline that is inside row in medium/large
+      .#{$component}-row:nth-child(2) {
+        display: flex;
+        flex: 1;
+        margin: 0;
+        padding: 0;
+      }
+    }
+  }
+  
+  // RTL Support
+  [dir="rtl"] & {
+    .#{$component}-leading {
+      margin-right: 0;
+      margin-left: 24px;
+    }
+    
+    .#{$component}-trailing {
+      margin-left: 0;
+      margin-right: auto;
+    }
+    
+    &--medium,
+    &--large {
+      .#{$component}-headline {
+        margin-left: 0;
+        margin-right: 16px;
+      }
+    }
+    
+    &--center {
+      .#{$component}-headline {
+        left: auto;
+        right: 50%;
+        transform: translateX(50%);
+      }
+    }
+  }
+  
+  // Mobile screen adjustments
+  @media (max-width: map.get(v.$breakpoints, 'sm')) {
+    // Reduce side padding slightly on small screens
+    padding: 0 12px;
+    
+    .#{$component}-leading {
+      margin-right: 16px;
+    }
+    
+    .#{$component}-trailing {
+      gap: 4px;
+    }
+    
+    // Make icon buttons slightly smaller
+    .#{$component}-leading,
+    .#{$component}-trailing {
+      button {
+        padding: 8px;
+      }
+    }
+  }
+  
+  // Reduced motion support
+  @include m.reduced-motion {
+    transition-duration: 0.01ms;
+    
+    .#{$component}-headline {
+      transition-duration: 0.01ms;
+    }
+  }
+  
+  // High contrast mode support
+  @include m.high-contrast {
+    border-bottom: 1px solid currentColor;
+  }
+}

package/src/components/top-app-bar/config.ts

@@ -0,0 +1,83 @@
+// src/components/top-app-bar/config.ts
+/**
+ * @module components/top-app-bar
+ * @description Configuration for top app bar component
+ */
+
+import { createComponentConfig, BaseComponentConfig } from '../../core/config/component-config';
+import { PREFIX } from '../../core/config';
+
+/**
+ * Top App Bar types
+ */
+export type TopAppBarType = 'small' | 'medium' | 'large' | 'center';
+
+/**
+ * Configuration options for top app bar
+ */
+export interface TopAppBarConfig extends BaseComponentConfig {
+  /**
+   * Element to use for the container
+   * @default 'header'
+   */
+  tag?: string;
+  
+  /**
+   * Type of top app bar to display
+   * @default 'small'
+   */
+  type?: TopAppBarType;
+  
+  /**
+   * Title text to display in the app bar
+   */
+  title?: string;
+  
+  /**
+   * Whether to enable scrolling behavior
+   * @default true
+   */
+  scrollable?: boolean;
+  
+  /**
+   * Whether to compress medium/large variants to small on scroll
+   * @default true
+   */
+  compressible?: boolean;
+  
+  /**
+   * Scroll threshold in pixels to trigger the scrolled state
+   * @default 4
+   */
+  scrollThreshold?: number;
+  
+  /**
+   * Additional CSS classes to apply
+   */
+  class?: string;
+
+  /**
+   * Optional callback when scrolling changes the bar appearance
+   */
+  onScroll?: (scrolled: boolean) => void;
+}
+
+/**
+ * Default configuration for top app bar
+ */
+export const defaultConfig: Partial<TopAppBarConfig> = {
+  tag: 'header',
+  type: 'small',
+  scrollable: true,
+  compressible: true,
+  scrollThreshold: 4
+};
+
+/**
+ * Creates the configuration for a top app bar component
+ * 
+ * @param {TopAppBarConfig} config - User provided configuration
+ * @returns {TopAppBarConfig} Complete configuration with defaults applied
+ */
+export const createConfig = (config: TopAppBarConfig = {} as TopAppBarConfig): TopAppBarConfig => 
+  createComponentConfig(defaultConfig, config, 'top-app-bar') as TopAppBarConfig;

package/src/components/top-app-bar/index.ts

@@ -0,0 +1,11 @@
+// src/components/top-app-bar/index.ts
+/**
+ * @module components/top-app-bar
+ * @description Top app bar component for application headers
+ */
+
+import { createTopAppBar } from './top-app-bar';
+
+export default createTopAppBar;
+export { createTopAppBar };
+export type { TopAppBarConfig, TopAppBarType } from './config';

package/src/components/top-app-bar/top-app-bar.ts

@@ -0,0 +1,316 @@
+// src/components/top-app-bar/top-app-bar.ts
+/**
+ * @module components/top-app-bar
+ * @description Top app bar implementation
+ */
+
+import { 
+  createBase, 
+  withElement, 
+  withEvents, 
+  withLifecycle,
+  ElementComponent, 
+  BaseComponent 
+} from '../../core/compose';
+
+import { createConfig, TopAppBarConfig, TopAppBarType } from './config';
+
+/**
+ * Top app bar component interface
+ */
+export interface TopAppBar extends ElementComponent {
+  /**
+   * Sets the title of the top app bar
+   * @param {string} title - Title text
+   * @returns {TopAppBar} TopAppBar instance for chaining
+   */
+  setTitle: (title: string) => TopAppBar;
+  
+  /**
+   * Gets the current title
+   * @returns {string} Current title text
+   */
+  getTitle: () => string;
+  
+  /**
+   * Adds a leading navigation icon or element
+   * @param {HTMLElement} element - Element to add to the leading section
+   * @returns {TopAppBar} TopAppBar instance for chaining
+   */
+  addLeadingElement: (element: HTMLElement) => TopAppBar;
+  
+  /**
+   * Adds a trailing action icon or element
+   * @param {HTMLElement} element - Element to add to the trailing section
+   * @returns {TopAppBar} TopAppBar instance for chaining
+   */
+  addTrailingElement: (element: HTMLElement) => TopAppBar;
+  
+  /**
+   * Changes the top app bar type
+   * @param {TopAppBarType} type - New app bar type
+   * @returns {TopAppBar} TopAppBar instance for chaining
+   */
+  setType: (type: TopAppBarType) => TopAppBar;
+  
+  /**
+   * Manually sets the scrolled state
+   * @param {boolean} scrolled - Whether to show the scrolled state
+   * @returns {TopAppBar} TopAppBar instance for chaining
+   */
+  setScrollState: (scrolled: boolean) => TopAppBar;
+  
+  /**
+   * Gets the headline element
+   * @returns {HTMLElement} Headline element
+   */
+  getHeadlineElement: () => HTMLElement;
+  
+  /**
+   * Gets the leading container element
+   * @returns {HTMLElement} Leading container element
+   */
+  getLeadingContainer: () => HTMLElement;
+  
+  /**
+   * Gets the trailing container element
+   * @returns {HTMLElement} Trailing container element
+   */
+  getTrailingContainer: () => HTMLElement;
+}
+
+/**
+ * Creates a top app bar component
+ * 
+ * @param {TopAppBarConfig} config - Configuration options
+ * @returns {TopAppBar} Top app bar component instance
+ */
+export const createTopAppBar = (config: TopAppBarConfig = {}): TopAppBar => {
+  // Process configuration with defaults
+  const componentConfig = createConfig(config);
+  
+  // Create base component
+  const component = createBase(componentConfig);
+  
+  // Create containers for the top app bar structure
+  const createContainers = () => {
+    // Leading section container
+    const leadingContainer = document.createElement('div');
+    leadingContainer.className = `${component.getClass('top-app-bar')}-leading`;
+
+    // Headline element
+    const headlineElement = document.createElement('h1');
+    headlineElement.className = `${component.getClass('top-app-bar')}-headline`;
+    if (componentConfig.title) {
+      headlineElement.textContent = componentConfig.title;
+    }
+
+    // Trailing section container
+    const trailingContainer = document.createElement('div');
+    trailingContainer.className = `${component.getClass('top-app-bar')}-trailing`;
+    
+    return { leadingContainer, headlineElement, trailingContainer };
+  };
+  
+  // Create the main containers
+  const { leadingContainer, headlineElement, trailingContainer } = createContainers();
+  
+  // Determine initial classes based on type
+  const getInitialClasses = () => {
+    const classes = [componentConfig.class];
+    
+    // Add type class if not the default 'small' type
+    if (componentConfig.type !== 'small') {
+      classes.push(`${component.getClass('top-app-bar')}--${componentConfig.type}`);
+    }
+    
+    // Add compressible class if enabled and type is medium or large
+    if (componentConfig.compressible && 
+        (componentConfig.type === 'medium' || componentConfig.type === 'large')) {
+      classes.push(`${component.getClass('top-app-bar')}--compressible`);
+    }
+    
+    return classes.filter(Boolean);
+  };
+  
+  // Apply Element enhancer
+  const enhancedComponent = withElement({
+    tag: componentConfig.tag,
+    componentName: 'top-app-bar',
+    className: getInitialClasses(),
+    attrs: {
+      role: 'banner',
+      'aria-label': 'Top app bar'
+    },
+    interactive: true
+  })(component);
+  
+  // Apply events enhancer for component events
+  const withEventsComponent = withEvents()(enhancedComponent);
+  
+  // Apply lifecycle enhancer for cleanup
+  const withLifecycleComponent = withLifecycle()(withEventsComponent);
+  
+  // Create the DOM structure based on the type
+  const setupDomStructure = () => {
+    if (componentConfig.type === 'medium' || componentConfig.type === 'large') {
+      // For medium and large, create rows
+      const topRow = document.createElement('div');
+      topRow.className = `${component.getClass('top-app-bar')}-row`;
+      topRow.appendChild(leadingContainer);
+      topRow.appendChild(trailingContainer);
+      
+      const bottomRow = document.createElement('div');
+      bottomRow.className = `${component.getClass('top-app-bar')}-row`;
+      bottomRow.appendChild(headlineElement);
+      
+      withLifecycleComponent.element.appendChild(topRow);
+      withLifecycleComponent.element.appendChild(bottomRow);
+    } else {
+      // For small and center-aligned
+      withLifecycleComponent.element.appendChild(leadingContainer);
+      withLifecycleComponent.element.appendChild(headlineElement);
+      withLifecycleComponent.element.appendChild(trailingContainer);
+    }
+  };
+  
+  // Set up the initial DOM structure
+  setupDomStructure();
+  
+  // Track scrolled state
+  let isScrolled = false;
+  
+  // Handle scrolling behavior if enabled
+  if (componentConfig.scrollable) {
+    const handleScroll = () => {
+      const shouldBeScrolled = window.scrollY > componentConfig.scrollThreshold;
+      
+      if (isScrolled !== shouldBeScrolled) {
+        isScrolled = shouldBeScrolled;
+        
+        // Toggle scrolled class
+        if (isScrolled) {
+          withLifecycleComponent.element.classList.add(`${component.getClass('top-app-bar')}--scrolled`);
+        } else {
+          withLifecycleComponent.element.classList.remove(`${component.getClass('top-app-bar')}--scrolled`);
+        }
+        
+        // Call the onScroll callback if provided
+        componentConfig.onScroll?.(isScrolled);
+      }
+    };
+    
+    // Add scroll event listener
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    
+    // Initial check
+    handleScroll();
+    
+    // Clean up event listener on destroy
+    const originalDestroy = withLifecycleComponent.lifecycle.destroy;
+    withLifecycleComponent.lifecycle.destroy = () => {
+      window.removeEventListener('scroll', handleScroll);
+      originalDestroy();
+    };
+  }
+  
+  // Reorganize the DOM for the given type
+  const reorganizeDom = (type: TopAppBarType) => {
+    // Clear existing content
+    while (withLifecycleComponent.element.firstChild) {
+      withLifecycleComponent.element.removeChild(withLifecycleComponent.element.firstChild);
+    }
+    
+    // Update component type class
+    ['small', 'medium', 'large', 'center'].forEach(t => {
+      withLifecycleComponent.element.classList.remove(`${component.getClass('top-app-bar')}--${t}`);
+    });
+    
+    if (type !== 'small') {
+      withLifecycleComponent.element.classList.add(`${component.getClass('top-app-bar')}--${type}`);
+    }
+    
+    // Update compressible class
+    withLifecycleComponent.element.classList.toggle(
+      `${component.getClass('top-app-bar')}--compressible`,
+      componentConfig.compressible && (type === 'medium' || type === 'large')
+    );
+    
+    // Rebuild the DOM structure
+    if (type === 'medium' || type === 'large') {
+      // For medium and large, create rows
+      const topRow = document.createElement('div');
+      topRow.className = `${component.getClass('top-app-bar')}-row`;
+      topRow.appendChild(leadingContainer);
+      topRow.appendChild(trailingContainer);
+      
+      const bottomRow = document.createElement('div');
+      bottomRow.className = `${component.getClass('top-app-bar')}-row`;
+      bottomRow.appendChild(headlineElement);
+      
+      withLifecycleComponent.element.appendChild(topRow);
+      withLifecycleComponent.element.appendChild(bottomRow);
+    } else {
+      // For small and center-aligned
+      withLifecycleComponent.element.appendChild(leadingContainer);
+      withLifecycleComponent.element.appendChild(headlineElement);
+      withLifecycleComponent.element.appendChild(trailingContainer);
+    }
+  };
+  
+  // Create the top app bar interface
+  const topAppBar: TopAppBar = {
+    ...withLifecycleComponent,
+    
+    setTitle(title: string) {
+      headlineElement.textContent = title;
+      return this;
+    },
+    
+    getTitle() {
+      return headlineElement.textContent || '';
+    },
+    
+    addLeadingElement(element: HTMLElement) {
+      leadingContainer.appendChild(element);
+      return this;
+    },
+    
+    addTrailingElement(element: HTMLElement) {
+      trailingContainer.appendChild(element);
+      return this;
+    },
+    
+    setType(type: TopAppBarType) {
+      componentConfig.type = type;
+      reorganizeDom(type);
+      return this;
+    },
+    
+    setScrollState(scrolled: boolean) {
+      isScrolled = scrolled;
+      
+      if (scrolled) {
+        this.element.classList.add(`${component.getClass('top-app-bar')}--scrolled`);
+      } else {
+        this.element.classList.remove(`${component.getClass('top-app-bar')}--scrolled`);
+      }
+      
+      return this;
+    },
+    
+    getHeadlineElement() {
+      return headlineElement;
+    },
+    
+    getLeadingContainer() {
+      return leadingContainer;
+    },
+    
+    getTrailingContainer() {
+      return trailingContainer;
+    }
+  };
+  
+  return topAppBar;
+};