@angular-mdc/web
Version:
22 lines (20 loc) • 21.2 kB
JavaScript
/**
* @license
* Copyright (c) Dominic Carretto
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/trimox/angular-mdc-web/blob/master/LICENSE
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular-mdc/web/icon"),require("@angular/cdk/coercion"),require("@angular/cdk/platform"),require("rxjs"),require("rxjs/operators"),require("@material/ripple"),require("@angular-mdc/web/base"),require("@angular-mdc/web/ripple"),require("@material/chips"),require("@angular/forms")):"function"==typeof define&&define.amd?define("@angular-mdc/web/chips",["exports","@angular/core","@angular/common","@angular-mdc/web/icon","@angular/cdk/coercion","@angular/cdk/platform","rxjs","rxjs/operators","@material/ripple","@angular-mdc/web/base","@angular-mdc/web/ripple","@material/chips","@angular/forms"],t):t(((e=e||self).ng=e.ng||{},e.ng.web=e.ng.web||{},e.ng.web.chips={}),e.ng.core,e.ng.common,e.ng.web.icon,e.ng.cdk.coercion,e.ng.cdk.platform,e.rxjs,e.rxjs.operators,e.mdc.ripple,e.ng.web.base,e.ng.web.ripple,e.mdc.chips,e.ng.forms)}(this,(function(e,t,n,i,o,r,c,a,u,p,s,l,h){"use strict";
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */var d=function(e,t){return(d=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function f(e,t){function n(){this.constructor=e}d(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var g=function(){return(g=Object.assign||function(e){for(var t,n=1,i=arguments.length;n<i;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)},m=function(){function e(e){this.elementRef=e,this.role="button",this.tabIndex=null,this._root=this.elementRef.nativeElement}return e.decorators=[{type:t.Directive,args:[{selector:"mdc-chip-primary-action, [mdcChipPrimaryAction]",host:{"[attr.role]":"role","[attr.tabindex]":"tabIndex",class:"mdc-chip__action--primary"}}]}],e.ctorParameters=function(){return[{type:t.ElementRef}]},e.propDecorators={role:[{type:t.Input}],tabIndex:[{type:t.Input}]},e}(),y=function(){function e(){}return e.decorators=[{type:t.Directive,args:[{selector:"mdc-chip-text, [mdcChipText]",host:{class:"mdc-chip__text"}}]}],e}(),_=new t.InjectionToken("MDC_CHIPSET_PARENT_COMPONENT"),v=0,b=function(){function e(e){this.elementRef=e}return e.decorators=[{type:t.Component,args:[{selector:"mdc-chip-checkmark",exportAs:"mdcChipCheckmark",host:{class:"mdc-chip__checkmark"},template:'\n <svg class="mdc-chip__checkmark-svg"\n viewBox="-2 -3 30 30"\n focusable="false">\n <path class="mdc-chip__checkmark-path" fill="none" stroke="black" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>\n </svg>',encapsulation:t.ViewEncapsulation.None,changeDetection:t.ChangeDetectionStrategy.OnPush}]}],e.ctorParameters=function(){return[{type:t.ElementRef}]},e}(),C=function(e){function n(n,i,o,r,a,u){var p=e.call(this,a)||this;return p._platform=n,p._ngZone=i,p._changeDetectorRef=o,p._ripple=r,p.elementRef=a,p._parent=u,p._destroyed=new c.Subject,p._id="mdc-chip-"+v++,p._filter=!1,p._choice=!1,p._input=!1,p._removable=!0,p._touch=!1,p._disableRipple=!1,p.interactionEvent=new t.EventEmitter,p.selectionChange=new t.EventEmitter,p.navigationEvent=new t.EventEmitter,p.trailingIconInteraction=new t.EventEmitter,p.removalEvent=new t.EventEmitter,p._root=p.elementRef.nativeElement,p._ripple=p._createRipple(),p._ripple.init(),p}return f(n,e),Object.defineProperty(n.prototype,"id",{get:function(){return this._id},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"leadingIcon",{get:function(){return this._icons.find((function(e){return e.leading}))},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"trailingIcon",{get:function(){return this._icons.find((function(e){return e.trailing}))},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"filter",{get:function(){return this._filter},set:function(e){var t=o.coerceBooleanProperty(e);t!==this._filter&&(this._filter=t)},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"choice",{get:function(){return this._choice},set:function(e){this._choice=o.coerceBooleanProperty(e)},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"input",{get:function(){return this._input},set:function(e){this._input=o.coerceBooleanProperty(e)},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"removable",{get:function(){return this._removable},set:function(e){o.coerceBooleanProperty(e)!==this._removable&&(this._removable=e,this._foundation.setShouldRemoveOnTrailingIconClick(this._removable))},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"touch",{get:function(){return this._touch},set:function(e){this._touch=o.coerceBooleanProperty(e)},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"disableRipple",{get:function(){return this._disableRipple},set:function(e){this._disableRipple=o.coerceBooleanProperty(e)},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"value",{get:function(){var e,t;return null!=(t=null!=(e=this._value)?e:this._root.textContent)?t:void 0},set:function(e){this._value=e},enumerable:!0,configurable:!0}),n.prototype.getDefaultFoundation=function(){var e=this,t={addClass:function(t){return e._root.classList.add(t)},removeClass:function(t){return e._root.classList.remove(t)},hasClass:function(t){return e._root.classList.contains(t)},addClassToLeadingIcon:function(t){var n,i,o,r;return null===(r=null===(o=null===(i=null===(n=e.leadingIcon)||void 0===n?void 0:n.elementRef)||void 0===i?void 0:i.nativeElement)||void 0===o?void 0:o.classList)||void 0===r?void 0:r.add(t)},removeClassFromLeadingIcon:function(t){var n,i,o,r;return null===(r=null===(o=null===(i=null===(n=e.leadingIcon)||void 0===n?void 0:n.elementRef)||void 0===i?void 0:i.nativeElement)||void 0===o?void 0:o.classList)||void 0===r?void 0:r.remove(t)},eventTargetHasClass:function(e,t){return!(!e||!e.classList)&&e.classList.contains(t)},focusPrimaryAction:function(){return e._primaryAction._root.focus()},focusTrailingAction:function(){var t,n,i;return null===(i=null===(n=null===(t=e.trailingIcon)||void 0===t?void 0:t.elementRef)||void 0===n?void 0:n.nativeElement)||void 0===i?void 0:i.focus()},notifyInteraction:function(){return e.interactionEvent.emit({chipId:e._id,value:e._value})},notifySelection:function(t,n){return e.selectionChange.emit({chipId:e._id,selected:t,value:t?e._value:void 0,shouldIgnore:n})},notifyNavigation:function(t,n){return e.navigationEvent.emit({chipId:e.id,value:e._value,key:t,source:n})},notifyTrailingIconInteraction:function(){return e.trailingIconInteraction.emit({chipId:e.id,value:e._value})},notifyRemoval:function(){return e.removalEvent.emit({chipId:e.id,value:e._value,removedAnnouncement:null})},getComputedStyleValue:function(t){return e._platform.isBrowser?window.getComputedStyle(e._root).getPropertyValue(t):""},setStyleProperty:function(t,n){return e._root.style.setProperty(t,n)},setTrailingActionAttr:function(t,n){var i,o,r;return null===(r=null===(o=null===(i=e.trailingIcon)||void 0===i?void 0:i.elementRef)||void 0===o?void 0:o.nativeElement)||void 0===r?void 0:r.setAttribute(t,n)},hasLeadingIcon:function(){return!!e.leadingIcon},hasTrailingAction:function(){return!!e.trailingIcon},setPrimaryActionAttr:function(t,n){return e._primaryAction._root.setAttribute(t,n)},getRootBoundingClientRect:function(){return e._root.getBoundingClientRect()},getCheckmarkBoundingClientRect:function(){var t,n,i,o;return null!=(o=null===(i=null===(n=null===(t=e._checkmark)||void 0===t?void 0:t.elementRef)||void 0===n?void 0:n.nativeElement)||void 0===i?void 0:i.getBoundingClientRect())?o:null},isRTL:function(){return"undefined"!=typeof window&&"rtl"===window.getComputedStyle(e._root).getPropertyValue("direction")},getAttribute:function(t){return e._root.getAttribute(t)}};return new l.MDCChipFoundation(t)},n.prototype.ngAfterViewInit=function(){this._foundation.init(),this._setVariantFromChipSet(),this._loadListeners()},n.prototype.ngOnDestroy=function(){var e,t;this._destroyed.next(),this._destroyed.complete(),null===(e=this._ripple)||void 0===e||e.destroy(),null===(t=this._foundation)||void 0===t||t.destroy()},n.prototype.setSelectedFromChipSet=function(e,t){this._foundation.setSelectedFromChipSet(e,t)},n.prototype.focus=function(){this.focusPrimaryAction()},n.prototype.focusPrimaryAction=function(){this._foundation.focusPrimaryAction()},n.prototype.focusTrailingAction=function(){this._foundation.focusTrailingAction()},n.prototype.removeFocus=function(){this._foundation.removeFocus()},n.prototype.remove=function(){this.removable&&this._foundation.beginExit()},n.prototype._handleInteraction=function(e){this._foundation.handleInteraction(e)},n.prototype._onKeydown=function(e){this._foundation.handleInteraction(e),this._foundation.handleKeydown(e)},n.prototype._handleTrailingIconInteraction=function(e){this._foundation.handleTrailingIconInteraction(e)},n.prototype._createRipple=function(){var e=this,t=g(g({},s.MdcRipple.createAdapter(this)),{computeBoundingRect:function(){return e._foundation.getDimensions()},isSurfaceDisabled:function(){return e._disableRipple}});return new s.MdcRipple(this.elementRef,new u.MDCRippleFoundation(t))},n.prototype._setVariantFromChipSet=function(){this._parent&&(this.input=this._parent.input,this.filter=this._parent.filter,this.choice=this._parent.choice,this._changeDetectorRef.detectChanges())},n.prototype._loadListeners=function(){var e=this;this._ngZone.runOutsideAngular((function(){return c.fromEvent(e._root,"transitionend").pipe(a.takeUntil(e._destroyed)).subscribe((function(t){return e._ngZone.run((function(){return e._foundation.handleTransitionEnd(t)}))}))}))},n.decorators=[{type:t.Component,args:[{selector:"mdc-chip",exportAs:"mdcChip",host:{"[id]":"id",role:"row",class:"mdc-chip","[class.mdc-chip--selected]":"selected","[class.mdc-chip--touch]":"touch","(click)":"_handleInteraction($event)","(keydown)":"_onKeydown($event)"},template:'\n <div class="mdc-chip__ripple"></div>\n <ng-content select="mdc-chip-icon[leading]"></ng-content>\n <mdc-chip-checkmark *ngIf="filter"></mdc-chip-checkmark>\n <span role="gridcell">\n <mdc-chip-primary-action>\n <div class="mdc-chip__touch" *ngIf="touch"></div>\n <mdc-chip-text *ngIf="label">{{label}}</mdc-chip-text>\n <ng-content></ng-content>\n </mdc-chip-primary-action>\n </span>\n <span role="gridcell" *ngIf="!!trailingIcon">\n <ng-content select="mdc-chip-icon[trailing]"></ng-content>\n </span>\n ',encapsulation:t.ViewEncapsulation.None,changeDetection:t.ChangeDetectionStrategy.OnPush,providers:[s.MdcRipple]}]}],n.ctorParameters=function(){return[{type:r.Platform},{type:t.NgZone},{type:t.ChangeDetectorRef},{type:s.MdcRipple},{type:t.ElementRef},{type:void 0,decorators:[{type:t.Optional},{type:t.Inject,args:[_]}]}]},n.propDecorators={selected:[{type:t.Input}],label:[{type:t.Input}],filter:[{type:t.Input}],choice:[{type:t.Input}],input:[{type:t.Input}],removable:[{type:t.Input}],touch:[{type:t.Input}],disableRipple:[{type:t.Input}],value:[{type:t.Input}],interactionEvent:[{type:t.Output}],selectionChange:[{type:t.Output}],navigationEvent:[{type:t.Output}],trailingIconInteraction:[{type:t.Output}],removalEvent:[{type:t.Output}],_checkmark:[{type:t.ContentChild,args:[b,{static:!1}]}],_icons:[{type:t.ContentChildren,args:[t.forwardRef((function(){return I})),{descendants:!0}]}],_primaryAction:[{type:t.ViewChild,args:[m,{static:!0}]}],_chipText:[{type:t.ViewChild,args:[y,{static:!0}]}]},n}(p.MDCComponent),I=function(e){function n(t,n,i,o,r){var c=e.call(this,n,i,o,r)||this;return c._parentChip=t,c._leading=!1,c._trailing=!1,c}return f(n,e),Object.defineProperty(n.prototype,"leading",{get:function(){return this._leading},set:function(e){this._leading=o.coerceBooleanProperty(e)},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"trailing",{get:function(){return this._trailing},set:function(e){this._trailing=o.coerceBooleanProperty(e)},enumerable:!0,configurable:!0}),n.prototype._onIconInteraction=function(e){this.trailing&&this._parentChip._handleTrailingIconInteraction(e)},n.decorators=[{type:t.Component,args:[{selector:"mdc-chip-icon, [mdcChipIcon]",exportAs:"mdcChipIcon",host:{class:"mdc-chip__icon ngx-mdc-icon","[attr.role]":'trailing ? "button" : "img"',"[attr.tabindex]":"trailing ? 1 : -1","[class.mdc-chip__icon--leading]":"leading","[class.mdc-chip__icon--trailing]":"trailing","[class.mdc-chip__trailing-action]":"trailing","(click)":"_onIconInteraction($event)","(keydown)":"_onIconInteraction($event)"},template:"<ng-content></ng-content>",encapsulation:t.ViewEncapsulation.None,changeDetection:t.ChangeDetectionStrategy.OnPush}]}],n.ctorParameters=function(){return[{type:C},{type:t.ElementRef},{type:i.MdcIconRegistry},{type:String,decorators:[{type:t.Attribute,args:["aria-hidden"]}]},{type:void 0,decorators:[{type:t.Inject,args:[i.MDC_ICON_LOCATION]}]}]},n.propDecorators={leading:[{type:t.Input}],trailing:[{type:t.Input}]},n}(i.MdcIcon),P=function(e,t){this.source=e,this.value=t},R=function(e){function n(n,i,o,r,a){var u=e.call(this,i)||this;return u._changeDetectorRef=n,u.elementRef=i,u.ngControl=a,u._destroyed=new c.Subject,u._choice=!1,u._filter=!1,u._input=!1,u._compareWith=function(e,t){return e===t},u.change=new t.EventEmitter,u.interaction=new t.EventEmitter,u._onTouched=function(){},u._onChange=function(){},u._chipSelectionSubscription=null,u._chipRemovalSubscription=null,u._chipInteractionSubscription=null,u._navigationSubscription=null,u.ngControl&&(u.ngControl.valueAccessor=u),u}return f(n,e),Object.defineProperty(n.prototype,"choice",{get:function(){return this._choice},set:function(e){this._choice=o.coerceBooleanProperty(e)},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"filter",{get:function(){return this._filter},set:function(e){this._filter=o.coerceBooleanProperty(e)},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"input",{get:function(){return this._input},set:function(e){this._input=o.coerceBooleanProperty(e)},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"value",{get:function(){return this._value},set:function(e){this._value=e,this.writeValue(e)},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"chipSelections",{get:function(){return c.merge.apply(void 0,this.chips.map((function(e){return e.selectionChange})))},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"chipInteractions",{get:function(){return c.merge.apply(void 0,this.chips.map((function(e){return e.interactionEvent})))},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"chipRemovalChanges",{get:function(){return c.merge.apply(void 0,this.chips.map((function(e){return e.removalEvent})))},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"chipNavigations",{get:function(){return c.merge.apply(void 0,this.chips.map((function(e){return e.navigationEvent})))},enumerable:!0,configurable:!0}),n.prototype.getDefaultFoundation=function(){var e=this,t={hasClass:function(t){return e._getHostElement().classList.contains(t)},focusChipPrimaryActionAtIndex:function(t){return e.chips.toArray()[t].focusPrimaryAction()},focusChipTrailingActionAtIndex:function(t){return e.chips.toArray()[t].focusTrailingAction()},getChipListCount:function(){return e.chips.length},getIndexOfChipById:function(t){return e._findChipIndex(t)},removeChipAtIndex:function(t){t>=0&&t<e.chips.length&&(e.chips.toArray()[t].destroy(),e.chips.toArray()[t].remove(),e.chips.toArray().splice(t,1))},removeFocusFromChipAtIndex:function(t){return e.chips.toArray()[t].removeFocus()},selectChipAtIndex:function(t,n,i){t>=0&&t<e.chips.length&&e.chips.toArray()[t].setSelectedFromChipSet(n,i)},announceMessage:function(){},isRTL:function(){return"undefined"!=typeof window&&"rtl"===window.getComputedStyle(e._getHostElement()).getPropertyValue("direction")}};return new l.MDCChipSetFoundation(t)},n.prototype.ngAfterContentInit=function(){var e=this;this.chips.changes.pipe(a.startWith(null),a.takeUntil(this._destroyed)).subscribe((function(){e._resetChipSet(),e.chips.length>=0&&e._initializeSelection()}))},n.prototype.ngOnDestroy=function(){var e,t;this._destroyed.next(),this._destroyed.complete(),this._dropSubscriptions(),null===(e=this._chipRemovalSubscription)||void 0===e||e.unsubscribe(),null===(t=this._foundation)||void 0===t||t.destroy()},n.prototype.writeValue=function(e){this.selectByValue(e,!0)},n.prototype.registerOnChange=function(e){this._onChange=e},n.prototype.registerOnTouched=function(e){this._onTouched=e},n.prototype.getSelectedChipIds=function(){return this._foundation.getSelectedChipIds()},n.prototype.select=function(e){this._foundation.select(e)},n.prototype.selectByValue=function(e,t){var n=this;void 0===t&&(t=!0),this.chips&&(Array.isArray(e)?e.forEach((function(e){return n._selectValue(e,t)})):this._selectValue(e,t),this._value=e)},n.prototype._selectValue=function(e,t){var n=this;void 0===t&&(t=!0);var i=this.chips.find((function(t){return null!=t.value&&n._compareWith(t.value,e)}));return i&&(this.choice?this.select(i.id):i.setSelectedFromChipSet(!0,t)),i},n.prototype._initializeSelection=function(){var e=this;Promise.resolve().then((function(){var t,n;(e.ngControl||e._value)&&e.selectByValue(null!=(n=null===(t=e.ngControl)||void 0===t?void 0:t.value)?n:e._value,!1)}))},n.prototype._propagateChanges=function(e){this._value=e.value,this.change.emit(new P(this,e)),this._onChange(this._value),this._changeDetectorRef.markForCheck()},n.prototype._findChipIndex=function(e){return this.chips.toArray().findIndex((function(t){return t.id===e}))},n.prototype._resetChipSet=function(){this._dropSubscriptions(),this._listenToChipEvents()},n.prototype._dropSubscriptions=function(){var e,t,n,i;null===(e=this._chipSelectionSubscription)||void 0===e||e.unsubscribe(),null===(t=this._chipInteractionSubscription)||void 0===t||t.unsubscribe(),null===(n=this._chipRemovalSubscription)||void 0===n||n.unsubscribe(),null===(i=this._navigationSubscription)||void 0===i||i.unsubscribe()},n.prototype._listenToChipEvents=function(){var e=this;this._chipSelectionSubscription=this.chipSelections.subscribe((function(t){e._foundation.handleChipSelection(t),e._propagateChanges(t)})),this._chipInteractionSubscription=this.chipInteractions.subscribe((function(t){e._foundation.handleChipInteraction(t),e.interaction.emit(t)})),this._chipRemovalSubscription=this.chipRemovalChanges.subscribe((function(t){return e._foundation.handleChipRemoval(t)})),this._navigationSubscription=this.chipNavigations.subscribe((function(t){return e._foundation.handleChipNavigation(t)}))},n.prototype._getHostElement=function(){return this.elementRef.nativeElement},n.decorators=[{type:t.Component,args:[{selector:"mdc-chip-set",exportAs:"mdcChipSet",host:{role:"grid",class:"mdc-chip-set","[class.mdc-chip-set--choice]":"choice","[class.mdc-chip-set--filter]":"filter","[class.mdc-chip-set--input]":"input"},template:"<ng-content></ng-content>",encapsulation:t.ViewEncapsulation.None,changeDetection:t.ChangeDetectionStrategy.OnPush,providers:[{provide:_,useExisting:n}]}]}],n.ctorParameters=function(){return[{type:t.ChangeDetectorRef},{type:t.ElementRef},{type:h.NgForm,decorators:[{type:t.Optional}]},{type:h.FormGroupDirective,decorators:[{type:t.Optional}]},{type:h.NgControl,decorators:[{type:t.Optional}]}]},n.propDecorators={choice:[{type:t.Input}],filter:[{type:t.Input}],input:[{type:t.Input}],value:[{type:t.Input}],change:[{type:t.Output}],interaction:[{type:t.Output}],chips:[{type:t.ContentChildren,args:[C,{descendants:!0}]}]},n}(p.MDCComponent),E=[C,b,I,m,R,y],A=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,i.MdcIconModule],exports:E,declarations:E}]}],e}(),O={PRIMARY:0,TRAILING:1,NONE:2};O[O.PRIMARY]="PRIMARY",O[O.TRAILING]="TRAILING",O[O.NONE]="NONE",e.CHIP_DECLARATIONS=E,e.EventSource=O,e.MDC_CHIPSET_PARENT_COMPONENT=_,e.MdcChip=C,e.MdcChipCheckmark=b,e.MdcChipIcon=I,e.MdcChipPrimaryAction=m,e.MdcChipSet=R,e.MdcChipSetChange=P,e.MdcChipText=y,e.MdcChipsModule=A,Object.defineProperty(e,"__esModule",{value:!0})}));