import { Component , EventEmitter , HostBinding , Input , Output } from '@angular/core' ; import { IconRegistryService } from '../icon/icon-registry.service' ; import { SegmentItem , SegmentItemInternal } from './segment-item' ; export enum SegmentedControlMode { chip = 'chip' , compactChip = 'compactChip' , default = 'default' } @ Component ( { selector : 'kirby-segmented-control' , templateUrl : './segmented-control.component.html' , styleUrls : [ './segmented-control.component.scss' ] , host : { role : 'group' } , } ) export class SegmentedControlComponent { constructor ( private iconRegistryService ) { } preventWrapperClick ( event ) { if ( event . target instanceof HTMLElement ) { if ( event . target . classList . contains ( 'segment-btn-wrapper' ) ) { event . stopImmediatePropagation ( ) ; } } } @ Input ( ) mode : SegmentedControlMode = SegmentedControlMode . default ; @ HostBinding ( 'class' ) get _modeCssClass ( ) { return { [ SegmentedControlMode . chip ] : 'chip-mode' , [ SegmentedControlMode . default ] : 'default-mode' , [ SegmentedControlMode . compactChip ] : 'compact chip-mode' , } [ this . mode ] ; } private _items : SegmentItemInternal [ ] = [ ] ; get items ( ) : SegmentItem [ ] { return this . _items ; } @ Input ( ) set items ( value ) { this . _items = value || [ ] ; this . _items . forEach ( ( item ) => { if ( ! item . badge ) return ; item . badge . isCustomIcon = item . badge . icon !== undefined && this . iconRegistryService . getIcon ( item . badge . icon ) !== undefined ; } ) ; const checkedItemIndex = this . items . findIndex ( ( item ) => item . checked ) ; if ( checkedItemIndex > - 1 ) { console . warn ( 'SegmentItem.checked is deprecated - please remove from your `items` configuration. Use `selectedIndex` or `value` on `<kirby-segmented-control>` instead ' ) ; this . _selectedIndex = checkedItemIndex ; } this . _value = this . items [ this . selectedIndex ] ; } private _selectedIndex : number = - 1 ; get selectedIndex ( ) : number { return this . _selectedIndex ; } @ Input ( ) set selectedIndex ( value ) { if ( value !== this . _selectedIndex ) { this . _selectedIndex = value ; this . _value = this . items [ this . selectedIndex ] ; } } private _value : SegmentItem ; get value ( ) : SegmentItem { return this . _value ; } @ Input ( ) set value ( value ) { this . selectedIndex = this . items . indexOf ( value ) ; } @ HostBinding ( 'class.sm' ) isSmallSize : boolean ; @ Input ( ) set size ( size ) { this . isSmallSize = size === 'sm' ; } @ Output ( ) segmentSelect : EventEmitter < SegmentItem > = new EventEmitter ( ) ; onSegmentSelect ( selectedId ) { const selectedItemIndex = this . items . findIndex ( ( item ) => selectedId === item . id ) ; if ( selectedItemIndex !== this . selectedIndex ) { this . selectedIndex = selectedItemIndex ; this . segmentSelect . emit ( this . value ) ; } } }