@steinv/filippine/bundles/steinv-filippine.umd.min.js

Filippine - acrostic word puzzle with Angular

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("@angular/common")):"function"==typeof define&&define.amd?define("@steinv/filippine",["exports","@angular/core","@angular/forms","@angular/common"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).steinv=e.steinv||{},e.steinv.filippine={}),e.ng.core,e.ng.forms,e.ng.common)}(this,(function(e,t,n,o){"use strict";var i=function(){function e(e){this._changeDetectorRef=e,this.answer=new t.EventEmitter,this.completed=new t.EventEmitter,this.filippineForm=new n.FormGroup({}),this.columns=1,this.tiles=[]}return e.prototype.ngOnInit=function(){var e=this,t=this.configuration.questions.reduce((function(e,t){return e>t.answerPosition?e:t.answerPosition}),0),o=this.configuration.questions.reduce((function(e,t){return e>t.answerLength-t.answerPosition?e:t.answerLength-t.answerPosition}),0);this.columns=t+o;var i=0;this.configuration.questions.map((function(o,r){var s=t-o.answerPosition,a=e.columns-(o.answerLength+s),l=o.answerLength;e.tiles.push(new Array),s>0&&e.tiles[r].push({colspan:s,question:!1,highlight:!1});for(var p=new n.FormGroup({},e.rightAnswer(o)),u=0;u<l;u++)e.tiles[r].push({index:i,highlight:u===o.answerPosition,colspan:1,question:!0,name:u,coordinates:r.toString()+","+(u+s).toString()}),i++,p.addControl(u.toString(),new n.FormControl(""));e.filippineForm.addControl(r.toString(),p),a>0&&e.tiles[r].push({colspan:a,question:!1,highlight:!1}),e.filippineForm.valueChanges.subscribe((function(){for(var t in e.filippineForm.controls){var n=e.filippineForm.get(t);for(var o in n.controls){var i=n.get(o);if(!i||!i.value)return}}e.completed.emit(e.filippineForm.valid)}))}))},e.prototype.rightAnswer=function(e){var t=this;return function(n){var o=n,i=!1,r="";for(var s in o.controls){var a=o.get(s);if(!a||!a.value)return null;r+=a.value,e.answer&&e.answer.length>=+s&&a.value.toUpperCase()!==e.answer.charAt(+s).toUpperCase()&&(i=!0)}return r&&t.answer.emit({question:e,answer:r}),i?{invalid:!0}:null}},e.prototype.ngAfterViewInit=function(){this._changeDetectorRef.detectChanges()},e}();i.decorators=[{type:t.Component,args:[{selector:"filippine",template:'\n<form [formGroup]="filippineForm">\n    <grid-list \n        *ngFor="let row of tiles; let i = index" \n        [cols]="columns" \n        gutterSize="0"\n        [formGroupName]="i"\n    >\n        <grid-tile \n            *ngFor="let tile of row"\n            [colspan]="tile.colspan"\n            [ngClass]="{\'input\': tile.question, \'spacer\': !tile.question, \'\': true, \'highlight\': tile.highlight}">\n            <input \n                *ngIf="tile.question === true" \n                AutoTab \n                [id]="tile.coordinates" \n                [name]="tile.index" \n                type="text" \n                maxlength="1" \n                [formControlName]="tile.name" \n            />\n        </grid-tile>\n    </grid-list>\n</form>',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["grid-tile{border:1px solid #000;box-shadow:0 0 0 1px #000;display:flex;position:relative}grid-tile input{background:transparent;border:none;height:0;margin:0;outline:none;padding:50% 0;text-align:center;text-transform:uppercase;width:100%}.spacer{background-color:#000}.input{background-color:#fff;border:1px solid #000;box-shadow:0 0 0 1px #000}.highlight{background-color:#ff0}grid-list.ng-invalid .input{border-color:red;box-shadow:0 0 0 1px red;z-index:1}"]}]}],i.ctorParameters=function(){return[{type:t.ChangeDetectorRef}]},i.propDecorators={configuration:[{type:t.Input}],answer:[{type:t.Output}],completed:[{type:t.Output}]};var r=function(){function e(e){this._elementRef=e,this.colspan=1,this._width="100%"}return Object.defineProperty(e.prototype,"width",{set:function(e){this._width=e},enumerable:!1,configurable:!0}),e.prototype.ngAfterContentInit=function(){this._elementRef.nativeElement},e}();r.decorators=[{type:t.Component,args:[{selector:"grid-tile",template:"<ng-content></ng-content>",changeDetection:t.ChangeDetectionStrategy.OnPush,styles:[":host{box-sizing:border-box}"]}]}],r.ctorParameters=function(){return[{type:t.ElementRef}]},r.propDecorators={colspan:[{type:t.Input}],_width:[{type:t.HostBinding,args:["style.width"]}]};var s=function(){function e(){}return e.prototype.ngAfterContentInit=function(){var e=this;this.tiles.map((function(t){t.width=(100*t.colspan/e.cols).toString()+"%"}))},e}();s.decorators=[{type:t.Component,args:[{selector:"grid-list",template:'<ng-content [select]="tiles"></ng-content>\n',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:[":host{display:flex;width:100%}"]}]}],s.ctorParameters=function(){return[]},s.propDecorators={cols:[{type:t.Input}],tiles:[{type:t.ContentChildren,args:[r]}]};var a=function(){function e(){}return e.prototype.onKeyUp=function(e){var t=e.target;if(t.id&&"Tab"!==e.key&&"Shift"!==e.key){var n=t.value.length,o=+t.name,i=t.id.split(","),r=i,s=o;1!==n&&"ArrowRight"!==e.key||!t.id||(r=i[0]+","+(+i[1]+1),s=o+1),"Backspace"!==e.key&&"ArrowLeft"!==e.key||!t.id||(r=i[0]+","+(+i[1]-1),s=o-1),"ArrowUp"===e.key&&t.id&&(r=+i[0]-1+","+i[1],s=o-1),"ArrowDown"===e.key&&t.id&&(r=+i[0]+1+","+i[1],s=o+1);var a=document.getElementById(r);if(a)return a.focus(),void a.setSelectionRange(0,1);var l=document.getElementsByName(s.toString());if(l&&l.item(0)){var p=l.item(0);p.focus(),p.setSelectionRange(0,1)}}},e}();a.decorators=[{type:t.Directive,args:[{selector:"[AutoTab]"}]}],a.ctorParameters=function(){return[]},a.propDecorators={onKeyUp:[{type:t.HostListener,args:["keyup",["$event"]]}]};var l=function(){};l.decorators=[{type:t.NgModule,args:[{declarations:[a,i,s,r],imports:[o.CommonModule,n.FormsModule,n.ReactiveFormsModule],exports:[i]}]}],e.FilippineComponent=i,e.FilippineModule=l,e.ɵa=a,e.ɵb=s,e.ɵc=r,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=steinv-filippine.umd.min.js.map