import{d as E,e as P,f as x,h as S}from"./chunk-BSKAUI5Z.js";import"./chunk-XBWK6N22.js";import"./chunk-FWUATYXH.js";import{Db as t,Eb as n,Fb as g,Lb as s,Mb as _,Ra as l,Wb as i,Xb as m,Yb as T,db as C,hb as f,ja as v,jb as V,ub as d,wb as c,xb as A,zb as b}from"./chunk-RRDRU3JK.js";import"./chunk-PQL5MQVP.js";import"./chunk-4CLCTAJ7.js";function h(a,u){if(a&1&&(t(0,"as-split-area",4)(1,"p"),i(2,"A"),n()()),a&2){let o=_();d("visible",o.action.isVisibleA)}}function B(a,u){if(a&1&&(t(0,"as-split-area",4)(1,"p"),i(2,"B"),n()()),a&2){let o=_();d("visible",o.action.isVisibleB)}}function y(a,u){if(a&1&&(t(0,"as-split-area",4)(1,"p"),i(2,"C"),n()()),a&2){let o=_();d("visible",o.action.isVisibleC)}}var F=(()=>{class a extends S{constructor(){super(...arguments),this.class="split-example-page",this.action={isVisibleA:!0,isVisibleB:!0,isVisibleC:!0,isPresentA:!0,isPresentB:!0,isPresentC:!0,logs:""}}log(o,r){this.action.logs=`${new Date}: ${o} > ${r}

${this.action.logs}`}static{this.\u0275fac=(()=>{let o;return function(e){return(o||(o=v(a)))(e||a)}})()}static{this.\u0275cmp=C({type:a,selectors:[["sp-ex-toggling-dom-and-visible"]],hostVars:2,hostBindings:function(r,e){r&2&&A(e.class)},features:[f],decls:47,vars:24,consts:[[1,"container"],[3,"type"],[1,"split-example","ex1",2,"height","150px"],[3,"dragEnd","gutterSize"],[3,"visible"],[1,"btns"],[1,"btn-group"],[1,"btn","btn-warning",3,"click"],["role","alert",1,"alert","alert-danger"]],template:function(r,e){r&1&&(i(0),t(1,"div",0),g(2,"sp-example-title",1),t(3,"div",2)(4,"as-split",3),s("dragEnd",function(D){return e.log("dragEnd",D)}),V(5,h,3,1,"as-split-area",4)(6,B,3,1,"as-split-area",4)(7,y,3,1,"as-split-area",4),n()(),t(8,"p"),i(9,"Toggle "),t(10,"code"),i(11,'[visible]="boolean"'),n(),i(12," properties:"),n(),t(13,"div",5)(14,"div",6)(15,"label",7),s("click",function(){return e.action.isVisibleA=!e.action.isVisibleA}),i(16),n(),t(17,"label",7),s("click",function(){return e.action.isVisibleB=!e.action.isVisibleB}),i(18),n(),t(19,"label",7),s("click",function(){return e.action.isVisibleC=!e.action.isVisibleC}),i(20),n()()(),t(21,"p"),i(22,"Toggle "),t(23,"code"),i(24,'*ngIf="boolean"'),n(),i(25," properties:"),n(),t(26,"div",5)(27,"div",6)(28,"label",7),s("click",function(){return e.action.isPresentA=!e.action.isPresentA}),i(29),n(),t(30,"label",7),s("click",function(){return e.action.isPresentB=!e.action.isPresentB}),i(31),n(),t(32,"label",7),s("click",function(){return e.action.isPresentC=!e.action.isPresentC}),i(33),n()()(),g(34,"br"),t(35,"div",8)(36,"b"),i(37,"Warning:"),n(),g(38,"br"),t(39,"code"),i(40,'[visible]="false"'),n(),i(41," only hides elements and don't remove it from the DOM, It could lead to useless change detection processing."),g(42,"br"),i(43,"Use of "),t(44,"code"),i(45,'*ngIf="false"'),n(),i(46," should be the default option unless you have reasons to keep DOM elements. "),n()()),r&2&&(T(" ",e.testChangeDetectorRun()," "),l(2),d("type",e.exampleEnum.TOGGLE),l(2),d("gutterSize",15),l(),b(e.action.isPresentA?5:-1),l(),b(e.action.isPresentB?6:-1),l(),b(e.action.isPresentC?7:-1),l(8),c("active",!e.action.isVisibleA),l(),m("areaA: "+e.action.isVisibleA),l(),c("active",!e.action.isVisibleB),l(),m("areaB: "+e.action.isVisibleB),l(),c("active",!e.action.isVisibleC),l(),m("areaC: "+e.action.isVisibleC),l(8),c("active",!e.action.isPresentA),l(),m("areaA: "+e.action.isPresentA),l(),c("active",!e.action.isPresentB),l(),m("areaB: "+e.action.isPresentB),l(),c("active",!e.action.isPresentC),l(),m("areaC: "+e.action.isPresentC))},dependencies:[x,P,E],styles:[".btns[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;flex-wrap:wrap}"],changeDetection:0})}}return a})();export{F as TogglingDomAndVisibleComponent};