@taiga-ui/kit
Version:
Taiga UI Angular main components kit
16 lines (14 loc) • 12.2 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@taiga-ui/cdk"),require("rxjs"),require("rxjs/operators"),require("@taiga-ui/core"),require("@tinkoff/ng-polymorpheus"),require("@angular/common")):"function"==typeof define&&define.amd?define("@taiga-ui/kit/components/accordion",["exports","@angular/core","@taiga-ui/cdk","rxjs","rxjs/operators","@taiga-ui/core","@tinkoff/ng-polymorpheus","@angular/common"],e):e(((t=t||self)["taiga-ui"]=t["taiga-ui"]||{},t["taiga-ui"].kit=t["taiga-ui"].kit||{},t["taiga-ui"].kit.components=t["taiga-ui"].kit.components||{},t["taiga-ui"].kit.components.accordion={}),t.ng.core,t.cdk,t.rxjs,t.rxjs.operators,t.core$1,t.ngPolymorpheus,t.ng.common)}(this,(function(t,e,o,r,n,i,a,s){"use strict";
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */var d=function(t,e){return(d=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)e.hasOwnProperty(o)&&(t[o]=e[o])})(t,e)};function u(t,e){function o(){this.constructor=t}d(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)}function c(t,e,o,r){var n,i=arguments.length,a=i<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,r);else for(var s=t.length-1;s>=0;s--)(n=t[s])&&(a=(i<3?n(a):i>3?n(e,o,a):n(e,o))||a);return i>3&&a&&Object.defineProperty(e,o,a),a}function p(t,e){return function(o,r){e(o,r,t)}}function l(t,e){var o="function"==typeof Symbol&&t[Symbol.iterator];if(!o)return t;var r,n,i=o.call(t),a=[];try{for(;(void 0===e||e-- >0)&&!(r=i.next()).done;)a.push(r.value)}catch(t){n={error:t}}finally{try{r&&!r.done&&(o=i.return)&&o.call(i)}finally{if(n)throw n.error}}return a}var h=function(t){function o(e,o){return t.call(this,e,o)||this}return u(o,t),o.ctorParameters=function(){return[{type:e.TemplateRef,decorators:[{type:e.Inject,args:[e.TemplateRef]},{type:e.Self}]},{type:e.ChangeDetectorRef,decorators:[{type:e.Inject,args:[e.ChangeDetectorRef]}]}]},o=c([e.Directive({selector:"[tuiAccordionItemContent]"}),p(0,e.Inject(e.TemplateRef)),p(0,e.Self()),p(1,e.Inject(e.ChangeDetectorRef))],o)}(a.PolymorpheusTemplate),f=function(t){function n(o,r){var n=t.call(this)||this;return n.changeDetectorRef=o,n.mode$=r,n.noPadding=!1,n.showArrow=!0,n.borders="all",n.size="m",n.disabled=!1,n.disableHover=!1,n.open=!1,n.async=!1,n.openChange=new e.EventEmitter,n}var a;return u(n,t),a=n,Object.defineProperty(n.prototype,"nativeFocusableElement",{get:function(){return this.disabled||!this.focusableElement?null:this.focusableElement.nativeElement},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"focused",{get:function(){return o.isNativeFocused(this.nativeFocusableElement)},enumerable:!0,configurable:!0}),n.prototype.onHovered=function(t){this.disableHover||this.updateHovered(t)},n.prototype.onFocused=function(t){this.updateFocused(t)},n.prototype.onFocusVisible=function(t){this.updateFocusVisible(t)},n.prototype.onRowToggle=function(){this.disabled||this.updateOpen(!this.open)},n.prototype.onItemKeyDownEsc=function(t){this.focused&&this.open&&(t.stopPropagation(),this.updateOpen(!1))},n.prototype.onItemKeyDownSpace=function(t){this.focused&&(t.preventDefault(),this.onRowToggle())},n.prototype.close=function(){this.updateOpen(!1),this.changeDetectorRef.markForCheck()},n.prototype.updateOpen=function(t){this.open!==t&&(this.open=t,this.openChange.emit(t))},n.ctorParameters=function(){return[{type:e.ChangeDetectorRef,decorators:[{type:e.Inject,args:[e.ChangeDetectorRef]}]},{type:r.Observable,decorators:[{type:e.Inject,args:[i.TUI_MODE]}]}]},c([e.Input(),e.HostBinding("class._no-padding"),o.tuiDefaultProp()],n.prototype,"noPadding",void 0),c([e.Input(),e.HostBinding("class._has-arrow"),o.tuiDefaultProp()],n.prototype,"showArrow",void 0),c([e.Input(),e.HostBinding("attr.data-tui-host-borders"),o.tuiDefaultProp()],n.prototype,"borders",void 0),c([e.Input(),e.HostBinding("attr.data-tui-host-size"),o.tuiDefaultProp()],n.prototype,"size",void 0),c([e.Input(),e.HostBinding("class._disabled"),o.tuiDefaultProp()],n.prototype,"disabled",void 0),c([e.Input(),o.tuiDefaultProp()],n.prototype,"disableHover",void 0),c([e.Input(),o.tuiDefaultProp()],n.prototype,"open",void 0),c([e.Input(),o.tuiDefaultProp()],n.prototype,"async",void 0),c([e.Output()],n.prototype,"openChange",void 0),c([e.ContentChild(h)],n.prototype,"content",void 0),c([e.ViewChild("focusableElement")],n.prototype,"focusableElement",void 0),n=a=c([e.Component({selector:"tui-accordion-item",template:'<div\n #focusableElement\n automation-id="tui-accordion__item-wrapper"\n class="wrapper"\n [tuiFocusable]="computedFocusable"\n (tuiFocusVisibleChange)="onFocusVisible($event)"\n (tuiFocusedChange)="onFocused($event)"\n (keydown.space)="onItemKeyDownSpace($event)"\n (keydown.enter)="onItemKeyDownSpace($event)"\n (keydown.esc)="onItemKeyDownEsc($event)"\n>\n <div\n automation-id="tui-accordion__item-header"\n class="header"\n [class.header_open]="open"\n (tuiHoveredChange)="onHovered($event)"\n (click)="onRowToggle()"\n >\n <div class="title" automation-id="tui-accordion__item-title">\n <ng-content></ng-content>\n </div>\n <tui-svg\n *ngIf="showArrow"\n automation-id="tui-accordion__item-arrow"\n class="icon"\n src="tuiIconChevronDownLarge"\n [class.icon_open]="open"\n ></tui-svg>\n </div>\n <tui-expand [async]="async" [expanded]="open">\n <ng-template tuiExpandContent>\n <div\n polymorpheus-outlet\n automation-id="tui-accordion__item-content"\n class="content"\n [content]="content"\n ></div>\n </ng-template>\n </tui-expand>\n</div>\n',changeDetection:e.ChangeDetectionStrategy.OnPush,providers:[{provide:o.TUI_FOCUSABLE_ITEM_ACCESSOR,useExisting:e.forwardRef((function(){return a}))},i.MODE_PROVIDER],host:{"($.data-mode.attr)":"mode$"},styles:[":host{position:relative;display:block;overflow:hidden;border-radius:var(--tui-radius-l)}:host[data-tui-host-borders=top-bottom]{border-radius:0!important}.wrapper{position:relative;border-radius:inherit}.wrapper:focus{outline:0}.wrapper:after{position:absolute;top:0;left:0;width:100%;height:100%;content:'';box-sizing:border-box;border-radius:inherit;border:1px solid var(--tui-base-04);pointer-events:none}:host:not([data-tui-host-borders]) .wrapper:after{border-width:0}:host[data-tui-host-borders=all] .wrapper:after{border-width:1px}:host[data-tui-host-borders=top-bottom] .wrapper:after{border-left-width:0;border-right-width:0}:host[data-tui-host-borders=top] .wrapper:after{border-left-width:0;border-right-width:0;border-bottom-width:0}:host[data-tui-host-borders=bottom] .wrapper:after{border-left-width:0;border-right-width:0;border-top-width:0}:host[data-mode=onDark] .wrapper:after{border-color:var(--tui-base-03)}:host[data-mode=onLight] .wrapper:after{border-color:var(--tui-text-01)}:host._focus-visible .wrapper:after{border:2px solid var(--tui-focus)}:host:not([data-mode]) .wrapper{background:var(--tui-base-01)}.header{font:var(--tui-font-text-l);transition-property:background;transition-duration:.3s;transition-timing-function:ease-in-out;display:flex;align-items:center;box-sizing:border-box;border-bottom:1px solid var(--tui-base-04);min-height:var(--tui-height-l);padding:12px 20px;color:var(--tui-text-01);cursor:pointer}:host[data-mode=onDark] .header{color:var(--tui-text-01-night);border-color:var(--tui-base-03)}:host[data-mode=onLight] .header{border-color:var(--tui-text-01)}:host:not([data-tui-host-borders]) .header{border-bottom-width:0;box-shadow:none}:host._has-arrow .header{padding-right:12px}:host._hovered:not([data-mode]) .header{background:var(--tui-base-02)}:host._hovered[data-mode=onDark] .header,:host[data-mode=onDark] .header_open{background:var(--tui-clear-inverse)}:host._hovered[data-mode=onLight] .header,:host[data-mode=onLight] .header_open{background:var(--tui-clear)}:host[data-tui-host-size='s'] .header{font:var(--tui-font-text-m);min-height:var(--tui-height-m);padding:10px 12px 10px 16px}:host._no-padding .header{padding-left:0;padding-right:0}:host._disabled .header{cursor:default}.title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:0;flex-grow:1}:host._has-arrow .title{margin-right:8px}.icon{transition-property:transform,color;transition-duration:.3s;transition-timing-function:ease-in-out;width:24px;height:24px;margin-left:auto;color:var(--tui-base-06)}.icon_open{transform:rotate(180deg)}:host[data-mode] .icon{opacity:var(--tui-disabled-opacity)}:host._hovered[data-mode] .icon{opacity:.8}:host[data-mode=onDark] .icon{color:var(--tui-text-01-night)}:host[data-mode=onLight] .icon{color:var(--tui-text-01)}:host._hovered:not([data-mode]) .icon{color:var(--tui-base-07)}.content{font:var(--tui-font-text-m);padding:20px;word-wrap:break-word}:host[data-tui-host-size='s'] .content{font:var(--tui-font-text-s);padding:16px}"]}),p(0,e.Inject(e.ChangeDetectorRef)),p(1,e.Inject(i.TUI_MODE))],n)}(o.AbstractTuiInteractive),g=function(){function t(t){this.destroy$=t,this.closeOthers=!0,this.rounded=!0,this.accordionItems=o.EMPTY_QUERY}return t.prototype.ngAfterContentInit=function(){var t=this,e=this.accordionItems,i=o.itemsQueryListObservable(e),a=i.pipe(n.pairwise(),n.map((function(t){var e=l(t,2),o=e[0];return e[1].find((function(t){return-1===o.indexOf(t)&&t.open}))})),n.filter(o.isPresent));r.merge(i.pipe(n.switchMap((function(t){return r.merge.apply(void 0,function(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(l(arguments[e]));return t}(t.map((function(t){return t.openChange.pipe(n.filter(o.identity),n.mapTo(t))}))))}))),a).pipe(n.filter((function(){return t.closeOthers})),n.takeUntil(this.destroy$)).subscribe((function(t){e.forEach((function(e){t!==e&&e.close()}))}))},t.ctorParameters=function(){return[{type:o.TuiDestroyService,decorators:[{type:e.Inject,args:[o.TuiDestroyService]}]}]},c([e.Input(),o.tuiDefaultProp()],t.prototype,"closeOthers",void 0),c([e.Input(),o.tuiDefaultProp()],t.prototype,"rounded",void 0),c([e.ContentChildren(f)],t.prototype,"accordionItems",void 0),t=c([e.Component({selector:"tui-accordion",template:'\x3c!--TODO: Unnecessary nesting, probably accordion can be a directive--\x3e\n<div\n tuiGroup\n automation-id="tui-accordion__group"\n class="group"\n orientation="vertical"\n size="l"\n [collapsed]="true"\n [rounded]="rounded"\n>\n <ng-content select="tui-accordion-item"></ng-content>\n</div>\n',changeDetection:e.ChangeDetectionStrategy.OnPush,providers:[o.TuiDestroyService],styles:[":host{display:block}.group{display:flex}"]}),p(0,e.Inject(o.TuiDestroyService))],t)}(),m=function(){function t(){}return t=c([e.NgModule({imports:[s.CommonModule,o.TuiFocusedModule,o.TuiFocusVisibleModule,o.TuiFocusableModule,o.TuiHoveredModule,a.PolymorpheusModule,i.TuiSvgModule,i.TuiGroupModule,i.TuiExpandModule],declarations:[g,f,h],exports:[g,f,h]})],t)}();t.TuiAccordionComponent=g,t.TuiAccordionItemComponent=f,t.TuiAccordionItemContentDirective=h,t.TuiAccordionModule=m,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=taiga-ui-kit-components-accordion.umd.min.js.map