import { Component , Input , NgModule } from '@angular/core' ; import { ExampleData } from '@ptsecurity/mosaic-examples' ; import { McButtonModule } from '@ptsecurity/mosaic/button' ; import { McIconModule } from '../../../../../mosaic/icon' ; import { McLinkModule } from '../../../../../mosaic/link' ; import { StackblitzWriter } from './stackblitz-writer' ; @ Component ( { selector : 'stackblitz-button' , templateUrl : './stackblitz-button.html' , styleUrls : [ './stackblitz-button.scss' ] , providers : [ StackblitzWriter ] , host : { '(mouseover)' : 'isDisabled = !stackblitzForm' } } ) export class StackblitzButton { /**
     * The button becomes disabled if the user hovers over the button before the stackblitz form
     * is created. After the form is created, the button becomes enabled again.
     * The form creation usually happens extremely quickly, but we handle the case of the
     * stackblitz not yet being ready for people will poor network connections or slow devices.
     */ isDisabled = false ; stackblitzForm : HTMLFormElement ; @ Input ( ) set example ( example ) { if ( example ) { const exampleData = new ExampleData ( example ) ; const isTest = example . includes ( 'harness' ) ; this . stackblitzWriter . constructStackblitzForm ( example , exampleData , isTest ) . then ( ( stackblitzForm ) => { this . stackblitzForm = stackblitzForm ; this . isDisabled = false ; } ) ; } else { this . isDisabled = true ; } } constructor ( private stackblitzWriter ) { } openStackblitz ( ) { document . body . appendChild ( this . stackblitzForm ) ; this . stackblitzForm . submit ( ) ; document . body . removeChild ( this . stackblitzForm ) ; } } @ NgModule ( { imports : [ McButtonModule , McIconModule , McLinkModule ] , exports : [ StackblitzButton ] , declarations : [ StackblitzButton ] , providers : [ StackblitzWriter ] } ) export class StackblitzButtonModule { }