You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by al...@apache.org on 2021/11/23 19:14:32 UTC
[royale-asjs] branch develop updated: ExternsJS library in frameworks added. In ExternsJS project inspiretree external JS library added.
This is an automated email from the ASF dual-hosted git repository.
alinakazi pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new b7b21fc ExternsJS library in frameworks added. In ExternsJS project inspiretree external JS library added.
b7b21fc is described below
commit b7b21fc0dafd309741acaa29acc745643a4b0d60
Author: alinakazi <al...@gmail.com>
AuthorDate: Wed Nov 24 00:14:10 2021 +0500
ExternsJS library in frameworks added. In ExternsJS project inspiretree external JS library added.
---
frameworks/projects/ExternsJS/asconfig.json | 33 +
frameworks/projects/ExternsJS/build.xml | 182 +
frameworks/projects/ExternsJS/pom.xml | 276 +
.../src/main/config/compile-swf-config.xml | 112 +
.../ExternsJS/src/main/resources/defaults.css | 3255 +++++++++
.../src/main/resources/externsjs-as-manifest.xml | 25 +
.../src/main/resources/externsjs-manifest.xml | 27 +
.../externsjs/inspiretree/New Text Document.html | 56 +
.../externsjs/inspiretree/inspire-tree-custom.css | 435 ++
.../externsjs/inspiretree/inspire-tree-custom.sass | 541 ++
.../externsjs/inspiretree/inspire-tree-dark.css | 325 +
.../inspiretree/inspire-tree-dark.min.css | 14 +
.../inspiretree/inspire-tree-dom-royale.js | 3766 +++++++++++
.../externsjs/inspiretree/inspire-tree-dom.js | 3764 +++++++++++
.../externsjs/inspiretree/inspire-tree-dom.min.js | 21 +
.../inspiretree/inspire-tree-light-jewel-blue.css | 619 ++
.../externsjs/inspiretree/inspire-tree-light.css | 347 +
.../inspiretree/inspire-tree-light.min.css | 14 +
.../externsjs/inspiretree/inspire-tree-royale.js | 7126 ++++++++++++++++++++
.../externsjs/inspiretree/inspire-tree.js | 7088 +++++++++++++++++++
.../externsjs/inspiretree/inspire-tree.min.js | 29 +
.../inspiretree/jewel-blue/collapsed_blue.svg | 14 +
.../jewel-blue/expand_less_black_24dp.svg | 14 +
.../jewel-blue/expand_more_black_24dp.svg | 14 +
.../inspiretree/jewel-blue/expanded_blue.svg | 21 +
.../ExternsJS/src/main/royale/ExternsJSClasses.as | 53 +
.../royale/externsjs/inspiretree/IInspireTree.as | 33 +
.../royale/externsjs/inspiretree/InspireTree.as | 897 +++
.../inspiretree/InspireTreeBasicControl.as | 277 +
.../royale/externsjs/inspiretree/InspireTreeDOM.as | 74 +
.../royale/externsjs/inspiretree/TreeEvent.as | 112 +
.../royale/externsjs/inspiretree/TreeNode.as | 650 ++
.../royale/externsjs/inspiretree/TreeNodes.as | 620 ++
.../royale/externsjs/inspiretree/UtilsTree.as | 28 +
.../beads/InspireTreeCheckBoxModeBead.as | 339 +
.../inspiretree/beads/InspireTreeEventsBead.as | 215 +
.../inspiretree/beads/InspireTreeIconBead.as | 576 ++
.../inspiretree/beads/InspireTreePaginateBead.as | 162 +
.../beads/InspireTreeReadOnlyCheckBead.as | 160 +
.../beads/InspireTreeReadOnlyCheckBead_V0.as | 152 +
.../beads/InspireTreeRevertCheckBead.as | 185 +
.../inspiretree/beads/models/InspireTreeModel.as | 290 +
.../royale/externsjs/inspiretree/vos/ConfigDOM.as | 64 +
.../royale/externsjs/inspiretree/vos/ConfigTree.as | 30 +
.../externsjs/inspiretree/vos/DragAndDropConfig.as | 33 +
.../externsjs/inspiretree/vos/ItemTreeNode.as | 146 +
.../externsjs/inspiretree/vos/OptionsTree.as | 101 +
47 files changed, 33315 insertions(+)
diff --git a/frameworks/projects/ExternsJS/asconfig.json b/frameworks/projects/ExternsJS/asconfig.json
new file mode 100644
index 0000000..3b1f1b3
--- /dev/null
+++ b/frameworks/projects/ExternsJS/asconfig.json
@@ -0,0 +1,33 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You 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
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ {
+ "config": "royale",
+ "type": "lib",
+ "compilerOptions": {
+ "debug": true,
+ "targets": [
+ "JSRoyale", "SWF"
+ ],
+ "include-classes": [
+ "src/main/royale/ExternsJSClasses.as"
+ ],
+ "source-path": [
+ "src/main/royale"
+ ],
+ "output": "target/ExternsJS.swc"
+ }
+}
diff --git a/frameworks/projects/ExternsJS/build.xml b/frameworks/projects/ExternsJS/build.xml
new file mode 100644
index 0000000..697b257
--- /dev/null
+++ b/frameworks/projects/ExternsJS/build.xml
@@ -0,0 +1,182 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You 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
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<project name="ExternsJS" default="main" basedir=".">
+ <property name="ROYALE_HOME" location="../../.."/>
+
+ <property file="${ROYALE_HOME}/env.properties"/>
+ <property environment="env"/>
+ <property file="${ROYALE_HOME}/local.properties"/>
+ <property file="${ROYALE_HOME}/build.properties"/>
+ <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
+ <condition property="AIR_HOME" value="${env.AIR_HOME}">
+ <isset property="env.AIR_HOME" />
+ </condition>
+ <property name="AIR_HOME" value="${ROYALE_HOME}"/>
+ <condition property="PLAYERGLOBAL_HOME" value="${env.PLAYERGLOBAL_HOME}">
+ <isset property="env.PLAYERGLOBAL_HOME" />
+ </condition>
+ <property name="PLAYERGLOBAL_HOME" value="${ROYALE_HOME}/frameworks/libs/player"/>
+
+ <property name="target.name" value="${ant.project.name}.swc" />
+
+ <tstamp>
+ <format property="royale.swc-date" pattern="MM/dd/yy HH:mm Z"/>
+ </tstamp>
+ <echo>swc-date is ${royale.swc-date}</echo>
+
+ <target name="main" depends="clean,check-compiler,compile,compile-js,copy-swc,test" description="Full build of ${ant.project.name}.swc">
+ </target>
+
+ <target name="compile-js">
+ <ant dir="${ROYALE_HOME}/frameworks/js/projects/${ant.project.name}JS/" inheritAll="false" >
+ <property name="ROYALE_SWF_COMPILER_HOME" value="${ROYALE_SWF_COMPILER_HOME}"/>
+ <property name="ROYALE_COMPILER_HOME" value="${ROYALE_COMPILER_HOME}"/>
+ <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
+ </ant>
+ </target>
+
+ <target name="copy-swc" if="AIR_HOME">
+ <copy file="${basedir}/target/${target.name}" tofile="${ROYALE_HOME}/frameworks/libs/${target.name}" />
+ </target>
+
+ <target name="check-for-tests" >
+ <condition property="skip-tests" >
+ <not>
+ <available file="${basedir}/src/test/royale/build.xml" />
+ </not>
+ </condition>
+ <!-- exclude from js-only build -->
+ <condition property="skip-swf-tests">
+ <or>
+ <isset property="skip-tests" />
+ <not>
+ <!-- env.AIR_HOME is how we determine if it's a SWF distritbution -->
+ <isset property="env.AIR_HOME" />
+ </not>
+ </or>
+ </condition>
+ </target>
+
+ <target name="test" depends="check-for-tests,check-compiler" unless="skip-tests">
+ <antcall target="test-swf" />
+ </target>
+
+ <target name="test-swf" unless="skip-swf-tests">
+ <ant dir="src/test/royale" />
+ </target>
+
+ <target name="clean">
+ <delete failonerror="false">
+ <fileset dir="${ROYALE_HOME}/frameworks/libs">
+ <include name="${target.name}"/>
+ </fileset>
+ </delete>
+ <delete failonerror="false" includeemptydirs="true">
+ <fileset dir="${basedir}/target">
+ <include name="**/**"/>
+ </fileset>
+ </delete>
+ <antcall target="clean-tests" />
+ </target>
+
+ <target name="clean-tests" depends="check-for-tests" unless="skip-tests">
+ <ant dir="src/test/royale" target="clean"/>
+ </target>
+
+ <target name="compile" description="Compiles .as files into .swc" if="AIR_HOME">
+ <!-- use antcall so that resultproperty can be used in other projects and
+ they don't collide when being run one after the other -->
+ <antcall target="compile-swf" />
+ </target>
+
+ <target name="compile-swf">
+ <echo message="Compiling libs/${ant.project.name}.swc"/>
+ <echo message="ROYALE_HOME: ${ROYALE_HOME}"/>
+ <echo message="ROYALE_SWF_COMPILER_HOME: ${ROYALE_SWF_COMPILER_HOME}"/>
+ <echo message="ROYALE_COMPILER_HOME: ${ROYALE_COMPILER_HOME}"/>
+
+ <java jar="${ROYALE_COMPILER_HOME}/lib/compc.jar" fork="true" resultproperty="compcoutput">
+ <jvmarg value="-Xmx384m" />
+ <jvmarg value="-Dsun.io.useCanonCaches=false" />
+ <jvmarg value="-Droyalelib=${ROYALE_HOME}/frameworks" />
+ <arg value="+royalelib=${ROYALE_HOME}/frameworks" />
+ <arg value="+playerglobal.version=${playerglobal.version}" />
+ <arg value="+env.AIR_HOME=${AIR_HOME}" />
+ <arg value="-compiler.strict-xml=true" />
+ <arg value="-compiler.targets=SWF,JSRoyale" />
+ <arg line="-metadata.date="${royale.swc-date}"" />
+ <arg line="-metadata.dateFormat="MM/dd/yy HH:mm Z"" />
+ <arg line="-swf-debugfile-alias="/org/apache/royale/${release.version}"" />
+ <arg value="-output=${basedir}/target/${target.name}" />
+ <arg value="-load-config=${basedir}/src/main/config/compile-swf-config.xml" />
+ <arg value="-js-load-config=${ROYALE_HOME}/frameworks/js-config.xml" />
+ <arg value="-js-load-config+=${basedir}/../../js/projects/${ant.project.name}JS/src/main/config/compile-js-config.xml" />
+ </java>
+ <fail>
+ <condition>
+ <not>
+ <or>
+ <equals arg1="${compcoutput}" arg2="0" />
+ <equals arg1="${compcoutput}" arg2="2" />
+ </or>
+ </not>
+ </condition>
+ </fail>
+ </target>
+
+ <target name="check-compiler" depends="check-compiler-home,check-transpiler-home">
+ <path id="lib.path">
+ <fileset dir="${ROYALE_COMPILER_HOME}/lib" includes="compiler-royaleTasks.jar"/>
+ </path>
+ <taskdef resource="flexTasks.tasks" classpathref="lib.path"/>
+ </target>
+
+ <target name="check-compiler-home"
+ description="Set ROYALE_SWF_COMPILER_HOME to point at the compiler.">
+
+ <available file="${ROYALE_HOME}/lib/compiler-mxmlc.jar"
+ type="file"
+ property="ROYALE_SWF_COMPILER_HOME"
+ value="${ROYALE_HOME}"/>
+
+ <fail message="ROYALE_SWF_COMPILER_HOME must be set to a folder with a lib sub-folder containing compiler-mxmlc.jar such as the compiler folder in royale-compiler repo or the root of a Royale SDK"
+ unless="ROYALE_SWF_COMPILER_HOME"/>
+ </target>
+
+ <target name="check-transpiler-home"
+ description="Set ROYALE_COMPILER_HOME to point at the cross-compiler.">
+
+ <available file="${ROYALE_HOME}/js/lib/jsc.jar"
+ type="file"
+ property="ROYALE_COMPILER_HOME"
+ value="${ROYALE_HOME}/js"/>
+
+ <available file="${env.ROYALE_COMPILER_HOME}/lib/jsc.jar"
+ type="file"
+ property="ROYALE_COMPILER_HOME"
+ value="${env.ROYALE_COMPILER_HOME}"/>
+
+ <fail message="ROYALE_COMPILER_HOME must be set to a folder with a lib sub-folder containing jsc.jar such as the compiler-jx folder in royale-compiler repo or the js folder of a Royale SDK"
+ unless="ROYALE_COMPILER_HOME"/>
+ </target>
+
+</project>
diff --git a/frameworks/projects/ExternsJS/pom.xml b/frameworks/projects/ExternsJS/pom.xml
new file mode 100644
index 0000000..8f97429
--- /dev/null
+++ b/frameworks/projects/ExternsJS/pom.xml
@@ -0,0 +1,276 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You 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
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+--><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+ <modelVersion>4.0.0</modelVersion>
+
+ <parent>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>projects</artifactId>
+ <version>0.9.9-SNAPSHOT</version>
+ </parent>
+
+ <artifactId>ExternsJS</artifactId>
+ <version>0.9.9-SNAPSHOT</version>
+ <packaging>swc</packaging>
+
+ <name>Apache Royale: Framework: Libs: ExternsJS</name>
+
+ <build>
+ <sourceDirectory>src/main/royale</sourceDirectory>
+ <plugins>
+ <plugin>
+ <groupId>org.apache.royale.compiler</groupId>
+ <artifactId>royale-maven-plugin</artifactId>
+ <version>${project.royale.compiler.version}</version>
+ <extensions>true</extensions>
+ <configuration>
+ <namespaces>
+ <namespace>
+ <uri>library://ns.apache.org/royale/externsjs</uri>
+ <manifest>${project.basedir}/src/main/resources/externsjs-manifest.xml</manifest>
+ </namespace>
+ <namespace>
+ <type>as</type>
+ <uri>library://ns.apache.org/royale/externsjs</uri>
+ <manifest>${project.basedir}/src/main/resources/externsjs-as-manifest.xml</manifest>
+ </namespace>
+ </namespaces>
+ <includeClasses>
+ <includeClass>ExternsJSClasses</includeClass>
+ </includeClasses>
+ <includeFiles>
+ <include-file>
+ <name>defaults.css</name>
+ <path>../src/main/resources/defaults.css</path>
+ </include-file>
+ </includeFiles>
+ <includeLookupOnly>true</includeLookupOnly>
+ <allowSubclassOverrides>true</allowSubclassOverrides>
+ <skipExtern>true</skipExtern>
+ <skipAS>${royale.skipAS}</skipAS>
+ <!-- <additionalCompilerOptions>
+ -source-map=true;
+ -source-map-source-root=/frameworks/projects/ExternsJS/src/main/royale/
+ </additionalCompilerOptions> -->
+ </configuration>
+ </plugin>
+ <plugin>
+ <groupId>nl.geodienstencentrum.maven</groupId>
+ <artifactId>sass-maven-plugin</artifactId>
+ <configuration>
+ <resources>
+ <resource>
+ <source>
+ <directory>${basedir}/src/main/resources/externsjs/inspiretree</directory>
+ <includes>
+ <include>**/*.sass</include>
+ </includes>
+ </source>
+ <destination>${basedir}/src/main/resources/externsjs/inspiretree</destination>
+ </resource>
+ </resources>
+ </configuration>
+ <executions>
+ <execution>
+ <id>generate-css-using-sass</id>
+ <goals>
+ <goal>update-stylesheets</goal>
+ </goals>
+ <phase>generate-resources</phase>
+ </execution>
+ </executions>
+ </plugin>
+ <plugin>
+ <groupId>com.google.code.maven-replacer-plugin</groupId>
+ <artifactId>replacer</artifactId>
+ <version>1.5.3</version>
+ <executions>
+ <execution>
+ <phase>generate-resources</phase>
+ <goals>
+ <goal>replace</goal>
+ </goals>
+ </execution>
+ </executions>
+ <configuration>
+ <includes>
+ <include>${basedir}/src/main/resources/**/*.css</include>
+ </includes>
+ <regex>false</regex>
+ <replacements>
+ <replacement>
+ <token>@@ZERO_WIDTH_SPACE</token>
+ <value>\200b</value>
+ </replacement>
+ <replacement>
+ <token>@@NON_BREAKING_SPACE</token>
+ <value>\0a</value>
+ </replacement>
+ </replacements>
+ </configuration>
+ </plugin>
+ </plugins>
+ </build>
+
+ <dependencies>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Core</artifactId>
+ <version>0.9.9-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Binding</artifactId>
+ <version>0.9.9-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Graphics</artifactId>
+ <version>0.9.9-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Collections</artifactId>
+ <version>0.9.9-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>HTML</artifactId>
+ <version>0.9.9-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Basic</artifactId>
+ <version>0.9.9-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Formatters</artifactId>
+ <version>0.9.9-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ </dependencies>
+
+ <profiles>
+ <profile>
+ <id>platform-windows</id>
+ <activation>
+ <os>
+ <family>windows</family>
+ </os>
+ </activation>
+ <build>
+ <plugins>
+ <plugin>
+ <groupId>nl.geodienstencentrum.maven</groupId>
+ <artifactId>sass-maven-plugin</artifactId>
+ <executions>
+ <execution>
+ <id>generate-css-using-sass</id>
+ <goals>
+ <goal>update-stylesheets</goal>
+ </goals>
+ <phase>generate-resources</phase>
+ <configuration>
+ <sassOptions>
+ <!-- on windows it is typical to have autoCRLF=true,
+ so we don't want to overwrite
+ the CRLF newlines with unix newlines (which is true by default)
+ locally, because that will change git status of the css file
+ on windows
+ -->
+ <unix_newlines>false</unix_newlines>
+ </sassOptions>
+ </configuration>
+ </execution>
+ </executions>
+ </plugin>
+ </plugins>
+ </build>
+ </profile>
+ <profile>
+ <id>option-with-swf</id>
+ <dependencies>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Core</artifactId>
+ <version>0.9.9-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Binding</artifactId>
+ <version>0.9.9-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Graphics</artifactId>
+ <version>0.9.9-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Collections</artifactId>
+ <version>0.9.9-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>HTML</artifactId>
+ <version>0.9.9-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Basic</artifactId>
+ <version>0.9.9-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Formatters</artifactId>
+ <version>0.9.9-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ </dependencies>
+ </profile>
+ </profiles>
+
+<properties /></project>
diff --git a/frameworks/projects/ExternsJS/src/main/config/compile-swf-config.xml b/frameworks/projects/ExternsJS/src/main/config/compile-swf-config.xml
new file mode 100644
index 0000000..8981130
--- /dev/null
+++ b/frameworks/projects/ExternsJS/src/main/config/compile-swf-config.xml
@@ -0,0 +1,112 @@
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You 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
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<royale-config>
+
+ <compiler>
+ <accessible>false</accessible>
+
+ <!-- build both SWF and JS. -->
+ <targets>
+ <target>JSRoyale</target>
+ </targets>
+ <strict-xml>true</strict-xml>
+
+ <external-library-path>
+ <path-element>${env.AIR_HOME}/frameworks/libs/air/airglobal.swc</path-element>
+ <path-element>../../../../../libs/Binding.swc</path-element>
+ <path-element>../../../../../libs/Core.swc</path-element>
+ <path-element>../../../../../libs/Graphics.swc</path-element>
+ <path-element>../../../../../libs/Basic.swc</path-element>
+ <path-element>../../../../../libs/Collections.swc</path-element>
+ <path-element>../../../../../libs/HTML.swc</path-element>
+ <path-element>../../../../../libs/Formatters.swc</path-element>
+ </external-library-path>
+
+ <allow-subclass-overrides>true</allow-subclass-overrides>
+ <mxml>
+ <children-as-data>true</children-as-data>
+ <imports>
+ <implicit-import>org.apache.royale.events.*</implicit-import>
+ <implicit-import>org.apache.royale.geom.*</implicit-import>
+ <implicit-import>org.apache.royale.core.ClassFactory</implicit-import>
+ <implicit-import>org.apache.royale.core.IFactory</implicit-import>
+ </imports>
+ </mxml>
+ <binding-value-change-event>org.apache.royale.events.ValueChangeEvent</binding-value-change-event>
+ <binding-value-change-event-kind>org.apache.royale.events.ValueChangeEvent</binding-value-change-event-kind>
+ <binding-value-change-event-type>valueChange</binding-value-change-event-type>
+
+ <define>
+ <name>COMPILE::SWF</name>
+ <value>true</value>
+ </define>
+ <define>
+ <name>COMPILE::JS</name>
+ <value>false</value>
+ </define>
+
+ <keep-as3-metadata>
+ <name>Bindable</name>
+ <name>Managed</name>
+ <name>ChangeEvent</name>
+ <name>NonCommittingChangeEvent</name>
+ <name>Transient</name>
+ </keep-as3-metadata>
+
+ <locale/>
+
+ <library-path/>
+
+ <namespaces>
+ <namespace>
+ <uri>library://ns.apache.org/royale/externsjs</uri>
+ <manifest>../resources/externsjs-manifest.xml</manifest>
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/externsjs</uri>
+ <manifest>../resources/externsjs-as-manifest.xml</manifest>
+ </namespace>
+ </namespaces>
+
+ <source-path>
+ <path-element>../royale</path-element>
+ </source-path>
+
+ <warn-no-constructor>false</warn-no-constructor>
+ </compiler>
+
+ <include-file>
+ <name>defaults.css</name>
+ <path>../resources/defaults.css</path>
+ </include-file>
+
+ <include-lookup-only>true</include-lookup-only>
+
+ <include-classes>
+ <class>ExternsJSClasses</class>
+ </include-classes>
+
+ <include-namespaces>
+ <uri>library://ns.apache.org/royale/externsjs</uri>
+ </include-namespaces>
+
+ <target-player>${playerglobal.version}</target-player>
+
+
+</royale-config>
diff --git a/frameworks/projects/ExternsJS/src/main/resources/defaults.css b/frameworks/projects/ExternsJS/src/main/resources/defaults.css
new file mode 100644
index 0000000..c8dab5d
--- /dev/null
+++ b/frameworks/projects/ExternsJS/src/main/resources/defaults.css
@@ -0,0 +1,3255 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You 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
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@namespace j "library://ns.apache.org/royale/externsjs";
+@namespace "http://www.w3.org/1999/xhtml";
+*, :after, :before {
+ box-sizing: border-box; }
+
+html, body {
+ height: 100%; }
+
+::-moz-focus-inner, ::-moz-focus-outer {
+ border: 0; }
+
+input:focus, textarea:focus, select:focus, div:focus, label:focus, nav:focus, li:focus, a:focus {
+ outline: none; }
+
+select::-ms-expand {
+ display: none; }
+
+button::-moz-focus-inner {
+ padding: 0; }
+
+button, input, textarea {
+ font-size: 100%; }
+
+.cursor-pointer {
+ cursor: pointer !important; }
+
+j|View {
+ IBeadView: ClassReference("org.apache.royale.html.beads.GroupView");
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.ViewLayout"); }
+
+.responsive-view {
+ display: inline-flex;
+ width: 100%;
+ height: 100%; }
+
+j|Group {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.BasicLayout");
+ IBeadView: ClassReference("org.apache.royale.html.beads.GroupView"); }
+
+.externsjs.group {
+ overflow: visible; }
+
+j|HGroup {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout"); }
+
+j|VGroup {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout"); }
+
+j|Grid {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.GridLayout"); }
+
+j|ScrollableGrid {
+ IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport"); }
+
+j|GridCell {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.GridCellLayout"); }
+
+j|Container {
+ IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.BasicLayout");
+ IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
+
+j|HContainer {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout"); }
+
+j|VContainer {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout"); }
+
+j|Image {
+ IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.ImageModel");
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.ImageView"); }
+
+j|BinaryImage {
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.BinaryImageModel");
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.ImageView");
+ IBinaryImageLoader: ClassReference("org.apache.royale.html.beads.BinaryImageLoader"); }
+
+j|DataContainer {
+ IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.DataProviderModel");
+ IBeadView: ClassReference("org.apache.royale.html.beads.DataContainerView");
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout");
+ IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForCollectionView");
+ IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
+ IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.StringItemRenderer");
+ IItemRendererInitializer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DataContainerItemRendererInitializer");
+ IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
+
+j|Validator {
+ ILocalizedValuesImpl: ClassReference("org.apache.royale.core.SimpleLocalizedValuesImpl"); }
+
+j|Form {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.FormLayout"); }
+
+@media -royale-swf {
+ j|Container {
+ IContentView: ClassReference("org.apache.royale.html.supportClasses.ContainerContentArea"); } }
+hr {
+ border: 0;
+ height: 1px; }
+
+.responsiveSizeMonitor {
+ background: rgba(0, 0, 0, 0.8);
+ color: white;
+ padding: 10px;
+ position: fixed;
+ bottom: 0;
+ right: 0;
+ width: 250px; }
+ .responsiveSizeMonitor strong {
+ color: yellow; }
+
+.externsjs.alert {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ min-width: 350px;
+ min-height: 200px; }
+ .externsjs.alert .externsjs.titlebar {
+ height: 50px; }
+ .externsjs.alert .content {
+ position: absolute;
+ top: 50px;
+ bottom: 50px;
+ width: 100%;
+ overflow-y: auto; }
+ .externsjs.alert .content .externsjs.label {
+ white-space: normal; }
+ .externsjs.alert .externsjs.controlbar {
+ bottom: 0;
+ height: 50px; }
+
+@media all and (-ms-high-contrast: none) {
+ .externsjs.alert {
+ display: table; } }
+@media (min-width: 768px) {
+ .externsjs.alert {
+ min-width: 450px; } }
+j|Alert {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout");
+ IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.AlertModel");
+ IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.AlertController");
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.AlertView"); }
+
+.externsjs.badge {
+ z-index: 2;
+ position: absolute;
+ top: -1em;
+ right: -1em;
+ text-transform: initial;
+ padding: 0.5em;
+ min-width: 2.1em; }
+ .externsjs.badge.overlap {
+ top: 0em;
+ right: 0em; }
+ .externsjs.badge.subindex {
+ top: auto;
+ bottom: -1em; }
+ .externsjs.badge.subindex.overlap {
+ top: auto;
+ bottom: 0em; }
+ .externsjs.badge.preindex {
+ left: -1em;
+ right: auto; }
+ .externsjs.badge.preindex.overlap {
+ left: 0em;
+ right: auto; }
+
+.externsjs.button {
+ cursor: pointer;
+ user-select: none;
+ display: inline-flex;
+ position: relative;
+ align-items: center;
+ justify-content: center;
+ vertical-align: middle;
+ overflow: hidden;
+ outline: none;
+ white-space: nowrap;
+ line-height: normal !important;
+ text-align: center;
+ text-decoration: none; }
+ .externsjs.button[disabled] {
+ cursor: default; }
+ .externsjs.button.multiline {
+ white-space: pre-wrap; }
+ .externsjs.button .fonticon {
+ cursor: inherit; }
+ .externsjs.button.viewport {
+ overflow: visible; }
+
+@media -royale-swf {
+ j|Button {
+ IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.TextModel");
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.ButtonView"); } }
+.externsjs.buttonbar .externsjs.button, .externsjs.buttonbar .externsjs.togglebutton {
+ border-radius: 0; }
+ .externsjs.buttonbar .externsjs.button.first, .externsjs.buttonbar .externsjs.togglebutton.first {
+ border-top-left-radius: 0.25rem;
+ border-bottom-left-radius: 0.25rem; }
+ .externsjs.buttonbar .externsjs.button.last, .externsjs.buttonbar .externsjs.togglebutton.last {
+ border-top-right-radius: 0.25rem;
+ border-bottom-right-radius: 0.25rem; }
+
+j|ButtonBar {
+ IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.ButtonBarModel");
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.ButtonBarView");
+ IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.ListSingleSelectionMouseController");
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.ButtonBarLayout");
+ IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.SelectionDataItemRendererFactoryForCollectionView");
+ IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
+ IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.ButtonBarItemRenderer");
+ IItemRendererInitializer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ButtonBarItemRendererInitializer"); }
+
+@media -royale-swf {
+ j|ButtonBar {
+ IContentView: ClassReference("org.apache.royale.externsjs.supportClasses.list.DataGroup"); } }
+j|IconButtonBar {
+ IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.IconButtonBarItemRenderer"); }
+
+.externsjs.buttonbar.toggle-on-click .externsjs.togglebutton.selected {
+ pointer-events: none; }
+
+j|ToggleButtonBar {
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.ToggleButtonBarView");
+ IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.ToggleButtonBarSelectionMouseController");
+ IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.ToggleButtonBarItemRenderer"); }
+
+.externsjs.card {
+ min-width: 120px;
+ min-height: 52px;
+ position: relative; }
+ .externsjs.card .card-header {
+ width: 100%; }
+ .externsjs.card .card-header .card-title {
+ flex: 1 1 auto;
+ overflow: hidden;
+ text-decoration: inherit;
+ text-overflow: ellipsis;
+ text-transform: inherit;
+ z-index: 1; }
+ .externsjs.card .card-expanded-content {
+ width: 100%; }
+ .externsjs.card .card-primary-content {
+ width: 100%;
+ min-height: 152px;
+ position: relative;
+ outline: none;
+ color: inherit;
+ text-decoration: none;
+ flex: 1 1 auto; }
+ .externsjs.card .card-actions {
+ width: 100%;
+ position: relative;
+ outline: none;
+ color: inherit;
+ text-decoration: none; }
+
+.externsjs.checkbox {
+ display: inline-flex;
+ position: relative;
+ margin: 0;
+ padding: 0;
+ height: auto; }
+ .externsjs.checkbox input {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -o-appearance: none;
+ -ms-appearance: none;
+ appearance: none;
+ display: inline-flex;
+ margin: 0;
+ padding: 0;
+ width: 24px;
+ height: 24px;
+ opacity: 0; }
+ .externsjs.checkbox input + span::before {
+ content: " ";
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ width: 22px;
+ height: 22px; }
+ .externsjs.checkbox input + span::after {
+ content: " ";
+ position: absolute;
+ width: 22px;
+ height: 22px;
+ left: 0px;
+ top: 0px;
+ opacity: 0; }
+ .externsjs.checkbox input:checked + span::after, .externsjs.checkbox input:checked:active + span::after {
+ opacity: 1; }
+ .externsjs.checkbox input:focus + span::before, .externsjs.checkbox input:checked:focus + span::before, .externsjs.checkbox input:checked:active:focus + span::before {
+ outline: none; }
+ .externsjs.checkbox input[disabled] + span {
+ cursor: unset; }
+ .externsjs.checkbox span {
+ cursor: pointer;
+ margin: auto;
+ width: inherit; }
+
+.externsjs.switch {
+ display: inline-flex;
+ position: relative;
+ height: auto; }
+ .externsjs.switch input {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -o-appearance: none;
+ -ms-appearance: none;
+ appearance: none;
+ display: inline-flex;
+ opacity: 0;
+ width: 44px;
+ height: 24px;
+ margin: 0;
+ padding: 0; }
+ .externsjs.switch input[disabled] + span {
+ cursor: unset; }
+ .externsjs.switch .switch {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ width: 44px;
+ height: 24px; }
+ .externsjs.switch .switch::before {
+ position: absolute;
+ content: "";
+ height: 20px;
+ width: 20px;
+ left: 2px;
+ bottom: 2px; }
+ .externsjs.switch .label {
+ cursor: pointer;
+ margin: auto;
+ width: inherit; }
+
+.externsjs.combobox {
+ display: inline-flex; }
+ .externsjs.combobox .externsjs.textinput {
+ display: block; }
+ .externsjs.combobox .externsjs.button::before {
+ margin: 0;
+ padding: 0; }
+ .externsjs.combobox .externsjs.button::after {
+ content: " ";
+ position: absolute; }
+
+j|ComboBox {
+ IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.ComboBoxModel");
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.ComboBoxView");
+ IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.ComboBoxController");
+ IPopUp: ClassReference("org.apache.royale.externsjs.supportClasses.combobox.ComboBoxPopUp"); }
+
+.combobox-popup {
+ position: fixed;
+ pointer-events: none;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ contain: strict;
+ z-index: 60;
+ color: rgba(0, 0, 0, 0.8); }
+ .combobox-popup::before {
+ position: absolute;
+ display: block;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ content: "";
+ opacity: 0;
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms; }
+ .combobox-popup .externsjs.list {
+ position: relative;
+ transform: translate(-50%, 100%);
+ transition: none;
+ will-change: transform, opacity;
+ bottom: auto;
+ top: calc(100% - 10px);
+ left: 50%;
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7) !important;
+ opacity: 0; }
+ .combobox-popup.open {
+ pointer-events: auto; }
+ .combobox-popup.open::before {
+ opacity: 1; }
+ .combobox-popup.open .externsjs.list {
+ transform: translate(-50%, -100%);
+ transition: transform 0.3s 0ms, opacity 0.3s 0ms;
+ opacity: 1; }
+
+@media (max-width: 767px) {
+ .combobox-popup .externsjs.list {
+ width: 98% !important;
+ max-height: 240px !important; }
+ .combobox-popup .externsjs.list .externsjs.item {
+ min-height: 48px !important; } }
+@media (min-width: 767px) {
+ .combobox-popup::before {
+ background-color: rgba(0, 0, 0, 0); }
+ .combobox-popup .externsjs.list {
+ transform: none;
+ transition: none;
+ box-shadow: none !important; }
+ .combobox-popup .externsjs.list .externsjs.item {
+ overflow: hidden;
+ transition: height 200ms ease-in; }
+ .combobox-popup.open .externsjs.list {
+ transform: none;
+ top: auto;
+ left: auto; } }
+j|ComboBoxPopUp {
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.ComboBoxPopUpView"); }
+
+j|VirtualComboBox {
+ IPopUp: ClassReference("org.apache.royale.externsjs.supportClasses.combobox.VirtualComboBoxPopUp"); }
+
+j|VirtualComboBoxPopUp {
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.VirtualComboBoxPopUpView"); }
+
+.externsjs.datagrid {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ overflow: auto; }
+ .externsjs.datagrid .externsjs.buttonbar.header {
+ width: 100%;
+ flex: 0 0 auto; }
+ .externsjs.datagrid .externsjs.buttonbar.header .externsjs.button {
+ width: 100%; }
+ .externsjs.datagrid .listarea {
+ width: 100%;
+ flex: 1 1 auto; }
+ .externsjs.datagrid .externsjs.list.column {
+ padding-left: 0;
+ padding-right: 0;
+ position: relative;
+ min-height: 100%; }
+ .externsjs.datagrid .externsjs.list.column .externsjs.item.datagrid {
+ width: 100%; }
+ .externsjs.datagrid span:empty:before {
+ content: "\200b"; }
+
+j|DataGrid {
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.DataGridView");
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.DataGridCollectionViewModel");
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.DataGridLayout");
+ headerClass: ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.DataGridButtonBar");
+ headerLayoutClass: ClassReference("org.apache.royale.externsjs.beads.layouts.DataGridColumnLayout");
+ listAreaClass: ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.DataGridListArea");
+ columnClass: ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.DataGridColumnList"); }
+
+j|DataGridListArea {
+ IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
+ IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport"); }
+
+j|DataGridColumnList {
+ IItemRendererClassFactory: ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
+ IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.DataGridItemRenderer");
+ IItemRendererInitializer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DataGridColumnListItemRendererInitializer");
+ ISelectableItemRenderer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ClassSelectorListSelectableItemRendererBead");
+ IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
+
+j|DataGridButtonBar {
+ IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.DatagridHeaderRenderer"); }
+
+j|VirtualDataGrid {
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.VirtualDataGridView");
+ columnClass: ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.VirtualDataGridColumnList"); }
+
+j|VirtualDataGridListArea {
+ IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
+ listAreaClass: ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.VirtualDataGrid");
+ IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
+
+j|VirtualDataGridColumnList {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.VirtualDataGridListAreaLayout");
+ IItemRendererClassFactory: ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
+ IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.DataGridItemRenderer");
+ IItemRendererInitializer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DataGridColumnListItemRendererInitializer");
+ ISelectableItemRenderer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ClassSelectorListSelectableItemRendererBead");
+ IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport"); }
+
+.externsjs.datechooser .externsjs.table {
+ min-width: 324px;
+ min-height: 364px; }
+ .externsjs.datechooser .externsjs.table .externsjs.tablecell {
+ height: auto; }
+ .externsjs.datechooser .externsjs.table .externsjs.tableheadercell.buttonsRow > .layout.horizontal {
+ float: right; }
+ .externsjs.datechooser .externsjs.table .externsjs.tableheadercell.buttonsRow .viewSelector::after {
+ content: " "; }
+ .externsjs.datechooser .externsjs.table .externsjs.tableheadercell.buttonsRow .previousButton::after, .externsjs.datechooser .externsjs.table .externsjs.tableheadercell.buttonsRow .nextButton::after {
+ content: " ";
+ position: absolute; }
+
+j|DateChooser {
+ IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.DateChooserModel");
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.DateChooserView");
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout");
+ IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.DateChooserMouseController"); }
+
+.externsjs.datefield {
+ display: inline-flex; }
+ .externsjs.datefield .externsjs.textinput input {
+ width: 9.2em; }
+ .externsjs.datefield .externsjs.button::before {
+ margin: 0;
+ padding: 0;
+ line-height: 22px; }
+ .externsjs.datefield .externsjs.button::after {
+ content: " ";
+ position: absolute;
+ width: 22px;
+ height: 22px;
+ left: calc(50% - 11px);
+ top: calc(50% - 11px); }
+
+.datechooser-popup {
+ position: fixed;
+ pointer-events: none;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ contain: strict;
+ z-index: 60;
+ color: rgba(0, 0, 0, 0.8); }
+ .datechooser-popup::before {
+ position: absolute;
+ display: block;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ content: "";
+ opacity: 0;
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms; }
+ .datechooser-popup .externsjs.table {
+ position: relative;
+ transform: translate(-50%, 100%);
+ transition: none;
+ will-change: transform, opacity;
+ bottom: auto;
+ top: calc(100% - 10px);
+ left: 50%;
+ touch-action: none;
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7) !important;
+ opacity: 0; }
+ .datechooser-popup.open {
+ pointer-events: auto; }
+ .datechooser-popup.open::before {
+ opacity: 1; }
+ .datechooser-popup.open .externsjs.table {
+ transform: translate(-50%, -100%);
+ transition: transform 0.4s 0ms, opacity 0.4s 0ms;
+ opacity: 1; }
+
+@media (max-width: 768px) {
+ .datechooser-popup .externsjs.table {
+ width: calc(100% - 20px); } }
+@media (min-width: 768px) and (max-width: 992px) {
+ .datechooser-popup .externsjs.table {
+ width: calc(100% - 300px); } }
+@media (min-width: 992px) {
+ .datechooser-popup::before {
+ background-color: rgba(0, 0, 0, 0); }
+ .datechooser-popup .externsjs.table {
+ transform: none;
+ transition: none;
+ box-shadow: none !important; }
+ .datechooser-popup .externsjs.table .externsjs.item {
+ height: 0;
+ overflow: hidden;
+ transition: height 200ms ease-in; }
+ .datechooser-popup.open .externsjs.table {
+ transform: none;
+ top: auto;
+ left: auto; }
+ .datechooser-popup.open .externsjs.table .externsjs.item {
+ height: 34px; } }
+j|DateField {
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.DateFieldView");
+ IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.DateChooserModel");
+ IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.DateFieldMouseController");
+ IFormatter: ClassReference("org.apache.royale.html.accessories.StringDateFormatter");
+ IPopUp: ClassReference("org.apache.royale.externsjs.DateChooser"); }
+
+.externsjs.divider {
+ height: 0;
+ margin: 0; }
+
+j|Divider {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
+
+.externsjs.drawer.float {
+ position: fixed;
+ pointer-events: none;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ contain: strict;
+ z-index: 100; }
+ .externsjs.drawer.float::before {
+ position: absolute;
+ display: block;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ content: "";
+ opacity: 0; }
+ .externsjs.drawer.float .drawermain {
+ position: absolute;
+ display: flex;
+ flex-direction: column;
+ left: 0;
+ right: initial;
+ height: 100%; }
+ .externsjs.drawer.float.open {
+ pointer-events: auto; }
+ .externsjs.drawer.float.open::before {
+ opacity: 1; }
+.externsjs.drawer.fixed {
+ width: 0; }
+ .externsjs.drawer.fixed .drawermain {
+ display: inline-flex;
+ flex-direction: column;
+ left: 0;
+ right: auto;
+ height: 100%;
+ overflow: hidden;
+ touch-action: none; }
+ .externsjs.drawer.fixed.open {
+ pointer-events: auto; }
+ .externsjs.drawer.fixed.open .drawermain {
+ transform: none; }
+
+@media (min-width: 768px) {
+ .externsjs.drawer.float .drawermain {
+ width: calc(100% - 60px);
+ max-width: 310px; } }
+.externsjs.drawerheader {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ flex-shrink: 0; }
+ .externsjs.drawerheader div {
+ display: flex;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ align-items: flex-end; }
+
+.externsjs.drawercontent {
+ flex: 1 100 auto;
+ margin: 0;
+ overflow-x: hidden;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ touch-action: pan-y; }
+
+.externsjs.drawerfooter {
+ display: flex;
+ position: relative;
+ width: 100%;
+ height: 66px; }
+
+j|DrawerBase {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
+
+j|Drawer {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
+
+j|DrawerHeader {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
+
+j|DrawerContent {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
+
+.externsjs.dropdownlist {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -o-appearance: none;
+ -ms-appearance: none;
+ appearance: none;
+ width: 200px;
+ margin: 0;
+ padding: 0.68em 2.38em 0.68em 1.12em;
+ cursor: pointer;
+ display: inline-flex;
+ line-height: normal !important;
+ outline: none; }
+
+j|DropDownList {
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.DropDownListView");
+ IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.DropDownListModel");
+ IDataProviderItemRendererMapper: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DropDownListItemRendererFactoryForCollectionView");
+ IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
+ IItemRendererInitializer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DropDownListItemRendererInitializer");
+ IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.DropDownListItemRenderer");
+ IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.DropDownListController"); }
+
+@media -royale-swf {
+ j|DropDownList {
+ IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.ArrayListSelectionModel");
+ IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.DropDownListController");
+ IPopUp: ClassReference("org.apache.royale.externsjs.supportClasses.dropdownlist.DropDownListList"); } }
+.externsjs.footerbar {
+ display: inline-flex;
+ flex: 1 1 auto; }
+ .externsjs.footerbar .footerBarAppHeader {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ width: 100%;
+ z-index: 20;
+ position: fixed;
+ bottom: 0px; }
+ .externsjs.footerbar .footerBarAppHeader.fixed {
+ transition: box-shadow 200ms linear; }
+ .externsjs.footerbar .externsjs.barrow {
+ display: flex;
+ position: relative;
+ width: 100%;
+ height: 64px; }
+ .externsjs.footerbar .externsjs.barsection {
+ display: inline-flex;
+ flex: 1 1 auto;
+ align-items: center;
+ min-width: 0;
+ z-index: 1;
+ order: -1; }
+ .externsjs.footerbar .externsjs.barsection button {
+ will-change: transform, opacity;
+ display: flex;
+ position: relative;
+ flex-shrink: 0;
+ align-items: center;
+ justify-content: center;
+ width: 48px;
+ height: 48px;
+ outline: none;
+ text-decoration: none;
+ opacity: 1; }
+ .externsjs.footerbar .externsjs.barsection button .fonticon {
+ margin-left: 0px;
+ margin-right: 0px; }
+ .externsjs.footerbar .externsjs.bartitle {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ white-space: nowrap;
+ flex: 1 1 auto;
+ overflow: hidden;
+ z-index: 1;
+ line-height: 2rem;
+ letter-spacing: 0.0125em;
+ text-decoration: inherit;
+ text-transform: inherit;
+ text-overflow: ellipsis; }
+
+j|FooterBar {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
+
+.externsjs.formheading .externsjs.label.headingLabel {
+ white-space: initial;
+ flex: 1 1 auto; }
+
+j|FormHeading {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.FormHeadingView");
+ IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.TextModel"); }
+
+j|FormItem {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.FormItemLayout");
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.FormItemView");
+ IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.FormItemModel");
+ IFormItemContentArea: ClassReference("org.apache.royale.externsjs.Group");
+ IFormItemLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout"); }
+
+.fonticon {
+ cursor: default; }
+ .fonticon.size-18 {
+ font-size: 18px; }
+ .fonticon.size-24 {
+ font-size: 24px; }
+ .fonticon.size-36 {
+ font-size: 36px; }
+ .fonticon.size-48 {
+ font-size: 48px; }
+
+.externsjs.imagebutton {
+ border-style: none;
+ padding: 0px; }
+
+j|ImageButton {
+ IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.ImageModel"); }
+
+.externsjs.item, .externsjs.navigationlink, .externsjs.tabbarbutton {
+ text-decoration: none;
+ letter-spacing: 0;
+ line-height: normal !important;
+ overflow: hidden;
+ cursor: auto;
+ flex-shrink: 0;
+ position: relative;
+ list-style: none; }
+ .externsjs.item.selectable, .externsjs.item.hoverable, .externsjs.navigationlink.selectable, .externsjs.navigationlink.hoverable, .externsjs.tabbarbutton.selectable, .externsjs.tabbarbutton.hoverable {
+ cursor: pointer; }
+ .externsjs.item .fonticon, .externsjs.navigationlink .fonticon, .externsjs.tabbarbutton .fonticon {
+ cursor: inherit; }
+
+j|ListItemRenderer {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.BasicLayout");
+ IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ItemRendererMouseController"); }
+
+.externsjs.label {
+ -webkit-font-smoothing: antialiased;
+ cursor: default;
+ white-space: nowrap; }
+ .externsjs.label.multiline {
+ white-space: pre-wrap;
+ word-wrap: break-word; }
+ .externsjs.label.truncate {
+ overflow: hidden;
+ text-overflow: ellipsis; }
+
+j|Label {
+ IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.TextModel"); }
+
+.viewport {
+ overflow: visible; }
+ .viewport.clipped {
+ overflow: hidden; }
+ .viewport.scroll {
+ overflow: auto; }
+
+.layout.basic {
+ position: relative; }
+ .layout.basic > * {
+ position: absolute !important; }
+
+.layout {
+ display: flex; }
+ .layout.horizontal {
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-items: flex-start; }
+ .layout.horizontal > * {
+ flex: 0 1 auto; }
+ .layout.horizontal.flow {
+ flex-wrap: wrap;
+ max-width: 100%; }
+ .layout.horizontal.centered {
+ justify-content: center;
+ align-items: center;
+ align-content: center; }
+ .layout.horizontal.centered > * {
+ flex: 0 0 auto !important; }
+ .layout.horizontal.tile {
+ flex-wrap: wrap; }
+ .layout.horizontal.formitem {
+ width: 100%;
+ align-items: flex-start; }
+ .layout.horizontal.gap-1x3px > *:first-child {
+ margin-left: 0px; }
+ .layout.horizontal.gap-1x3px > * {
+ margin-left: 3px; }
+ .layout.horizontal.gap-2x3px > *:first-child {
+ margin-left: 0px; }
+ .layout.horizontal.gap-2x3px > * {
+ margin-left: 6px; }
+ .layout.horizontal.gap-3x3px > *:first-child {
+ margin-left: 0px; }
+ .layout.horizontal.gap-3x3px > * {
+ margin-left: 9px; }
+ .layout.horizontal.gap-4x3px > *:first-child {
+ margin-left: 0px; }
+ .layout.horizontal.gap-4x3px > * {
+ margin-left: 12px; }
+ .layout.horizontal.gap-5x3px > *:first-child {
+ margin-left: 0px; }
+ .layout.horizontal.gap-5x3px > * {
+ margin-left: 15px; }
+ .layout.horizontal.gap-6x3px > *:first-child {
+ margin-left: 0px; }
+ .layout.horizontal.gap-6x3px > * {
+ margin-left: 18px; }
+ .layout.horizontal.gap-7x3px > *:first-child {
+ margin-left: 0px; }
+ .layout.horizontal.gap-7x3px > * {
+ margin-left: 21px; }
+ .layout.horizontal.gap-8x3px > *:first-child {
+ margin-left: 0px; }
+ .layout.horizontal.gap-8x3px > * {
+ margin-left: 24px; }
+ .layout.horizontal.gap-9x3px > *:first-child {
+ margin-left: 0px; }
+ .layout.horizontal.gap-9x3px > * {
+ margin-left: 27px; }
+ .layout.horizontal.gap-10x3px > *:first-child {
+ margin-left: 0px; }
+ .layout.horizontal.gap-10x3px > * {
+ margin-left: 30px; }
+ .layout.horizontal.itemsReverse.gap-1x3px > *:last-child {
+ margin-left: 0px; }
+ .layout.horizontal.itemsReverse.gap-1x3px > * {
+ margin-left: 3px; }
+ .layout.horizontal.itemsReverse.gap-2x3px > *:last-child {
+ margin-left: 0px; }
+ .layout.horizontal.itemsReverse.gap-2x3px > * {
+ margin-left: 6px; }
+ .layout.horizontal.itemsReverse.gap-3x3px > *:last-child {
+ margin-left: 0px; }
+ .layout.horizontal.itemsReverse.gap-3x3px > * {
+ margin-left: 9px; }
+ .layout.horizontal.itemsReverse.gap-4x3px > *:last-child {
+ margin-left: 0px; }
+ .layout.horizontal.itemsReverse.gap-4x3px > * {
+ margin-left: 12px; }
+ .layout.horizontal.itemsReverse.gap-5x3px > *:last-child {
+ margin-left: 0px; }
+ .layout.horizontal.itemsReverse.gap-5x3px > * {
+ margin-left: 15px; }
+ .layout.horizontal.itemsReverse.gap-6x3px > *:last-child {
+ margin-left: 0px; }
+ .layout.horizontal.itemsReverse.gap-6x3px > * {
+ margin-left: 18px; }
+ .layout.horizontal.itemsReverse.gap-7x3px > *:last-child {
+ margin-left: 0px; }
+ .layout.horizontal.itemsReverse.gap-7x3px > * {
+ margin-left: 21px; }
+ .layout.horizontal.itemsReverse.gap-8x3px > *:last-child {
+ margin-left: 0px; }
+ .layout.horizontal.itemsReverse.gap-8x3px > * {
+ margin-left: 24px; }
+ .layout.horizontal.itemsReverse.gap-9x3px > *:last-child {
+ margin-left: 0px; }
+ .layout.horizontal.itemsReverse.gap-9x3px > * {
+ margin-left: 27px; }
+ .layout.horizontal.itemsReverse.gap-10x3px > *:last-child {
+ margin-left: 0px; }
+ .layout.horizontal.itemsReverse.gap-10x3px > * {
+ margin-left: 30px; }
+ .layout.horizontal.sameWidths > * {
+ flex: 1 0 0; }
+ .layout.horizontal.pixelWidths > * {
+ flex: none; }
+ .layout.horizontal.proportionalWidths > * {
+ flex: 1 0; }
+ .layout.horizontal.percentWidths > * {
+ flex: 1 0 auto; }
+ .layout.horizontal.naturalWidths > * {
+ flex: none; }
+ .layout.vertical {
+ flex-direction: column;
+ flex-wrap: nowrap;
+ align-items: flex-start; }
+ .layout.vertical > * {
+ flex: 0 1 auto; }
+ .layout.vertical.flow {
+ flex-wrap: wrap; }
+ .layout.vertical.centered {
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+ flex-direction: column;
+ height: 100%; }
+ .layout.vertical.centered > * {
+ flex: 0 0 auto !important; }
+ .layout.vertical.tile {
+ flex-wrap: wrap; }
+ .layout.vertical.form {
+ width: 100%; }
+ .layout.vertical.gap-1x3px > *:first-child {
+ margin-top: 0px; }
+ .layout.vertical.gap-1x3px > * {
+ margin-top: 3px; }
+ .layout.vertical.gap-2x3px > *:first-child {
+ margin-top: 0px; }
+ .layout.vertical.gap-2x3px > * {
+ margin-top: 6px; }
+ .layout.vertical.gap-3x3px > *:first-child {
+ margin-top: 0px; }
+ .layout.vertical.gap-3x3px > * {
+ margin-top: 9px; }
+ .layout.vertical.gap-4x3px > *:first-child {
+ margin-top: 0px; }
+ .layout.vertical.gap-4x3px > * {
+ margin-top: 12px; }
+ .layout.vertical.gap-5x3px > *:first-child {
+ margin-top: 0px; }
+ .layout.vertical.gap-5x3px > * {
+ margin-top: 15px; }
+ .layout.vertical.gap-6x3px > *:first-child {
+ margin-top: 0px; }
+ .layout.vertical.gap-6x3px > * {
+ margin-top: 18px; }
+ .layout.vertical.gap-7x3px > *:first-child {
+ margin-top: 0px; }
+ .layout.vertical.gap-7x3px > * {
+ margin-top: 21px; }
+ .layout.vertical.gap-8x3px > *:first-child {
+ margin-top: 0px; }
+ .layout.vertical.gap-8x3px > * {
+ margin-top: 24px; }
+ .layout.vertical.gap-9x3px > *:first-child {
+ margin-top: 0px; }
+ .layout.vertical.gap-9x3px > * {
+ margin-top: 27px; }
+ .layout.vertical.gap-10x3px > *:first-child {
+ margin-top: 0px; }
+ .layout.vertical.gap-10x3px > * {
+ margin-top: 30px; }
+ .layout.vertical.itemsReverse.gap-1x3px > *:-child {
+ margin-top: 0px; }
+ .layout.vertical.itemsReverse.gap-1x3px > * {
+ margin-top: 3px; }
+ .layout.vertical.itemsReverse.gap-2x3px > *:-child {
+ margin-top: 0px; }
+ .layout.vertical.itemsReverse.gap-2x3px > * {
+ margin-top: 6px; }
+ .layout.vertical.itemsReverse.gap-3x3px > *:-child {
+ margin-top: 0px; }
+ .layout.vertical.itemsReverse.gap-3x3px > * {
+ margin-top: 9px; }
+ .layout.vertical.itemsReverse.gap-4x3px > *:-child {
+ margin-top: 0px; }
+ .layout.vertical.itemsReverse.gap-4x3px > * {
+ margin-top: 12px; }
+ .layout.vertical.itemsReverse.gap-5x3px > *:-child {
+ margin-top: 0px; }
+ .layout.vertical.itemsReverse.gap-5x3px > * {
+ margin-top: 15px; }
+ .layout.vertical.itemsReverse.gap-6x3px > *:-child {
+ margin-top: 0px; }
+ .layout.vertical.itemsReverse.gap-6x3px > * {
+ margin-top: 18px; }
+ .layout.vertical.itemsReverse.gap-7x3px > *:-child {
+ margin-top: 0px; }
+ .layout.vertical.itemsReverse.gap-7x3px > * {
+ margin-top: 21px; }
+ .layout.vertical.itemsReverse.gap-8x3px > *:-child {
+ margin-top: 0px; }
+ .layout.vertical.itemsReverse.gap-8x3px > * {
+ margin-top: 24px; }
+ .layout.vertical.itemsReverse.gap-9x3px > *:-child {
+ margin-top: 0px; }
+ .layout.vertical.itemsReverse.gap-9x3px > * {
+ margin-top: 27px; }
+ .layout.vertical.itemsReverse.gap-10x3px > *:-child {
+ margin-top: 0px; }
+ .layout.vertical.itemsReverse.gap-10x3px > * {
+ margin-top: 30px; }
+ .layout.grid {
+ flex-flow: row wrap;
+ width: 100%; }
+ .layout.grid > * {
+ flex: 1 1 auto;
+ max-width: 100%;
+ width: 100%; }
+ @media (min-width: 0px) {
+ .layout.grid .phone-col-1-1 {
+ width: 100%; }
+ .layout.grid .phone-col-1-2 {
+ width: 50%; }
+ .layout.grid .phone-col-2-2 {
+ width: 100%; }
+ .layout.grid .phone-col-1-3 {
+ width: 33.3333333333%; }
+ .layout.grid .phone-col-2-3 {
+ width: 66.6666666667%; }
+ .layout.grid .phone-col-3-3 {
+ width: 100%; }
+ .layout.grid .phone-col-1-4 {
+ width: 25%; }
+ .layout.grid .phone-col-2-4 {
+ width: 50%; }
+ .layout.grid .phone-col-3-4 {
+ width: 75%; }
+ .layout.grid .phone-col-4-4 {
+ width: 100%; }
+ .layout.grid .phone-col-1-5 {
+ width: 20%; }
+ .layout.grid .phone-col-2-5 {
+ width: 40%; }
+ .layout.grid .phone-col-3-5 {
+ width: 60%; }
+ .layout.grid .phone-col-4-5 {
+ width: 80%; }
+ .layout.grid .phone-col-5-5 {
+ width: 100%; }
+ .layout.grid .phone-col-1-6 {
+ width: 16.6666666667%; }
+ .layout.grid .phone-col-2-6 {
+ width: 33.3333333333%; }
+ .layout.grid .phone-col-3-6 {
+ width: 50%; }
+ .layout.grid .phone-col-4-6 {
+ width: 66.6666666667%; }
+ .layout.grid .phone-col-5-6 {
+ width: 83.3333333333%; }
+ .layout.grid .phone-col-6-6 {
+ width: 100%; }
+ .layout.grid .phone-col-1-7 {
+ width: 14.2857142857%; }
+ .layout.grid .phone-col-2-7 {
+ width: 28.5714285714%; }
+ .layout.grid .phone-col-3-7 {
+ width: 42.8571428571%; }
+ .layout.grid .phone-col-4-7 {
+ width: 57.1428571429%; }
+ .layout.grid .phone-col-5-7 {
+ width: 71.4285714286%; }
+ .layout.grid .phone-col-6-7 {
+ width: 85.7142857143%; }
+ .layout.grid .phone-col-7-7 {
+ width: 100%; }
+ .layout.grid .phone-col-1-8 {
+ width: 12.5%; }
+ .layout.grid .phone-col-2-8 {
+ width: 25%; }
+ .layout.grid .phone-col-3-8 {
+ width: 37.5%; }
+ .layout.grid .phone-col-4-8 {
+ width: 50%; }
+ .layout.grid .phone-col-5-8 {
+ width: 62.5%; }
+ .layout.grid .phone-col-6-8 {
+ width: 75%; }
+ .layout.grid .phone-col-7-8 {
+ width: 87.5%; }
+ .layout.grid .phone-col-8-8 {
+ width: 100%; }
+ .layout.grid .phone-col-1-9 {
+ width: 11.1111111111%; }
+ .layout.grid .phone-col-2-9 {
+ width: 22.2222222222%; }
+ .layout.grid .phone-col-3-9 {
+ width: 33.3333333333%; }
+ .layout.grid .phone-col-4-9 {
+ width: 44.4444444444%; }
+ .layout.grid .phone-col-5-9 {
+ width: 55.5555555556%; }
+ .layout.grid .phone-col-6-9 {
+ width: 66.6666666667%; }
+ .layout.grid .phone-col-7-9 {
+ width: 77.7777777778%; }
+ .layout.grid .phone-col-8-9 {
+ width: 88.8888888889%; }
+ .layout.grid .phone-col-9-9 {
+ width: 100%; }
+ .layout.grid .phone-col-1-10 {
+ width: 10%; }
+ .layout.grid .phone-col-2-10 {
+ width: 20%; }
+ .layout.grid .phone-col-3-10 {
+ width: 30%; }
+ .layout.grid .phone-col-4-10 {
+ width: 40%; }
+ .layout.grid .phone-col-5-10 {
+ width: 50%; }
+ .layout.grid .phone-col-6-10 {
+ width: 60%; }
+ .layout.grid .phone-col-7-10 {
+ width: 70%; }
+ .layout.grid .phone-col-8-10 {
+ width: 80%; }
+ .layout.grid .phone-col-9-10 {
+ width: 90%; }
+ .layout.grid .phone-col-10-10 {
+ width: 100%; }
+ .layout.grid .phone-col-1-11 {
+ width: 9.0909090909%; }
+ .layout.grid .phone-col-2-11 {
+ width: 18.1818181818%; }
+ .layout.grid .phone-col-3-11 {
+ width: 27.2727272727%; }
+ .layout.grid .phone-col-4-11 {
+ width: 36.3636363636%; }
+ .layout.grid .phone-col-5-11 {
+ width: 45.4545454545%; }
+ .layout.grid .phone-col-6-11 {
+ width: 54.5454545455%; }
+ .layout.grid .phone-col-7-11 {
+ width: 63.6363636364%; }
+ .layout.grid .phone-col-8-11 {
+ width: 72.7272727273%; }
+ .layout.grid .phone-col-9-11 {
+ width: 81.8181818182%; }
+ .layout.grid .phone-col-10-11 {
+ width: 90.9090909091%; }
+ .layout.grid .phone-col-11-11 {
+ width: 100%; }
+ .layout.grid .phone-col-1-12 {
+ width: 8.3333333333%; }
+ .layout.grid .phone-col-2-12 {
+ width: 16.6666666667%; }
+ .layout.grid .phone-col-3-12 {
+ width: 25%; }
+ .layout.grid .phone-col-4-12 {
+ width: 33.3333333333%; }
+ .layout.grid .phone-col-5-12 {
+ width: 41.6666666667%; }
+ .layout.grid .phone-col-6-12 {
+ width: 50%; }
+ .layout.grid .phone-col-7-12 {
+ width: 58.3333333333%; }
+ .layout.grid .phone-col-8-12 {
+ width: 66.6666666667%; }
+ .layout.grid .phone-col-9-12 {
+ width: 75%; }
+ .layout.grid .phone-col-10-12 {
+ width: 83.3333333333%; }
+ .layout.grid .phone-col-11-12 {
+ width: 91.6666666667%; }
+ .layout.grid .phone-col-12-12 {
+ width: 100%; } }
+ @media (min-width: 768px) {
+ .layout.grid .tablet-col-1-1 {
+ width: 100%; }
+ .layout.grid .tablet-col-1-2 {
+ width: 50%; }
+ .layout.grid .tablet-col-2-2 {
+ width: 100%; }
+ .layout.grid .tablet-col-1-3 {
+ width: 33.3333333333%; }
+ .layout.grid .tablet-col-2-3 {
+ width: 66.6666666667%; }
+ .layout.grid .tablet-col-3-3 {
+ width: 100%; }
+ .layout.grid .tablet-col-1-4 {
+ width: 25%; }
+ .layout.grid .tablet-col-2-4 {
+ width: 50%; }
+ .layout.grid .tablet-col-3-4 {
+ width: 75%; }
+ .layout.grid .tablet-col-4-4 {
+ width: 100%; }
+ .layout.grid .tablet-col-1-5 {
+ width: 20%; }
+ .layout.grid .tablet-col-2-5 {
+ width: 40%; }
+ .layout.grid .tablet-col-3-5 {
+ width: 60%; }
+ .layout.grid .tablet-col-4-5 {
+ width: 80%; }
+ .layout.grid .tablet-col-5-5 {
+ width: 100%; }
+ .layout.grid .tablet-col-1-6 {
+ width: 16.6666666667%; }
+ .layout.grid .tablet-col-2-6 {
+ width: 33.3333333333%; }
+ .layout.grid .tablet-col-3-6 {
+ width: 50%; }
+ .layout.grid .tablet-col-4-6 {
+ width: 66.6666666667%; }
+ .layout.grid .tablet-col-5-6 {
+ width: 83.3333333333%; }
+ .layout.grid .tablet-col-6-6 {
+ width: 100%; }
+ .layout.grid .tablet-col-1-7 {
+ width: 14.2857142857%; }
+ .layout.grid .tablet-col-2-7 {
+ width: 28.5714285714%; }
+ .layout.grid .tablet-col-3-7 {
+ width: 42.8571428571%; }
+ .layout.grid .tablet-col-4-7 {
+ width: 57.1428571429%; }
+ .layout.grid .tablet-col-5-7 {
+ width: 71.4285714286%; }
+ .layout.grid .tablet-col-6-7 {
+ width: 85.7142857143%; }
+ .layout.grid .tablet-col-7-7 {
+ width: 100%; }
+ .layout.grid .tablet-col-1-8 {
+ width: 12.5%; }
+ .layout.grid .tablet-col-2-8 {
+ width: 25%; }
+ .layout.grid .tablet-col-3-8 {
+ width: 37.5%; }
+ .layout.grid .tablet-col-4-8 {
+ width: 50%; }
+ .layout.grid .tablet-col-5-8 {
+ width: 62.5%; }
+ .layout.grid .tablet-col-6-8 {
+ width: 75%; }
+ .layout.grid .tablet-col-7-8 {
+ width: 87.5%; }
+ .layout.grid .tablet-col-8-8 {
+ width: 100%; }
+ .layout.grid .tablet-col-1-9 {
+ width: 11.1111111111%; }
+ .layout.grid .tablet-col-2-9 {
+ width: 22.2222222222%; }
+ .layout.grid .tablet-col-3-9 {
+ width: 33.3333333333%; }
+ .layout.grid .tablet-col-4-9 {
+ width: 44.4444444444%; }
+ .layout.grid .tablet-col-5-9 {
+ width: 55.5555555556%; }
+ .layout.grid .tablet-col-6-9 {
+ width: 66.6666666667%; }
+ .layout.grid .tablet-col-7-9 {
+ width: 77.7777777778%; }
+ .layout.grid .tablet-col-8-9 {
+ width: 88.8888888889%; }
+ .layout.grid .tablet-col-9-9 {
+ width: 100%; }
+ .layout.grid .tablet-col-1-10 {
+ width: 10%; }
+ .layout.grid .tablet-col-2-10 {
+ width: 20%; }
+ .layout.grid .tablet-col-3-10 {
+ width: 30%; }
+ .layout.grid .tablet-col-4-10 {
+ width: 40%; }
+ .layout.grid .tablet-col-5-10 {
+ width: 50%; }
+ .layout.grid .tablet-col-6-10 {
+ width: 60%; }
+ .layout.grid .tablet-col-7-10 {
+ width: 70%; }
+ .layout.grid .tablet-col-8-10 {
+ width: 80%; }
+ .layout.grid .tablet-col-9-10 {
+ width: 90%; }
+ .layout.grid .tablet-col-10-10 {
+ width: 100%; }
+ .layout.grid .tablet-col-1-11 {
+ width: 9.0909090909%; }
+ .layout.grid .tablet-col-2-11 {
+ width: 18.1818181818%; }
+ .layout.grid .tablet-col-3-11 {
+ width: 27.2727272727%; }
+ .layout.grid .tablet-col-4-11 {
+ width: 36.3636363636%; }
+ .layout.grid .tablet-col-5-11 {
+ width: 45.4545454545%; }
+ .layout.grid .tablet-col-6-11 {
+ width: 54.5454545455%; }
+ .layout.grid .tablet-col-7-11 {
+ width: 63.6363636364%; }
+ .layout.grid .tablet-col-8-11 {
+ width: 72.7272727273%; }
+ .layout.grid .tablet-col-9-11 {
+ width: 81.8181818182%; }
+ .layout.grid .tablet-col-10-11 {
+ width: 90.9090909091%; }
+ .layout.grid .tablet-col-11-11 {
+ width: 100%; }
+ .layout.grid .tablet-col-1-12 {
+ width: 8.3333333333%; }
+ .layout.grid .tablet-col-2-12 {
+ width: 16.6666666667%; }
+ .layout.grid .tablet-col-3-12 {
+ width: 25%; }
+ .layout.grid .tablet-col-4-12 {
+ width: 33.3333333333%; }
+ .layout.grid .tablet-col-5-12 {
+ width: 41.6666666667%; }
+ .layout.grid .tablet-col-6-12 {
+ width: 50%; }
+ .layout.grid .tablet-col-7-12 {
+ width: 58.3333333333%; }
+ .layout.grid .tablet-col-8-12 {
+ width: 66.6666666667%; }
+ .layout.grid .tablet-col-9-12 {
+ width: 75%; }
+ .layout.grid .tablet-col-10-12 {
+ width: 83.3333333333%; }
+ .layout.grid .tablet-col-11-12 {
+ width: 91.6666666667%; }
+ .layout.grid .tablet-col-12-12 {
+ width: 100%; } }
+ @media (min-width: 992px) {
+ .layout.grid .desktop-col-1-1 {
+ width: 100%; }
+ .layout.grid .desktop-col-1-2 {
+ width: 50%; }
+ .layout.grid .desktop-col-2-2 {
+ width: 100%; }
+ .layout.grid .desktop-col-1-3 {
+ width: 33.3333333333%; }
+ .layout.grid .desktop-col-2-3 {
+ width: 66.6666666667%; }
+ .layout.grid .desktop-col-3-3 {
+ width: 100%; }
+ .layout.grid .desktop-col-1-4 {
+ width: 25%; }
+ .layout.grid .desktop-col-2-4 {
+ width: 50%; }
+ .layout.grid .desktop-col-3-4 {
+ width: 75%; }
+ .layout.grid .desktop-col-4-4 {
+ width: 100%; }
+ .layout.grid .desktop-col-1-5 {
+ width: 20%; }
+ .layout.grid .desktop-col-2-5 {
+ width: 40%; }
+ .layout.grid .desktop-col-3-5 {
+ width: 60%; }
+ .layout.grid .desktop-col-4-5 {
+ width: 80%; }
+ .layout.grid .desktop-col-5-5 {
+ width: 100%; }
+ .layout.grid .desktop-col-1-6 {
+ width: 16.6666666667%; }
+ .layout.grid .desktop-col-2-6 {
+ width: 33.3333333333%; }
+ .layout.grid .desktop-col-3-6 {
+ width: 50%; }
+ .layout.grid .desktop-col-4-6 {
+ width: 66.6666666667%; }
+ .layout.grid .desktop-col-5-6 {
+ width: 83.3333333333%; }
+ .layout.grid .desktop-col-6-6 {
+ width: 100%; }
+ .layout.grid .desktop-col-1-7 {
+ width: 14.2857142857%; }
+ .layout.grid .desktop-col-2-7 {
+ width: 28.5714285714%; }
+ .layout.grid .desktop-col-3-7 {
+ width: 42.8571428571%; }
+ .layout.grid .desktop-col-4-7 {
+ width: 57.1428571429%; }
+ .layout.grid .desktop-col-5-7 {
+ width: 71.4285714286%; }
+ .layout.grid .desktop-col-6-7 {
+ width: 85.7142857143%; }
+ .layout.grid .desktop-col-7-7 {
+ width: 100%; }
+ .layout.grid .desktop-col-1-8 {
+ width: 12.5%; }
+ .layout.grid .desktop-col-2-8 {
+ width: 25%; }
+ .layout.grid .desktop-col-3-8 {
+ width: 37.5%; }
+ .layout.grid .desktop-col-4-8 {
+ width: 50%; }
+ .layout.grid .desktop-col-5-8 {
+ width: 62.5%; }
+ .layout.grid .desktop-col-6-8 {
+ width: 75%; }
+ .layout.grid .desktop-col-7-8 {
+ width: 87.5%; }
+ .layout.grid .desktop-col-8-8 {
+ width: 100%; }
+ .layout.grid .desktop-col-1-9 {
+ width: 11.1111111111%; }
+ .layout.grid .desktop-col-2-9 {
+ width: 22.2222222222%; }
+ .layout.grid .desktop-col-3-9 {
+ width: 33.3333333333%; }
+ .layout.grid .desktop-col-4-9 {
+ width: 44.4444444444%; }
+ .layout.grid .desktop-col-5-9 {
+ width: 55.5555555556%; }
+ .layout.grid .desktop-col-6-9 {
+ width: 66.6666666667%; }
+ .layout.grid .desktop-col-7-9 {
+ width: 77.7777777778%; }
+ .layout.grid .desktop-col-8-9 {
+ width: 88.8888888889%; }
+ .layout.grid .desktop-col-9-9 {
+ width: 100%; }
+ .layout.grid .desktop-col-1-10 {
+ width: 10%; }
+ .layout.grid .desktop-col-2-10 {
+ width: 20%; }
+ .layout.grid .desktop-col-3-10 {
+ width: 30%; }
+ .layout.grid .desktop-col-4-10 {
+ width: 40%; }
+ .layout.grid .desktop-col-5-10 {
+ width: 50%; }
+ .layout.grid .desktop-col-6-10 {
+ width: 60%; }
+ .layout.grid .desktop-col-7-10 {
+ width: 70%; }
+ .layout.grid .desktop-col-8-10 {
+ width: 80%; }
+ .layout.grid .desktop-col-9-10 {
+ width: 90%; }
+ .layout.grid .desktop-col-10-10 {
+ width: 100%; }
+ .layout.grid .desktop-col-1-11 {
+ width: 9.0909090909%; }
+ .layout.grid .desktop-col-2-11 {
+ width: 18.1818181818%; }
+ .layout.grid .desktop-col-3-11 {
+ width: 27.2727272727%; }
+ .layout.grid .desktop-col-4-11 {
+ width: 36.3636363636%; }
+ .layout.grid .desktop-col-5-11 {
+ width: 45.4545454545%; }
+ .layout.grid .desktop-col-6-11 {
+ width: 54.5454545455%; }
+ .layout.grid .desktop-col-7-11 {
+ width: 63.6363636364%; }
+ .layout.grid .desktop-col-8-11 {
+ width: 72.7272727273%; }
+ .layout.grid .desktop-col-9-11 {
+ width: 81.8181818182%; }
+ .layout.grid .desktop-col-10-11 {
+ width: 90.9090909091%; }
+ .layout.grid .desktop-col-11-11 {
+ width: 100%; }
+ .layout.grid .desktop-col-1-12 {
+ width: 8.3333333333%; }
+ .layout.grid .desktop-col-2-12 {
+ width: 16.6666666667%; }
+ .layout.grid .desktop-col-3-12 {
+ width: 25%; }
+ .layout.grid .desktop-col-4-12 {
+ width: 33.3333333333%; }
+ .layout.grid .desktop-col-5-12 {
+ width: 41.6666666667%; }
+ .layout.grid .desktop-col-6-12 {
+ width: 50%; }
+ .layout.grid .desktop-col-7-12 {
+ width: 58.3333333333%; }
+ .layout.grid .desktop-col-8-12 {
+ width: 66.6666666667%; }
+ .layout.grid .desktop-col-9-12 {
+ width: 75%; }
+ .layout.grid .desktop-col-10-12 {
+ width: 83.3333333333%; }
+ .layout.grid .desktop-col-11-12 {
+ width: 91.6666666667%; }
+ .layout.grid .desktop-col-12-12 {
+ width: 100%; } }
+ @media (min-width: 1600px) {
+ .layout.grid .widescreen-col-1-1 {
+ width: 100%; }
+ .layout.grid .widescreen-col-1-2 {
+ width: 50%; }
+ .layout.grid .widescreen-col-2-2 {
+ width: 100%; }
+ .layout.grid .widescreen-col-1-3 {
+ width: 33.3333333333%; }
+ .layout.grid .widescreen-col-2-3 {
+ width: 66.6666666667%; }
+ .layout.grid .widescreen-col-3-3 {
+ width: 100%; }
+ .layout.grid .widescreen-col-1-4 {
+ width: 25%; }
+ .layout.grid .widescreen-col-2-4 {
+ width: 50%; }
+ .layout.grid .widescreen-col-3-4 {
+ width: 75%; }
+ .layout.grid .widescreen-col-4-4 {
+ width: 100%; }
+ .layout.grid .widescreen-col-1-5 {
+ width: 20%; }
+ .layout.grid .widescreen-col-2-5 {
+ width: 40%; }
+ .layout.grid .widescreen-col-3-5 {
+ width: 60%; }
+ .layout.grid .widescreen-col-4-5 {
+ width: 80%; }
+ .layout.grid .widescreen-col-5-5 {
+ width: 100%; }
+ .layout.grid .widescreen-col-1-6 {
+ width: 16.6666666667%; }
+ .layout.grid .widescreen-col-2-6 {
+ width: 33.3333333333%; }
+ .layout.grid .widescreen-col-3-6 {
+ width: 50%; }
+ .layout.grid .widescreen-col-4-6 {
+ width: 66.6666666667%; }
+ .layout.grid .widescreen-col-5-6 {
+ width: 83.3333333333%; }
+ .layout.grid .widescreen-col-6-6 {
+ width: 100%; }
+ .layout.grid .widescreen-col-1-7 {
+ width: 14.2857142857%; }
+ .layout.grid .widescreen-col-2-7 {
+ width: 28.5714285714%; }
+ .layout.grid .widescreen-col-3-7 {
+ width: 42.8571428571%; }
+ .layout.grid .widescreen-col-4-7 {
+ width: 57.1428571429%; }
+ .layout.grid .widescreen-col-5-7 {
+ width: 71.4285714286%; }
+ .layout.grid .widescreen-col-6-7 {
+ width: 85.7142857143%; }
+ .layout.grid .widescreen-col-7-7 {
+ width: 100%; }
+ .layout.grid .widescreen-col-1-8 {
+ width: 12.5%; }
+ .layout.grid .widescreen-col-2-8 {
+ width: 25%; }
+ .layout.grid .widescreen-col-3-8 {
+ width: 37.5%; }
+ .layout.grid .widescreen-col-4-8 {
+ width: 50%; }
+ .layout.grid .widescreen-col-5-8 {
+ width: 62.5%; }
+ .layout.grid .widescreen-col-6-8 {
+ width: 75%; }
+ .layout.grid .widescreen-col-7-8 {
+ width: 87.5%; }
+ .layout.grid .widescreen-col-8-8 {
+ width: 100%; }
+ .layout.grid .widescreen-col-1-9 {
+ width: 11.1111111111%; }
+ .layout.grid .widescreen-col-2-9 {
+ width: 22.2222222222%; }
+ .layout.grid .widescreen-col-3-9 {
+ width: 33.3333333333%; }
+ .layout.grid .widescreen-col-4-9 {
+ width: 44.4444444444%; }
+ .layout.grid .widescreen-col-5-9 {
+ width: 55.5555555556%; }
+ .layout.grid .widescreen-col-6-9 {
+ width: 66.6666666667%; }
+ .layout.grid .widescreen-col-7-9 {
+ width: 77.7777777778%; }
+ .layout.grid .widescreen-col-8-9 {
+ width: 88.8888888889%; }
+ .layout.grid .widescreen-col-9-9 {
+ width: 100%; }
+ .layout.grid .widescreen-col-1-10 {
+ width: 10%; }
+ .layout.grid .widescreen-col-2-10 {
+ width: 20%; }
+ .layout.grid .widescreen-col-3-10 {
+ width: 30%; }
+ .layout.grid .widescreen-col-4-10 {
+ width: 40%; }
+ .layout.grid .widescreen-col-5-10 {
+ width: 50%; }
+ .layout.grid .widescreen-col-6-10 {
+ width: 60%; }
+ .layout.grid .widescreen-col-7-10 {
+ width: 70%; }
+ .layout.grid .widescreen-col-8-10 {
+ width: 80%; }
+ .layout.grid .widescreen-col-9-10 {
+ width: 90%; }
+ .layout.grid .widescreen-col-10-10 {
+ width: 100%; }
+ .layout.grid .widescreen-col-1-11 {
+ width: 9.0909090909%; }
+ .layout.grid .widescreen-col-2-11 {
+ width: 18.1818181818%; }
+ .layout.grid .widescreen-col-3-11 {
+ width: 27.2727272727%; }
+ .layout.grid .widescreen-col-4-11 {
+ width: 36.3636363636%; }
+ .layout.grid .widescreen-col-5-11 {
+ width: 45.4545454545%; }
+ .layout.grid .widescreen-col-6-11 {
+ width: 54.5454545455%; }
+ .layout.grid .widescreen-col-7-11 {
+ width: 63.6363636364%; }
+ .layout.grid .widescreen-col-8-11 {
+ width: 72.7272727273%; }
+ .layout.grid .widescreen-col-9-11 {
+ width: 81.8181818182%; }
+ .layout.grid .widescreen-col-10-11 {
+ width: 90.9090909091%; }
+ .layout.grid .widescreen-col-11-11 {
+ width: 100%; }
+ .layout.grid .widescreen-col-1-12 {
+ width: 8.3333333333%; }
+ .layout.grid .widescreen-col-2-12 {
+ width: 16.6666666667%; }
+ .layout.grid .widescreen-col-3-12 {
+ width: 25%; }
+ .layout.grid .widescreen-col-4-12 {
+ width: 33.3333333333%; }
+ .layout.grid .widescreen-col-5-12 {
+ width: 41.6666666667%; }
+ .layout.grid .widescreen-col-6-12 {
+ width: 50%; }
+ .layout.grid .widescreen-col-7-12 {
+ width: 58.3333333333%; }
+ .layout.grid .widescreen-col-8-12 {
+ width: 66.6666666667%; }
+ .layout.grid .widescreen-col-9-12 {
+ width: 75%; }
+ .layout.grid .widescreen-col-10-12 {
+ width: 83.3333333333%; }
+ .layout.grid .widescreen-col-11-12 {
+ width: 91.6666666667%; }
+ .layout.grid .widescreen-col-12-12 {
+ width: 100%; } }
+ .layout.grid.gap > * {
+ margin: 5px; }
+ @media (min-width: 0px) {
+ .layout.grid.gap .phone-col-1-1 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .phone-col-1-2 {
+ width: calc(50% - 10px); }
+ .layout.grid.gap .phone-col-2-2 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .phone-col-1-3 {
+ width: calc(33.3333333333% - 10px); }
+ .layout.grid.gap .phone-col-2-3 {
+ width: calc(66.6666666667% - 10px); }
+ .layout.grid.gap .phone-col-3-3 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .phone-col-1-4 {
+ width: calc(25% - 10px); }
+ .layout.grid.gap .phone-col-2-4 {
+ width: calc(50% - 10px); }
+ .layout.grid.gap .phone-col-3-4 {
+ width: calc(75% - 10px); }
+ .layout.grid.gap .phone-col-4-4 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .phone-col-1-5 {
+ width: calc(20% - 10px); }
+ .layout.grid.gap .phone-col-2-5 {
+ width: calc(40% - 10px); }
+ .layout.grid.gap .phone-col-3-5 {
+ width: calc(60% - 10px); }
+ .layout.grid.gap .phone-col-4-5 {
+ width: calc(80% - 10px); }
+ .layout.grid.gap .phone-col-5-5 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .phone-col-1-6 {
+ width: calc(16.6666666667% - 10px); }
+ .layout.grid.gap .phone-col-2-6 {
+ width: calc(33.3333333333% - 10px); }
+ .layout.grid.gap .phone-col-3-6 {
+ width: calc(50% - 10px); }
+ .layout.grid.gap .phone-col-4-6 {
+ width: calc(66.6666666667% - 10px); }
+ .layout.grid.gap .phone-col-5-6 {
+ width: calc(83.3333333333% - 10px); }
+ .layout.grid.gap .phone-col-6-6 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .phone-col-1-7 {
+ width: calc(14.2857142857% - 10px); }
+ .layout.grid.gap .phone-col-2-7 {
+ width: calc(28.5714285714% - 10px); }
+ .layout.grid.gap .phone-col-3-7 {
+ width: calc(42.8571428571% - 10px); }
+ .layout.grid.gap .phone-col-4-7 {
+ width: calc(57.1428571429% - 10px); }
+ .layout.grid.gap .phone-col-5-7 {
+ width: calc(71.4285714286% - 10px); }
+ .layout.grid.gap .phone-col-6-7 {
+ width: calc(85.7142857143% - 10px); }
+ .layout.grid.gap .phone-col-7-7 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .phone-col-1-8 {
+ width: calc(12.5% - 10px); }
+ .layout.grid.gap .phone-col-2-8 {
+ width: calc(25% - 10px); }
+ .layout.grid.gap .phone-col-3-8 {
+ width: calc(37.5% - 10px); }
+ .layout.grid.gap .phone-col-4-8 {
+ width: calc(50% - 10px); }
+ .layout.grid.gap .phone-col-5-8 {
+ width: calc(62.5% - 10px); }
+ .layout.grid.gap .phone-col-6-8 {
+ width: calc(75% - 10px); }
+ .layout.grid.gap .phone-col-7-8 {
+ width: calc(87.5% - 10px); }
+ .layout.grid.gap .phone-col-8-8 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .phone-col-1-9 {
+ width: calc(11.1111111111% - 10px); }
+ .layout.grid.gap .phone-col-2-9 {
+ width: calc(22.2222222222% - 10px); }
+ .layout.grid.gap .phone-col-3-9 {
+ width: calc(33.3333333333% - 10px); }
+ .layout.grid.gap .phone-col-4-9 {
+ width: calc(44.4444444444% - 10px); }
+ .layout.grid.gap .phone-col-5-9 {
+ width: calc(55.5555555556% - 10px); }
+ .layout.grid.gap .phone-col-6-9 {
+ width: calc(66.6666666667% - 10px); }
+ .layout.grid.gap .phone-col-7-9 {
+ width: calc(77.7777777778% - 10px); }
+ .layout.grid.gap .phone-col-8-9 {
+ width: calc(88.8888888889% - 10px); }
+ .layout.grid.gap .phone-col-9-9 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .phone-col-1-10 {
+ width: calc(10% - 10px); }
+ .layout.grid.gap .phone-col-2-10 {
+ width: calc(20% - 10px); }
+ .layout.grid.gap .phone-col-3-10 {
+ width: calc(30% - 10px); }
+ .layout.grid.gap .phone-col-4-10 {
+ width: calc(40% - 10px); }
+ .layout.grid.gap .phone-col-5-10 {
+ width: calc(50% - 10px); }
+ .layout.grid.gap .phone-col-6-10 {
+ width: calc(60% - 10px); }
+ .layout.grid.gap .phone-col-7-10 {
+ width: calc(70% - 10px); }
+ .layout.grid.gap .phone-col-8-10 {
+ width: calc(80% - 10px); }
+ .layout.grid.gap .phone-col-9-10 {
+ width: calc(90% - 10px); }
+ .layout.grid.gap .phone-col-10-10 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .phone-col-1-11 {
+ width: calc(9.0909090909% - 10px); }
+ .layout.grid.gap .phone-col-2-11 {
+ width: calc(18.1818181818% - 10px); }
+ .layout.grid.gap .phone-col-3-11 {
+ width: calc(27.2727272727% - 10px); }
+ .layout.grid.gap .phone-col-4-11 {
+ width: calc(36.3636363636% - 10px); }
+ .layout.grid.gap .phone-col-5-11 {
+ width: calc(45.4545454545% - 10px); }
+ .layout.grid.gap .phone-col-6-11 {
+ width: calc(54.5454545455% - 10px); }
+ .layout.grid.gap .phone-col-7-11 {
+ width: calc(63.6363636364% - 10px); }
+ .layout.grid.gap .phone-col-8-11 {
+ width: calc(72.7272727273% - 10px); }
+ .layout.grid.gap .phone-col-9-11 {
+ width: calc(81.8181818182% - 10px); }
+ .layout.grid.gap .phone-col-10-11 {
+ width: calc(90.9090909091% - 10px); }
+ .layout.grid.gap .phone-col-11-11 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .phone-col-1-12 {
+ width: calc(8.3333333333% - 10px); }
+ .layout.grid.gap .phone-col-2-12 {
+ width: calc(16.6666666667% - 10px); }
+ .layout.grid.gap .phone-col-3-12 {
+ width: calc(25% - 10px); }
+ .layout.grid.gap .phone-col-4-12 {
+ width: calc(33.3333333333% - 10px); }
+ .layout.grid.gap .phone-col-5-12 {
+ width: calc(41.6666666667% - 10px); }
+ .layout.grid.gap .phone-col-6-12 {
+ width: calc(50% - 10px); }
+ .layout.grid.gap .phone-col-7-12 {
+ width: calc(58.3333333333% - 10px); }
+ .layout.grid.gap .phone-col-8-12 {
+ width: calc(66.6666666667% - 10px); }
+ .layout.grid.gap .phone-col-9-12 {
+ width: calc(75% - 10px); }
+ .layout.grid.gap .phone-col-10-12 {
+ width: calc(83.3333333333% - 10px); }
+ .layout.grid.gap .phone-col-11-12 {
+ width: calc(91.6666666667% - 10px); }
+ .layout.grid.gap .phone-col-12-12 {
+ width: calc(100% - 10px); } }
+ @media (min-width: 768px) {
+ .layout.grid.gap .tablet-col-1-1 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .tablet-col-1-2 {
+ width: calc(50% - 10px); }
+ .layout.grid.gap .tablet-col-2-2 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .tablet-col-1-3 {
+ width: calc(33.3333333333% - 10px); }
+ .layout.grid.gap .tablet-col-2-3 {
+ width: calc(66.6666666667% - 10px); }
+ .layout.grid.gap .tablet-col-3-3 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .tablet-col-1-4 {
+ width: calc(25% - 10px); }
+ .layout.grid.gap .tablet-col-2-4 {
+ width: calc(50% - 10px); }
+ .layout.grid.gap .tablet-col-3-4 {
+ width: calc(75% - 10px); }
+ .layout.grid.gap .tablet-col-4-4 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .tablet-col-1-5 {
+ width: calc(20% - 10px); }
+ .layout.grid.gap .tablet-col-2-5 {
+ width: calc(40% - 10px); }
+ .layout.grid.gap .tablet-col-3-5 {
+ width: calc(60% - 10px); }
+ .layout.grid.gap .tablet-col-4-5 {
+ width: calc(80% - 10px); }
+ .layout.grid.gap .tablet-col-5-5 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .tablet-col-1-6 {
+ width: calc(16.6666666667% - 10px); }
+ .layout.grid.gap .tablet-col-2-6 {
+ width: calc(33.3333333333% - 10px); }
+ .layout.grid.gap .tablet-col-3-6 {
+ width: calc(50% - 10px); }
+ .layout.grid.gap .tablet-col-4-6 {
+ width: calc(66.6666666667% - 10px); }
+ .layout.grid.gap .tablet-col-5-6 {
+ width: calc(83.3333333333% - 10px); }
+ .layout.grid.gap .tablet-col-6-6 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .tablet-col-1-7 {
+ width: calc(14.2857142857% - 10px); }
+ .layout.grid.gap .tablet-col-2-7 {
+ width: calc(28.5714285714% - 10px); }
+ .layout.grid.gap .tablet-col-3-7 {
+ width: calc(42.8571428571% - 10px); }
+ .layout.grid.gap .tablet-col-4-7 {
+ width: calc(57.1428571429% - 10px); }
+ .layout.grid.gap .tablet-col-5-7 {
+ width: calc(71.4285714286% - 10px); }
+ .layout.grid.gap .tablet-col-6-7 {
+ width: calc(85.7142857143% - 10px); }
+ .layout.grid.gap .tablet-col-7-7 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .tablet-col-1-8 {
+ width: calc(12.5% - 10px); }
+ .layout.grid.gap .tablet-col-2-8 {
+ width: calc(25% - 10px); }
+ .layout.grid.gap .tablet-col-3-8 {
+ width: calc(37.5% - 10px); }
+ .layout.grid.gap .tablet-col-4-8 {
+ width: calc(50% - 10px); }
+ .layout.grid.gap .tablet-col-5-8 {
+ width: calc(62.5% - 10px); }
+ .layout.grid.gap .tablet-col-6-8 {
+ width: calc(75% - 10px); }
+ .layout.grid.gap .tablet-col-7-8 {
+ width: calc(87.5% - 10px); }
+ .layout.grid.gap .tablet-col-8-8 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .tablet-col-1-9 {
+ width: calc(11.1111111111% - 10px); }
+ .layout.grid.gap .tablet-col-2-9 {
+ width: calc(22.2222222222% - 10px); }
+ .layout.grid.gap .tablet-col-3-9 {
+ width: calc(33.3333333333% - 10px); }
+ .layout.grid.gap .tablet-col-4-9 {
+ width: calc(44.4444444444% - 10px); }
+ .layout.grid.gap .tablet-col-5-9 {
+ width: calc(55.5555555556% - 10px); }
+ .layout.grid.gap .tablet-col-6-9 {
+ width: calc(66.6666666667% - 10px); }
+ .layout.grid.gap .tablet-col-7-9 {
+ width: calc(77.7777777778% - 10px); }
+ .layout.grid.gap .tablet-col-8-9 {
+ width: calc(88.8888888889% - 10px); }
+ .layout.grid.gap .tablet-col-9-9 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .tablet-col-1-10 {
+ width: calc(10% - 10px); }
+ .layout.grid.gap .tablet-col-2-10 {
+ width: calc(20% - 10px); }
+ .layout.grid.gap .tablet-col-3-10 {
+ width: calc(30% - 10px); }
+ .layout.grid.gap .tablet-col-4-10 {
+ width: calc(40% - 10px); }
+ .layout.grid.gap .tablet-col-5-10 {
+ width: calc(50% - 10px); }
+ .layout.grid.gap .tablet-col-6-10 {
+ width: calc(60% - 10px); }
+ .layout.grid.gap .tablet-col-7-10 {
+ width: calc(70% - 10px); }
+ .layout.grid.gap .tablet-col-8-10 {
+ width: calc(80% - 10px); }
+ .layout.grid.gap .tablet-col-9-10 {
+ width: calc(90% - 10px); }
+ .layout.grid.gap .tablet-col-10-10 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .tablet-col-1-11 {
+ width: calc(9.0909090909% - 10px); }
+ .layout.grid.gap .tablet-col-2-11 {
+ width: calc(18.1818181818% - 10px); }
+ .layout.grid.gap .tablet-col-3-11 {
+ width: calc(27.2727272727% - 10px); }
+ .layout.grid.gap .tablet-col-4-11 {
+ width: calc(36.3636363636% - 10px); }
+ .layout.grid.gap .tablet-col-5-11 {
+ width: calc(45.4545454545% - 10px); }
+ .layout.grid.gap .tablet-col-6-11 {
+ width: calc(54.5454545455% - 10px); }
+ .layout.grid.gap .tablet-col-7-11 {
+ width: calc(63.6363636364% - 10px); }
+ .layout.grid.gap .tablet-col-8-11 {
+ width: calc(72.7272727273% - 10px); }
+ .layout.grid.gap .tablet-col-9-11 {
+ width: calc(81.8181818182% - 10px); }
+ .layout.grid.gap .tablet-col-10-11 {
+ width: calc(90.9090909091% - 10px); }
+ .layout.grid.gap .tablet-col-11-11 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .tablet-col-1-12 {
+ width: calc(8.3333333333% - 10px); }
+ .layout.grid.gap .tablet-col-2-12 {
+ width: calc(16.6666666667% - 10px); }
+ .layout.grid.gap .tablet-col-3-12 {
+ width: calc(25% - 10px); }
+ .layout.grid.gap .tablet-col-4-12 {
+ width: calc(33.3333333333% - 10px); }
+ .layout.grid.gap .tablet-col-5-12 {
+ width: calc(41.6666666667% - 10px); }
+ .layout.grid.gap .tablet-col-6-12 {
+ width: calc(50% - 10px); }
+ .layout.grid.gap .tablet-col-7-12 {
+ width: calc(58.3333333333% - 10px); }
+ .layout.grid.gap .tablet-col-8-12 {
+ width: calc(66.6666666667% - 10px); }
+ .layout.grid.gap .tablet-col-9-12 {
+ width: calc(75% - 10px); }
+ .layout.grid.gap .tablet-col-10-12 {
+ width: calc(83.3333333333% - 10px); }
+ .layout.grid.gap .tablet-col-11-12 {
+ width: calc(91.6666666667% - 10px); }
+ .layout.grid.gap .tablet-col-12-12 {
+ width: calc(100% - 10px); } }
+ @media (min-width: 992px) {
+ .layout.grid.gap .desktop-col-1-1 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .desktop-col-1-2 {
+ width: calc(50% - 10px); }
+ .layout.grid.gap .desktop-col-2-2 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .desktop-col-1-3 {
+ width: calc(33.3333333333% - 10px); }
+ .layout.grid.gap .desktop-col-2-3 {
+ width: calc(66.6666666667% - 10px); }
+ .layout.grid.gap .desktop-col-3-3 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .desktop-col-1-4 {
+ width: calc(25% - 10px); }
+ .layout.grid.gap .desktop-col-2-4 {
+ width: calc(50% - 10px); }
+ .layout.grid.gap .desktop-col-3-4 {
+ width: calc(75% - 10px); }
+ .layout.grid.gap .desktop-col-4-4 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .desktop-col-1-5 {
+ width: calc(20% - 10px); }
+ .layout.grid.gap .desktop-col-2-5 {
+ width: calc(40% - 10px); }
+ .layout.grid.gap .desktop-col-3-5 {
+ width: calc(60% - 10px); }
+ .layout.grid.gap .desktop-col-4-5 {
+ width: calc(80% - 10px); }
+ .layout.grid.gap .desktop-col-5-5 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .desktop-col-1-6 {
+ width: calc(16.6666666667% - 10px); }
+ .layout.grid.gap .desktop-col-2-6 {
+ width: calc(33.3333333333% - 10px); }
+ .layout.grid.gap .desktop-col-3-6 {
+ width: calc(50% - 10px); }
+ .layout.grid.gap .desktop-col-4-6 {
+ width: calc(66.6666666667% - 10px); }
+ .layout.grid.gap .desktop-col-5-6 {
+ width: calc(83.3333333333% - 10px); }
+ .layout.grid.gap .desktop-col-6-6 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .desktop-col-1-7 {
+ width: calc(14.2857142857% - 10px); }
+ .layout.grid.gap .desktop-col-2-7 {
+ width: calc(28.5714285714% - 10px); }
+ .layout.grid.gap .desktop-col-3-7 {
+ width: calc(42.8571428571% - 10px); }
+ .layout.grid.gap .desktop-col-4-7 {
+ width: calc(57.1428571429% - 10px); }
+ .layout.grid.gap .desktop-col-5-7 {
+ width: calc(71.4285714286% - 10px); }
+ .layout.grid.gap .desktop-col-6-7 {
+ width: calc(85.7142857143% - 10px); }
+ .layout.grid.gap .desktop-col-7-7 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .desktop-col-1-8 {
+ width: calc(12.5% - 10px); }
+ .layout.grid.gap .desktop-col-2-8 {
+ width: calc(25% - 10px); }
+ .layout.grid.gap .desktop-col-3-8 {
+ width: calc(37.5% - 10px); }
+ .layout.grid.gap .desktop-col-4-8 {
+ width: calc(50% - 10px); }
+ .layout.grid.gap .desktop-col-5-8 {
+ width: calc(62.5% - 10px); }
+ .layout.grid.gap .desktop-col-6-8 {
+ width: calc(75% - 10px); }
+ .layout.grid.gap .desktop-col-7-8 {
+ width: calc(87.5% - 10px); }
+ .layout.grid.gap .desktop-col-8-8 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .desktop-col-1-9 {
+ width: calc(11.1111111111% - 10px); }
+ .layout.grid.gap .desktop-col-2-9 {
+ width: calc(22.2222222222% - 10px); }
+ .layout.grid.gap .desktop-col-3-9 {
+ width: calc(33.3333333333% - 10px); }
+ .layout.grid.gap .desktop-col-4-9 {
+ width: calc(44.4444444444% - 10px); }
+ .layout.grid.gap .desktop-col-5-9 {
+ width: calc(55.5555555556% - 10px); }
+ .layout.grid.gap .desktop-col-6-9 {
+ width: calc(66.6666666667% - 10px); }
+ .layout.grid.gap .desktop-col-7-9 {
+ width: calc(77.7777777778% - 10px); }
+ .layout.grid.gap .desktop-col-8-9 {
+ width: calc(88.8888888889% - 10px); }
+ .layout.grid.gap .desktop-col-9-9 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .desktop-col-1-10 {
+ width: calc(10% - 10px); }
+ .layout.grid.gap .desktop-col-2-10 {
+ width: calc(20% - 10px); }
+ .layout.grid.gap .desktop-col-3-10 {
+ width: calc(30% - 10px); }
+ .layout.grid.gap .desktop-col-4-10 {
+ width: calc(40% - 10px); }
+ .layout.grid.gap .desktop-col-5-10 {
+ width: calc(50% - 10px); }
+ .layout.grid.gap .desktop-col-6-10 {
+ width: calc(60% - 10px); }
+ .layout.grid.gap .desktop-col-7-10 {
+ width: calc(70% - 10px); }
+ .layout.grid.gap .desktop-col-8-10 {
+ width: calc(80% - 10px); }
+ .layout.grid.gap .desktop-col-9-10 {
+ width: calc(90% - 10px); }
+ .layout.grid.gap .desktop-col-10-10 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .desktop-col-1-11 {
+ width: calc(9.0909090909% - 10px); }
+ .layout.grid.gap .desktop-col-2-11 {
+ width: calc(18.1818181818% - 10px); }
+ .layout.grid.gap .desktop-col-3-11 {
+ width: calc(27.2727272727% - 10px); }
+ .layout.grid.gap .desktop-col-4-11 {
+ width: calc(36.3636363636% - 10px); }
+ .layout.grid.gap .desktop-col-5-11 {
+ width: calc(45.4545454545% - 10px); }
+ .layout.grid.gap .desktop-col-6-11 {
+ width: calc(54.5454545455% - 10px); }
+ .layout.grid.gap .desktop-col-7-11 {
+ width: calc(63.6363636364% - 10px); }
+ .layout.grid.gap .desktop-col-8-11 {
+ width: calc(72.7272727273% - 10px); }
+ .layout.grid.gap .desktop-col-9-11 {
+ width: calc(81.8181818182% - 10px); }
+ .layout.grid.gap .desktop-col-10-11 {
+ width: calc(90.9090909091% - 10px); }
+ .layout.grid.gap .desktop-col-11-11 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .desktop-col-1-12 {
+ width: calc(8.3333333333% - 10px); }
+ .layout.grid.gap .desktop-col-2-12 {
+ width: calc(16.6666666667% - 10px); }
+ .layout.grid.gap .desktop-col-3-12 {
+ width: calc(25% - 10px); }
+ .layout.grid.gap .desktop-col-4-12 {
+ width: calc(33.3333333333% - 10px); }
+ .layout.grid.gap .desktop-col-5-12 {
+ width: calc(41.6666666667% - 10px); }
+ .layout.grid.gap .desktop-col-6-12 {
+ width: calc(50% - 10px); }
+ .layout.grid.gap .desktop-col-7-12 {
+ width: calc(58.3333333333% - 10px); }
+ .layout.grid.gap .desktop-col-8-12 {
+ width: calc(66.6666666667% - 10px); }
+ .layout.grid.gap .desktop-col-9-12 {
+ width: calc(75% - 10px); }
+ .layout.grid.gap .desktop-col-10-12 {
+ width: calc(83.3333333333% - 10px); }
+ .layout.grid.gap .desktop-col-11-12 {
+ width: calc(91.6666666667% - 10px); }
+ .layout.grid.gap .desktop-col-12-12 {
+ width: calc(100% - 10px); } }
+ @media (min-width: 1600px) {
+ .layout.grid.gap .widescreen-col-1-1 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .widescreen-col-1-2 {
+ width: calc(50% - 10px); }
+ .layout.grid.gap .widescreen-col-2-2 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .widescreen-col-1-3 {
+ width: calc(33.3333333333% - 10px); }
+ .layout.grid.gap .widescreen-col-2-3 {
+ width: calc(66.6666666667% - 10px); }
+ .layout.grid.gap .widescreen-col-3-3 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .widescreen-col-1-4 {
+ width: calc(25% - 10px); }
+ .layout.grid.gap .widescreen-col-2-4 {
+ width: calc(50% - 10px); }
+ .layout.grid.gap .widescreen-col-3-4 {
+ width: calc(75% - 10px); }
+ .layout.grid.gap .widescreen-col-4-4 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .widescreen-col-1-5 {
+ width: calc(20% - 10px); }
+ .layout.grid.gap .widescreen-col-2-5 {
+ width: calc(40% - 10px); }
+ .layout.grid.gap .widescreen-col-3-5 {
+ width: calc(60% - 10px); }
+ .layout.grid.gap .widescreen-col-4-5 {
+ width: calc(80% - 10px); }
+ .layout.grid.gap .widescreen-col-5-5 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .widescreen-col-1-6 {
+ width: calc(16.6666666667% - 10px); }
+ .layout.grid.gap .widescreen-col-2-6 {
+ width: calc(33.3333333333% - 10px); }
+ .layout.grid.gap .widescreen-col-3-6 {
+ width: calc(50% - 10px); }
+ .layout.grid.gap .widescreen-col-4-6 {
+ width: calc(66.6666666667% - 10px); }
+ .layout.grid.gap .widescreen-col-5-6 {
+ width: calc(83.3333333333% - 10px); }
+ .layout.grid.gap .widescreen-col-6-6 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .widescreen-col-1-7 {
+ width: calc(14.2857142857% - 10px); }
+ .layout.grid.gap .widescreen-col-2-7 {
+ width: calc(28.5714285714% - 10px); }
+ .layout.grid.gap .widescreen-col-3-7 {
+ width: calc(42.8571428571% - 10px); }
+ .layout.grid.gap .widescreen-col-4-7 {
+ width: calc(57.1428571429% - 10px); }
+ .layout.grid.gap .widescreen-col-5-7 {
+ width: calc(71.4285714286% - 10px); }
+ .layout.grid.gap .widescreen-col-6-7 {
+ width: calc(85.7142857143% - 10px); }
+ .layout.grid.gap .widescreen-col-7-7 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .widescreen-col-1-8 {
+ width: calc(12.5% - 10px); }
+ .layout.grid.gap .widescreen-col-2-8 {
+ width: calc(25% - 10px); }
+ .layout.grid.gap .widescreen-col-3-8 {
+ width: calc(37.5% - 10px); }
+ .layout.grid.gap .widescreen-col-4-8 {
+ width: calc(50% - 10px); }
+ .layout.grid.gap .widescreen-col-5-8 {
+ width: calc(62.5% - 10px); }
+ .layout.grid.gap .widescreen-col-6-8 {
+ width: calc(75% - 10px); }
+ .layout.grid.gap .widescreen-col-7-8 {
+ width: calc(87.5% - 10px); }
+ .layout.grid.gap .widescreen-col-8-8 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .widescreen-col-1-9 {
+ width: calc(11.1111111111% - 10px); }
+ .layout.grid.gap .widescreen-col-2-9 {
+ width: calc(22.2222222222% - 10px); }
+ .layout.grid.gap .widescreen-col-3-9 {
+ width: calc(33.3333333333% - 10px); }
+ .layout.grid.gap .widescreen-col-4-9 {
+ width: calc(44.4444444444% - 10px); }
+ .layout.grid.gap .widescreen-col-5-9 {
+ width: calc(55.5555555556% - 10px); }
+ .layout.grid.gap .widescreen-col-6-9 {
+ width: calc(66.6666666667% - 10px); }
+ .layout.grid.gap .widescreen-col-7-9 {
+ width: calc(77.7777777778% - 10px); }
+ .layout.grid.gap .widescreen-col-8-9 {
+ width: calc(88.8888888889% - 10px); }
+ .layout.grid.gap .widescreen-col-9-9 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .widescreen-col-1-10 {
+ width: calc(10% - 10px); }
+ .layout.grid.gap .widescreen-col-2-10 {
+ width: calc(20% - 10px); }
+ .layout.grid.gap .widescreen-col-3-10 {
+ width: calc(30% - 10px); }
+ .layout.grid.gap .widescreen-col-4-10 {
+ width: calc(40% - 10px); }
+ .layout.grid.gap .widescreen-col-5-10 {
+ width: calc(50% - 10px); }
+ .layout.grid.gap .widescreen-col-6-10 {
+ width: calc(60% - 10px); }
+ .layout.grid.gap .widescreen-col-7-10 {
+ width: calc(70% - 10px); }
+ .layout.grid.gap .widescreen-col-8-10 {
+ width: calc(80% - 10px); }
+ .layout.grid.gap .widescreen-col-9-10 {
+ width: calc(90% - 10px); }
+ .layout.grid.gap .widescreen-col-10-10 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .widescreen-col-1-11 {
+ width: calc(9.0909090909% - 10px); }
+ .layout.grid.gap .widescreen-col-2-11 {
+ width: calc(18.1818181818% - 10px); }
+ .layout.grid.gap .widescreen-col-3-11 {
+ width: calc(27.2727272727% - 10px); }
+ .layout.grid.gap .widescreen-col-4-11 {
+ width: calc(36.3636363636% - 10px); }
+ .layout.grid.gap .widescreen-col-5-11 {
+ width: calc(45.4545454545% - 10px); }
+ .layout.grid.gap .widescreen-col-6-11 {
+ width: calc(54.5454545455% - 10px); }
+ .layout.grid.gap .widescreen-col-7-11 {
+ width: calc(63.6363636364% - 10px); }
+ .layout.grid.gap .widescreen-col-8-11 {
+ width: calc(72.7272727273% - 10px); }
+ .layout.grid.gap .widescreen-col-9-11 {
+ width: calc(81.8181818182% - 10px); }
+ .layout.grid.gap .widescreen-col-10-11 {
+ width: calc(90.9090909091% - 10px); }
+ .layout.grid.gap .widescreen-col-11-11 {
+ width: calc(100% - 10px); }
+ .layout.grid.gap .widescreen-col-1-12 {
+ width: calc(8.3333333333% - 10px); }
+ .layout.grid.gap .widescreen-col-2-12 {
+ width: calc(16.6666666667% - 10px); }
+ .layout.grid.gap .widescreen-col-3-12 {
+ width: calc(25% - 10px); }
+ .layout.grid.gap .widescreen-col-4-12 {
+ width: calc(33.3333333333% - 10px); }
+ .layout.grid.gap .widescreen-col-5-12 {
+ width: calc(41.6666666667% - 10px); }
+ .layout.grid.gap .widescreen-col-6-12 {
+ width: calc(50% - 10px); }
+ .layout.grid.gap .widescreen-col-7-12 {
+ width: calc(58.3333333333% - 10px); }
+ .layout.grid.gap .widescreen-col-8-12 {
+ width: calc(66.6666666667% - 10px); }
+ .layout.grid.gap .widescreen-col-9-12 {
+ width: calc(75% - 10px); }
+ .layout.grid.gap .widescreen-col-10-12 {
+ width: calc(83.3333333333% - 10px); }
+ .layout.grid.gap .widescreen-col-11-12 {
+ width: calc(91.6666666667% - 10px); }
+ .layout.grid.gap .widescreen-col-12-12 {
+ width: calc(100% - 10px); } }
+ .layout.horizontal.itemsSpaceBetween, .layout.vertical.itemsSpaceBetween, .layout.grid.itemsSpaceBetween {
+ justify-content: space-between; }
+ .layout.horizontal.itemsSpaceAround, .layout.vertical.itemsSpaceAround, .layout.grid.itemsSpaceAround {
+ justify-content: space-around; }
+ .layout.horizontal.itemsSameHeight > * > *, .layout.vertical.itemsSameHeight > * > *, .layout.grid.itemsSameHeight > * > * {
+ min-height: 100%; }
+ .layout.horizontal.itemsExpand, .layout.vertical.itemsExpand, .layout.grid.itemsExpand {
+ width: 100%; }
+ .layout.horizontal.itemsExpand > *, .layout.vertical.itemsExpand > *, .layout.grid.itemsExpand > * {
+ flex: 1 0 auto; }
+ .layout.horizontal.itemsCentered, .layout.grid.itemsCentered {
+ align-items: center; }
+ .layout.horizontal.itemsTop, .layout.grid.itemsTop {
+ align-items: flex-start; }
+ .layout.horizontal.itemsBottom, .layout.grid.itemsBottom {
+ align-items: flex-end; }
+ .layout.horizontal.itemsLeft, .layout.grid.itemsLeft {
+ justify-content: flex-start; }
+ .layout.horizontal.itemsCenter, .layout.grid.itemsCenter {
+ justify-content: center; }
+ .layout.horizontal.itemsRight, .layout.grid.itemsRight {
+ justify-content: flex-end; }
+ .layout.horizontal.itemsReverse, .layout.grid.itemsReverse {
+ flex-direction: row-reverse; }
+ .layout.vertical.itemsCentered {
+ justify-content: center; }
+ .layout.vertical.itemsTop {
+ justify-content: flex-start; }
+ .layout.vertical.itemsBottom {
+ justify-content: flex-end; }
+ .layout.vertical.itemsLeft {
+ align-items: flex-start; }
+ .layout.vertical.itemsCenter {
+ align-items: center; }
+ .layout.vertical.itemsRight {
+ align-items: flex-end; }
+ .layout.vertical.itemsReverse {
+ flex-direction: column-reverse; }
+ .layout.table table {
+ display: table; }
+
+@media (max-width: 767px) {
+ .visible-phone {
+ display: flex !important; }
+
+ .hidden-phone {
+ display: none !important; } }
+@media (min-width: 768px) and (max-width: 991px) {
+ .visible-tablet {
+ display: flex !important; }
+
+ .hidden-tablet {
+ display: none !important; } }
+@media (min-width: 992px) and (max-width: 1599px) {
+ .visible-desktop {
+ display: flex !important; }
+
+ .hidden-desktop {
+ display: none !important; } }
+@media (min-width: 1600px) {
+ .visible-widescreen {
+ display: flex !important; }
+
+ .hidden-widescreen {
+ display: none !important; } }
+.visible-phone, .visible-tablet, .visible-desktop, .visible-widescreen {
+ display: none !important; }
+
+.hidden-phone, .hidden-tablet, .hidden-desktop, .hidden-widescreen {
+ display: flex !important; }
+
+.externsjs.list, .externsjs.navigation {
+ align-items: stretch;
+ align-content: flex-start;
+ -webkit-overflow-scrolling: touch; }
+ .externsjs.list > *, .externsjs.navigation > * {
+ flex: 0 0 auto; }
+ .externsjs.list.no-chrome, .externsjs.navigation.no-chrome {
+ background: transparent;
+ border: none; }
+ .externsjs.list.horizontalScroll, .externsjs.navigation.horizontalScroll {
+ align-items: baseline !important; }
+ .externsjs.list.horizontalScroll .externsjs.item, .externsjs.navigation.horizontalScroll .externsjs.item {
+ overflow: initial; }
+
+j|List {
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.ListView");
+ IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.ListSingleSelectionMouseController");
+ IBeadKeyController: ClassReference("org.apache.royale.externsjs.beads.controllers.ListKeyDownController");
+ IItemRendererClassFactory: ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
+ IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.ListItemRenderer");
+ IItemRendererInitializer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ListItemRendererInitializer");
+ ISelectableItemRenderer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ClassSelectorListSelectableItemRendererBead");
+ IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport");
+ IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.ArrayListSelectionModel");
+ IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.SelectionDataItemRendererFactoryForCollectionView"); }
+
+@media -royale-swf {
+ j|List {
+ IContentView: ClassReference("org.apache.royale.externsjs.supportClasses.list.DataGroup"); } }
+j|VirtualList {
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.VirtualListView");
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.VirtualListVerticalLayout");
+ IDataProviderItemRendererMapper: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.VirtualDataItemRendererFactoryForCollectionView");
+ IBeadKeyController: ClassReference("org.apache.royale.externsjs.beads.controllers.VirtualListKeyDownController"); }
+
+j|Navigation {
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.ListView");
+ IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.ListSingleSelectionMouseController");
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout");
+ IItemRendererClassFactory: ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
+ IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.NavigationLinkItemRenderer");
+ IItemRendererInitializer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.NavigationItemRendererInitializer");
+ ISelectableItemRenderer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ClassSelectorListHoverOnlySelectableItemRendererBead");
+ IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport");
+ IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.ArrayListSelectionModel");
+ IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.SelectionDataItemRendererFactoryForCollectionView"); }
+
+j|NavigationLinkItemRenderer {
+ IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ItemRendererMouseController"); }
+
+j|CollapsibleNavigationSectionRenderer {
+ IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ItemRendererMouseController"); }
+
+.externsjs.numericstepper {
+ display: flex;
+ flex-flow: column wrap; }
+ .externsjs.numericstepper .externsjs.spinner {
+ display: none;
+ order: -1; }
+ .externsjs.numericstepper .externsjs.textinput {
+ display: inline-flex;
+ order: 0;
+ z-index: 1; }
+ .externsjs.numericstepper .externsjs.button::after {
+ content: " ";
+ position: absolute; }
+ .externsjs.numericstepper .externsjs.button.up {
+ order: 1; }
+ .externsjs.numericstepper .externsjs.button.down {
+ order: 2; }
+
+@media (max-width: 992px) {
+ .externsjs.numericstepper {
+ flex-flow: row nowrap; }
+ .externsjs.numericstepper .externsjs.textinput {
+ order: 1; }
+ .externsjs.numericstepper .externsjs.button.up {
+ order: 2; }
+ .externsjs.numericstepper .externsjs.button.down {
+ order: 0; } }
+j|NumericStepper {
+ IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.RangeModel");
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.NumericStepperView");
+ IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.NumericStepperController"); }
+
+j|Spinner {
+ IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.RangeModel");
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.SpinnerView");
+ IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.SpinnerMouseController"); }
+
+.externsjs.popup {
+ display: inline-flex; }
+
+.popup-content {
+ position: fixed;
+ pointer-events: none;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ contain: strict;
+ z-index: 40; }
+ .popup-content::before {
+ position: absolute;
+ display: block;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ content: ""; }
+ .popup-content .externsjs.popupcontent {
+ display: inline-flex;
+ position: relative;
+ transform: translate(-50%, 100%);
+ transition: none;
+ will-change: transform, opacity;
+ bottom: auto;
+ top: calc(100% - 10px);
+ left: 50%;
+ touch-action: none;
+ opacity: 0; }
+ .popup-content.open {
+ pointer-events: auto; }
+ .popup-content.open::before {
+ opacity: 1; }
+ .popup-content.open .externsjs.popupcontent {
+ transform: translate(-50%, -100%);
+ transition: transform 0.4s 0ms, opacity 0.4s 0ms;
+ opacity: 1; }
+
+@media (max-width: 768px) {
+ .popup-content .externsjs.popupcontent {
+ width: calc(100% - 20px); } }
+@media (min-width: 992px) {
+ .popup-content .externsjs.popupcontent {
+ transform: translate(-50%, -60%); }
+ .popup-content.open .externsjs.popupcontent {
+ top: 50%;
+ left: 50%;
+ margin-right: -50%;
+ transform: translate(-50%, -50%); } }
+j|PopUp {
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.PopUpView");
+ IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.PopUpModel");
+ IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.PopUpMouseController");
+ IPopUpContent: ClassReference("org.apache.royale.core.StyledUIBase"); }
+
+.externsjs.radiobutton {
+ display: inline-flex;
+ position: relative;
+ margin: 0;
+ padding: 0;
+ height: auto; }
+ .externsjs.radiobutton input {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -o-appearance: none;
+ -ms-appearance: none;
+ appearance: none;
+ display: inline-flex;
+ margin: 0;
+ padding: 0;
+ width: 22px;
+ height: 22px;
+ line-height: 22px;
+ opacity: 0; }
+ .externsjs.radiobutton input + span::before {
+ content: " ";
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ width: 22px;
+ height: 22px; }
+ .externsjs.radiobutton input + span::after {
+ content: " ";
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ width: 22px;
+ height: 22px;
+ opacity: 0; }
+ .externsjs.radiobutton input:checked + span::after, .externsjs.radiobutton input:checked:active + span::after {
+ opacity: 1; }
+ .externsjs.radiobutton input:focus + span::before, .externsjs.radiobutton input:checked:focus + span::before, .externsjs.radiobutton input:checked:active:focus + span::before {
+ outline: none; }
+ .externsjs.radiobutton input[disabled] + span {
+ cursor: unset; }
+ .externsjs.radiobutton span {
+ cursor: pointer;
+ margin: 0;
+ width: inherit; }
+
+@media -royale-swf {
+ j|RadioButton {
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.RadioButtonView"); } }
+.externsjs.section {
+ display: none;
+ flex-flow: column nowrap;
+ height: 100%; }
+ .externsjs.section > * {
+ flex: 0 0 auto; }
+ .externsjs.section.is-selected {
+ display: flex; }
+
+j|SectionContent {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
+
+j|ScrollableSectionContent {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout");
+ IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport"); }
+
+.externsjs.slider {
+ position: relative;
+ height: 27px;
+ display: flex;
+ flex-direction: row;
+ background: none; }
+ .externsjs.slider input {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -o-appearance: none;
+ -ms-appearance: none;
+ appearance: none;
+ outline: 0;
+ cursor: pointer;
+ user-select: none;
+ align-self: center;
+ z-index: 1;
+ margin: 0 20px;
+ padding: 0;
+ width: calc(100% - 40px);
+ height: 36px;
+ background: transparent; }
+ .externsjs.slider input::-webkit-slider-runnable-track {
+ background: transparent; }
+ .externsjs.slider input::-moz-range-track {
+ background: transparent;
+ border: none; }
+ .externsjs.slider input::-ms-track {
+ width: 100%;
+ height: 6px;
+ background: none;
+ border: none;
+ color: transparent; }
+ .externsjs.slider input::-ms-fill-lower {
+ padding: 0; }
+ .externsjs.slider input::-ms-fill-upper {
+ padding: 0; }
+ .externsjs.slider input::-webkit-slider-thumb, .externsjs.slider input::-moz-range-thumb {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -o-appearance: none;
+ -ms-appearance: none;
+ appearance: none; }
+ .externsjs.slider input:focus {
+ outline: none; }
+ .externsjs.slider input[disabled] {
+ cursor: unset; }
+ .externsjs.slider input::-ms-tooltip {
+ display: none; }
+
+.slider-track-container {
+ position: absolute;
+ display: flex;
+ overflow: hidden;
+ transform: translate(0, -3px);
+ margin: 0 29px;
+ padding: 0;
+ left: 0;
+ width: calc(100% - 58px);
+ height: 6px;
+ background: transparent;
+ border: 0; }
+
+.slider-track-fill {
+ position: relative;
+ flex: 0;
+ padding: 0; }
+
+.slider-track {
+ position: relative;
+ flex: 0;
+ padding: 0; }
+
+j|HSlider {
+ IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.SliderRangeModel");
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.SliderView");
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout");
+ IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.SliderMouseController"); }
+
+@media -royale-swf {
+ j|HSlider {
+ IThumbView: ClassReference("org.apache.royale.externsjs.beads.views.SliderThumbView");
+ ITrackView: ClassReference("org.apache.royale.externsjs.beads.views.SliderTrackView"); } }
+.vslider {
+ min-width: 27px;
+ min-height: 150px;
+ position: relative;
+ display: inline-block; }
+ .vslider .transform-container {
+ height: 100%;
+ display: inline-block;
+ position: absolute;
+ margin-left: calc(50% - 27px/2); }
+ .vslider .sizer {
+ height: 100%;
+ visibility: hidden; }
+ .vslider .externsjs.slider {
+ transform: "translate(-50%, -50%) rotate(270deg) translate(-50%, 50%)";
+ left: 0;
+ right: 0;
+ top: 0;
+ position: absolute; }
+ .vslider .externsjs.slider input {
+ margin-left: 0;
+ margin-right: 0;
+ width: 100%; }
+ .vslider .slider-track-container {
+ margin: 0;
+ width: 100%;
+ padding-left: 5px;
+ padding-right: 5px; }
+
+.externsjs.tablecell .vslider .transform-container {
+ margin-left: calc(50% - 27px/2*2); }
+
+.externsjs.snackbar {
+ bottom: 0;
+ position: fixed;
+ width: 100%;
+ z-index: 40;
+ justify-content: center; }
+
+.externsjs.snackbar-content {
+ max-width: 568px;
+ min-width: 288px;
+ padding: 0.68em 1.12em;
+ position: relative; }
+
+.externsjs.snackbar-message {
+ float: left;
+ margin: 10px; }
+
+.externsjs.snackbar-action {
+ cursor: pointer;
+ float: right;
+ padding: 10px; }
+
+@media (max-width: 992px) {
+ .externsjs.snackbar-content {
+ max-width: 100%;
+ width: 100%; } }
+j|Snackbar {
+ IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.SnackbarModel");
+ IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.SnackbarController");
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.SnackbarView"); }
+
+.externsjs.tabbar {
+ -webkit-overflow-scrolling: touch;
+ -ms-overflow-style: -ms-autohiding-scrollbar !important;
+ scrollbar-width: none;
+ transform: none;
+ will-change: transform; }
+ .externsjs.tabbar::-webkit-scrollbar {
+ display: none !important;
+ width: 0 !important;
+ height: 0 !important;
+ background-color: transparent; }
+ .externsjs.tabbar::-webkit-scrollbar-thumb {
+ display: none !important; }
+
+j|TabBar {
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.TabBarView");
+ IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.ListSingleSelectionMouseController");
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
+ IItemRendererClassFactory: ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
+ IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.TabBarButtonItemRenderer");
+ IItemRendererInitializer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.TabBarItemRendererInitializer");
+ ISelectableItemRenderer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ClassSelectorListSelectableItemRendererBead");
+ IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.Viewport");
+ IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.ArrayListSelectionModel");
+ IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.SelectionDataItemRendererFactoryForCollectionView"); }
+
+.externsjs.tabbarbutton {
+ margin: 0;
+ flex: 1 0 auto !important;
+ position: relative;
+ white-space: nowrap;
+ z-index: 1;
+ overflow: initial; }
+ .externsjs.tabbarbutton > .content {
+ display: flex;
+ align-items: center;
+ height: inherit; }
+ .externsjs.tabbarbutton ._internal_ {
+ position: absolute; }
+ .externsjs.tabbarbutton .indicator {
+ display: flex;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 1; }
+ .externsjs.tabbarbutton .indicator > .indicator-content {
+ opacity: 0;
+ align-self: flex-end; }
+ .externsjs.tabbarbutton.indicator-opposite-side .indicator > .indicator-content {
+ align-self: flex-start; }
+ .externsjs.tabbarbutton.selected .indicator > .indicator-content {
+ opacity: 1; }
+
+.externsjs.tabbar.layout.horizontal ._internal_ {
+ bottom: 0; }
+.externsjs.tabbar.layout.horizontal .indicator > .indicator-content {
+ width: 100%; }
+.externsjs.tabbar.layout.horizontal .indicator-opposite-side ._internal_ {
+ bottom: initial;
+ top: 0; }
+.externsjs.tabbar.layout.horizontal .indicator-opposite-side .indicator > .indicator-content {
+ bottom: initial; }
+.externsjs.tabbar.layout.vertical ._internal_ {
+ right: 0; }
+.externsjs.tabbar.layout.vertical .indicator > .indicator-content {
+ position: absolute;
+ height: 100%;
+ right: 0; }
+.externsjs.tabbar.layout.vertical .indicator-opposite-side ._internal_ {
+ right: initial;
+ left: 0; }
+.externsjs.tabbar.layout.vertical .indicator-opposite-side .indicator > .indicator-content {
+ right: initial; }
+
+j|TabBarButtonItemRenderer {
+ IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ItemRendererMouseController");
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout"); }
+
+j|TabBarContent {
+ IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout");
+ IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
+
+.externsjs.simpletable {
+ position: relative;
+ white-space: nowrap;
+ border-spacing: 0px;
+ overflow: hidden; }
+ .externsjs.simpletable .externsjs.tableheadercell {
+ position: relative;
+ vertical-align: bottom;
+ text-overflow: ellipsis;
+ letter-spacing: 0;
+ text-align: left; }
+ .externsjs.simpletable .externsjs.tbody .externsjs.tablerow {
+ position: relative;
+ transition-duration: 0.28s;
+ transition-property: background-color; }
+ .externsjs.simpletable .externsjs.tablecell {
+ position: relative; }
+
+j|SimpleTable {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
+
+.externsjs.table table {
+ width: 100%;
+ border-spacing: 0px; }
+.externsjs.table .externsjs.tableheadercell {
+ position: relative;
+ vertical-align: bottom;
+ text-overflow: ellipsis;
+ letter-spacing: 0;
+ text-align: left; }
+.externsjs.table .externsjs.tbody .externsjs.tablerow {
+ position: relative;
+ transition-duration: 0.28s;
+ transition-property: background-color; }
+.externsjs.table .externsjs.tablecell {
+ position: relative;
+ height: 100%; }
+.externsjs.table.fixedHeader {
+ overflow-y: auto; }
+ .externsjs.table.fixedHeader .externsjs.tableheadercell {
+ position: sticky;
+ top: 0;
+ z-index: 1; }
+
+j|Table {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.TableLayout");
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.TableView");
+ IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.TableModel");
+ IItemRendererClassFactory: ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
+ IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.TableItemRenderer");
+ IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.TableCellSelectionMouseController");
+ IBeadKeyController: ClassReference("org.apache.royale.externsjs.beads.controllers.TableKeyDownController");
+ IItemRendererInitializer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.TableItemRendererInitializer");
+ ISelectableItemRenderer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ClassSelectorListSelectableItemRendererBead");
+ IDataProviderItemRendererMapper: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.TableItemRendererFactoryForCollectionView");
+ IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport");
+ IContentView: ClassReference("org.apache.royale.externsjs.supportClasses.table.TBodyContentArea"); }
+
+.externsjs.tableitem {
+ cursor: pointer;
+ text-decoration: none;
+ letter-spacing: 0;
+ line-height: normal !important;
+ overflow: hidden;
+ cursor: auto; }
+ .externsjs.tableitem.selectable {
+ cursor: pointer; }
+
+.empty-cell {
+ pointer-events: none; }
+
+j|TableItemRenderer {
+ IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ItemRendererMouseController");
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
+
+j|TBody {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
+
+j|THead {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
+
+j|TFoot {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
+
+j|TableCell {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
+
+j|TableRow {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
+
+.alignTextLeft {
+ text-align: left; }
+
+.alignTextRight {
+ text-align: right; }
+
+.alignTextCenter {
+ text-align: center; }
+
+.externsjs.textinput {
+ position: relative;
+ display: inline-flex;
+ overflow: hidden; }
+ .externsjs.textinput::before {
+ top: calc(50% - 100%);
+ left: calc(50% - 100%);
+ width: 200%;
+ height: 200%;
+ z-index: 1; }
+ .externsjs.textinput::before, .externsjs.textinput::after {
+ position: absolute;
+ pointer-events: none;
+ content: ""; }
+ .externsjs.textinput input {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -o-appearance: none;
+ -ms-appearance: none;
+ appearance: none;
+ width: 100%;
+ height: auto;
+ max-width: 100%;
+ flex: 1 0 auto;
+ outline: none;
+ text-align: left;
+ line-height: normal !important; }
+ .externsjs.textinput input[disabled] {
+ cursor: unset; }
+ .externsjs.textinput.icon i.fonticon {
+ cursor: default;
+ pointer-events: none;
+ top: 50%;
+ right: initial;
+ position: absolute;
+ text-align: center;
+ margin-top: -6px; }
+ .externsjs.textinput.icon i.fonticon.material-icons {
+ margin-top: -0.5em; }
+ .externsjs.textinput.icon.right i.fonticon {
+ left: initial; }
+ .externsjs.textinput.truncate input {
+ overflow: hidden;
+ text-overflow: ellipsis; }
+
+j|TextInput {
+ IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.TextModel"); }
+
+@media -royale-swf {
+ j|TextInput {
+ IBeadView: ClassReference("org.apache.royale.html.beads.TextInputWithBorderView");
+ IBeadController: ClassReference("org.apache.royale.html.beads.controllers.EditableTextKeyboardController");
+ IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
+ IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead"); } }
+.externsjs.textarea {
+ position: relative;
+ display: inline-flex; }
+ .externsjs.textarea textarea {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -o-appearance: none;
+ -ms-appearance: none;
+ appearance: none;
+ resize: none;
+ max-width: 100%;
+ flex: 1 0 auto;
+ outline: none;
+ text-align: left;
+ line-height: normal !important; }
+ .externsjs.textarea textarea[disabled] {
+ cursor: unset; }
+
+j|TextArea {
+ IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.TextModel"); }
+
+.externsjs.titlebar {
+ background-color: transparent;
+ padding: 0px;
+ min-height: 34px; }
+
+j|TitleBar {
+ IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.TitleBarModel");
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.TitleBarView"); }
+
+.externsjs.togglebutton {
+ cursor: pointer;
+ user-select: none;
+ display: inline-flex;
+ position: relative;
+ align-items: center;
+ justify-content: center;
+ vertical-align: middle;
+ overflow: hidden;
+ outline: none;
+ white-space: nowrap;
+ line-height: normal !important;
+ text-align: center;
+ text-decoration: none; }
+ .externsjs.togglebutton[disabled] {
+ cursor: default; }
+ .externsjs.togglebutton .fonticon {
+ cursor: inherit; }
+
+.externsjs.tooltip {
+ padding: 6px;
+ position: absolute;
+ pointer-events: none;
+ z-index: 80;
+ border-radius: 0.25em; }
+ .externsjs.tooltip.error {
+ margin-top: -31px !important; }
+ .externsjs.tooltip.error::before {
+ content: "";
+ position: absolute;
+ height: 0;
+ width: 0; }
+ .externsjs.tooltip.error.left-top::before {
+ top: 100%;
+ margin-top: 0px; }
+ .externsjs.tooltip.error.middle-top::before {
+ bottom: 0;
+ left: 50%;
+ border-bottom: 0; }
+ .externsjs.tooltip.error.left-middle::before {
+ top: 50%;
+ right: 0;
+ border-right: 0; }
+ .externsjs.tooltip.error.right-middle::before {
+ top: 50%;
+ left: 0;
+ border-left: 0; }
+ .externsjs.tooltip.error.middle-bottom::before {
+ top: 0;
+ left: 50%;
+ border-top: 0; }
+
+.externsjs.topappbar {
+ display: inline-flex;
+ flex: 1 1 auto; }
+ .externsjs.topappbar .topBarAppHeader {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ width: 100%;
+ z-index: 20;
+ position: fixed; }
+ .externsjs.topappbar .topBarAppHeader.fixed {
+ transition: box-shadow 200ms linear; }
+ .externsjs.topappbar .externsjs.barrow {
+ display: flex;
+ position: relative;
+ width: 100%;
+ height: 64px; }
+ .externsjs.topappbar .externsjs.barsection {
+ display: inline-flex;
+ flex: 1 1 auto;
+ align-items: center;
+ min-width: 0;
+ z-index: 1;
+ order: -1; }
+ .externsjs.topappbar .externsjs.barsection button {
+ will-change: transform, opacity;
+ display: flex;
+ position: relative;
+ flex-shrink: 0;
+ align-items: center;
+ justify-content: center;
+ width: 48px;
+ height: 48px;
+ outline: none;
+ text-decoration: none;
+ opacity: 1; }
+ .externsjs.topappbar .externsjs.barsection button .fonticon {
+ margin-left: 0px;
+ margin-right: 0px; }
+ .externsjs.topappbar .externsjs.bartitle {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ white-space: nowrap;
+ flex: 1 1 auto;
+ overflow: hidden;
+ z-index: 1;
+ line-height: 2rem;
+ letter-spacing: 0.0125em;
+ text-decoration: inherit;
+ text-transform: inherit;
+ text-overflow: ellipsis; }
+
+j|TopAppBar {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
+
+j|BarRow {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
+
+j|BarTitle {
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
+
+.externsjs.barrow {
+ display: flex;
+ position: relative;
+ width: 100%; }
+
+.externsjs.barsection {
+ display: inline-flex;
+ flex: 1 1 auto;
+ align-items: center;
+ min-width: 0;
+ z-index: 1;
+ justify-content: flex-start;
+ order: -1; }
+
+.externsjs.wizard.main {
+ align-items: center;
+ width: 100%;
+ height: 100%; }
+.externsjs.precontent {
+ position: relative;
+ width: 100%;
+ flex: 1 0; }
+.externsjs.next, .externsjs.previous {
+ z-index: 1;
+ height: 100%;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ flex: 0 0 0%; }
+ .externsjs.next .externsjs.button, .externsjs.previous .externsjs.button {
+ position: relative;
+ flex-direction: column; }
+.externsjs.wizardcontent {
+ height: 100%;
+ flex-grow: 100;
+ position: inherit; }
+.externsjs.wizardpage {
+ position: absolute;
+ top: 0px;
+ bottom: 0px;
+ width: 100%;
+ display: none; }
+ .externsjs.wizardpage > * {
+ margin: auto; }
+ .externsjs.wizardpage.is-selected {
+ z-index: 1;
+ display: block; }
+ .externsjs.wizardpage.is-selected.transitions {
+ opacity: 1;
+ transform: translateX(0%); }
+ .externsjs.wizardpage.transitions {
+ opacity: 0;
+ transition: transform 0.6s ease-out, opacity 0.6s ease-out;
+ transform: translateX(100%);
+ display: block; }
+ .externsjs.wizardpage.transitions.slideLeft {
+ transform: translateX(-100%); }
+ .externsjs.wizardpage.transitions.slideRight {
+ transform: translateX(100%); }
+
+j|Wizard {
+ IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.WizardView");
+ IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.WizardController");
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
+ IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.WizardModel");
+ IWizardContentArea: ClassReference("org.apache.royale.externsjs.WizardContent"); }
+
+j|WizardContent {
+ IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
+
+j|WizardPage {
+ IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.NoViewport"); }
+
+.externsjs.main {
+ width: 100%;
+ height: 100%; }
+
+.has-topappbar {
+ padding-top: 66px !important; }
+
+.has-footerbar {
+ padding-bottom: 66px !important; }
+
+j|ApplicationMainContent {
+ IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
+ IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout");
+ IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
+
+/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/projects/ExternsJS/src/main/resources/externsjs-as-manifest.xml b/frameworks/projects/ExternsJS/src/main/resources/externsjs-as-manifest.xml
new file mode 100644
index 0000000..2141c30
--- /dev/null
+++ b/frameworks/projects/ExternsJS/src/main/resources/externsjs-as-manifest.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You 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
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<componentPackage>
+
+
+</componentPackage>
diff --git a/frameworks/projects/ExternsJS/src/main/resources/externsjs-manifest.xml b/frameworks/projects/ExternsJS/src/main/resources/externsjs-manifest.xml
new file mode 100644
index 0000000..04f2f97
--- /dev/null
+++ b/frameworks/projects/ExternsJS/src/main/resources/externsjs-manifest.xml
@@ -0,0 +1,27 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You 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
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<componentPackage>
+
+
+
+
+</componentPackage>
diff --git a/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/New Text Document.html b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/New Text Document.html
new file mode 100644
index 0000000..ae9a4d3
--- /dev/null
+++ b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/New Text Document.html
@@ -0,0 +1,56 @@
+<!--
+ * 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
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ -->
+ <!DOCTYPE html>
+<html>
+<body>
+<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
+<script src="inspire-tree.min.js"></script>
+<script src="inspire-tree-dom.min.js"></script>
+<script>
+ var objtree = new InspireTree(
+ {
+ selection: {
+ mode: 'checkbox'
+ },
+ data: [{
+ text: 'A node'
+ }]
+ });
+
+ new InspireTreeDOM(objtree, {target: demo});
+</script>
+
+<h1>My First JavaScript</h1>
+
+<button type="button"
+onclick="document.getElementById('demo').innerHTML = Date()">
+Click me to display Date and Time.</button>
+
+<div id="demo"></div>
+</body>
+</html>
+ background-image: url('../assets/inspiretree/alinakazi.jpg');
+ background-repeat:no-repeat;
+ background-position:right;
+
+
+
+ #mainContent > main > section > div > div > div > div > ol > li:nth-child(1) > div.wholerow > img
+
+
+
+ <div class="wholerow">
+ <img src="assets/inspiretree/alinakazi.jpg" width="10" height="10">
+
+</div>
\ No newline at end of file
diff --git a/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-custom.css b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-custom.css
new file mode 100644
index 0000000..d1fcc64
--- /dev/null
+++ b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-custom.css
@@ -0,0 +1,435 @@
+/**
+ * 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
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.inspire-tree {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none; }
+ .inspire-tree .btn {
+ background-color: rgba(255, 255, 255, 0.4);
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 3px;
+ display: inline-block;
+ height: 20px;
+ transition: all 150ms linear;
+ width: 20px; }
+ .inspire-tree .btn:hover {
+ box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); }
+ .inspire-tree .btn + .btn {
+ margin-left: 5px; }
+ .inspire-tree .btn.icon {
+ position: relative; }
+ .inspire-tree .btn.icon::before {
+ display: block;
+ height: 14px;
+ left: 50%;
+ position: absolute;
+ top: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ width: 14px; }
+ .inspire-tree .btn-group {
+ display: inline-block;
+ height: 35px;
+ line-height: 35px; }
+ .inspire-tree:focus {
+ outline: none; }
+ .inspire-tree ol {
+ list-style: none;
+ margin: 0;
+ padding: 0; }
+ .inspire-tree ol ol {
+ padding-left: 20px; }
+ .inspire-tree li > .title-wrap {
+ min-height: 35px;
+ position: relative;
+ z-index: 2; }
+ .inspire-tree .toggle {
+ height: 35px;
+ left: 0;
+ position: absolute;
+ top: 0;
+ width: 35px;
+ z-index: 2; }
+ .inspire-tree .toggle::before {
+ display: block;
+ left: 50%;
+ position: absolute;
+ top: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%); }
+ .inspire-tree input[type="checkbox"] {
+ background: transparent;
+ left: 50px !important;
+ height: 24px;
+ position: absolute;
+ vertical-align: middle;
+ width: 24px;
+ z-index: 2;
+ -moz-appearance: none;
+ -ms-appearance: none;
+ -o-appearance: none;
+ -webkit-appearance: none;
+ cursor: pointer; }
+ .inspire-tree input[type="checkbox"]::before {
+ background: white;
+ border-radius: 3px;
+ border: 1px solid #d9d9d9;
+ content: " ";
+ height: 22px;
+ left: 0px;
+ position: absolute;
+ top: 0px;
+ width: 22px; }
+ .inspire-tree input[type="checkbox"]::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%232196F3' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ border-radius: 3px;
+ border: 1px solid transparent;
+ content: " ";
+ height: 22px;
+ left: 0px;
+ opacity: 0;
+ position: absolute;
+ top: 0px;
+ transform: scale(0);
+ transition: all 0.3s ease;
+ width: 22px; }
+ .inspire-tree input[type="checkbox"]:checked::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%232196F3' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ opacity: 1;
+ transform: scale(1); }
+ .inspire-tree input[type="checkbox"]:checked:active::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%232196F3' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ opacity: 1;
+ transform: scale(1); }
+ .inspire-tree input[type="checkbox"]:checked:active:focus::before {
+ background: #9ACFFA;
+ border-radius: 3px;
+ border: 1px solid #2196F3;
+ outline: none; }
+ .inspire-tree input[type="checkbox"]:checked:focus::before {
+ background: #9ACFFA;
+ border-radius: 3px;
+ border: 1px solid #2196F3;
+ outline: none; }
+ .inspire-tree input[type="checkbox"]:indeterminate::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Crect stroke-width='0' stroke='%23FFFFFF' height='12' width='12' y='5' x='5' fill='%232196F3' /%3E%3C/svg%3E") no-repeat center center;
+ opacity: 1;
+ transform: scale(1); }
+ .inspire-tree input[type="checkbox"]:indeterminate:active::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Crect stroke-width='0' stroke='%23FFFFFF' height='12' width='12' y='5' x='5' fill='%232196F3' /%3E%3C/svg%3E") no-repeat center center;
+ opacity: 1;
+ transform: scale(1); }
+ .inspire-tree input[type="checkbox"]:indeterminate:active:focus::before {
+ background: #9ACFFA;
+ border-radius: 3px;
+ border: 1px solid #2196F3;
+ outline: none; }
+ .inspire-tree input[type="checkbox"]:indeterminate:focus::before {
+ background: #9ACFFA;
+ border-radius: 3px;
+ border: 1px solid #2196F3;
+ outline: none; }
+ .inspire-tree input[type="checkbox"]:focus::before {
+ background: #9ACFFA;
+ border-radius: 3px;
+ border: 1px solid #2196F3;
+ outline: none; }
+ .inspire-tree input[type="checkbox"][disabled] {
+ color: silver;
+ cursor: unset; }
+ .inspire-tree input[type="checkbox"][disabled]::before {
+ background: #f3f3f3;
+ border-radius: 3px;
+ border: 1px solid #d9d9d9; }
+ .inspire-tree input[type="checkbox"][disabled]::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center; }
+ .inspire-tree input[type="checkbox"]:checked[disabled]::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center; }
+ .inspire-tree input[type="checkbox"]:indeterminate[disabled]::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Crect stroke-width='0' stroke='%23FFFFFF' height='12' width='12' y='5' x='5' fill='%23cccccc' /%3E%3C/svg%3E") no-repeat center center; }
+ .inspire-tree.rejected input[type="checkbox"]:indeterminate::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cline stroke-width='4' stroke='%232196F3' stroke-linecap='undefined' stroke-linejoin='undefined' y2='10.9375' x2='17' y1='11.0625' x1='5' fill='none' /%3E%3C/svg%3E") no-repeat center center;
+ opacity: 1;
+ transform: scale(1); }
+ .inspire-tree.rejected input[type="checkbox"]:indeterminate:active::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cline stroke-width='4' stroke='%232196F3' stroke-linecap='undefined' stroke-linejoin='undefined' y2='10.9375' x2='17' y1='11.0625' x1='5' fill='none' /%3E%3C/svg%3E") no-repeat center center;
+ opacity: 1;
+ transform: scale(1); }
+ .inspire-tree.rejected input[type="checkbox"]:indeterminate[disabled]::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cline stroke-width='4' stroke='%23cccccc' stroke-linecap='undefined' stroke-linejoin='undefined' y2='10.9375' x2='17' y1='11.0625' x1='5' fill='none' /%3E%3C/svg%3E") no-repeat center center; }
+ .inspire-tree .title {
+ cursor: default;
+ display: block;
+ height: 35px;
+ line-height: 35px;
+ overflow: hidden;
+ padding-left: 42px;
+ position: relative;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+ white-space: nowrap;
+ z-index: 1; }
+ .inspire-tree .title.load-more {
+ color: #476cb8;
+ cursor: pointer; }
+ .inspire-tree .title.load-more:hover {
+ text-decoration: underline; }
+ .inspire-tree .title::before {
+ left: 30px;
+ position: absolute;
+ top: 45%;
+ -webkit-transform: translateY(-50%);
+ transform: translateY(-50%);
+ vertical-align: top; }
+ .inspire-tree .title:focus {
+ outline: none; }
+ .inspire-tree.drag-and-drop li:not(.drop-target) {
+ opacity: 0.5; }
+ .inspire-tree .editable form {
+ display: inline-block;
+ height: 35px;
+ line-height: 35px;
+ padding-top: 2px; }
+ .inspire-tree .editable form input {
+ height: 20px; }
+ .inspire-tree .editable > .btn-group {
+ display: none;
+ padding-top: 2px;
+ position: absolute;
+ right: 10px;
+ z-index: 3; }
+ .inspire-tree .editable:hover > .btn-group {
+ display: block; }
+ .inspire-tree input + .btn-group {
+ margin-left: 10px; }
+ .inspire-tree > .btn.icon {
+ margin-left: 2px; }
+
+.itree-menu {
+ background: #ddd;
+ border: 1px solid #c4c4c4;
+ border-radius: 3px;
+ font-family: sans-serif;
+ list-style: none;
+ margin: 0;
+ min-width: 150px;
+ padding: 0;
+ position: absolute;
+ z-index: 10; }
+ .itree-menu a {
+ display: block;
+ padding: 3px 8px; }
+ .itree-menu a:hover {
+ background: rgba(218, 250, 255, 0.5);
+ color: rgba(164, 234, 245, 0.5); }
+
+.inspire-tree, .inspire-tree * {
+ box-sizing: border-box; }
+
+.inspire-tree .collapsed > ol, .inspire-tree .hidden {
+ display: none; }
+
+.drag-targeting.drag-targeting-insert.inspire-tree,
+.drag-targeting.drag-targeting-insert > .title-wrap > .title {
+ border: 1px solid #2dadc5; }
+
+.drag-targeting.drag-targeting-above > .title-wrap > .title {
+ border-top: 3px solid #2dadc5; }
+.drag-targeting.drag-targeting-below > .title-wrap > .title {
+ border-bottom: 3px solid #2dadc5; }
+
+.inspire-tree .editable form input, .inspire-tree .editable form .btn {
+ vertical-align: top; }
+
+.inspire-tree > ol > .folder:first-child:not(:only-child) {
+ background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC");
+ background-position: 11px 13px;
+ background-repeat: no-repeat; }
+.inspire-tree.editable-add > ol > .folder:last-child:not(:only-child) {
+ background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC");
+ background-repeat: repeat-y; }
+.inspire-tree.editable-add > ol > .leaf:last-child {
+ background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAYCAYAAAAh8HdUAAAAN0lEQVQ4T2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGLo0dBDDz0SMu5o2oMFFgBXbEeI0XwYIwAAAABJRU5ErkJgggAA"); }
+.inspire-tree li.expanded:not(:last-child) > ol {
+ background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC");
+ background-position: 11px 0;
+ background-repeat: repeat-y; }
+.inspire-tree li.expanded.folder:not(.loading) > .title-wrap {
+ background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC");
+ background-position: 31px 13px;
+ background-repeat: no-repeat; }
+.inspire-tree .leaf:not(:last-child):not(.detached) {
+ background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAYCAYAAAAh8HdUAAAAN0lEQVQ4T2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGLo0dBDDz0SMu5o2oMFFgBXbEeI0XwYIwAAAABJRU5ErkJgggAA");
+ background-position: 11px 0;
+ background-repeat: no-repeat; }
+.inspire-tree .leaf:last-child {
+ background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAKklEQVQoU2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGJoAGUZM32Z0U8tAAAAAElFTkSuQmCC");
+ background-position: 11px 0;
+ background-repeat: no-repeat; }
+.inspire-tree .leaf.detached:last-child {
+ background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC");
+ background-position: 11px 0;
+ background-repeat: no-repeat; }
+
+.inspire-tree .folder:last-child:not(:only-child), .inspire-tree li .folder:last-child {
+ background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC");
+ background-position: 11px 0;
+ background-repeat: no-repeat; }
+
+.inspire-tree > ol .expanded:not(:last-child):not(:first-child), .inspire-tree li:not(:last-child) {
+ background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC");
+ background-position: 11px 0;
+ background-repeat: no-repeat; }
+
+.inspire-tree .icon::before {
+ background-position: 0 0;
+ background-repeat: no-repeat;
+ content: "";
+ display: inline-block;
+ height: 14px;
+ width: 14px; }
+.inspire-tree .icon-check::before {
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M27%204l-15%2015-7-7-5%205%2012%2012%2020-20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
+.inspire-tree .icon-check:hover::before {
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%230ccc0a%22%20d%3D%22M27%204l-15%2015-7-7-5%205%2012%2012%2020-20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
+.inspire-tree .icon-collapse::before {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%232196F3' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+ content: " ";
+ height: 22px;
+ left: 50%;
+ top: 50%;
+ width: 14px; }
+.inspire-tree .icon-cross::before {
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M31.708%2025.708c-0-0-0-0-0-0l-9.708-9.708%209.708-9.708c0-0%200-0%200-0%200.105-0.105%200.18-0.227%200.229-0.357%200.133-0.356%200.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.28 [...]
+.inspire-tree .icon-cross:hover::before {
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23c00%22%20d%3D%22M31.708%2025.708c-0-0-0-0-0-0l-9.708-9.708%209.708-9.708c0-0%200-0%200-0%200.105-0.105%200.18-0.227%200.229-0.357%200.133-0.356%200.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0 [...]
+.inspire-tree .icon-expand::before {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%232196F3' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+ content: " ";
+ height: 22px;
+ left: 25%;
+ top: 25%;
+ width: 14px;
+ -webkit-transform: rotate(-90deg);
+ -ms-transform: rotate(-90deg);
+ transform: rotate(-90deg); }
+.inspire-tree .icon-file-empty::before {
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23a5a5a5%22%20d%3D%22M28.681%207.159c-0.694-0.947-1.662-2.053-2.724-3.116s-2.169-2.030-3.116-2.724c-1.612-1.182-2.393-1.319-2.841-1.319h-15.5c-1.378%200-2.5%201.121-2.5%202.5v27c0%201.378%201.122%202 [...]
+.inspire-tree .icon-folder::before {
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M14%204l4%204h14v22h-32v-26z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
+.inspire-tree .icon-folder-open::before {
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M26%2030l6-16h-26l-6%2016zM4%2012l-4%2018v-26h9l4%204h13v4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E%0A"); }
+.inspire-tree .icon-minus::before {
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M0%2013v6c0%200.552%200.448%201%201%201h30c0.552%200%201-0.448%201-1v-6c0-0.552-0.448-1-1-1h-30c-0.552%200-1%200.448-1%201z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
+.inspire-tree .icon-minus:hover::before {
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23c00%22%20d%3D%22M0%2013v6c0%200.552%200.448%201%201%201h30c0.552%200%201-0.448%201-1v-6c0-0.552-0.448-1-1-1h-30c-0.552%200-1%200.448-1%201z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
+.inspire-tree .icon-more::before {
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M12%209.984c1.078%200%202.016%200.938%202.016%202.016s-0.938%202.016-2.016%202.016-2.016-0.938-2.016-2.016%200.938-2.016%202.016-2.016zM18%209.984c1.078%200%202.016%200.938%202.0 [...]
+.inspire-tree .icon-pencil::before {
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M27%200c2.761%200%205%202.239%205%205%200%201.126-0.372%202.164-1%203l-2%202-7-7%202-2c0.836-0.628%201.874-1%203-1zM2%2023l-2%209%209-2%2018.5-18.5-7-7-18.5%2018.5zM22.362%2011.3 [...]
+.inspire-tree .icon-pencil:hover::before {
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%230ccc0a%22%20d%3D%22M27%200c2.761%200%205%202.239%205%205%200%201.126-0.372%202.164-1%203l-2%202-7-7%202-2c0.836-0.628%201.874-1%203-1zM2%2023l-2%209%209-2%2018.5-18.5-7-7-18.5%2018.5zM22.362%2011.3 [...]
+.inspire-tree .icon-plus::before {
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M31%2012h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552%200-1%200.448-1%201v11h-11c-0.552%200-1%200.448-1%201v6c0%200.552%200.448%201%201%201h11v11c0%200.552%200.448%201%201%201h6c0.552%2 [...]
+.inspire-tree .icon-plus:hover::before {
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%230ccc0a%22%20d%3D%22M31%2012h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552%200-1%200.448-1%201v11h-11c-0.552%200-1%200.448-1%201v6c0%200.552%200.448%201%201%201h11v11c0%200.552%200.448%201%201%201h6c0.552%2 [...]
+.inspire-tree .selected > .title-wrap .icon-folder::before {
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%233CADF1%22%20d%3D%22M14%204l4%204h14v22h-32v-26z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
+.inspire-tree .selected > .title-wrap .icon-folder-open::before {
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%233CADF1%22%20d%3D%22M26%2030l6-16h-26l-6%2016zM4%2012l-4%2018v-26h9l4%204h13v4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E%0A"); }
+.inspire-tree .selected > .title-wrap .icon-file-empty::before {
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%233CADF1%22%20d%3D%22M28.681%207.159c-0.694-0.947-1.662-2.053-2.724-3.116s-2.169-2.030-3.116-2.724c-1.612-1.182-2.393-1.319-2.841-1.319h-15.5c-1.378%200-2.5%201.121-2.5%202.5v27c0%201.378%201.122%202 [...]
+.inspire-tree .loading > .title-wrap input {
+ display: none; }
+.inspire-tree .loading > .title-wrap .title::before {
+ background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2714px%27%20height%3D%2714px%27%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22xMidYMid%22%20class%3D%22uil-ring%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22none%22%20class%3D%22bk%22%3E%3C%2Frect%3E%3Cdefs%3E%3Cfilter%20id%3D%22uil-ring-shadow%22%20x%3D%22-100%25%22%20y%3D%22-100%25%22%20width%3D%22300%25%22% [...]
+ content: "";
+ height: 14px;
+ width: 14px; }
+.inspire-tree > ol {
+ position: relative; }
+.inspire-tree .wholerow {
+ height: 35px;
+ left: 0;
+ margin-top: -35px;
+ position: absolute;
+ width: 100%;
+ z-index: 1; }
+.inspire-tree .focused > .wholerow {
+ border: 1px dotted black; }
+
+.inspire-tree .wholerow:hover,
+.inspire-tree .title-wrap:hover + .wholerow {
+ background-color: rgba(218, 250, 255, 0.5); }
+
+.inspire-tree .selected > .wholerow,
+.inspire-tree .selected > .wholerow:hover,
+.inspire-tree .selected > .title-wrap:hover + .wholerow {
+ background-color: rgba(164, 234, 245, 0.5); }
+
+.inspire-tree .matched > .wholerow,
+.inspire-tree .matched > .wholerow:hover,
+.inspire-tree .matched > .title-wrap:hover + .wholerow {
+ background-color: rgba(247, 255, 170, 0.5); }
+
+/* Custom */
+.inspire-tree {
+ overflow: auto; }
+ .inspire-tree .title {
+ padding-left: 85px; }
+ .inspire-tree .icon::before {
+ height: 16px;
+ width: 16px; }
+ .inspire-tree.withoutcheckbox .title {
+ padding-left: 55px !important; }
+
+.editrevert.inspire-tree .icon-folder-open::after,
+.editrevert.inspire-tree .icon-folder::after {
+ background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201536%201536%22%3E%3Cpath%20d%3D%22M1511%20928q0%205-1%207q-64%20268-268%20434.5T764%201536q-146%200-282.5-55T238%201324l-129%20129q-19%2019-45%2019t-45-19t-19-45V960q0-26%2019-45t45-19h448q26%200%2045%2019t19%2045t-19%204 [...]
+ background-repeat: no-repeat;
+ content: " ";
+ cursor: pointer;
+ height: 16px;
+ position: absolute;
+ right: 3px;
+ top: 22%;
+ width: 16px;
+ z-index: 3; }
+
+.editrevert.inspire-tree .title {
+ padding-right: 20px; }
+
+.inspire-tree.noneicon .title {
+ padding-left: 58px; }
+.inspire-tree.noneicon input[type="checkbox"] {
+ left: 25px !important; }
+.inspire-tree.noneicon .icon-folder::before {
+ background-image: url(); }
+.inspire-tree.noneicon .icon-folder-open::before {
+ background-image: url(); }
+.inspire-tree.noneicon .icon-file-empty::before {
+ background-image: url(); }
+.inspire-tree.noneicon .selected > .title-wrap .icon-folder::before {
+ background-image: url(); }
+.inspire-tree.noneicon .selected > .title-wrap .icon-folder-open::before {
+ background-image: url(); }
+.inspire-tree.noneicon .selected > .title-wrap .icon-file-empty::before {
+ background-image: url(); }
+.inspire-tree.noneicon.withoutcheckbox .title {
+ padding-left: 35px !important; }
+.inspire-tree.readonly input[type="checkbox"] {
+ z-index: -1; }
+
+/*# sourceMappingURL=inspire-tree-custom.css.map */
diff --git a/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-custom.sass b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-custom.sass
new file mode 100644
index 0000000..3097e48
--- /dev/null
+++ b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-custom.sass
@@ -0,0 +1,541 @@
+/**
+ * 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
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// primary color $blue: #3CADF1
+$blue: #3CADF1
+$blue-withoutHash: 3CADF1 // color for parent and child icons when selected in case of default
+
+
+
+
+$Basic-theme-Original: rgba($blue, 1)
+$Basic-theme-Original-withoutHashForSVG: 3CADF1
+$color1: #2196F3 //blue rgb(33, 150, 243)
+$color1-withoutHashForSVG: 2196F3 //blue rgb(33, 150, 243) //for checbox and left arrow "expanded and collapse"
+
+$color2: #BBDEFA //light blue rgb(187, 222, 250)
+$color3: #333333 //dark grey rgb(51, 51, 51)
+$color4: #9E9E9E // light grey rgb(158, 158, 158)
+$color5: #EDECED //lightest blue rgb(237, 236, 237)
+$color-checkboxBackground: #9ACFFA
+
+
+
+
+.inspire-tree
+ -webkit-user-select: none
+ -moz-user-select: none
+ -ms-user-select: none
+ user-select: none
+ .btn
+ background-color: rgba(255, 255, 255, 0.4)
+ border: 1px solid rgba(0, 0, 0, 0.2)
+ border-radius: 3px
+ display: inline-block
+ height: 20px
+ transition: all 150ms linear
+ width: 20px
+ &:hover
+ box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1)
+ & + .btn
+ margin-left: 5px
+ &.icon
+ position: relative
+ &::before
+ display: block
+ height: 14px
+ left: 50%
+ position: absolute
+ top: 50%
+ -webkit-transform: translate(-50%, -50%)
+ transform: translate(-50%, -50%)
+ width: 14px
+ .btn-group
+ display: inline-block
+ height: 35px
+ line-height: 35px
+ &:focus
+ outline: none
+ ol
+ list-style: none
+ margin: 0
+ padding: 0
+ ol
+ padding-left: 20px
+ li
+ & > .title-wrap
+ min-height: 35px
+ position: relative
+ z-index: 2
+ .toggle
+ height: 35px
+ left: 0
+ position: absolute
+ top: 0
+ width: 35px
+ z-index: 2
+ &::before
+ display: block
+ left: 50%
+ position: absolute
+ top: 50%
+ -webkit-transform: translate(-50%, -50%)
+ transform: translate(-50%, -50%)
+ input[type="checkbox"]
+ background: transparent
+ left: 50px !important
+ height: 24px
+ position: absolute
+ vertical-align: middle
+ width: 24px
+ z-index: 2
+ -moz-appearance: none
+ -ms-appearance: none
+ -o-appearance: none
+ -webkit-appearance: none
+ cursor: pointer
+ input[type="checkbox"]::before
+ background: white
+ border-radius: 3px
+ border: 1px solid #d9d9d9
+ content: " "
+ height: 22px
+ left: 0px
+ position: absolute
+ top: 0px
+ width: 22px
+ input[type="checkbox"]::after
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23"+$color1-withoutHashForSVG+"' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center
+ border-radius: 3px
+ border: 1px solid transparent
+ content: " "
+ height: 22px
+ left: 0px
+ opacity: 0
+ position: absolute
+ top: 0px
+ transform: scale(0)
+ transition: all 0.3s ease
+ width: 22px
+ input[type="checkbox"]:checked
+ &::after
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23"+$color1-withoutHashForSVG+"' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center
+ opacity: 1
+ transform: scale(1)
+ &:active
+ &::after
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23"+$color1-withoutHashForSVG+"' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center
+ opacity: 1
+ transform: scale(1)
+ &:focus
+ &::before
+ background: $color-checkboxBackground
+ border-radius: 3px
+ border: 1px solid $color1
+ outline: none
+ &:focus
+ &::before
+ background: $color-checkboxBackground
+ border-radius: 3px
+ border: 1px solid $color1
+ outline: none
+ input[type="checkbox"]:indeterminate
+ &::after
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Crect stroke-width='0' stroke='%23FFFFFF' height='12' width='12' y='5' x='5' fill='%23"+$color1-withoutHashForSVG+"' /%3E%3C/svg%3E") no-repeat center center
+ opacity: 1
+ transform: scale(1)
+ &:active
+ &::after
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Crect stroke-width='0' stroke='%23FFFFFF' height='12' width='12' y='5' x='5' fill='%23"+$color1-withoutHashForSVG+"' /%3E%3C/svg%3E") no-repeat center center
+ opacity: 1
+ transform: scale(1)
+ &:focus
+ &::before
+ background: $color-checkboxBackground
+ border-radius: 3px
+ border: 1px solid $color1
+ outline: none
+ &:focus
+ &::before
+ background: $color-checkboxBackground
+ border-radius: 3px
+ border: 1px solid $color1
+ outline: none
+ input[type="checkbox"]:focus
+ &::before
+ background: $color-checkboxBackground
+ border-radius: 3px
+ border: 1px solid $color1
+ outline: none
+ input[type="checkbox"][disabled]
+ color: silver
+ cursor: unset
+ input[type="checkbox"][disabled]::before
+ background: #f3f3f3
+ border-radius: 3px
+ border: 1px solid #d9d9d9
+ input[type="checkbox"][disabled]::after
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center
+ input[type="checkbox"]:checked[disabled]::after
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center
+ input[type="checkbox"]:indeterminate[disabled]::after
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Crect stroke-width='0' stroke='%23FFFFFF' height='12' width='12' y='5' x='5' fill='%23cccccc' /%3E%3C/svg%3E") no-repeat center center
+ &.rejected
+ input[type="checkbox"]:indeterminate
+ &::after
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cline stroke-width='4' stroke='%23"+$color1-withoutHashForSVG+"' stroke-linecap='undefined' stroke-linejoin='undefined' y2='10.9375' x2='17' y1='11.0625' x1='5' fill='none' /%3E%3C/svg%3E") no-repeat center center
+ opacity: 1
+ transform: scale(1)
+ &:active
+ &::after
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cline stroke-width='4' stroke='%23"+$color1-withoutHashForSVG+"' stroke-linecap='undefined' stroke-linejoin='undefined' y2='10.9375' x2='17' y1='11.0625' x1='5' fill='none' /%3E%3C/svg%3E") no-repeat center center
+ opacity: 1
+ transform: scale(1)
+ input[type="checkbox"]:indeterminate[disabled]::after
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cline stroke-width='4' stroke='%23cccccc' stroke-linecap='undefined' stroke-linejoin='undefined' y2='10.9375' x2='17' y1='11.0625' x1='5' fill='none' /%3E%3C/svg%3E") no-repeat center center
+ .title
+ cursor: default
+ display: block
+ height: 35px
+ line-height: 35px
+ overflow: hidden
+ padding-left: 42px
+ position: relative
+ text-overflow: ellipsis
+ vertical-align: middle
+ white-space: nowrap
+ z-index: 1
+ &.load-more
+ color: #476cb8
+ cursor: pointer
+ &:hover
+ text-decoration: underline
+ &::before
+ left: 30px
+ position: absolute
+ top: 45%
+ -webkit-transform: translateY(-50%)
+ transform: translateY(-50%)
+ vertical-align: top
+ &:focus
+ outline: none
+ &.drag-and-drop
+ li
+ &:not(.drop-target)
+ opacity: .5
+ .editable
+ form
+ display: inline-block
+ height: 35px
+ line-height: 35px
+ padding-top: 2px
+ input
+ height: 20px
+ & > .btn-group
+ display: none
+ padding-top: 2px
+ position: absolute
+ right: 10px
+ z-index: 3
+ &:hover
+ & > .btn-group
+ display: block
+ input
+ & + .btn-group
+ margin-left: 10px
+ & > .btn
+ &.icon
+ margin-left: 2px
+.itree-menu
+ background: #ddd
+ border: 1px solid #c4c4c4
+ border-radius: 3px
+ font-family: sans-serif
+ list-style: none
+ margin: 0
+ min-width: 150px
+ padding: 0
+ position: absolute
+ z-index: 10
+ a
+ display: block
+ padding: 3px 8px
+ &:hover
+ background: rgba(218, 250, 255, 0.5)
+ color: rgba(164, 234, 245, 0.5)
+.inspire-tree, .inspire-tree *
+ box-sizing: border-box
+.inspire-tree .collapsed > ol, .inspire-tree .hidden
+ display: none
+.drag-targeting.drag-targeting-insert.inspire-tree,
+.drag-targeting.drag-targeting-insert > .title-wrap > .title
+ border: 1px solid #2dadc5
+.drag-targeting
+ &.drag-targeting-above
+ & > .title-wrap
+ & > .title
+ border-top: 3px solid #2dadc5
+ &.drag-targeting-below
+ & > .title-wrap
+ & > .title
+ border-bottom: 3px solid #2dadc5
+.inspire-tree .editable form input, .inspire-tree .editable form .btn
+ vertical-align: top
+.inspire-tree
+ & > ol
+ & > .folder
+ &:first-child
+ &:not(:only-child)
+ background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC")
+ background-position: 11px 13px
+ background-repeat: no-repeat
+ &.editable-add
+ & > ol
+ & > .folder
+ &:last-child
+ &:not(:only-child)
+ background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC")
+ background-repeat: repeat-y
+ & > .leaf
+ &:last-child
+ background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAYCAYAAAAh8HdUAAAAN0lEQVQ4T2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGLo0dBDDz0SMu5o2oMFFgBXbEeI0XwYIwAAAABJRU5ErkJgggAA")
+ li
+ &.expanded
+ &:not(:last-child)
+ & > ol
+ background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC")
+ background-position: 11px 0
+ background-repeat: repeat-y
+ &.folder
+ &:not(.loading)
+ & > .title-wrap
+ background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC")
+ background-position: 31px 13px
+ background-repeat: no-repeat
+ .leaf
+ &:not(:last-child):not(.detached)
+ background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAYCAYAAAAh8HdUAAAAN0lEQVQ4T2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGLo0dBDDz0SMu5o2oMFFgBXbEeI0XwYIwAAAABJRU5ErkJgggAA")
+ background-position: 11px 0
+ background-repeat: no-repeat
+ &:last-child
+ background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAKklEQVQoU2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGJoAGUZM32Z0U8tAAAAAElFTkSuQmCC")
+ background-position: 11px 0
+ background-repeat: no-repeat
+ &.detached
+ &:last-child
+ background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC")
+ background-position: 11px 0
+ background-repeat: no-repeat
+.inspire-tree .folder:last-child:not(:only-child), .inspire-tree li .folder:last-child
+ background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC")
+ background-position: 11px 0
+ background-repeat: no-repeat
+.inspire-tree > ol .expanded:not(:last-child):not(:first-child), .inspire-tree li:not(:last-child)
+ background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC")
+ background-position: 11px 0
+ background-repeat: no-repeat
+.inspire-tree
+ .icon
+ &::before
+ background-position: 0 0
+ background-repeat: no-repeat
+ content: ''
+ display: inline-block
+ height: 14px
+ width: 14px
+ .icon-check
+ &::before
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M27%204l-15%2015-7-7-5%205%2012%2012%2020-20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")
+ &:hover
+ &::before
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%230ccc0a%22%20d%3D%22M27%204l-15%2015-7-7-5%205%2012%2012%2020-20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")
+ .icon-collapse
+ &::before
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23"+$color1-withoutHashForSVG+"' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 [...]
+ content: " "
+ height: 22px
+ left: 50%
+ top: 50%
+ width: 14px
+ .icon-cross
+ &::before
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M31.708%2025.708c-0-0-0-0-0-0l-9.708-9.708%209.708-9.708c0-0%200-0%200-0%200.105-0.105%200.18-0.227%200.229-0.357%200.133-0.356%200.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.2 [...]
+ &:hover
+ &::before
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23c00%22%20d%3D%22M31.708%2025.708c-0-0-0-0-0-0l-9.708-9.708%209.708-9.708c0-0%200-0%200-0%200.105-0.105%200.18-0.227%200.229-0.357%200.133-0.356%200.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286 [...]
+ .icon-expand
+ &::before
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23"+$color1-withoutHashForSVG+"' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 [...]
+ content: " "
+ height: 22px
+ left: 25%
+ top: 25%
+ width: 14px
+ -webkit-transform: rotate(-90deg)
+ -ms-transform: rotate(-90deg)
+ transform: rotate(-90deg)
+ .icon-file-empty
+ &::before
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23a5a5a5%22%20d%3D%22M28.681%207.159c-0.694-0.947-1.662-2.053-2.724-3.116s-2.169-2.030-3.116-2.724c-1.612-1.182-2.393-1.319-2.841-1.319h-15.5c-1.378%200-2.5%201.121-2.5%202.5v27c0%201.378%201.122%20 [...]
+ .icon-folder
+ &::before
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M14%204l4%204h14v22h-32v-26z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")
+ .icon-folder-open
+ &::before
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M26%2030l6-16h-26l-6%2016zM4%2012l-4%2018v-26h9l4%204h13v4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E%0A")
+ .icon-minus
+ &::before
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M0%2013v6c0%200.552%200.448%201%201%201h30c0.552%200%201-0.448%201-1v-6c0-0.552-0.448-1-1-1h-30c-0.552%200-1%200.448-1%201z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")
+ &:hover
+ &::before
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23c00%22%20d%3D%22M0%2013v6c0%200.552%200.448%201%201%201h30c0.552%200%201-0.448%201-1v-6c0-0.552-0.448-1-1-1h-30c-0.552%200-1%200.448-1%201z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")
+ .icon-more
+ &::before
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M12%209.984c1.078%200%202.016%200.938%202.016%202.016s-0.938%202.016-2.016%202.016-2.016-0.938-2.016-2.016%200.938-2.016%202.016-2.016zM18%209.984c1.078%200%202.016%200.938%202. [...]
+ .icon-pencil
+ &::before
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M27%200c2.761%200%205%202.239%205%205%200%201.126-0.372%202.164-1%203l-2%202-7-7%202-2c0.836-0.628%201.874-1%203-1zM2%2023l-2%209%209-2%2018.5-18.5-7-7-18.5%2018.5zM22.362%2011. [...]
+ &:hover
+ &::before
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%230ccc0a%22%20d%3D%22M27%200c2.761%200%205%202.239%205%205%200%201.126-0.372%202.164-1%203l-2%202-7-7%202-2c0.836-0.628%201.874-1%203-1zM2%2023l-2%209%209-2%2018.5-18.5-7-7-18.5%2018.5zM22.362%2011 [...]
+ .icon-plus
+ &::before
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M31%2012h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552%200-1%200.448-1%201v11h-11c-0.552%200-1%200.448-1%201v6c0%200.552%200.448%201%201%201h11v11c0%200.552%200.448%201%201%201h6c0.552% [...]
+ &:hover
+ &::before
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%230ccc0a%22%20d%3D%22M31%2012h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552%200-1%200.448-1%201v11h-11c-0.552%200-1%200.448-1%201v6c0%200.552%200.448%201%201%201h11v11c0%200.552%200.448%201%201%201h6c0.552 [...]
+ .selected
+ & > .title-wrap
+ .icon-folder
+ &::before
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23"+$Basic-theme-Original-withoutHashForSVG+"%22%20d%3D%22M14%204l4%204h14v22h-32v-26z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")
+ .icon-folder-open
+ &::before
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23"+$Basic-theme-Original-withoutHashForSVG+"%22%20d%3D%22M26%2030l6-16h-26l-6%2016zM4%2012l-4%2018v-26h9l4%204h13v4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E%0A")
+ .icon-file-empty
+ &::before
+ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23"+$Basic-theme-Original-withoutHashForSVG+"%22%20d%3D%22M28.681%207.159c-0.694-0.947-1.662-2.053-2.724-3.116s-2.169-2.030-3.116-2.724c-1.612-1.182-2.393-1.319-2.841-1.319h-15.5c-1.378%200-2.5%20 [...]
+ .loading
+ & > .title-wrap
+ input
+ display: none
+ .title
+ &::before
+ background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2714px%27%20height%3D%2714px%27%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22xMidYMid%22%20class%3D%22uil-ring%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22none%22%20class%3D%22bk%22%3E%3C%2Frect%3E%3Cdefs%3E%3Cfilter%20id%3D%22uil-ring-shadow%22%20x%3D%22-100%25%22%20y%3D%22-100%25%22%20width%3D%22300%25% [...]
+ content: ''
+ height: 14px
+ width: 14px
+ & > ol
+ position: relative
+ .wholerow
+ height: 35px
+ left: 0
+ margin-top: -35px
+ position: absolute
+ width: 100%
+ z-index: 1
+ .focused
+ & > .wholerow
+ border: 1px dotted black
+.inspire-tree .wholerow:hover,
+.inspire-tree .title-wrap:hover + .wholerow
+ background-color: rgba(218, 250, 255, 0.5)
+.inspire-tree .selected > .wholerow,
+.inspire-tree .selected > .wholerow:hover,
+.inspire-tree .selected > .title-wrap:hover + .wholerow
+ background-color: rgba(164, 234, 245, 0.5)
+.inspire-tree .matched > .wholerow,
+.inspire-tree .matched > .wholerow:hover,
+.inspire-tree .matched > .title-wrap:hover + .wholerow
+ background-color: rgba(247, 255, 170, 0.5)
+
+/* Custom */
+.inspire-tree
+ overflow: auto
+ .title
+ padding-left: 85px
+ .icon
+ &::before
+ height: 16px
+ width: 16px
+ &.withoutcheckbox
+ .title
+ padding-left: 55px !important
+
+.editrevert.inspire-tree .icon-folder-open::after,
+.editrevert.inspire-tree .icon-folder::after
+ background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201536%201536%22%3E%3Cpath%20d%3D%22M1511%20928q0%205-1%207q-64%20268-268%20434.5T764%201536q-146%200-282.5-55T238%201324l-129%20129q-19%2019-45%2019t-45-19t-19-45V960q0-26%2019-45t45-19h448q26%200%2045%2019t19%2045t-19%2045 [...]
+ background-repeat: no-repeat
+ content: " "
+ cursor: pointer
+ height: 16px
+ position: absolute
+ right: 3px
+ top: 22%
+ width: 16px
+ z-index: 3
+.editrevert
+ &.inspire-tree
+ .title
+ padding-right: 20px
+.inspire-tree
+ &.noneicon
+ .title
+ padding-left: 58px
+ input[type="checkbox"]
+ left: 25px !important
+ .icon-folder
+ &::before
+ background-image: url()
+ .icon-folder-open
+ &::before
+ background-image: url()
+ .icon-file-empty
+ &::before
+ background-image: url()
+ .selected
+ & > .title-wrap
+ .icon-folder
+ &::before
+ background-image: url()
+ .icon-folder-open
+ &::before
+ background-image: url()
+ .icon-file-empty
+ &::before
+ background-image: url()
+ &.withoutcheckbox
+ .title
+ padding-left: 35px !important
+ &.readonly
+ input[type="checkbox"]
+ z-index: -1
+
+//.inspire-tree
+// &.noneiconWithoutCheckBox
+// .title
+// padding-left: 35px !important
+// &.withiconWithoutCheckBox
+// .title
+// padding-left: 55px !important
+
+//.inspire-tree
+// &.noneicon
+// &.withoutcheckbox
+// .title
+// padding-left: 35px !important
+
+//.inspire-tree
+// &.withoutcheckbox
+// .title
+// padding-left: 55px !important
diff --git a/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dark.css b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dark.css
new file mode 100644
index 0000000..fa2dba9
--- /dev/null
+++ b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dark.css
@@ -0,0 +1,325 @@
+/**
+ * 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
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.inspire-tree .btn {
+ background-color: white;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 3px;
+ display: inline-block;
+ height: 20px;
+ transition: all 150ms linear;
+ width: 20px; }
+ .inspire-tree .btn:hover {
+ box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); }
+ .inspire-tree .btn + .btn {
+ margin-left: 5px; }
+ .inspire-tree .btn.icon {
+ position: relative; }
+ .inspire-tree .btn.icon::before {
+ display: block;
+ height: 14px;
+ left: 50%;
+ position: absolute;
+ top: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ width: 14px; }
+
+.inspire-tree .btn-group {
+ display: inline-block;
+ height: 25px;
+ line-height: 25px; }
+
+/* ~~@@@~~~~~ Context Menu ~~~~~@@@~~ */
+.itree-menu {
+ background: #ddd;
+ border: 1px solid #c4c4c4;
+ border-radius: 3px;
+ font-family: sans-serif;
+ list-style: none;
+ margin: 0;
+ min-width: 150px;
+ padding: 0;
+ position: absolute;
+ z-index: 10; }
+ .itree-menu a {
+ display: block;
+ padding: 3px 8px; }
+ .itree-menu a:hover {
+ background: rgba(100, 100, 100, 0.5);
+ color: rgba(74, 110, 116, 0.5); }
+
+.inspire-tree {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ /* ~~@@@~~~~~ Lists ~~~~~@@@~~ */
+ /* ~~@@@~~~~~ Node Content ~~~~~@@@~~ */ }
+ .inspire-tree:focus {
+ outline: none; }
+ .inspire-tree, .inspire-tree * {
+ box-sizing: border-box; }
+ .inspire-tree ol {
+ list-style: none;
+ margin: 0;
+ padding: 0; }
+ .inspire-tree ol ol {
+ padding-left: 20px; }
+ .inspire-tree .collapsed > ol, .inspire-tree .hidden {
+ display: none; }
+ .inspire-tree li > .title-wrap {
+ min-height: 25px;
+ position: relative;
+ z-index: 2; }
+ .inspire-tree .toggle {
+ height: 25px;
+ left: 0;
+ position: absolute;
+ top: 0;
+ width: 25px;
+ z-index: 2; }
+ .inspire-tree .toggle::before {
+ display: block;
+ left: 50%;
+ position: absolute;
+ top: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%); }
+ .inspire-tree [type="checkbox"] {
+ left: 18px;
+ position: absolute;
+ top: 4px;
+ vertical-align: middle;
+ width: 20px;
+ z-index: 2; }
+ .inspire-tree .title {
+ cursor: default;
+ display: block;
+ height: 25px;
+ line-height: 25px;
+ overflow: hidden;
+ padding-left: 42px;
+ position: relative;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+ white-space: nowrap;
+ z-index: 1; }
+ .inspire-tree .title.load-more {
+ color: #476cb8;
+ cursor: pointer; }
+ .inspire-tree .title.load-more:hover {
+ text-decoration: underline; }
+ .inspire-tree .title::before {
+ left: 24px;
+ position: absolute;
+ top: 50%;
+ -webkit-transform: translateY(-50%);
+ transform: translateY(-50%);
+ vertical-align: top; }
+ .inspire-tree .title:focus {
+ outline: none; }
+
+.inspire-tree.drag-and-drop li:not(.drop-target) {
+ opacity: .5; }
+
+.drag-targeting.drag-targeting-insert.inspire-tree,
+.drag-targeting.drag-targeting-insert > .title-wrap > .title {
+ border: 1px solid #2dadc5; }
+
+.drag-targeting.drag-targeting-above > .title-wrap > .title {
+ border-top: 3px solid #2dadc5; }
+
+.drag-targeting.drag-targeting-below > .title-wrap > .title {
+ border-bottom: 3px solid #2dadc5; }
+
+.inspire-tree .editable form {
+ display: inline-block;
+ height: 25px;
+ line-height: 25px;
+ padding-top: 2px; }
+ .inspire-tree .editable form input {
+ height: 20px; }
+ .inspire-tree .editable form input, .inspire-tree .editable form .btn {
+ vertical-align: top; }
+
+.inspire-tree .editable > .btn-group {
+ display: none;
+ padding-top: 2px;
+ position: absolute;
+ right: 10px;
+ z-index: 3; }
+
+.inspire-tree .editable:hover > .btn-group {
+ display: block; }
+
+.inspire-tree input + .btn-group {
+ margin-left: 10px; }
+
+.inspire-tree > .btn.icon {
+ margin-left: 2px; }
+
+.inspire-tree > ol > .folder:first-child:not(:only-child) {
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC");
+ background-position: 11px 13px;
+ background-repeat: no-repeat; }
+
+.inspire-tree .folder:last-child:not(:only-child), .inspire-tree li .folder:last-child {
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC");
+ background-position: 11px 0;
+ background-repeat: no-repeat; }
+
+.inspire-tree.editable-add > ol > .folder:last-child:not(:only-child) {
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC");
+ background-repeat: repeat-y; }
+
+.inspire-tree > ol .expanded:not(:last-child):not(:first-child), .inspire-tree li:not(:last-child) {
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC");
+ background-position: 11px 0;
+ background-repeat: no-repeat; }
+
+.inspire-tree li.expanded:not(:last-child) > ol {
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC");
+ background-position: 11px 0;
+ background-repeat: repeat-y; }
+
+.inspire-tree li.expanded.folder:not(.loading) > .title-wrap {
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC");
+ background-position: 31px 13px;
+ background-repeat: no-repeat; }
+
+.inspire-tree .leaf:not(:last-child):not(.detached) {
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAYCAYAAAAh8HdUAAAAN0lEQVQ4T2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGLo0dBDDz0SMu5o2oMFFgBXbEeI0XwYIwAAAABJRU5ErkJgggAA");
+ background-position: 11px 0;
+ background-repeat: no-repeat; }
+
+.inspire-tree .leaf:last-child {
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAKklEQVQoU2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGJoAGUZM32Z0U8tAAAAAElFTkSuQmCC");
+ background-position: 11px 0;
+ background-repeat: no-repeat; }
+
+.inspire-tree .leaf.detached:last-child {
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC");
+ background-position: 11px 0;
+ background-repeat: no-repeat; }
+
+.inspire-tree.editable-add > ol > .leaf:last-child {
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAYCAYAAAAh8HdUAAAAN0lEQVQ4T2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGLo0dBDDz0SMu5o2oMFFgBXbEeI0XwYIwAAAABJRU5ErkJgggAA"); }
+
+.inspire-tree .icon::before {
+ background-position: 0 0;
+ background-repeat: no-repeat;
+ content: '';
+ display: inline-block;
+ height: 14px;
+ width: 14px; }
+
+.inspire-tree .icon-check::before {
+ background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M27%204l-15%2015-7-7-5%205%2012%2012%2020-20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
+
+.inspire-tree .icon-check:hover::before {
+ background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%230ccc0a%22%20d%3D%22M27%204l-15%2015-7-7-5%205%2012%2012%2020-20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
+
+.inspire-tree .icon-collapse::before {
+ background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23aaa%22%20d%3D%22M4%201h16q1.242%200%202.121%200.879t0.879%202.121v16q0%201.242-0.879%202.121t-2.121%200.879h-16q-1.242%200-2.121-0.879t-0.879-2.121v-16q0-1.242%200.879-2.121t2.121- [...]
+ background-color: black;
+ border-radius: 3px;
+ margin-left: -1px; }
+
+.inspire-tree .icon-cross::before {
+ background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M31.708%2025.708c-0-0-0-0-0-0l-9.708-9.708%209.708-9.708c0-0%200-0%200-0%200.105-0.105%200.18-0.227%200.229-0.357%200.133-0.356%200.057-0.771-0.229-1.057l-4.586- [...]
+
+.inspire-tree .icon-cross:hover::before {
+ background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23c00%22%20d%3D%22M31.708%2025.708c-0-0-0-0-0-0l-9.708-9.708%209.708-9.708c0-0%200-0%200-0%200.105-0.105%200.18-0.227%200.229-0.357%200.133-0.356%200.057-0.771-0.229-1.057l-4.586-4.5 [...]
+
+.inspire-tree .icon-expand::before {
+ background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23aaa%22%20d%3D%22M4%201h16q1.242%200%202.121%200.879t0.879%202.121v16q0%201.242-0.879%202.121t-2.121%200.879h-16q-1.242%200-2.121-0.879t-0.879-2.121v-16q0-1.242%200.879-2.121t2.121- [...]
+ background-color: black;
+ border-radius: 3px;
+ margin-left: -1px; }
+
+.inspire-tree .icon-file-empty::before {
+ background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23a5a5a5%22%20d%3D%22M28.681%207.159c-0.694-0.947-1.662-2.053-2.724-3.116s-2.169-2.030-3.116-2.724c-1.612-1.182-2.393-1.319-2.841-1.319h-15.5c-1.378%200-2.5%201.121-2.5%202.5v27c0%20 [...]
+
+.inspire-tree .icon-folder::before {
+ background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M14%204l4%204h14v22h-32v-26z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
+
+.inspire-tree .icon-folder-open::before {
+ background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M26%2030l6-16h-26l-6%2016zM4%2012l-4%2018v-26h9l4%204h13v4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E%0A"); }
+
+.inspire-tree .icon-minus::before {
+ background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M0%2013v6c0%200.552%200.448%201%201%201h30c0.552%200%201-0.448%201-1v-6c0-0.552-0.448-1-1-1h-30c-0.552%200-1%200.448-1%201z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
+
+.inspire-tree .icon-minus:hover::before {
+ background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23c00%22%20d%3D%22M0%2013v6c0%200.552%200.448%201%201%201h30c0.552%200%201-0.448%201-1v-6c0-0.552-0.448-1-1-1h-30c-0.552%200-1%200.448-1%201z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
+
+.inspire-tree .icon-more::before {
+ background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M12%209.984c1.078%200%202.016%200.938%202.016%202.016s-0.938%202.016-2.016%202.016-2.016-0.938-2.016-2.016%200.938-2.016%202.016-2.016zM18%209.984c1.078%200%202. [...]
+
+.inspire-tree .icon-pencil::before {
+ background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M27%200c2.761%200%205%202.239%205%205%200%201.126-0.372%202.164-1%203l-2%202-7-7%202-2c0.836-0.628%201.874-1%203-1zM2%2023l-2%209%209-2%2018.5-18.5-7-7-18.5%2018 [...]
+
+.inspire-tree .icon-pencil:hover::before {
+ background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%230ccc0a%22%20d%3D%22M27%200c2.761%200%205%202.239%205%205%200%201.126-0.372%202.164-1%203l-2%202-7-7%202-2c0.836-0.628%201.874-1%203-1zM2%2023l-2%209%209-2%2018.5-18.5-7-7-18.5%2018 [...]
+
+.inspire-tree .icon-plus::before {
+ background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M31%2012h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552%200-1%200.448-1%201v11h-11c-0.552%200-1%200.448-1%201v6c0%200.552%200.448%201%201%201h11v11c0%200.552%200.448%201% [...]
+
+.inspire-tree .icon-plus:hover::before {
+ background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%230ccc0a%22%20d%3D%22M31%2012h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552%200-1%200.448-1%201v11h-11c-0.552%200-1%200.448-1%201v6c0%200.552%200.448%201%201%201h11v11c0%200.552%200.448%201% [...]
+
+.inspire-tree .selected > .title-wrap .icon-folder::before {
+ background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%2366a0a9%22%20d%3D%22M14%204l4%204h14v22h-32v-26z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
+
+.inspire-tree .selected > .title-wrap .icon-folder-open::before {
+ background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%2366a0a9%22%20d%3D%22M26%2030l6-16h-26l-6%2016zM4%2012l-4%2018v-26h9l4%204h13v4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E%0A"); }
+
+.inspire-tree .selected > .title-wrap .icon-file-empty::before {
+ background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%2366a0a9%22%20d%3D%22M28.681%207.159c-0.694-0.947-1.662-2.053-2.724-3.116s-2.169-2.030-3.116-2.724c-1.612-1.182-2.393-1.319-2.841-1.319h-15.5c-1.378%200-2.5%201.121-2.5%202.5v27c0%20 [...]
+
+.inspire-tree .loading > .title-wrap input {
+ display: none; }
+
+.inspire-tree .loading > .title-wrap .title::before {
+ background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2714px%27%20height%3D%2714px%27%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22xMidYMid%22%20class%3D%22uil-ring%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22none%22%20class%3D%22bk%22%3E%3C%2Frect%3E%3Cdefs%3E%3Cfilter%20id%3D%22uil-ring-shadow%22%20x%3D%22-100%25%22%20y%3D%22-100%25%22%20widt [...]
+ content: '';
+ height: 14px;
+ width: 14px; }
+
+.inspire-tree > ol {
+ position: relative; }
+
+.inspire-tree .wholerow {
+ height: 25px;
+ left: 0;
+ margin-top: -25px;
+ position: absolute;
+ width: 100%;
+ z-index: 1; }
+
+.inspire-tree .focused > .wholerow {
+ border: 1px dotted white; }
+
+.inspire-tree .wholerow:hover,
+.inspire-tree .title-wrap:hover + .wholerow {
+ background-color: rgba(100, 100, 100, 0.5); }
+
+.inspire-tree .selected > .wholerow,
+.inspire-tree .selected > .wholerow:hover,
+.inspire-tree .selected > .title-wrap:hover + .wholerow {
+ background-color: rgba(74, 110, 116, 0.5); }
+
+.inspire-tree .matched > .wholerow,
+.inspire-tree .matched > .wholerow:hover,
+.inspire-tree .matched > .title-wrap:hover + .wholerow {
+ background-color: rgba(247, 255, 170, 0.5); }
diff --git a/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dark.min.css b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dark.min.css
new file mode 100644
index 0000000..165af06
--- /dev/null
+++ b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dark.min.css
@@ -0,0 +1,14 @@
+/**
+ * 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
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.inspire-tree .btn{background-color:#fff;border:1px solid rgba(0,0,0,.2);border-radius:3px;display:inline-block;height:20px;transition:all .15s linear;width:20px}.inspire-tree .btn:hover{box-shadow:0 2px 3px rgba(0,0,0,.1)}.inspire-tree .btn+.btn{margin-left:5px}.inspire-tree .btn.icon{position:relative}.inspire-tree .btn.icon:before{display:block;height:14px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:14px}.inspire-tree .btn-group{display:inline-block;height: [...]
\ No newline at end of file
diff --git a/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dom-royale.js b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dom-royale.js
new file mode 100644
index 0000000..37d8e22
--- /dev/null
+++ b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dom-royale.js
@@ -0,0 +1,3766 @@
+/**
+ * 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
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ /* Inspire Tree DOM
+ * @version 4.0.6
+ * https://github.com/helion3/inspire-tree-dom
+ * @copyright Copyright 2015 Helion3, and other contributors
+ * @license Licensed under MIT
+ * see https://github.com/helion3/inspire-tree-dom/blob/master/LICENSE
+ */
+(function (global, factory) {
+ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('lodash'), require('inspire-tree')) :
+ typeof define === 'function' && define.amd ? define(['lodash', 'inspire-tree'], factory) :
+ (global.InspireTreeDOM = factory(global._,global.InspireTree));
+}(this, (function (_,InspireTree) { 'use strict';
+
+ InspireTree = InspireTree && InspireTree.hasOwnProperty('default') ? InspireTree['default'] : InspireTree;
+
+ var NO_OP = '$NO_OP';
+ var ERROR_MSG = 'a runtime error occured! Use Inferno in development environment to find the error.';
+ var isBrowser = !!(typeof window !== 'undefined' && window.document);
+ var isArray = Array.isArray;
+ function isStringOrNumber(o) {
+ var type = typeof o;
+ return type === 'string' || type === 'number';
+ }
+ function isNullOrUndef(o) {
+ return isUndefined(o) || isNull(o);
+ }
+ function isInvalid(o) {
+ return isNull(o) || o === false || isTrue(o) || isUndefined(o);
+ }
+ function isFunction(o) {
+ return typeof o === 'function';
+ }
+ function isString(o) {
+ return typeof o === 'string';
+ }
+ function isNumber(o) {
+ return typeof o === 'number';
+ }
+ function isNull(o) {
+ return o === null;
+ }
+ function isTrue(o) {
+ return o === true;
+ }
+ function isUndefined(o) {
+ return o === void 0;
+ }
+ function throwError(message) {
+ if (!message) {
+ message = ERROR_MSG;
+ }
+ throw new Error(("Inferno Error: " + message));
+ }
+ function combineFrom(first, second) {
+ var out = {};
+ if (first) {
+ for (var key in first) {
+ out[key] = first[key];
+ }
+ }
+ if (second) {
+ for (var key$1 in second) {
+ out[key$1] = second[key$1];
+ }
+ }
+ return out;
+ }
+
+ var keyPrefix = '$';
+ function getVNode(childFlags, children, className, flags, key, props, ref, type) {
+ return {
+ childFlags: childFlags,
+ children: children,
+ className: className,
+ dom: null,
+ flags: flags,
+ key: key === void 0 ? null : key,
+ parentVNode: null,
+ props: props === void 0 ? null : props,
+ ref: ref === void 0 ? null : ref,
+ type: type
+ };
+ }
+ function createVNode(flags, type, className, children, childFlags, props, key, ref) {
+ var childFlag = childFlags === void 0 ? 1 /* HasInvalidChildren */ : childFlags;
+ var vNode = getVNode(childFlag, children, className, flags, key, props, ref, type);
+ if (childFlag === 0 /* UnknownChildren */) {
+ normalizeChildren(vNode, vNode.children);
+ }
+ return vNode;
+ }
+ function createComponentVNode(flags, type, props, key, ref) {
+ if ((flags & 2 /* ComponentUnknown */) > 0) {
+ flags = type.prototype && isFunction(type.prototype.render) ? 4 /* ComponentClass */ : 8 /* ComponentFunction */;
+ }
+ // set default props
+ var defaultProps = type.defaultProps;
+ if (!isNullOrUndef(defaultProps)) {
+ if (!props) {
+ props = {}; // Props can be referenced and modified at application level so always create new object
+ }
+ for (var prop in defaultProps) {
+ if (isUndefined(props[prop])) {
+ props[prop] = defaultProps[prop];
+ }
+ }
+ }
+ if ((flags & 8 /* ComponentFunction */) > 0) {
+ var defaultHooks = type.defaultHooks;
+ if (!isNullOrUndef(defaultHooks)) {
+ if (!ref) {
+ // As ref cannot be referenced from application level, we can use the same refs object
+ ref = defaultHooks;
+ }
+ else {
+ for (var prop$1 in defaultHooks) {
+ if (isUndefined(ref[prop$1])) {
+ ref[prop$1] = defaultHooks[prop$1];
+ }
+ }
+ }
+ }
+ }
+ var vNode = getVNode(1 /* HasInvalidChildren */, null, null, flags, key, props, ref, type);
+ var optsVNode = options.createVNode;
+ if (isFunction(optsVNode)) {
+ optsVNode(vNode);
+ }
+ return vNode;
+ }
+ function createTextVNode(text, key) {
+ return getVNode(1 /* HasInvalidChildren */, isNullOrUndef(text) ? '' : text, null, 16 /* Text */, key, null, null, null);
+ }
+ function normalizeProps(vNode) {
+ var props = vNode.props;
+ if (props) {
+ var flags = vNode.flags;
+ if (flags & 481 /* Element */) {
+ if (props.children !== void 0 && isNullOrUndef(vNode.children)) {
+ normalizeChildren(vNode, props.children);
+ }
+ if (props.className !== void 0) {
+ vNode.className = props.className || null;
+ props.className = undefined;
+ }
+ }
+ if (props.key !== void 0) {
+ vNode.key = props.key;
+ props.key = undefined;
+ }
+ if (props.ref !== void 0) {
+ if (flags & 8 /* ComponentFunction */) {
+ vNode.ref = combineFrom(vNode.ref, props.ref);
+ }
+ else {
+ vNode.ref = props.ref;
+ }
+ props.ref = undefined;
+ }
+ }
+ return vNode;
+ }
+ function directClone(vNodeToClone) {
+ var newVNode;
+ var flags = vNodeToClone.flags;
+ if (flags & 14 /* Component */) {
+ var props;
+ var propsToClone = vNodeToClone.props;
+ if (!isNull(propsToClone)) {
+ props = {};
+ for (var key in propsToClone) {
+ props[key] = propsToClone[key];
+ }
+ }
+ newVNode = createComponentVNode(flags, vNodeToClone.type, props, vNodeToClone.key, vNodeToClone.ref);
+ }
+ else if (flags & 481 /* Element */) {
+ newVNode = createVNode(flags, vNodeToClone.type, vNodeToClone.className, vNodeToClone.children, vNodeToClone.childFlags, vNodeToClone.props, vNodeToClone.key, vNodeToClone.ref);
+ }
+ else if (flags & 16 /* Text */) {
+ newVNode = createTextVNode(vNodeToClone.children, vNodeToClone.key);
+ }
+ else if (flags & 1024 /* Portal */) {
+ newVNode = vNodeToClone;
+ }
+ return newVNode;
+ }
+ function createVoidVNode() {
+ return createTextVNode('', null);
+ }
+ function _normalizeVNodes(nodes, result, index, currentKey) {
+ for (var len = nodes.length; index < len; index++) {
+ var n = nodes[index];
+ if (!isInvalid(n)) {
+ var newKey = currentKey + keyPrefix + index;
+ if (isArray(n)) {
+ _normalizeVNodes(n, result, 0, newKey);
+ }
+ else {
+ if (isStringOrNumber(n)) {
+ n = createTextVNode(n, newKey);
+ }
+ else {
+ var oldKey = n.key;
+ var isPrefixedKey = isString(oldKey) && oldKey[0] === keyPrefix;
+ if (!isNull(n.dom) || isPrefixedKey) {
+ n = directClone(n);
+ }
+ if (isNull(oldKey) || isPrefixedKey) {
+ n.key = newKey;
+ }
+ else {
+ n.key = currentKey + oldKey;
+ }
+ }
+ result.push(n);
+ }
+ }
+ }
+ }
+ function normalizeChildren(vNode, children) {
+ var newChildren;
+ var newChildFlags = 1 /* HasInvalidChildren */;
+ // Don't change children to match strict equal (===) true in patching
+ if (isInvalid(children)) {
+ newChildren = children;
+ }
+ else if (isString(children)) {
+ newChildFlags = 2 /* HasVNodeChildren */;
+ newChildren = createTextVNode(children);
+ }
+ else if (isNumber(children)) {
+ newChildFlags = 2 /* HasVNodeChildren */;
+ newChildren = createTextVNode(children + '');
+ }
+ else if (isArray(children)) {
+ var len = children.length;
+ if (len === 0) {
+ newChildren = null;
+ newChildFlags = 1 /* HasInvalidChildren */;
+ }
+ else {
+ // we assign $ which basically means we've flagged this array for future note
+ // if it comes back again, we need to clone it, as people are using it
+ // in an immutable way
+ // tslint:disable-next-line
+ if (Object.isFrozen(children) || children['$'] === true) {
+ children = children.slice();
+ }
+ newChildFlags = 8 /* HasKeyedChildren */;
+ for (var i = 0; i < len; i++) {
+ var n = children[i];
+ if (isInvalid(n) || isArray(n)) {
+ newChildren = newChildren || children.slice(0, i);
+ _normalizeVNodes(children, newChildren, i, '');
+ break;
+ }
+ else if (isStringOrNumber(n)) {
+ newChildren = newChildren || children.slice(0, i);
+ newChildren.push(createTextVNode(n, keyPrefix + i));
+ }
+ else {
+ var key = n.key;
+ var isNullDom = isNull(n.dom);
+ var isNullKey = isNull(key);
+ var isPrefixed = !isNullKey && key[0] === keyPrefix;
+ if (!isNullDom || isNullKey || isPrefixed) {
+ newChildren = newChildren || children.slice(0, i);
+ if (!isNullDom || isPrefixed) {
+ n = directClone(n);
+ }
+ if (isNullKey || isPrefixed) {
+ n.key = keyPrefix + i;
+ }
+ newChildren.push(n);
+ }
+ else if (newChildren) {
+ newChildren.push(n);
+ }
+ }
+ }
+ newChildren = newChildren || children;
+ newChildren.$ = true;
+ }
+ }
+ else {
+ newChildren = children;
+ if (!isNull(children.dom)) {
+ newChildren = directClone(children);
+ }
+ newChildFlags = 2 /* HasVNodeChildren */;
+ }
+ vNode.children = newChildren;
+ vNode.childFlags = newChildFlags;
+ return vNode;
+ }
+ var options = {
+ afterRender: null,
+ beforeRender: null,
+ createVNode: null,
+ renderComplete: null
+ };
+
+ var xlinkNS = 'http://www.w3.org/1999/xlink';
+ var xmlNS = 'http://www.w3.org/XML/1998/namespace';
+ var svgNS = 'http://www.w3.org/2000/svg';
+ var namespaces = {
+ 'xlink:actuate': xlinkNS,
+ 'xlink:arcrole': xlinkNS,
+ 'xlink:href': xlinkNS,
+ 'xlink:role': xlinkNS,
+ 'xlink:show': xlinkNS,
+ 'xlink:title': xlinkNS,
+ 'xlink:type': xlinkNS,
+ 'xml:base': xmlNS,
+ 'xml:lang': xmlNS,
+ 'xml:space': xmlNS
+ };
+
+ // We need EMPTY_OBJ defined in one place.
+ // Its used for comparison so we cant inline it into shared
+ var EMPTY_OBJ = {};
+ var LIFECYCLE = [];
+ function appendChild(parentDom, dom) {
+ parentDom.appendChild(dom);
+ }
+ function insertOrAppend(parentDom, newNode, nextNode) {
+ if (isNullOrUndef(nextNode)) {
+ appendChild(parentDom, newNode);
+ }
+ else {
+ parentDom.insertBefore(newNode, nextNode);
+ }
+ }
+ function documentCreateElement(tag, isSVG) {
+ if (isSVG === true) {
+ return document.createElementNS(svgNS, tag);
+ }
+ return document.createElement(tag);
+ }
+ function replaceChild(parentDom, newDom, lastDom) {
+ parentDom.replaceChild(newDom, lastDom);
+ }
+ function removeChild(parentDom, dom) {
+ parentDom.removeChild(dom);
+ }
+ function callAll(arrayFn) {
+ var listener;
+ while ((listener = arrayFn.shift()) !== undefined) {
+ listener();
+ }
+ }
+
+ var attachedEventCounts = {};
+ var attachedEvents = {};
+ function handleEvent(name, nextEvent, dom) {
+ var eventsLeft = attachedEventCounts[name];
+ var eventsObject = dom.$EV;
+ if (nextEvent) {
+ if (!eventsLeft) {
+ attachedEvents[name] = attachEventToDocument(name);
+ attachedEventCounts[name] = 0;
+ }
+ if (!eventsObject) {
+ eventsObject = dom.$EV = {};
+ }
+ if (!eventsObject[name]) {
+ attachedEventCounts[name]++;
+ }
+ eventsObject[name] = nextEvent;
+ }
+ else if (eventsObject && eventsObject[name]) {
+ attachedEventCounts[name]--;
+ if (eventsLeft === 1) {
+ document.removeEventListener(normalizeEventName(name), attachedEvents[name]);
+ attachedEvents[name] = null;
+ }
+ eventsObject[name] = nextEvent;
+ }
+ }
+ function dispatchEvents(event, target, isClick, name, eventData) {
+ var dom = target;
+ while (!isNull(dom)) {
+ // Html Nodes can be nested fe: span inside button in that scenario browser does not handle disabled attribute on parent,
+ // because the event listener is on document.body
+ // Don't process clicks on disabled elements
+ if (isClick && dom.disabled) {
+ return;
+ }
+ var eventsObject = dom.$EV;
+ if (eventsObject) {
+ var currentEvent = eventsObject[name];
+ if (currentEvent) {
+ // linkEvent object
+ eventData.dom = dom;
+ if (currentEvent.event) {
+ currentEvent.event(currentEvent.data, event);
+ }
+ else {
+ currentEvent(event);
+ }
+ if (event.cancelBubble) {
+ return;
+ }
+ }
+ }
+ dom = dom.parentNode;
+ }
+ }
+ function normalizeEventName(name) {
+ return name.substr(2).toLowerCase();
+ }
+ function stopPropagation() {
+ this.cancelBubble = true;
+ if (!this.immediatePropagationStopped) {
+ this.stopImmediatePropagation();
+ }
+ }
+ function attachEventToDocument(name) {
+ var docEvent = function (event) {
+ var type = event.type;
+ var isClick = type === 'click' || type === 'dblclick';
+ if (isClick && event.button !== 0) {
+ // Firefox incorrectly triggers click event for mid/right mouse buttons.
+ // This bug has been active for 12 years.
+ // https://bugzilla.mozilla.org/show_bug.cgi?id=184051
+ event.stopPropagation();
+ return false;
+ }
+ event.stopPropagation = stopPropagation;
+ // Event data needs to be object to save reference to currentTarget getter
+ var eventData = {
+ dom: document
+ };
+ Object.defineProperty(event, 'currentTarget', {
+ configurable: true,
+ get: function get() {
+ return eventData.dom;
+ }
+ });
+ dispatchEvents(event, event.target, isClick, name, eventData);
+ return;
+ };
+ document.addEventListener(normalizeEventName(name), docEvent);
+ return docEvent;
+ }
+
+ function isSameInnerHTML(dom, innerHTML) {
+ var tempdom = document.createElement('i');
+ tempdom.innerHTML = innerHTML;
+ return tempdom.innerHTML === dom.innerHTML;
+ }
+ function isSamePropsInnerHTML(dom, props) {
+ return Boolean(props && props.dangerouslySetInnerHTML && props.dangerouslySetInnerHTML.__html && isSameInnerHTML(dom, props.dangerouslySetInnerHTML.__html));
+ }
+
+ function triggerEventListener(props, methodName, e) {
+ if (props[methodName]) {
+ var listener = props[methodName];
+ if (listener.event) {
+ listener.event(listener.data, e);
+ }
+ else {
+ listener(e);
+ }
+ }
+ else {
+ var nativeListenerName = methodName.toLowerCase();
+ if (props[nativeListenerName]) {
+ props[nativeListenerName](e);
+ }
+ }
+ }
+ function createWrappedFunction(methodName, applyValue) {
+ var fnMethod = function (e) {
+ e.stopPropagation();
+ var vNode = this.$V;
+ // If vNode is gone by the time event fires, no-op
+ if (!vNode) {
+ return;
+ }
+ var props = vNode.props || EMPTY_OBJ;
+ var dom = vNode.dom;
+ if (isString(methodName)) {
+ triggerEventListener(props, methodName, e);
+ }
+ else {
+ for (var i = 0; i < methodName.length; i++) {
+ triggerEventListener(props, methodName[i], e);
+ }
+ }
+ if (isFunction(applyValue)) {
+ var newVNode = this.$V;
+ var newProps = newVNode.props || EMPTY_OBJ;
+ applyValue(newProps, dom, false, newVNode);
+ }
+ };
+ Object.defineProperty(fnMethod, 'wrapped', {
+ configurable: false,
+ enumerable: false,
+ value: true,
+ writable: false
+ });
+ return fnMethod;
+ }
+
+ function isCheckedType(type) {
+ return type === 'checkbox' || type === 'radio';
+ }
+ var onTextInputChange = createWrappedFunction('onInput', applyValueInput);
+ var wrappedOnChange = createWrappedFunction(['onClick', 'onChange'], applyValueInput);
+ /* tslint:disable-next-line:no-empty */
+ function emptywrapper(event) {
+ event.stopPropagation();
+ }
+ emptywrapper.wrapped = true;
+ function inputEvents(dom, nextPropsOrEmpty) {
+ if (isCheckedType(nextPropsOrEmpty.type)) {
+ dom.onchange = wrappedOnChange;
+ dom.onclick = emptywrapper;
+ }
+ else {
+ dom.oninput = onTextInputChange;
+ }
+ }
+ function applyValueInput(nextPropsOrEmpty, dom) {
+ var type = nextPropsOrEmpty.type;
+ var value = nextPropsOrEmpty.value;
+ var checked = nextPropsOrEmpty.checked;
+ var multiple = nextPropsOrEmpty.multiple;
+ var defaultValue = nextPropsOrEmpty.defaultValue;
+ var hasValue = !isNullOrUndef(value);
+ if (type && type !== dom.type) {
+ dom.setAttribute('type', type);
+ }
+ if (!isNullOrUndef(multiple) && multiple !== dom.multiple) {
+ dom.multiple = multiple;
+ }
+ if (!isNullOrUndef(defaultValue) && !hasValue) {
+ dom.defaultValue = defaultValue + '';
+ }
+ if (isCheckedType(type)) {
+ if (hasValue) {
+ dom.value = value;
+ }
+ if (!isNullOrUndef(checked)) {
+ dom.checked = checked;
+ }
+ }
+ else {
+ if (hasValue && dom.value !== value) {
+ dom.defaultValue = value;
+ dom.value = value;
+ }
+ else if (!isNullOrUndef(checked)) {
+ dom.checked = checked;
+ }
+ }
+ }
+
+ function updateChildOptionGroup(vNode, value) {
+ var type = vNode.type;
+ if (type === 'optgroup') {
+ var children = vNode.children;
+ var childFlags = vNode.childFlags;
+ if (childFlags & 12 /* MultipleChildren */) {
+ for (var i = 0, len = children.length; i < len; i++) {
+ updateChildOption(children[i], value);
+ }
+ }
+ else if (childFlags === 2 /* HasVNodeChildren */) {
+ updateChildOption(children, value);
+ }
+ }
+ else {
+ updateChildOption(vNode, value);
+ }
+ }
+ function updateChildOption(vNode, value) {
+ var props = vNode.props || EMPTY_OBJ;
+ var dom = vNode.dom;
+ // we do this as multiple may have changed
+ dom.value = props.value;
+ if ((isArray(value) && value.indexOf(props.value) !== -1) || props.value === value) {
+ dom.selected = true;
+ }
+ else if (!isNullOrUndef(value) || !isNullOrUndef(props.selected)) {
+ dom.selected = props.selected || false;
+ }
+ }
+ var onSelectChange = createWrappedFunction('onChange', applyValueSelect);
+ function selectEvents(dom) {
+ dom.onchange = onSelectChange;
+ }
+ function applyValueSelect(nextPropsOrEmpty, dom, mounting, vNode) {
+ var multiplePropInBoolean = Boolean(nextPropsOrEmpty.multiple);
+ if (!isNullOrUndef(nextPropsOrEmpty.multiple) && multiplePropInBoolean !== dom.multiple) {
+ dom.multiple = multiplePropInBoolean;
+ }
+ var childFlags = vNode.childFlags;
+ if ((childFlags & 1 /* HasInvalidChildren */) === 0) {
+ var children = vNode.children;
+ var value = nextPropsOrEmpty.value;
+ if (mounting && isNullOrUndef(value)) {
+ value = nextPropsOrEmpty.defaultValue;
+ }
+ if (childFlags & 12 /* MultipleChildren */) {
+ for (var i = 0, len = children.length; i < len; i++) {
+ updateChildOptionGroup(children[i], value);
+ }
+ }
+ else if (childFlags === 2 /* HasVNodeChildren */) {
+ updateChildOptionGroup(children, value);
+ }
+ }
+ }
+
+ var onTextareaInputChange = createWrappedFunction('onInput', applyValueTextArea);
+ var wrappedOnChange$1 = createWrappedFunction('onChange');
+ function textAreaEvents(dom, nextPropsOrEmpty) {
+ dom.oninput = onTextareaInputChange;
+ if (nextPropsOrEmpty.onChange) {
+ dom.onchange = wrappedOnChange$1;
+ }
+ }
+ function applyValueTextArea(nextPropsOrEmpty, dom, mounting) {
+ var value = nextPropsOrEmpty.value;
+ var domValue = dom.value;
+ if (isNullOrUndef(value)) {
+ if (mounting) {
+ var defaultValue = nextPropsOrEmpty.defaultValue;
+ if (!isNullOrUndef(defaultValue) && defaultValue !== domValue) {
+ dom.defaultValue = defaultValue;
+ dom.value = defaultValue;
+ }
+ }
+ }
+ else if (domValue !== value) {
+ /* There is value so keep it controlled */
+ dom.defaultValue = value;
+ dom.value = value;
+ }
+ }
+
+ /**
+ * There is currently no support for switching same input between controlled and nonControlled
+ * If that ever becomes a real issue, then re design controlled elements
+ * Currently user must choose either controlled or non-controlled and stick with that
+ */
+ function processElement(flags, vNode, dom, nextPropsOrEmpty, mounting, isControlled) {
+ if (flags & 64 /* InputElement */) {
+ applyValueInput(nextPropsOrEmpty, dom);
+ }
+ else if (flags & 256 /* SelectElement */) {
+ applyValueSelect(nextPropsOrEmpty, dom, mounting, vNode);
+ }
+ else if (flags & 128 /* TextareaElement */) {
+ applyValueTextArea(nextPropsOrEmpty, dom, mounting);
+ }
+ if (isControlled) {
+ dom.$V = vNode;
+ }
+ }
+ function addFormElementEventHandlers(flags, dom, nextPropsOrEmpty) {
+ if (flags & 64 /* InputElement */) {
+ inputEvents(dom, nextPropsOrEmpty);
+ }
+ else if (flags & 256 /* SelectElement */) {
+ selectEvents(dom);
+ }
+ else if (flags & 128 /* TextareaElement */) {
+ textAreaEvents(dom, nextPropsOrEmpty);
+ }
+ }
+ function isControlledFormElement(nextPropsOrEmpty) {
+ return nextPropsOrEmpty.type && isCheckedType(nextPropsOrEmpty.type) ? !isNullOrUndef(nextPropsOrEmpty.checked) : !isNullOrUndef(nextPropsOrEmpty.value);
+ }
+
+ function remove(vNode, parentDom) {
+ unmount(vNode);
+ if (parentDom && vNode.dom) {
+ removeChild(parentDom, vNode.dom);
+ // Let carbage collector free memory
+ vNode.dom = null;
+ }
+ }
+ function unmount(vNode) {
+ var flags = vNode.flags;
+ if (flags & 481 /* Element */) {
+ var ref = vNode.ref;
+ var props = vNode.props;
+ if (isFunction(ref)) {
+ ref(null);
+ }
+ var children = vNode.children;
+ var childFlags = vNode.childFlags;
+ if (childFlags & 12 /* MultipleChildren */) {
+ unmountAllChildren(children);
+ }
+ else if (childFlags === 2 /* HasVNodeChildren */) {
+ unmount(children);
+ }
+ if (!isNull(props)) {
+ for (var name in props) {
+ switch (name) {
+ case 'onClick':
+ case 'onDblClick':
+ case 'onFocusIn':
+ case 'onFocusOut':
+ case 'onKeyDown':
+ case 'onKeyPress':
+ case 'onKeyUp':
+ case 'onMouseDown':
+ case 'onMouseMove':
+ case 'onMouseUp':
+ case 'onSubmit':
+ case 'onTouchEnd':
+ case 'onTouchMove':
+ case 'onTouchStart':
+ handleEvent(name, null, vNode.dom);
+ break;
+ default:
+ break;
+ }
+ }
+ }
+ }
+ else {
+ var children$1 = vNode.children;
+ // Safe guard for crashed VNode
+ if (children$1) {
+ if (flags & 14 /* Component */) {
+ var ref$1 = vNode.ref;
+ if (flags & 4 /* ComponentClass */) {
+ if (isFunction(children$1.componentWillUnmount)) {
+ children$1.componentWillUnmount();
+ }
+ if (isFunction(ref$1)) {
+ ref$1(null);
+ }
+ children$1.$UN = true;
+ if (children$1.$LI) {
+ unmount(children$1.$LI);
+ }
+ }
+ else {
+ if (!isNullOrUndef(ref$1) && isFunction(ref$1.onComponentWillUnmount)) {
+ ref$1.onComponentWillUnmount(vNode.dom, vNode.props || EMPTY_OBJ);
+ }
+ unmount(children$1);
+ }
+ }
+ else if (flags & 1024 /* Portal */) {
+ remove(children$1, vNode.type);
+ }
+ }
+ }
+ }
+ function unmountAllChildren(children) {
+ for (var i = 0, len = children.length; i < len; i++) {
+ unmount(children[i]);
+ }
+ }
+ function removeAllChildren(dom, children) {
+ unmountAllChildren(children);
+ dom.textContent = '';
+ }
+
+ function createLinkEvent(linkEvent, nextValue) {
+ return function (e) {
+ linkEvent(nextValue.data, e);
+ };
+ }
+ function patchEvent(name, lastValue, nextValue, dom) {
+ var nameLowerCase = name.toLowerCase();
+ if (!isFunction(nextValue) && !isNullOrUndef(nextValue)) {
+ var linkEvent = nextValue.event;
+ if (linkEvent && isFunction(linkEvent)) {
+ dom[nameLowerCase] = createLinkEvent(linkEvent, nextValue);
+ }
+ }
+ else {
+ var domEvent = dom[nameLowerCase];
+ // if the function is wrapped, that means it's been controlled by a wrapper
+ if (!domEvent || !domEvent.wrapped) {
+ dom[nameLowerCase] = nextValue;
+ }
+ }
+ }
+ function getNumberStyleValue(style, value) {
+ switch (style) {
+ case 'animationIterationCount':
+ case 'borderImageOutset':
+ case 'borderImageSlice':
+ case 'borderImageWidth':
+ case 'boxFlex':
+ case 'boxFlexGroup':
+ case 'boxOrdinalGroup':
+ case 'columnCount':
+ case 'fillOpacity':
+ case 'flex':
+ case 'flexGrow':
+ case 'flexNegative':
+ case 'flexOrder':
+ case 'flexPositive':
+ case 'flexShrink':
+ case 'floodOpacity':
+ case 'fontWeight':
+ case 'gridColumn':
+ case 'gridRow':
+ case 'lineClamp':
+ case 'lineHeight':
+ case 'opacity':
+ case 'order':
+ case 'orphans':
+ case 'stopOpacity':
+ case 'strokeDasharray':
+ case 'strokeDashoffset':
+ case 'strokeMiterlimit':
+ case 'strokeOpacity':
+ case 'strokeWidth':
+ case 'tabSize':
+ case 'widows':
+ case 'zIndex':
+ case 'zoom':
+ return value;
+ default:
+ return value + 'px';
+ }
+ }
+ // We are assuming here that we come from patchProp routine
+ // -nextAttrValue cannot be null or undefined
+ function patchStyle(lastAttrValue, nextAttrValue, dom) {
+ var domStyle = dom.style;
+ var style;
+ var value;
+ if (isString(nextAttrValue)) {
+ domStyle.cssText = nextAttrValue;
+ return;
+ }
+ if (!isNullOrUndef(lastAttrValue) && !isString(lastAttrValue)) {
+ for (style in nextAttrValue) {
+ // do not add a hasOwnProperty check here, it affects performance
+ value = nextAttrValue[style];
+ if (value !== lastAttrValue[style]) {
+ domStyle[style] = isNumber(value) ? getNumberStyleValue(style, value) : value;
+ }
+ }
+ for (style in lastAttrValue) {
+ if (isNullOrUndef(nextAttrValue[style])) {
+ domStyle[style] = '';
+ }
+ }
+ }
+ else {
+ for (style in nextAttrValue) {
+ value = nextAttrValue[style];
+ domStyle[style] = isNumber(value) ? getNumberStyleValue(style, value) : value;
+ }
+ }
+ }
+ function patchProp(prop, lastValue, nextValue, dom, isSVG, hasControlledValue, lastVNode) {
+ switch (prop) {
+ case 'onClick':
+ case 'onDblClick':
+ case 'onFocusIn':
+ case 'onFocusOut':
+ case 'onKeyDown':
+ case 'onKeyPress':
+ case 'onKeyUp':
+ case 'onMouseDown':
+ case 'onMouseMove':
+ case 'onMouseUp':
+ case 'onSubmit':
+ case 'onTouchEnd':
+ case 'onTouchMove':
+ case 'onTouchStart':
+ handleEvent(prop, nextValue, dom);
+ break;
+ case 'children':
+ case 'childrenType':
+ case 'className':
+ case 'defaultValue':
+ case 'key':
+ case 'multiple':
+ case 'ref':
+ break;
+ case 'autoFocus':
+ dom.autofocus = !!nextValue;
+ break;
+ case 'allowfullscreen':
+ case 'autoplay':
+ case 'capture':
+ case 'checked':
+ case 'controls':
+ case 'default':
+ case 'disabled':
+ case 'hidden':
+ case 'indeterminate':
+ case 'loop':
+ case 'muted':
+ case 'novalidate':
+ case 'open':
+ case 'readOnly':
+ case 'required':
+ case 'reversed':
+ case 'scoped':
+ case 'seamless':
+ case 'selected':
+ dom[prop] = !!nextValue;
+ break;
+ case 'defaultChecked':
+ case 'value':
+ case 'volume':
+ if (hasControlledValue && prop === 'value') {
+ return;
+ }
+ var value = isNullOrUndef(nextValue) ? '' : nextValue;
+ if (dom[prop] !== value) {
+ dom[prop] = value;
+ }
+ break;
+ case 'dangerouslySetInnerHTML':
+ var lastHtml = (lastValue && lastValue.__html) || '';
+ var nextHtml = (nextValue && nextValue.__html) || '';
+ if (lastHtml !== nextHtml) {
+ if (!isNullOrUndef(nextHtml) && !isSameInnerHTML(dom, nextHtml)) {
+ if (!isNull(lastVNode)) {
+ if (lastVNode.childFlags & 12 /* MultipleChildren */) {
+ unmountAllChildren(lastVNode.children);
+ }
+ else if (lastVNode.childFlags === 2 /* HasVNodeChildren */) {
+ unmount(lastVNode.children);
+ }
+ lastVNode.children = null;
+ lastVNode.childFlags = 1 /* HasInvalidChildren */;
+ }
+ dom.innerHTML = nextHtml;
+ }
+ }
+ break;
+ default:
+ if (prop[0] === 'o' && prop[1] === 'n') {
+ patchEvent(prop, lastValue, nextValue, dom);
+ }
+ else if (isNullOrUndef(nextValue)) {
+ dom.removeAttribute(prop);
+ }
+ else if (prop === 'style') {
+ patchStyle(lastValue, nextValue, dom);
+ }
+ else if (isSVG && namespaces[prop]) {
+ // We optimize for isSVG being false
+ // If we end up in this path we can read property again
+ dom.setAttributeNS(namespaces[prop], prop, nextValue);
+ }
+ else {
+ dom.setAttribute(prop, nextValue);
+ }
+ break;
+ }
+ }
+ function mountProps(vNode, flags, props, dom, isSVG) {
+ var hasControlledValue = false;
+ var isFormElement = (flags & 448 /* FormElement */) > 0;
+ if (isFormElement) {
+ hasControlledValue = isControlledFormElement(props);
+ if (hasControlledValue) {
+ addFormElementEventHandlers(flags, dom, props);
+ }
+ }
+ for (var prop in props) {
+ // do not add a hasOwnProperty check here, it affects performance
+ patchProp(prop, null, props[prop], dom, isSVG, hasControlledValue, null);
+ }
+ if (isFormElement) {
+ processElement(flags, vNode, dom, props, true, hasControlledValue);
+ }
+ }
+
+ function createClassComponentInstance(vNode, Component, props, context) {
+ var instance = new Component(props, context);
+ vNode.children = instance;
+ instance.$V = vNode;
+ instance.$BS = false;
+ instance.context = context;
+ if (instance.props === EMPTY_OBJ) {
+ instance.props = props;
+ }
+ instance.$UN = false;
+ if (isFunction(instance.componentWillMount)) {
+ instance.$BR = true;
+ instance.componentWillMount();
+ if (instance.$PSS) {
+ var state = instance.state;
+ var pending = instance.$PS;
+ if (isNull(state)) {
+ instance.state = pending;
+ }
+ else {
+ for (var key in pending) {
+ state[key] = pending[key];
+ }
+ }
+ instance.$PSS = false;
+ instance.$PS = null;
+ }
+ instance.$BR = false;
+ }
+ if (isFunction(options.beforeRender)) {
+ options.beforeRender(instance);
+ }
+ var input = handleComponentInput(instance.render(props, instance.state, context), vNode);
+ var childContext;
+ if (isFunction(instance.getChildContext)) {
+ childContext = instance.getChildContext();
+ }
+ if (isNullOrUndef(childContext)) {
+ instance.$CX = context;
+ }
+ else {
+ instance.$CX = combineFrom(context, childContext);
+ }
+ if (isFunction(options.afterRender)) {
+ options.afterRender(instance);
+ }
+ instance.$LI = input;
+ return instance;
+ }
+ function handleComponentInput(input, componentVNode) {
+ if (isInvalid(input)) {
+ input = createVoidVNode();
+ }
+ else if (isStringOrNumber(input)) {
+ input = createTextVNode(input, null);
+ }
+ else {
+ if (input.dom) {
+ input = directClone(input);
+ }
+ if (input.flags & 14 /* Component */) {
+ // if we have an input that is also a component, we run into a tricky situation
+ // where the root vNode needs to always have the correct DOM entry
+ // we can optimise this in the future, but this gets us out of a lot of issues
+ input.parentVNode = componentVNode;
+ }
+ }
+ return input;
+ }
+
+ function mount(vNode, parentDom, context, isSVG) {
+ var flags = vNode.flags;
+ if (flags & 481 /* Element */) {
+ return mountElement(vNode, parentDom, context, isSVG);
+ }
+ if (flags & 14 /* Component */) {
+ return mountComponent(vNode, parentDom, context, isSVG, (flags & 4 /* ComponentClass */) > 0);
+ }
+ if (flags & 512 /* Void */ || flags & 16 /* Text */) {
+ return mountText(vNode, parentDom);
+ }
+ if (flags & 1024 /* Portal */) {
+ mount(vNode.children, vNode.type, context, false);
+ return (vNode.dom = mountText(createVoidVNode(), parentDom));
+ }
+ }
+ function mountText(vNode, parentDom) {
+ var dom = (vNode.dom = document.createTextNode(vNode.children));
+ if (!isNull(parentDom)) {
+ appendChild(parentDom, dom);
+ }
+ return dom;
+ }
+ function mountElement(vNode, parentDom, context, isSVG) {
+ var flags = vNode.flags;
+ var children = vNode.children;
+ var props = vNode.props;
+ var className = vNode.className;
+ var ref = vNode.ref;
+ var childFlags = vNode.childFlags;
+ isSVG = isSVG || (flags & 32 /* SvgElement */) > 0;
+ var dom = documentCreateElement(vNode.type, isSVG);
+ vNode.dom = dom;
+ if (!isNullOrUndef(className) && className !== '') {
+ if (isSVG) {
+ dom.setAttribute('class', className);
+ }
+ else {
+ dom.className = className;
+ }
+ }
+ if (!isNull(parentDom)) {
+ appendChild(parentDom, dom);
+ }
+ if ((childFlags & 1 /* HasInvalidChildren */) === 0) {
+ var childrenIsSVG = isSVG === true && vNode.type !== 'foreignObject';
+ if (childFlags === 2 /* HasVNodeChildren */) {
+ mount(children, dom, context, childrenIsSVG);
+ }
+ else if (childFlags & 12 /* MultipleChildren */) {
+ mountArrayChildren(children, dom, context, childrenIsSVG);
+ }
+ }
+ if (!isNull(props)) {
+ mountProps(vNode, flags, props, dom, isSVG);
+ }
+ if (isFunction(ref)) {
+ mountRef(dom, ref);
+ }
+ return dom;
+ }
+ function mountArrayChildren(children, dom, context, isSVG) {
+ for (var i = 0, len = children.length; i < len; i++) {
+ var child = children[i];
+ if (!isNull(child.dom)) {
+ children[i] = child = directClone(child);
+ }
+ mount(child, dom, context, isSVG);
+ }
+ }
+ function mountComponent(vNode, parentDom, context, isSVG, isClass) {
+ var dom;
+ var type = vNode.type;
+ var props = vNode.props || EMPTY_OBJ;
+ var ref = vNode.ref;
+ if (isClass) {
+ var instance = createClassComponentInstance(vNode, type, props, context);
+ vNode.dom = dom = mount(instance.$LI, null, instance.$CX, isSVG);
+ mountClassComponentCallbacks(vNode, ref, instance);
+ instance.$UPD = false;
+ }
+ else {
+ var input = handleComponentInput(type(props, context), vNode);
+ vNode.children = input;
+ vNode.dom = dom = mount(input, null, context, isSVG);
+ mountFunctionalComponentCallbacks(props, ref, dom);
+ }
+ if (!isNull(parentDom)) {
+ appendChild(parentDom, dom);
+ }
+ return dom;
+ }
+ function createClassMountCallback(instance) {
+ return function () {
+ instance.componentDidMount();
+ };
+ }
+ function mountClassComponentCallbacks(vNode, ref, instance) {
+ if (isFunction(ref)) {
+ ref(instance);
+ }
+ if (isFunction(instance.componentDidMount)) {
+ LIFECYCLE.push(createClassMountCallback(instance));
+ }
+ }
+ function createOnMountCallback(ref, dom, props) {
+ return function () { return ref.onComponentDidMount(dom, props); };
+ }
+ function mountFunctionalComponentCallbacks(props, ref, dom) {
+ if (!isNullOrUndef(ref)) {
+ if (isFunction(ref.onComponentWillMount)) {
+ ref.onComponentWillMount(props);
+ }
+ if (isFunction(ref.onComponentDidMount)) {
+ LIFECYCLE.push(createOnMountCallback(ref, dom, props));
+ }
+ }
+ }
+ function mountRef(dom, value) {
+ LIFECYCLE.push(function () { return value(dom); });
+ }
+
+ function hydrateComponent(vNode, dom, context, isSVG, isClass) {
+ var type = vNode.type;
+ var ref = vNode.ref;
+ var props = vNode.props || EMPTY_OBJ;
+ if (isClass) {
+ var instance = createClassComponentInstance(vNode, type, props, context);
+ var input = instance.$LI;
+ hydrateVNode(input, dom, instance.$CX, isSVG);
+ vNode.dom = input.dom;
+ mountClassComponentCallbacks(vNode, ref, instance);
+ instance.$UPD = false; // Mount finished allow going sync
+ }
+ else {
+ var input$1 = handleComponentInput(type(props, context), vNode);
+ hydrateVNode(input$1, dom, context, isSVG);
+ vNode.children = input$1;
+ vNode.dom = input$1.dom;
+ mountFunctionalComponentCallbacks(props, ref, dom);
+ }
+ }
+ function hydrateElement(vNode, dom, context, isSVG) {
+ var children = vNode.children;
+ var props = vNode.props;
+ var className = vNode.className;
+ var flags = vNode.flags;
+ var ref = vNode.ref;
+ isSVG = isSVG || (flags & 32 /* SvgElement */) > 0;
+ if (dom.nodeType !== 1 || dom.tagName.toLowerCase() !== vNode.type) {
+ var newDom = mountElement(vNode, null, context, isSVG);
+ vNode.dom = newDom;
+ replaceChild(dom.parentNode, newDom, dom);
+ }
+ else {
+ vNode.dom = dom;
+ var childNode = dom.firstChild;
+ var childFlags = vNode.childFlags;
+ if ((childFlags & 1 /* HasInvalidChildren */) === 0) {
+ var nextSibling = null;
+ while (childNode) {
+ nextSibling = childNode.nextSibling;
+ if (childNode.nodeType === 8) {
+ if (childNode.data === '!') {
+ dom.replaceChild(document.createTextNode(''), childNode);
+ }
+ else {
+ dom.removeChild(childNode);
+ }
+ }
+ childNode = nextSibling;
+ }
+ childNode = dom.firstChild;
+ if (childFlags === 2 /* HasVNodeChildren */) {
+ if (isNull(childNode)) {
+ mount(children, dom, context, isSVG);
+ }
+ else {
+ nextSibling = childNode.nextSibling;
+ hydrateVNode(children, childNode, context, isSVG);
+ childNode = nextSibling;
+ }
+ }
+ else if (childFlags & 12 /* MultipleChildren */) {
+ for (var i = 0, len = children.length; i < len; i++) {
+ var child = children[i];
+ if (isNull(childNode)) {
+ mount(child, dom, context, isSVG);
+ }
+ else {
+ nextSibling = childNode.nextSibling;
+ hydrateVNode(child, childNode, context, isSVG);
+ childNode = nextSibling;
+ }
+ }
+ }
+ // clear any other DOM nodes, there should be only a single entry for the root
+ while (childNode) {
+ nextSibling = childNode.nextSibling;
+ dom.removeChild(childNode);
+ childNode = nextSibling;
+ }
+ }
+ else if (!isNull(dom.firstChild) && !isSamePropsInnerHTML(dom, props)) {
+ dom.textContent = ''; // dom has content, but VNode has no children remove everything from DOM
+ if (flags & 448 /* FormElement */) {
+ // If element is form element, we need to clear defaultValue also
+ dom.defaultValue = '';
+ }
+ }
+ if (!isNull(props)) {
+ mountProps(vNode, flags, props, dom, isSVG);
+ }
+ if (isNullOrUndef(className)) {
+ if (dom.className !== '') {
+ dom.removeAttribute('class');
+ }
+ }
+ else if (isSVG) {
+ dom.setAttribute('class', className);
+ }
+ else {
+ dom.className = className;
+ }
+ if (isFunction(ref)) {
+ mountRef(dom, ref);
+ }
+ }
+ }
+ function hydrateText(vNode, dom) {
+ if (dom.nodeType !== 3) {
+ var newDom = mountText(vNode, null);
+ vNode.dom = newDom;
+ replaceChild(dom.parentNode, newDom, dom);
+ }
+ else {
+ var text = vNode.children;
+ if (dom.nodeValue !== text) {
+ dom.nodeValue = text;
+ }
+ vNode.dom = dom;
+ }
+ }
+ function hydrateVNode(vNode, dom, context, isSVG) {
+ var flags = vNode.flags;
+ if (flags & 14 /* Component */) {
+ hydrateComponent(vNode, dom, context, isSVG, (flags & 4 /* ComponentClass */) > 0);
+ }
+ else if (flags & 481 /* Element */) {
+ hydrateElement(vNode, dom, context, isSVG);
+ }
+ else if (flags & 16 /* Text */) {
+ hydrateText(vNode, dom);
+ }
+ else if (flags & 512 /* Void */) {
+ vNode.dom = dom;
+ }
+ else {
+ throwError();
+ }
+ }
+ function hydrate(input, parentDom, callback) {
+ var dom = parentDom.firstChild;
+ if (!isNull(dom)) {
+ if (!isInvalid(input)) {
+ hydrateVNode(input, dom, EMPTY_OBJ, false);
+ }
+ dom = parentDom.firstChild;
+ // clear any other DOM nodes, there should be only a single entry for the root
+ while ((dom = dom.nextSibling)) {
+ parentDom.removeChild(dom);
+ }
+ }
+ if (LIFECYCLE.length > 0) {
+ callAll(LIFECYCLE);
+ }
+ parentDom.$V = input;
+ if (isFunction(callback)) {
+ callback();
+ }
+ }
+
+ function replaceWithNewNode(lastNode, nextNode, parentDom, context, isSVG) {
+ unmount(lastNode);
+ replaceChild(parentDom, mount(nextNode, null, context, isSVG), lastNode.dom);
+ }
+ function patch(lastVNode, nextVNode, parentDom, context, isSVG) {
+ if (lastVNode !== nextVNode) {
+ var nextFlags = nextVNode.flags | 0;
+ if (lastVNode.flags !== nextFlags || nextFlags & 2048 /* ReCreate */) {
+ replaceWithNewNode(lastVNode, nextVNode, parentDom, context, isSVG);
+ }
+ else if (nextFlags & 481 /* Element */) {
+ patchElement(lastVNode, nextVNode, parentDom, context, isSVG);
+ }
+ else if (nextFlags & 14 /* Component */) {
+ patchComponent(lastVNode, nextVNode, parentDom, context, isSVG, (nextFlags & 4 /* ComponentClass */) > 0);
+ }
+ else if (nextFlags & 16 /* Text */) {
+ patchText(lastVNode, nextVNode, parentDom);
+ }
+ else if (nextFlags & 512 /* Void */) {
+ nextVNode.dom = lastVNode.dom;
+ }
+ else {
+ // Portal
+ patchPortal(lastVNode, nextVNode, context);
+ }
+ }
+ }
+ function patchPortal(lastVNode, nextVNode, context) {
+ var lastContainer = lastVNode.type;
+ var nextContainer = nextVNode.type;
+ var nextChildren = nextVNode.children;
+ patchChildren(lastVNode.childFlags, nextVNode.childFlags, lastVNode.children, nextChildren, lastContainer, context, false);
+ nextVNode.dom = lastVNode.dom;
+ if (lastContainer !== nextContainer && !isInvalid(nextChildren)) {
+ var node = nextChildren.dom;
+ lastContainer.removeChild(node);
+ nextContainer.appendChild(node);
+ }
+ }
+ function patchElement(lastVNode, nextVNode, parentDom, context, isSVG) {
+ var nextTag = nextVNode.type;
+ if (lastVNode.type !== nextTag) {
+ replaceWithNewNode(lastVNode, nextVNode, parentDom, context, isSVG);
+ }
+ else {
+ var dom = lastVNode.dom;
+ var nextFlags = nextVNode.flags;
+ var lastProps = lastVNode.props;
+ var nextProps = nextVNode.props;
+ var isFormElement = false;
+ var hasControlledValue = false;
+ var nextPropsOrEmpty;
+ nextVNode.dom = dom;
+ isSVG = isSVG || (nextFlags & 32 /* SvgElement */) > 0;
+ // inlined patchProps -- starts --
+ if (lastProps !== nextProps) {
+ var lastPropsOrEmpty = lastProps || EMPTY_OBJ;
+ nextPropsOrEmpty = nextProps || EMPTY_OBJ;
+ if (nextPropsOrEmpty !== EMPTY_OBJ) {
+ isFormElement = (nextFlags & 448 /* FormElement */) > 0;
+ if (isFormElement) {
+ hasControlledValue = isControlledFormElement(nextPropsOrEmpty);
+ }
+ for (var prop in nextPropsOrEmpty) {
+ var lastValue = lastPropsOrEmpty[prop];
+ var nextValue = nextPropsOrEmpty[prop];
+ if (lastValue !== nextValue) {
+ patchProp(prop, lastValue, nextValue, dom, isSVG, hasControlledValue, lastVNode);
+ }
+ }
+ }
+ if (lastPropsOrEmpty !== EMPTY_OBJ) {
+ for (var prop$1 in lastPropsOrEmpty) {
+ // do not add a hasOwnProperty check here, it affects performance
+ if (!nextPropsOrEmpty.hasOwnProperty(prop$1) && !isNullOrUndef(lastPropsOrEmpty[prop$1])) {
+ patchProp(prop$1, lastPropsOrEmpty[prop$1], null, dom, isSVG, hasControlledValue, lastVNode);
+ }
+ }
+ }
+ }
+ var lastChildren = lastVNode.children;
+ var nextChildren = nextVNode.children;
+ var nextRef = nextVNode.ref;
+ var lastClassName = lastVNode.className;
+ var nextClassName = nextVNode.className;
+ if (lastChildren !== nextChildren) {
+ patchChildren(lastVNode.childFlags, nextVNode.childFlags, lastChildren, nextChildren, dom, context, isSVG && nextTag !== 'foreignObject');
+ }
+ if (isFormElement) {
+ processElement(nextFlags, nextVNode, dom, nextPropsOrEmpty, false, hasControlledValue);
+ }
+ // inlined patchProps -- ends --
+ if (lastClassName !== nextClassName) {
+ if (isNullOrUndef(nextClassName)) {
+ dom.removeAttribute('class');
+ }
+ else if (isSVG) {
+ dom.setAttribute('class', nextClassName);
+ }
+ else {
+ dom.className = nextClassName;
+ }
+ }
+ if (isFunction(nextRef) && lastVNode.ref !== nextRef) {
+ mountRef(dom, nextRef);
+ }
+ }
+ }
+ function patchChildren(lastChildFlags, nextChildFlags, lastChildren, nextChildren, parentDOM, context, isSVG) {
+ switch (lastChildFlags) {
+ case 2 /* HasVNodeChildren */:
+ switch (nextChildFlags) {
+ case 2 /* HasVNodeChildren */:
+ patch(lastChildren, nextChildren, parentDOM, context, isSVG);
+ break;
+ case 1 /* HasInvalidChildren */:
+ remove(lastChildren, parentDOM);
+ break;
+ default:
+ remove(lastChildren, parentDOM);
+ mountArrayChildren(nextChildren, parentDOM, context, isSVG);
+ break;
+ }
+ break;
+ case 1 /* HasInvalidChildren */:
+ switch (nextChildFlags) {
+ case 2 /* HasVNodeChildren */:
+ mount(nextChildren, parentDOM, context, isSVG);
+ break;
+ case 1 /* HasInvalidChildren */:
+ break;
+ default:
+ mountArrayChildren(nextChildren, parentDOM, context, isSVG);
+ break;
+ }
+ break;
+ default:
+ if (nextChildFlags & 12 /* MultipleChildren */) {
+ var lastLength = lastChildren.length;
+ var nextLength = nextChildren.length;
+ // Fast path's for both algorithms
+ if (lastLength === 0) {
+ if (nextLength > 0) {
+ mountArrayChildren(nextChildren, parentDOM, context, isSVG);
+ }
+ }
+ else if (nextLength === 0) {
+ removeAllChildren(parentDOM, lastChildren);
+ }
+ else if (nextChildFlags === 8 /* HasKeyedChildren */ && lastChildFlags === 8 /* HasKeyedChildren */) {
+ patchKeyedChildren(lastChildren, nextChildren, parentDOM, context, isSVG, lastLength, nextLength);
+ }
+ else {
+ patchNonKeyedChildren(lastChildren, nextChildren, parentDOM, context, isSVG, lastLength, nextLength);
+ }
+ }
+ else if (nextChildFlags === 1 /* HasInvalidChildren */) {
+ removeAllChildren(parentDOM, lastChildren);
+ }
+ else {
+ removeAllChildren(parentDOM, lastChildren);
+ mount(nextChildren, parentDOM, context, isSVG);
+ }
+ break;
+ }
+ }
+ function updateClassComponent(instance, nextState, nextVNode, nextProps, parentDom, context, isSVG, force, fromSetState) {
+ var lastState = instance.state;
+ var lastProps = instance.props;
+ nextVNode.children = instance;
+ var renderOutput;
+ if (instance.$UN) {
+ return;
+ }
+ if (lastProps !== nextProps || nextProps === EMPTY_OBJ) {
+ if (!fromSetState && isFunction(instance.componentWillReceiveProps)) {
+ instance.$BR = true;
+ instance.componentWillReceiveProps(nextProps, context);
+ // If instance component was removed during its own update do nothing...
+ if (instance.$UN) {
+ return;
+ }
+ instance.$BR = false;
+ }
+ if (instance.$PSS) {
+ nextState = combineFrom(nextState, instance.$PS);
+ instance.$PSS = false;
+ instance.$PS = null;
+ }
+ }
+ /* Update if scu is not defined, or it returns truthy value or force */
+ var hasSCU = Boolean(instance.shouldComponentUpdate);
+ if (force || !hasSCU || (hasSCU && instance.shouldComponentUpdate(nextProps, nextState, context))) {
+ if (isFunction(instance.componentWillUpdate)) {
+ instance.$BS = true;
+ instance.componentWillUpdate(nextProps, nextState, context);
+ instance.$BS = false;
+ }
+ instance.props = nextProps;
+ instance.state = nextState;
+ instance.context = context;
+ if (isFunction(options.beforeRender)) {
+ options.beforeRender(instance);
+ }
+ renderOutput = instance.render(nextProps, nextState, context);
+ if (isFunction(options.afterRender)) {
+ options.afterRender(instance);
+ }
+ var didUpdate = renderOutput !== NO_OP;
+ var childContext;
+ if (isFunction(instance.getChildContext)) {
+ childContext = instance.getChildContext();
+ }
+ if (isNullOrUndef(childContext)) {
+ childContext = context;
+ }
+ else {
+ childContext = combineFrom(context, childContext);
+ }
+ instance.$CX = childContext;
+ if (didUpdate) {
+ var lastInput = instance.$LI;
+ var nextInput = (instance.$LI = handleComponentInput(renderOutput, nextVNode));
+ patch(lastInput, nextInput, parentDom, childContext, isSVG);
+ if (isFunction(instance.componentDidUpdate)) {
+ instance.componentDidUpdate(lastProps, lastState);
+ }
+ }
+ }
+ else {
+ instance.props = nextProps;
+ instance.state = nextState;
+ instance.context = context;
+ }
+ nextVNode.dom = instance.$LI.dom;
+ }
+ function patchComponent(lastVNode, nextVNode, parentDom, context, isSVG, isClass) {
+ var nextType = nextVNode.type;
+ var lastKey = lastVNode.key;
+ var nextKey = nextVNode.key;
+ if (lastVNode.type !== nextType || lastKey !== nextKey) {
+ replaceWithNewNode(lastVNode, nextVNode, parentDom, context, isSVG);
+ }
+ else {
+ var nextProps = nextVNode.props || EMPTY_OBJ;
+ if (isClass) {
+ var instance = lastVNode.children;
+ instance.$UPD = true;
+ instance.$V = nextVNode;
+ updateClassComponent(instance, instance.state, nextVNode, nextProps, parentDom, context, isSVG, false, false);
+ instance.$UPD = false;
+ }
+ else {
+ var shouldUpdate = true;
+ var lastProps = lastVNode.props;
+ var nextHooks = nextVNode.ref;
+ var nextHooksDefined = !isNullOrUndef(nextHooks);
+ var lastInput = lastVNode.children;
+ nextVNode.dom = lastVNode.dom;
+ nextVNode.children = lastInput;
+ if (nextHooksDefined && isFunction(nextHooks.onComponentShouldUpdate)) {
+ shouldUpdate = nextHooks.onComponentShouldUpdate(lastProps, nextProps);
+ }
+ if (shouldUpdate !== false) {
+ if (nextHooksDefined && isFunction(nextHooks.onComponentWillUpdate)) {
+ nextHooks.onComponentWillUpdate(lastProps, nextProps);
+ }
+ var nextInput = nextType(nextProps, context);
+ if (nextInput !== NO_OP) {
+ nextInput = handleComponentInput(nextInput, nextVNode);
+ patch(lastInput, nextInput, parentDom, context, isSVG);
+ nextVNode.children = nextInput;
+ nextVNode.dom = nextInput.dom;
+ if (nextHooksDefined && isFunction(nextHooks.onComponentDidUpdate)) {
+ nextHooks.onComponentDidUpdate(lastProps, nextProps);
+ }
+ }
+ }
+ else if (lastInput.flags & 14 /* Component */) {
+ lastInput.parentVNode = nextVNode;
+ }
+ }
+ }
+ }
+ function patchText(lastVNode, nextVNode, parentDom) {
+ var nextText = nextVNode.children;
+ var textNode = parentDom.firstChild;
+ var dom;
+ // Guard against external change on DOM node.
+ if (isNull(textNode)) {
+ parentDom.textContent = nextText;
+ dom = parentDom.firstChild;
+ }
+ else {
+ dom = lastVNode.dom;
+ if (nextText !== lastVNode.children) {
+ dom.nodeValue = nextText;
+ }
+ }
+ nextVNode.dom = dom;
+ }
+ function patchNonKeyedChildren(lastChildren, nextChildren, dom, context, isSVG, lastChildrenLength, nextChildrenLength) {
+ var commonLength = lastChildrenLength > nextChildrenLength ? nextChildrenLength : lastChildrenLength;
+ var i = 0;
+ var nextChild;
+ var lastChild;
+ for (; i < commonLength; i++) {
+ nextChild = nextChildren[i];
+ lastChild = lastChildren[i];
+ if (nextChild.dom) {
+ nextChild = nextChildren[i] = directClone(nextChild);
+ }
+ patch(lastChild, nextChild, dom, context, isSVG);
+ lastChildren[i] = nextChild;
+ }
+ if (lastChildrenLength < nextChildrenLength) {
+ for (i = commonLength; i < nextChildrenLength; i++) {
+ nextChild = nextChildren[i];
+ if (nextChild.dom) {
+ nextChild = nextChildren[i] = directClone(nextChild);
+ }
+ mount(nextChild, dom, context, isSVG);
+ }
+ }
+ else if (lastChildrenLength > nextChildrenLength) {
+ for (i = commonLength; i < lastChildrenLength; i++) {
+ remove(lastChildren[i], dom);
+ }
+ }
+ }
+ function patchKeyedChildren(a, b, dom, context, isSVG, aLength, bLength) {
+ var aEnd = aLength - 1;
+ var bEnd = bLength - 1;
+ var i;
+ var j = 0;
+ var aNode = a[j];
+ var bNode = b[j];
+ var nextPos;
+ // Step 1
+ // tslint:disable-next-line
+ outer: {
+ // Sync nodes with the same key at the beginning.
+ while (aNode.key === bNode.key) {
+ if (bNode.dom) {
+ b[j] = bNode = directClone(bNode);
+ }
+ patch(aNode, bNode, dom, context, isSVG);
+ a[j] = bNode;
+ j++;
+ if (j > aEnd || j > bEnd) {
+ break outer;
+ }
+ aNode = a[j];
+ bNode = b[j];
+ }
+ aNode = a[aEnd];
+ bNode = b[bEnd];
+ // Sync nodes with the same key at the end.
+ while (aNode.key === bNode.key) {
+ if (bNode.dom) {
+ b[bEnd] = bNode = directClone(bNode);
+ }
+ patch(aNode, bNode, dom, context, isSVG);
+ a[aEnd] = bNode;
+ aEnd--;
+ bEnd--;
+ if (j > aEnd || j > bEnd) {
+ break outer;
+ }
+ aNode = a[aEnd];
+ bNode = b[bEnd];
+ }
+ }
+ if (j > aEnd) {
+ if (j <= bEnd) {
+ nextPos = bEnd + 1;
+ var nextNode = nextPos < bLength ? b[nextPos].dom : null;
+ while (j <= bEnd) {
+ bNode = b[j];
+ if (bNode.dom) {
+ b[j] = bNode = directClone(bNode);
+ }
+ j++;
+ insertOrAppend(dom, mount(bNode, null, context, isSVG), nextNode);
+ }
+ }
+ }
+ else if (j > bEnd) {
+ while (j <= aEnd) {
+ remove(a[j++], dom);
+ }
+ }
+ else {
+ var aStart = j;
+ var bStart = j;
+ var aLeft = aEnd - j + 1;
+ var bLeft = bEnd - j + 1;
+ var sources = [];
+ for (i = 0; i < bLeft; i++) {
+ sources.push(0);
+ }
+ // Keep track if its possible to remove whole DOM using textContent = '';
+ var canRemoveWholeContent = aLeft === aLength;
+ var moved = false;
+ var pos = 0;
+ var patched = 0;
+ // When sizes are small, just loop them through
+ if (bLength < 4 || (aLeft | bLeft) < 32) {
+ for (i = aStart; i <= aEnd; i++) {
+ aNode = a[i];
+ if (patched < bLeft) {
+ for (j = bStart; j <= bEnd; j++) {
+ bNode = b[j];
+ if (aNode.key === bNode.key) {
+ sources[j - bStart] = i + 1;
+ if (canRemoveWholeContent) {
+ canRemoveWholeContent = false;
+ while (i > aStart) {
+ remove(a[aStart++], dom);
+ }
+ }
+ if (pos > j) {
+ moved = true;
+ }
+ else {
+ pos = j;
+ }
+ if (bNode.dom) {
+ b[j] = bNode = directClone(bNode);
+ }
+ patch(aNode, bNode, dom, context, isSVG);
+ patched++;
+ break;
+ }
+ }
+ if (!canRemoveWholeContent && j > bEnd) {
+ remove(aNode, dom);
+ }
+ }
+ else if (!canRemoveWholeContent) {
+ remove(aNode, dom);
+ }
+ }
+ }
+ else {
+ var keyIndex = {};
+ // Map keys by their index
+ for (i = bStart; i <= bEnd; i++) {
+ keyIndex[b[i].key] = i;
+ }
+ // Try to patch same keys
+ for (i = aStart; i <= aEnd; i++) {
+ aNode = a[i];
+ if (patched < bLeft) {
+ j = keyIndex[aNode.key];
+ if (j !== void 0) {
+ if (canRemoveWholeContent) {
+ canRemoveWholeContent = false;
+ while (i > aStart) {
+ remove(a[aStart++], dom);
+ }
+ }
+ bNode = b[j];
+ sources[j - bStart] = i + 1;
+ if (pos > j) {
+ moved = true;
+ }
+ else {
+ pos = j;
+ }
+ if (bNode.dom) {
+ b[j] = bNode = directClone(bNode);
+ }
+ patch(aNode, bNode, dom, context, isSVG);
+ patched++;
+ }
+ else if (!canRemoveWholeContent) {
+ remove(aNode, dom);
+ }
+ }
+ else if (!canRemoveWholeContent) {
+ remove(aNode, dom);
+ }
+ }
+ }
+ // fast-path: if nothing patched remove all old and add all new
+ if (canRemoveWholeContent) {
+ removeAllChildren(dom, a);
+ mountArrayChildren(b, dom, context, isSVG);
+ }
+ else {
+ if (moved) {
+ var seq = lis_algorithm(sources);
+ j = seq.length - 1;
+ for (i = bLeft - 1; i >= 0; i--) {
+ if (sources[i] === 0) {
+ pos = i + bStart;
+ bNode = b[pos];
+ if (bNode.dom) {
+ b[pos] = bNode = directClone(bNode);
+ }
+ nextPos = pos + 1;
+ insertOrAppend(dom, mount(bNode, null, context, isSVG), nextPos < bLength ? b[nextPos].dom : null);
+ }
+ else if (j < 0 || i !== seq[j]) {
+ pos = i + bStart;
+ bNode = b[pos];
+ nextPos = pos + 1;
+ insertOrAppend(dom, bNode.dom, nextPos < bLength ? b[nextPos].dom : null);
+ }
+ else {
+ j--;
+ }
+ }
+ }
+ else if (patched !== bLeft) {
+ // when patched count doesn't match b length we need to insert those new ones
+ // loop backwards so we can use insertBefore
+ for (i = bLeft - 1; i >= 0; i--) {
+ if (sources[i] === 0) {
+ pos = i + bStart;
+ bNode = b[pos];
+ if (bNode.dom) {
+ b[pos] = bNode = directClone(bNode);
+ }
+ nextPos = pos + 1;
+ insertOrAppend(dom, mount(bNode, null, context, isSVG), nextPos < bLength ? b[nextPos].dom : null);
+ }
+ }
+ }
+ }
+ }
+ }
+ // https://en.wikipedia.org/wiki/Longest_increasing_subsequence
+ function lis_algorithm(arr) {
+ var p = arr.slice();
+ var result = [0];
+ var i;
+ var j;
+ var u;
+ var v;
+ var c;
+ var len = arr.length;
+ for (i = 0; i < len; i++) {
+ var arrI = arr[i];
+ if (arrI !== 0) {
+ j = result[result.length - 1];
+ if (arr[j] < arrI) {
+ p[i] = j;
+ result.push(i);
+ continue;
+ }
+ u = 0;
+ v = result.length - 1;
+ while (u < v) {
+ c = ((u + v) / 2) | 0;
+ if (arr[result[c]] < arrI) {
+ u = c + 1;
+ }
+ else {
+ v = c;
+ }
+ }
+ if (arrI < arr[result[u]]) {
+ if (u > 0) {
+ p[i] = result[u - 1];
+ }
+ result[u] = i;
+ }
+ }
+ }
+ u = result.length;
+ v = result[u - 1];
+ while (u-- > 0) {
+ result[u] = v;
+ v = p[v];
+ }
+ return result;
+ }
+
+ var documentBody = isBrowser ? document.body : null;
+ function render(input, parentDom, callback) {
+ if (input === NO_OP) {
+ return;
+ }
+ var rootInput = parentDom.$V;
+ if (isNullOrUndef(rootInput)) {
+ if (!isInvalid(input)) {
+ if (input.dom) {
+ input = directClone(input);
+ }
+ if (isNull(parentDom.firstChild)) {
+ mount(input, parentDom, EMPTY_OBJ, false);
+ parentDom.$V = input;
+ }
+ else {
+ hydrate(input, parentDom);
+ }
+ rootInput = input;
+ }
+ }
+ else {
+ if (isNullOrUndef(input)) {
+ remove(rootInput, parentDom);
+ parentDom.$V = null;
+ }
+ else {
+ if (input.dom) {
+ input = directClone(input);
+ }
+ patch(rootInput, input, parentDom, EMPTY_OBJ, false);
+ rootInput = parentDom.$V = input;
+ }
+ }
+ if (LIFECYCLE.length > 0) {
+ callAll(LIFECYCLE);
+ }
+ if (isFunction(callback)) {
+ callback();
+ }
+ if (isFunction(options.renderComplete)) {
+ options.renderComplete(rootInput);
+ }
+ if (rootInput && rootInput.flags & 14 /* Component */) {
+ return rootInput.children;
+ }
+ }
+
+ var resolvedPromise = typeof Promise === 'undefined' ? null : Promise.resolve();
+ // raf.bind(window) is needed to work around bug in IE10-IE11 strict mode (TypeError: Invalid calling object)
+ var fallbackMethod = typeof requestAnimationFrame === 'undefined' ? setTimeout : requestAnimationFrame.bind(window);
+ function nextTick(fn) {
+ if (resolvedPromise) {
+ return resolvedPromise.then(fn);
+ }
+ return fallbackMethod(fn);
+ }
+ function queueStateChanges(component, newState, callback, force) {
+ if (isFunction(newState)) {
+ newState = newState(component.state, component.props, component.context);
+ }
+ var pending = component.$PS;
+ if (isNullOrUndef(pending)) {
+ component.$PS = newState;
+ }
+ else {
+ for (var stateKey in newState) {
+ pending[stateKey] = newState[stateKey];
+ }
+ }
+ if (!component.$PSS && !component.$BR) {
+ if (!component.$UPD) {
+ component.$PSS = true;
+ component.$UPD = true;
+ applyState(component, force, callback);
+ component.$UPD = false;
+ }
+ else {
+ // Async
+ var queue = component.$QU;
+ if (isNull(queue)) {
+ queue = component.$QU = [];
+ nextTick(promiseCallback(component, queue));
+ }
+ if (isFunction(callback)) {
+ queue.push(callback);
+ }
+ }
+ }
+ else {
+ component.$PSS = true;
+ if (component.$BR && isFunction(callback)) {
+ LIFECYCLE.push(callback.bind(component));
+ }
+ }
+ }
+ function promiseCallback(component, queue) {
+ return function () {
+ component.$QU = null;
+ component.$UPD = true;
+ applyState(component, false, function () {
+ for (var i = 0, len = queue.length; i < len; i++) {
+ queue[i].call(component);
+ }
+ });
+ component.$UPD = false;
+ };
+ }
+ function applyState(component, force, callback) {
+ if (component.$UN) {
+ return;
+ }
+ if (force || !component.$BR) {
+ component.$PSS = false;
+ var pendingState = component.$PS;
+ var prevState = component.state;
+ var nextState = combineFrom(prevState, pendingState);
+ var props = component.props;
+ var context = component.context;
+ component.$PS = null;
+ var vNode = component.$V;
+ var lastInput = component.$LI;
+ var parentDom = lastInput.dom && lastInput.dom.parentNode;
+ updateClassComponent(component, nextState, vNode, props, parentDom, context, (vNode.flags & 32 /* SvgElement */) > 0, force, true);
+ if (component.$UN) {
+ return;
+ }
+ if ((component.$LI.flags & 1024 /* Portal */) === 0) {
+ var dom = component.$LI.dom;
+ while (!isNull((vNode = vNode.parentVNode))) {
+ if ((vNode.flags & 14 /* Component */) > 0) {
+ vNode.dom = dom;
+ }
+ }
+ }
+ if (LIFECYCLE.length > 0) {
+ callAll(LIFECYCLE);
+ }
+ }
+ else {
+ component.state = component.$PS;
+ component.$PS = null;
+ }
+ if (isFunction(callback)) {
+ callback.call(component);
+ }
+ }
+ var Component = function Component(props, context) {
+ this.state = null;
+ // Internal properties
+ this.$BR = false; // BLOCK RENDER
+ this.$BS = true; // BLOCK STATE
+ this.$PSS = false; // PENDING SET STATE
+ this.$PS = null; // PENDING STATE (PARTIAL or FULL)
+ this.$LI = null; // LAST INPUT
+ this.$V = null; // VNODE
+ this.$UN = false; // UNMOUNTED
+ this.$CX = null; // CHILDCONTEXT
+ this.$UPD = true; // UPDATING
+ this.$QU = null; // QUEUE
+ /** @type {object} */
+ this.props = props || EMPTY_OBJ;
+ /** @type {object} */
+ this.context = context || EMPTY_OBJ; // context should not be mutable
+ };
+ Component.prototype.forceUpdate = function forceUpdate (callback) {
+ if (this.$UN) {
+ return;
+ }
+ // Do not allow double render during force update
+ queueStateChanges(this, {}, callback, true);
+ };
+ Component.prototype.setState = function setState (newState, callback) {
+ if (this.$UN) {
+ return;
+ }
+ if (!this.$BS) {
+ queueStateChanges(this, newState, callback, false);
+ }
+ else {
+ return;
+ }
+ };
+ // tslint:disable-next-line:no-empty
+ Component.prototype.render = function render (nextProps, nextState, nextContext) { };
+
+
+
+ var JSX = /*#__PURE__*/Object.freeze({
+
+ });
+
+ var ENTER = 12;
+ var LEFT_ARROW = 37;
+ var UP_ARROW = 38;
+ var RIGHT_ARROW = 39;
+ var DOWN_ARROW = 40;
+
+ /**
+ * Helper method to create an object for a new node.
+ *
+ * @private
+ * @return {void}
+ */
+ function blankNode() {
+ return {
+ text: 'New Node',
+ itree: {
+ state: {
+ editing: true,
+ focused: true
+ }
+ }
+ };
+ }
+
+ var classCallCheck = function (instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError("Cannot call a class as a function");
+ }
+ };
+
+ var createClass = function () {
+ function defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ("value" in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+
+ return function (Constructor, protoProps, staticProps) {
+ if (protoProps) defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) defineProperties(Constructor, staticProps);
+ return Constructor;
+ };
+ }();
+
+ var _extends = Object.assign || function (target) {
+ for (var i = 1; i < arguments.length; i++) {
+ var source = arguments[i];
+
+ for (var key in source) {
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
+ target[key] = source[key];
+ }
+ }
+ }
+
+ return target;
+ };
+
+ var inherits = function (subClass, superClass) {
+ if (typeof superClass !== "function" && superClass !== null) {
+ throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+ }
+
+ subClass.prototype = Object.create(superClass && superClass.prototype, {
+ constructor: {
+ value: subClass,
+ enumerable: false,
+ writable: true,
+ configurable: true
+ }
+ });
+ if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+ };
+
+ var possibleConstructorReturn = function (self, call) {
+ if (!self) {
+ throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+ }
+
+ return call && (typeof call === "object" || typeof call === "function") ? call : self;
+ };
+
+ var Checkbox = function (_Component) {
+ inherits(Checkbox, _Component);
+
+ function Checkbox() {
+ classCallCheck(this, Checkbox);
+ return possibleConstructorReturn(this, (Checkbox.__proto__ || Object.getPrototypeOf(Checkbox)).apply(this, arguments));
+ }
+
+ createClass(Checkbox, [{
+ key: 'click',
+ value: function click(event) {
+ var _this2 = this;
+
+ // Define our default handler
+ var handler = function handler() {
+ _this2.props.node.toggleCheck();
+ };
+
+ // Emit an event with our forwarded MouseEvent, node, and default handler
+ this.props.dom._tree.emit('node.click', event, this.props.node, handler);
+
+ // Unless default is prevented, auto call our default handler
+ if (!event.treeDefaultPrevented) {
+ handler();
+ }
+ }
+ }, {
+ key: 'render',
+ value: function render$$1() {
+ return createVNode(64, 'input', null, null, 1, {
+ 'checked': this.props.checked,
+ 'indeterminate': this.props.indeterminate,
+ 'onClick': this.click.bind(this),
+ 'type': 'checkbox'
+ });
+ }
+ }]);
+ return Checkbox;
+ }(Component);
+
+ /**
+ * Utility method for parsing and merging custom class names.
+ *
+ * @private
+ * @param {TreeNode} node Node object.
+ * @param {string} type 'li' or 'a' attribute object type.
+ * @return {Array} Processed class names
+ */
+ var classlist = (function (node) {
+ var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'li';
+
+ var nodeAttrs = node.itree[type].attributes;
+ var classNames = [];
+
+ // Append any custom class names
+ var customClasses = nodeAttrs.class || nodeAttrs.className;
+
+ // Support callbacks
+ if (_.isFunction(customClasses)) {
+ customClasses = customClasses(node);
+ }
+
+ // Convert custom classes into an array and concat
+ if (!_.isEmpty(customClasses)) {
+ if (_.isString(customClasses)) {
+ // Support periods for backwards compat with hyperscript-formatted classes
+ classNames = classNames.concat(customClasses.split(/[\s\.]+/));
+ } else if (_.isArray(customClasses)) {
+ classNames = classNames.concat(customClasses);
+ }
+ }
+
+ return classNames;
+ });
+
+ var EditToolbar = function (_Component) {
+ inherits(EditToolbar, _Component);
+
+ function EditToolbar() {
+ classCallCheck(this, EditToolbar);
+ return possibleConstructorReturn(this, (EditToolbar.__proto__ || Object.getPrototypeOf(EditToolbar)).apply(this, arguments));
+ }
+
+ createClass(EditToolbar, [{
+ key: 'shouldComponentUpdate',
+ value: function shouldComponentUpdate() {
+ return false;
+ }
+ }, {
+ key: 'add',
+ value: function add(event) {
+ event.stopPropagation();
+
+ this.props.node.addChild(blankNode());
+ this.props.node.expand();
+ }
+ }, {
+ key: 'edit',
+ value: function edit(event) {
+ event.stopPropagation();
+
+ this.props.node.toggleEditing();
+ }
+ }, {
+ key: 'remove',
+ value: function remove(event) {
+ event.stopPropagation();
+
+ this.props.node.remove();
+ }
+ }, {
+ key: 'render',
+ value: function render$$1() {
+ var buttons = [];
+
+ if (this.props.dom._tree.config.editing.edit) {
+ buttons.push(createVNode(1, 'a', 'btn icon icon-pencil', null, 1, {
+ 'onclick': this.edit.bind(this),
+ 'title': 'Edit this node'
+ }));
+ }
+
+ if (this.props.dom._tree.config.editing.add) {
+ buttons.push(createVNode(1, 'a', 'btn icon icon-plus', null, 1, {
+ 'onclick': this.add.bind(this),
+ 'title': 'Add a child node'
+ }));
+ }
+
+ if (this.props.dom._tree.config.editing.remove) {
+ buttons.push(createVNode(1, 'a', 'btn icon icon-minus', null, 1, {
+ 'onclick': this.remove.bind(this),
+ 'title': 'Remove this node'
+ }));
+ }
+
+ return createVNode(1, 'span', 'btn-group', buttons, 0);
+ }
+ }]);
+ return EditToolbar;
+ }(Component);
+
+ var EmptyList = function (_Component) {
+ inherits(EmptyList, _Component);
+
+ function EmptyList() {
+ classCallCheck(this, EmptyList);
+ return possibleConstructorReturn(this, (EmptyList.__proto__ || Object.getPrototypeOf(EmptyList)).apply(this, arguments));
+ }
+
+ createClass(EmptyList, [{
+ key: 'render',
+ value: function render$$1() {
+ return createVNode(1, 'ol', null, createVNode(1, 'li', 'leaf', createVNode(1, 'span', 'title icon icon-file-empty empty', this.props.text, 0), 2), 2);
+ }
+ }]);
+ return EmptyList;
+ }(Component);
+
+ /**
+ * Compares all keys on the given state. Returns true if any difference exists.
+ *
+ * @private
+ * @category DOM
+ * @param {object} previousState Previous state.
+ * @param {object} currentState Current state.
+ * @return {boolean} Difference was found.
+ */
+ function stateComparator(previousState, currentState) {
+ // Always treat dirty flag as a state difference
+ var isDirty = currentState.dirty || false;
+
+ if (!isDirty) {
+ _.each(Object.keys(currentState), function (key) {
+ if (key !== 'dirty' && currentState[key] !== previousState[key]) {
+ isDirty = true;
+ return false;
+ }
+ });
+ }
+
+ return isDirty;
+ }
+
+ var EditForm = function (_Component) {
+ inherits(EditForm, _Component);
+
+ function EditForm(props) {
+ classCallCheck(this, EditForm);
+
+ var _this = possibleConstructorReturn(this, (EditForm.__proto__ || Object.getPrototypeOf(EditForm)).call(this, props));
+
+ _this.state = _this.getStateFromNodes(props.node);
+ return _this;
+ }
+
+ createClass(EditForm, [{
+ key: 'getStateFromNodes',
+ value: function getStateFromNodes(node) {
+ return {
+ text: node.text
+ };
+ }
+ }, {
+ key: 'componentWillReceiveProps',
+ value: function componentWillReceiveProps(data) {
+ this.setState(this.getStateFromNodes(data.node));
+ }
+ }, {
+ key: 'shouldComponentUpdate',
+ value: function shouldComponentUpdate(nextProps, nextState) {
+ return stateComparator(this.state, nextState);
+ }
+ }, {
+ key: 'click',
+ value: function click(event) {
+ var _this2 = this;
+
+ // Define our default handler
+ var handler = function handler() {
+ _this2.props.node.toggleCheck();
+ };
+
+ // Emit an event with our forwarded MouseEvent, node, and default handler
+ this.props.dom._tree.emit('node.click', event, this.props.node, handler);
+
+ // Unless default is prevented, auto call our default handler
+ if (!event.treeDefaultPrevented) {
+ handler();
+ }
+ }
+ }, {
+ key: 'keypress',
+ value: function keypress(event) {
+ if (event.which === ENTER) {
+ return this.save();
+ }
+ }
+ }, {
+ key: 'input',
+ value: function input(event) {
+ this.setState({
+ text: event.target.value
+ });
+ }
+ }, {
+ key: 'cancel',
+ value: function cancel(event) {
+ if (event) {
+ event.stopPropagation();
+ }
+
+ this.props.node.toggleEditing();
+ }
+ }, {
+ key: 'save',
+ value: function save(event) {
+ if (event) {
+ event.stopPropagation();
+ }
+
+ // Cache current text
+ var originalText = this.props.node.text;
+ var newText = this.ref.value;
+
+ // Update the text
+ this.props.node.set('text', newText);
+
+ // Disable editing and update
+ this.props.node.state('editing', false);
+ this.props.node.markDirty();
+ this.props.dom._tree.applyChanges();
+
+ if (originalText !== newText) {
+ this.props.dom._tree.emit('node.edited', this.props.node, originalText, newText);
+ }
+ }
+ }, {
+ key: 'render',
+ value: function render$$1() {
+ var _this3 = this;
+
+ return createVNode(1, 'form', null, [createVNode(64, 'input', null, null, 1, {
+ 'onClick': function onClick(event) {
+ return event.stopPropagation;
+ },
+ 'onInput': this.input.bind(this),
+ 'onKeyPress': this.keypress.bind(this),
+ 'value': this.state.text
+ }, null, function (elem) {
+ return _this3.ref = elem;
+ }), createVNode(1, 'span', 'btn-group', [createVNode(1, 'button', 'btn icon icon-check', null, 1, {
+ 'onClick': this.save.bind(this),
+ 'title': 'Save',
+ 'type': 'button'
+ }), createVNode(1, 'button', 'btn icon icon-cross', null, 1, {
+ 'onClick': this.cancel.bind(this),
+ 'title': 'Cancel',
+ 'type': 'button'
+ })], 4)], 4, {
+ 'onsubmit': function onsubmit(event) {
+ return event.preventDefault;
+ }
+ });
+ }
+ }]);
+ return EditForm;
+ }(Component);
+
+ var NodeAnchor = function (_Component) {
+ inherits(NodeAnchor, _Component);
+
+ function NodeAnchor() {
+ classCallCheck(this, NodeAnchor);
+ return possibleConstructorReturn(this, (NodeAnchor.__proto__ || Object.getPrototypeOf(NodeAnchor)).apply(this, arguments));
+ }
+
+ createClass(NodeAnchor, [{
+ key: 'blur',
+ value: function blur() {
+ this.props.node.blur();
+ }
+ }, {
+ key: 'click',
+ value: function click(event) {
+ var _this2 = this;
+
+ var _props = this.props,
+ node = _props.node,
+ dom = _props.dom;
+
+ // Define our default handler
+
+ var handler = function handler() {
+ event.preventDefault();
+
+ if (_this2.props.editing) {
+ return;
+ }
+
+ if (event.metaKey || event.ctrlKey || event.shiftKey) {
+ dom._tree.disableDeselection();
+ }
+
+ if (event.shiftKey) {
+ dom.clearSelection();
+
+ var selected = dom._tree.lastSelectedNode();
+ if (selected) {
+ dom._tree.selectBetween.apply(dom._tree, dom._tree.boundingNodes(selected, node));
+ }
+ }
+
+ if (node.selected()) {
+ if (!dom._tree.config.selection.disableDirectDeselection) {
+ node.deselect();
+ }
+ } else {
+ node.select();
+ }
+
+ dom._tree.enableDeselection();
+ };
+
+ // Emit an event with our forwarded MouseEvent, node, and default handler
+ dom._tree.emit('node.click', event, node, handler);
+
+ // Unless default is prevented, auto call our default handler
+ if (!event.treeDefaultPrevented) {
+ handler();
+ }
+ }
+ }, {
+ key: 'contextMenu',
+ value: function contextMenu(event) {
+ var _props2 = this.props,
+ node = _props2.node,
+ dom = _props2.dom;
+
+
+ dom._tree.emit('node.contextmenu', event, node);
+ }
+ }, {
+ key: 'dblclick',
+ value: function dblclick(event) {
+ var _props3 = this.props,
+ node = _props3.node,
+ dom = _props3.dom;
+
+ // Define our default handler
+
+ var handler = function handler() {
+ // Clear text selection which occurs on double click
+ dom.clearSelection();
+
+ node.toggleCollapse();
+ };
+
+ // Emit an event with our forwarded MouseEvent, node, and default handler
+ dom._tree.emit('node.dblclick', event, node, handler);
+
+ // Unless default is prevented, auto call our default handler
+ if (!event.treeDefaultPrevented) {
+ handler();
+ }
+ }
+ }, {
+ key: 'focus',
+ value: function focus(event) {
+ this.props.node.focus(event);
+ }
+ }, {
+ key: 'mousedown',
+ value: function mousedown() {
+ if (this.props.dom.isDragDropEnabled) {
+ this.props.dom.isMouseHeld = true;
+ }
+ }
+ }, {
+ key: 'render',
+ value: function render$$1() {
+ var node = this.props.node;
+ var attributes = _.clone(node.itree.a.attributes) || {};
+ attributes.tabindex = 1;
+ attributes.unselectable = 'on';
+
+ // Build and set classnames
+ var classNames = classlist(node, 'a').concat(['title', 'icon']);
+
+ // Royale - Allow icon + checkbox
+ //if (!this.props.dom.config.showCheckboxes) {
+ var folder = this.props.expanded ? 'icon-folder-open' : 'icon-folder';
+ classNames.push(node.itree.icon || (this.props.hasOrWillHaveChildren ? folder : 'icon-file-empty'));
+ //}
+
+ attributes.class = attributes.className = classNames.join(' ');
+
+ var content = node.text;
+ if (node.editing()) {
+ content = createComponentVNode(2, EditForm, {
+ 'dom': this.props.dom,
+ 'node': this.props.node
+ });
+ }
+
+ return normalizeProps(createVNode(1, 'a', null, content, 0, _extends({
+ 'data-uid': node.id,
+ 'onBlur': this.blur.bind(this),
+ 'onClick': this.click.bind(this),
+ 'onContextMenu': this.contextMenu.bind(this),
+ 'onDblClick': this.dblclick.bind(this),
+ 'onFocus': this.focus.bind(this),
+ 'onMouseDown': this.mousedown.bind(this)
+ }, attributes)));
+ }
+ }]);
+ return NodeAnchor;
+ }(Component);
+
+ var ToggleAnchor = function (_Component) {
+ inherits(ToggleAnchor, _Component);
+
+ function ToggleAnchor() {
+ classCallCheck(this, ToggleAnchor);
+ return possibleConstructorReturn(this, (ToggleAnchor.__proto__ || Object.getPrototypeOf(ToggleAnchor)).apply(this, arguments));
+ }
+
+ createClass(ToggleAnchor, [{
+ key: 'className',
+ value: function className() {
+ return 'toggle icon ' + (this.props.collapsed ? 'icon-expand' : 'icon-collapse');
+ }
+ }, {
+ key: 'render',
+ value: function render$$1() {
+ return createVNode(1, 'a', this.className(), null, 1, {
+ 'onClick': this.props.node.toggleCollapse.bind(this.props.node)
+ });
+ }
+ }]);
+ return ToggleAnchor;
+ }(Component);
+
+ var ListItem = function (_Component) {
+ inherits(ListItem, _Component);
+
+ function ListItem(props) {
+ classCallCheck(this, ListItem);
+
+ var _this = possibleConstructorReturn(this, (ListItem.__proto__ || Object.getPrototypeOf(ListItem)).call(this, props));
+
+ _this.state = _this.stateFromNode(props.node);
+ return _this;
+ }
+
+ createClass(ListItem, [{
+ key: 'stateFromNode',
+ value: function stateFromNode(node) {
+ return {
+ dirty: node.itree.dirty
+ };
+ }
+ }, {
+ key: 'componentWillReceiveProps',
+ value: function componentWillReceiveProps(data) {
+ this.setState(this.stateFromNode(data.node));
+ }
+ }, {
+ key: 'shouldComponentUpdate',
+ value: function shouldComponentUpdate(nextProps, nextState) {
+ return nextState.dirty;
+ }
+ }, {
+ key: 'getAttributes',
+ value: function getAttributes() {
+ var node = this.props.node;
+ var attributes = _.clone(node.itree.li.attributes) || {};
+ attributes.class = attributes.className = this.getClassNames();
+
+ // Force internal-use attributes
+ attributes['data-uid'] = node.id;
+
+ // Allow drag and drop?
+ if (this.props.dom.config.dragAndDrop.enabled) {
+ attributes.draggable = node.state('draggable');
+ attributes.onDragEnd = this.onDragEnd.bind(this);
+ attributes.onDragEnter = this.onDragEnter.bind(this);
+ attributes.onDragLeave = this.onDragLeave.bind(this);
+ attributes.onDragStart = this.onDragStart.bind(this);
+
+ // Are we a valid drop target?
+ if (node.state('drop-target')) {
+ attributes.onDragOver = this.onDragOver.bind(this);
+ attributes.onDrop = this.onDrop.bind(this);
+ } else {
+ // Setting to null forces removal of prior listeners
+ attributes.onDragOver = null;
+ attributes.onDrop = null;
+ }
+ }
+
+ return attributes;
+ }
+ }, {
+ key: 'getClassNames',
+ value: function getClassNames() {
+ var node = this.props.node;
+ var state = node.itree.state;
+
+ // Set state classnames
+ var classNames = classlist(node);
+
+ // https://jsperf.com/object-keys-vs-each
+ _.each(Object.keys(state), function (key) {
+ if (state[key]) {
+ classNames.push(key);
+ }
+ });
+
+ // Inverse and additional classes
+ if (!node.hidden() && node.removed()) {
+ classNames.push('hidden');
+ }
+
+ if (node.expanded()) {
+ classNames.push('expanded');
+ }
+
+ classNames.push(node.hasOrWillHaveChildren() ? 'folder' : 'leaf');
+
+ return classNames.join(' ');
+ }
+ }, {
+ key: 'getTargetDirection',
+ value: function getTargetDirection(event, elem) {
+ var clientY = event.clientY;
+ var targetRect = elem.getBoundingClientRect();
+
+ var yThresholdForAbove = targetRect.top + targetRect.height / 3;
+ var yThresholdForBelow = targetRect.bottom - targetRect.height / 3;
+
+ var dir = 0;
+
+ if (clientY <= yThresholdForAbove) {
+ dir = -1;
+ } else if (clientY >= yThresholdForBelow) {
+ dir = 1;
+ }
+
+ return dir;
+ }
+ }, {
+ key: 'onDragStart',
+ value: function onDragStart(event) {
+ event.stopPropagation();
+
+ event.dataTransfer.effectAllowed = 'move';
+ event.dataTransfer.dropEffect = 'move';
+
+ var node = this.props.node;
+
+ // Due to "protected" mode we can't access any DataTransfer data
+ // during the dragover event, yet we still need to validate this node with the target
+ this.props.dom._activeDragNode = node;
+
+ event.dataTransfer.setData('treeId', node.tree().id);
+ event.dataTransfer.setData('nodeId', node.id);
+
+ // Disable self and children as drop targets
+ node.state('drop-target', false);
+
+ if (node.hasChildren()) {
+ node.children.stateDeep('drop-target', false);
+ }
+
+ // If we should validate all nodes as potential drop targets on drag start
+ if (this.props.dom.config.dragAndDrop.validateOn === 'dragstart') {
+ var validator = this.props.dom.config.dragAndDrop.validate;
+ var validateCallable = _.isFunction(validator);
+
+ // Validate with a custom recursor because a return of "false"
+ // should mean "do not descend" rather than "stop iterating"
+ var recursor = function recursor(obj, iteratee) {
+ if (InspireTree.isTreeNodes(obj)) {
+ _.each(obj, function (n) {
+ recursor(n, iteratee);
+ });
+ } else if (InspireTree.isTreeNode(obj)) {
+ if (iteratee(obj) !== false && obj.hasChildren()) {
+ recursor(obj.children, iteratee);
+ }
+ }
+ };
+
+ this.props.dom._tree.batch();
+
+ recursor(this.props.dom._tree.model, function (n) {
+ var valid = n.id !== node.id;
+
+ // Ensure target node isn't a descendant
+ if (valid) {
+ valid = !n.hasAncestor(node);
+ }
+
+ // If still valid and user has additional validation...
+ if (valid && validateCallable) {
+ valid = validator(node, n);
+ }
+
+ // Set state
+ n.state('drop-target', valid);
+
+ return valid;
+ });
+
+ this.props.dom._tree.end();
+ }
+
+ this.props.dom._tree.emit('node.dragstart', event);
+ }
+ }, {
+ key: 'onDragEnd',
+ value: function onDragEnd(event) {
+ event.preventDefault();
+ event.stopPropagation();
+
+ this.unhighlightTarget();
+
+ this.props.dom._tree.emit('node.dragend', event);
+ }
+ }, {
+ key: 'onDragEnter',
+ value: function onDragEnter(event) {
+ event.preventDefault();
+ event.stopPropagation();
+
+ // Nodes already within parents don't trigger enter/leave events on their ancestors
+ this.props.node.recurseUp(this.unhighlightTarget);
+
+ // Set drag target state
+ this.props.node.state('drag-targeting', true);
+
+ this.props.dom._tree.emit('node.dragenter', event);
+ }
+ }, {
+ key: 'onDragLeave',
+ value: function onDragLeave(event) {
+ event.preventDefault();
+ event.stopPropagation();
+
+ this.unhighlightTarget();
+
+ this.props.dom._tree.emit('node.dragleave', event);
+ }
+ }, {
+ key: 'onDragOver',
+ value: function onDragOver(event) {
+ event.preventDefault();
+ event.stopPropagation();
+
+ var dragNode = this.props.dom._activeDragNode;
+ var node = this.props.node;
+
+ // Event.target doesn't always match the element we need to calculate
+ var dir = this.getTargetDirection(event, node.itree.ref.querySelector('a'));
+
+ if (this.props.dom.config.dragAndDrop.validateOn === 'dragover') {
+ // Validate drop target
+ var validator = this.props.dom.config.dragAndDrop.validate;
+ var validateCallable = _.isFunction(validator);
+
+ var valid = dragNode.id !== node.id;
+
+ if (valid) {
+ valid = !node.hasAncestor(dragNode);
+ }
+
+ if (valid && validateCallable) {
+ valid = validator(dragNode, node, dir);
+ }
+
+ // Set state
+ node.state('drop-target', valid);
+ this.props.dom._tree.applyChanges();
+
+ if (!valid) {
+ return;
+ }
+ }
+
+ // Set drag target states
+ this.props.dom._tree.batch();
+ node.state('drag-targeting', true);
+ node.state('drag-targeting-above', dir === -1);
+ node.state('drag-targeting-below', dir === 1);
+ node.state('drag-targeting-insert', dir === 0);
+ this.props.dom._tree.end();
+
+ this.props.dom._tree.emit('node.dragover', event, dir);
+ }
+ }, {
+ key: 'onDrop',
+ value: function onDrop(event) {
+ event.preventDefault();
+ event.stopPropagation();
+
+ // Always unhighlight target
+ this.unhighlightTarget();
+
+ // Get the data from our transfer
+ var treeId = event.dataTransfer.getData('treeId');
+ var nodeId = event.dataTransfer.getData('nodeId');
+
+ // Find the drop target
+ var targetNode = this.props.node;
+
+ // Clear cache
+ this.props.dom._activeDragNode = null;
+
+ // Determine the insert direction (calc before removing source node, which modifies the DOM)
+ var dir = this.getTargetDirection(event, event.target);
+
+ var sourceTree = void 0;
+ if (treeId === this.props.dom._tree.id) {
+ sourceTree = this.props.dom._tree;
+ } else if (treeId) {
+ sourceTree = document.querySelector('[data-uid="' + treeId + '"]').inspireTree;
+ }
+
+ // Only source/handle node if it's a node that was dropped
+ var newNode = void 0,
+ newIndex = void 0;
+ if (sourceTree) {
+ var node = sourceTree.node(nodeId);
+ node.state('drop-target', true);
+
+ var exported = node.remove(true);
+
+ // Get the index of the target node
+ var targetIndex = targetNode.context().indexOf(targetNode);
+
+ if (dir === 0) {
+ // Add as a child
+ newNode = targetNode.addChild(exported);
+
+ // Cache the new index
+ newIndex = targetNode.children.indexOf(newNode);
+
+ // Auto-expand
+ targetNode.expand();
+ } else {
+ // Determine the new index
+ newIndex = dir === 1 ? ++targetIndex : targetIndex;
+
+ // Insert and cache the node
+ newNode = targetNode.context().insertAt(newIndex, exported);
+ }
+ }
+
+ this.props.dom._tree.emit('node.drop', event, newNode, targetNode, newIndex);
+ }
+ }, {
+ key: 'unhighlightTarget',
+ value: function unhighlightTarget(node) {
+ (node || this.props.node).states(['drag-targeting', 'drag-targeting-above', 'drag-targeting-below', 'drag-targeting-insert'], false);
+ }
+ }, {
+ key: 'renderCheckbox',
+ value: function renderCheckbox() {
+ var node = this.props.node;
+
+ if (this.props.dom.config.showCheckboxes) {
+ return createComponentVNode(2, Checkbox, {
+ 'checked': node.checked(),
+ 'dom': this.props.dom,
+ 'indeterminate': node.indeterminate(),
+ 'node': node
+ });
+ }
+ }
+ }, {
+ key: 'renderChildren',
+ value: function renderChildren() {
+ var _props = this.props,
+ node = _props.node,
+ dom = _props.dom;
+
+
+ if (node.hasChildren()) {
+ var nodes = node.children;
+ var loading = dom.loading;
+ var pagination = nodes.pagination();
+
+ return createComponentVNode(2, List, {
+ 'context': node,
+ 'dom': dom,
+ 'limit': pagination.limit,
+ 'loading': loading,
+ 'nodes': nodes,
+ 'total': pagination.total
+ });
+ } else if (this.props.dom.isDynamic && node.children) {
+ if (!node.hasLoadedChildren()) {
+ return createComponentVNode(2, EmptyList, {
+ 'text': 'Loading...'
+ });
+ } else {
+ return createComponentVNode(2, EmptyList, {
+ 'text': 'No Results'
+ });
+ }
+ }
+ }
+ }, {
+ key: 'renderEditToolbar',
+ value: function renderEditToolbar() {
+ // @todo fix this boolean
+ if (this.props.dom._tree.config.editing.edit && !this.props.node.editing()) {
+ return createComponentVNode(2, EditToolbar, {
+ 'dom': this.props.dom,
+ 'node': this.props.node
+ });
+ }
+ }
+ }, {
+ key: 'renderToggle',
+ value: function renderToggle() {
+ var node = this.props.node;
+ var hasVisibleChildren = !this.props.dom.isDynamic ? node.hasVisibleChildren() : Boolean(node.children);
+
+ if (hasVisibleChildren) {
+ return createComponentVNode(2, ToggleAnchor, {
+ 'collapsed': node.collapsed(),
+ 'node': node
+ });
+ }
+ }
+ }, {
+ key: 'render',
+ value: function render$$1() {
+ var _this2 = this;
+
+ var node = this.props.node;
+
+ var li = normalizeProps(createVNode(1, 'li', null, [this.renderEditToolbar(), createVNode(1, 'div', 'title-wrap', [this.renderToggle(), this.renderCheckbox(), createComponentVNode(2, NodeAnchor, {
+ 'dom': this.props.dom,
+ 'editing': node.editing(),
+ 'expanded': node.expanded(),
+ 'hasOrWillHaveChildren': node.hasOrWillHaveChildren(),
+ 'node': node,
+ 'text': node.text
+ })], 0), createVNode(1, 'div', 'wholerow'), this.renderChildren()], 0, _extends({}, this.getAttributes()), null, function (elem) {
+ return _this2.node = _this2.props.node.itree.ref = elem;
+ }));
+
+ // Clear dirty bool only after everything has been generated (and states set)
+ this.props.node.state('rendered', true);
+ this.props.node.itree.dirty = false;
+
+ return li;
+ }
+ }]);
+ return ListItem;
+ }(Component);
+
+ var List = function (_Component) {
+ inherits(List, _Component);
+
+ function List() {
+ classCallCheck(this, List);
+ return possibleConstructorReturn(this, (List.__proto__ || Object.getPrototypeOf(List)).apply(this, arguments));
+ }
+
+ createClass(List, [{
+ key: 'shouldComponentUpdate',
+ value: function shouldComponentUpdate(nextProps) {
+ return _.find(nextProps.nodes, 'itree.dirty') || stateComparator(this.props, nextProps);
+ }
+ }, {
+ key: 'isDeferred',
+ value: function isDeferred() {
+ return this.props.dom.config.deferredRendering || this.props.dom._tree.config.deferredLoading;
+ }
+ }, {
+ key: 'loadMore',
+ value: function loadMore(event) {
+ event.preventDefault();
+ if (this.props.context) {
+ this.props.context.loadMore(event);
+ } else {
+ this.props.dom._tree.loadMore(event);
+ }
+ }
+ }, {
+ key: 'renderLoadMoreNode',
+ value: function renderLoadMoreNode() {
+ return createVNode(1, 'li', 'leaf detached', createVNode(1, 'a', 'title icon icon-more load-more', createTextVNode('Load More'), 2, {
+ 'onClick': this.loadMore.bind(this)
+ }), 2);
+ }
+ }, {
+ key: 'renderLoadingTextNode',
+ value: function renderLoadingTextNode() {
+ return createVNode(1, 'li', 'leaf', createVNode(1, 'span', 'title icon icon-more', createTextVNode('Loading...'), 2), 2);
+ }
+ }, {
+ key: 'render',
+ value: function render$$1() {
+ var _this2 = this;
+
+ var renderNodes = this.props.nodes;
+ var pagination = renderNodes.pagination();
+
+ // If rendering deferred, chunk the nodes client-side
+ if (this.props.dom.config.deferredRendering) {
+ // Filter non-hidden/removed nodes and limit by this context's pagination
+ var count = 0;
+ renderNodes = this.props.nodes.filter(function (n) {
+ var matches = !(n.hidden() || n.removed());
+
+ if (matches) {
+ count++;
+ }
+
+ return count <= pagination.limit && matches;
+ });
+ }
+
+ // Render nodes as list items
+ var items = _.map(renderNodes, function (node) {
+ return createComponentVNode(2, ListItem, {
+ 'dom': _this2.props.dom,
+ 'node': node
+ }, node.id);
+ });
+
+ if (this.isDeferred() && pagination.limit < pagination.total) {
+ if (!this.props.loading) {
+ items.push(this.renderLoadMoreNode());
+ } else {
+ items.push(this.renderLoadingTextNode());
+ }
+ }
+
+ return createVNode(1, 'ol', null, [items, this.props.children], 0);
+ }
+ }]);
+ return List;
+ }(Component);
+
+ var Tree = function (_Component) {
+ inherits(Tree, _Component);
+
+ function Tree() {
+ classCallCheck(this, Tree);
+ return possibleConstructorReturn(this, (Tree.__proto__ || Object.getPrototypeOf(Tree)).apply(this, arguments));
+ }
+
+ createClass(Tree, [{
+ key: 'add',
+ value: function add() {
+ this.props.dom._tree.focused().blur();
+
+ this.props.dom._tree.addNode(blankNode());
+ }
+ }, {
+ key: 'renderAddLink',
+ value: function renderAddLink() {
+ if (this.props.dom._tree.config.editing.add) {
+ return createVNode(1, 'li', null, createVNode(1, 'a', 'btn icon icon-plus', null, 1, {
+ 'onClick': this.add.bind(this),
+ 'title': 'Add a new root node'
+ }), 2);
+ }
+ }
+ }, {
+ key: 'render',
+ value: function render$$1() {
+ var _props = this.props,
+ dom = _props.dom,
+ nodes = _props.nodes;
+
+ var loading = dom.loading;
+ var pagination = nodes.pagination();
+
+ return createComponentVNode(2, List, {
+ 'dom': dom,
+ 'limit': pagination.limit,
+ 'loading': loading,
+ 'nodes': nodes,
+ 'total': pagination.total,
+ children: this.renderAddLink()
+ });
+ }
+ }]);
+ return Tree;
+ }(Component);
+
+ /**
+ * Default InspireTree rendering logic.
+ *
+ * @category DOM
+ * @return {InspireDOM} Default renderer.
+ */
+
+ var InspireDOM = function () {
+ function InspireDOM(tree, opts) {
+ var _this = this;
+
+ classCallCheck(this, InspireDOM);
+
+ if (!(tree instanceof InspireTree)) {
+ throw new TypeError('Tree argument is not an InspireTree instance.');
+ }
+
+ // Init properties
+ this._tree = tree;
+ this.batching = 0;
+ this.dropTargets = [];
+ this.$scrollLayer;
+
+ if (!opts.target) {
+ throw new TypeError('Invalid `target` property - must be a selector, HTMLElement, or jQuery element.');
+ }
+
+ // Let InspireTree know we're in control of a node's `rendered` state
+ tree.usesNativeDOM = true;
+
+ var dndDefaults = {
+ enabled: false,
+ validateOn: 'dragstart',
+ validate: null
+ };
+
+ // Assign defaults
+ this.config = _.defaultsDeep({}, opts, {
+ autoLoadMore: true,
+ deferredRendering: false,
+ dragAndDrop: dndDefaults,
+ nodeHeight: 25,
+ showCheckboxes: false,
+ tabindex: -1,
+ target: false
+ });
+
+ if (opts.dragAndDrop === true) {
+ this.config.dragAndDrop = dndDefaults;
+ this.config.dragAndDrop.enabled = true;
+ }
+
+ // If user didn't specify showCheckboxes,
+ // but is using checkbox selection mode,
+ // enable it automatically.
+ // Royale - commented
+ //if (tree.config.selection.mode === 'checkbox' && !_.isBoolean(_.get(opts, 'showCheckboxes'))) {
+ // this.config.showCheckboxes = true;
+ //}
+
+ // Cache because we use in loops
+ this.isDynamic = _.isFunction(this._tree.config.data);
+
+ // Connect to our target DOM element
+ this.attach(this.config.target);
+
+ var initialRender = true;
+
+ // Apply changes
+ tree.on('changes.applied', function () {
+ _this.renderNodes();
+
+ if (initialRender) {
+ _this.scrollSelectedIntoView();
+
+ initialRender = false;
+ }
+ });
+
+ // Immediately render, just in case any already exists
+ this.renderNodes();
+ }
+
+ /**
+ * Attaches to the DOM element for rendering.
+ *
+ * @category DOM
+ * @private
+ * @param {HTMLElement} target Element, selector, or jQuery-like object.
+ * @return {void}
+ */
+
+
+ createClass(InspireDOM, [{
+ key: 'attach',
+ value: function attach(target) {
+ this.$target = this.getElement(target);
+ this.$scrollLayer = this.getScrollableAncestor(this.$target);
+
+ if (!this.$target) {
+ throw new Error('No valid element to attach to.');
+ }
+
+ this.$target.setAttribute('data-uid', this._tree.id);
+
+ // Set classnames
+ var classNames = this.$target.className.split(' ');
+ classNames.push('inspire-tree');
+
+ if (this._tree.config.editable) {
+ classNames.push('editable');
+
+ _.each(_.pickBy(this._tree.config.editing, _.identity), function (v, key) {
+ classNames.push('editable-' + key);
+ });
+ }
+
+ this.$target.className = classNames.join(' ');
+ this.$target.setAttribute('tabindex', this.config.tabindex || 0);
+
+ // Handle keyboard interaction
+ this.$target.addEventListener('keydown', this.keyboardListener.bind(this));
+
+ // Drag and drop listeners
+ if (this.config.dragAndDrop.enabled) {
+ this.$target.addEventListener('dragenter', this.onDragEnter.bind(this), false);
+ this.$target.addEventListener('dragleave', this.onDragLeave.bind(this), false);
+ this.$target.addEventListener('dragover', this.onDragOver.bind(this), false);
+ this.$target.addEventListener('drop', this.onDrop.bind(this), false);
+
+ this.$target.classList.add('drag-and-drop');
+ }
+
+ // Sync browser focus to focus state
+ this._tree.on('node.focused', function (node) {
+ var elem = node.itree.ref.querySelector('.title');
+ if (elem !== document.activeElement) {
+ elem.focus();
+ }
+ });
+
+ if (this.config.deferredRendering || this._tree.config.deferredLoading) {
+ // Force valid pagination limit based on viewport
+ var limit = this._tree.config.pagination.limit;
+ this._tree.config.pagination.limit = limit > 0 ? limit : _.ceil(this.$scrollLayer.clientHeight / this.config.nodeHeight);
+
+ // Listen for scrolls for automatic loading
+ if (this.config.autoLoadMore) {
+ this.$target.addEventListener('scroll', _.throttle(this.scrollListener.bind(this), 20));
+ }
+ }
+
+ this.$target.inspireTree = this._tree;
+ }
+
+ /**
+ * Clear page text selection, primarily after a click event which
+ * natively selects a range of text.
+ *
+ * @category DOM
+ * @private
+ * @return {void}
+ */
+
+ }, {
+ key: 'clearSelection',
+ value: function clearSelection() {
+ if (document.selection && document.selection.empty) {
+ document.selection.empty();
+ } else if (window.getSelection) {
+ window.getSelection().removeAllRanges();
+ }
+ }
+
+ /**
+ * Get an HTMLElement through various means:
+ * An element, jquery object, or a selector.
+ *
+ * @category DOM
+ * @private
+ * @param {mixed} target Element, jQuery selector, selector.
+ * @return {HTMLElement} Matching element.
+ */
+
+ }, {
+ key: 'getElement',
+ value: function getElement(target) {
+ var $element = void 0;
+
+ if (target instanceof HTMLElement) {
+ $element = target;
+ } else if (_.isObject(target) && _.isObject(target[0])) {
+ $element = target[0];
+ } else if (_.isString(target)) {
+ var match = document.querySelector(target);
+ if (match) {
+ $element = match;
+ }
+ }
+
+ return $element;
+ }
+
+ /**
+ * Helper method to find a scrollable ancestor element.
+ *
+ * @category DOM
+ * @private
+ * @param {HTMLElement} $element Starting element.
+ * @return {HTMLElement} Scrollable element.
+ */
+
+ }, {
+ key: 'getScrollableAncestor',
+ value: function getScrollableAncestor($element) {
+ if ($element instanceof Element) {
+ var style = getComputedStyle($element);
+ if (style.overflow !== 'auto' && $element.parentNode) {
+ $element = this.getScrollableAncestor($element.parentNode);
+ }
+ }
+
+ return $element;
+ }
+
+ /**
+ * Get a tree instance based on an ID.
+ *
+ * @category DOM
+ * @param {string} id Tree ID.
+ * @return {InspireTree} Tree instance.
+ */
+
+ }, {
+ key: 'keyboardListener',
+
+
+ /**
+ * Listen to keyboard event for navigation.
+ *
+ * @category DOM
+ * @private
+ * @param {Event} event Keyboard event.
+ * @return {void}
+ */
+ value: function keyboardListener(event) {
+ event.stopPropagation();
+
+ // Ignore keys we won't care for.
+ // For example, this avoids trampling cmd+reload
+ if ([DOWN_ARROW, ENTER, LEFT_ARROW, RIGHT_ARROW, UP_ARROW].indexOf(event.which) < 0) {
+ return;
+ }
+
+ // Navigation
+ var focusedNodes = this._tree.focused();
+ if (focusedNodes.length) {
+ event.preventDefault();
+
+ switch (event.which) {
+ case DOWN_ARROW:
+ this.moveFocusDownFrom(focusedNodes[0]);
+ break;
+ case ENTER:
+ focusedNodes[0].toggleSelect();
+ break;
+ case LEFT_ARROW:
+ focusedNodes[0].collapse();
+ break;
+ case RIGHT_ARROW:
+ focusedNodes[0].expand();
+ break;
+ case UP_ARROW:
+ this.moveFocusUpFrom(focusedNodes[0]);
+ break;
+ default:
+ }
+ }
+ }
+
+ /**
+ * Move select down the visible tree from a starting node.
+ *
+ * @category DOM
+ * @private
+ * @param {object} startingNode Node object.
+ * @return {void}
+ */
+
+ }, {
+ key: 'moveFocusDownFrom',
+ value: function moveFocusDownFrom(startingNode) {
+ var next = startingNode.nextVisibleNode();
+ if (next) {
+ next.focus();
+ }
+ }
+
+ /**
+ * Move select up the visible tree from a starting node.
+ *
+ * @category DOM
+ * @private
+ * @param {object} startingNode Node object.
+ * @return {void}
+ */
+
+ }, {
+ key: 'moveFocusUpFrom',
+ value: function moveFocusUpFrom(startingNode) {
+ var prev = startingNode.previousVisibleNode();
+ if (prev) {
+ prev.focus();
+ }
+ }
+
+ /**
+ * Helper method for obtaining the data-uid from a DOM element.
+ *
+ * @category DOM
+ * @private
+ * @param {HTMLElement} element HTML Element.
+ * @return {object} Node object
+ */
+
+ }, {
+ key: 'nodeFromTitleDOMElement',
+ value: function nodeFromTitleDOMElement(element) {
+ var uid = element.parentNode.parentNode.getAttribute('data-uid');
+ return this._tree.node(uid);
+ }
+
+ /**
+ * Drag enter listener.
+ *
+ * @category DOM
+ * @private
+ * @param {DragEvent} event Drag enter.
+ * @return {void}
+ */
+
+ }, {
+ key: 'onDragEnter',
+ value: function onDragEnter(event) {
+ event.preventDefault();
+
+ event.target.classList.add('drag-targeting', 'drag-targeting-insert');
+ }
+
+ /**
+ * Drag leave listener.
+ *
+ * @category DOM
+ * @private
+ * @param {DragEvent} event Drag leave.
+ * @return {void}
+ */
+
+ }, {
+ key: 'onDragLeave',
+ value: function onDragLeave(event) {
+ event.preventDefault();
+
+ this.unhighlightTarget(event.target);
+ }
+
+ /**
+ * Drag over listener.
+ *
+ * @category DOM
+ * @private
+ * @param {DragEvent} event Drag over.
+ * @return {void}
+ */
+
+ }, {
+ key: 'onDragOver',
+ value: function onDragOver(event) {
+ event.preventDefault();
+ }
+
+ /**
+ * Drop listener.
+ *
+ * @category DOM
+ * @private
+ * @param {DragEvent} event Dropped.
+ * @return {void}
+ */
+
+ }, {
+ key: 'onDrop',
+ value: function onDrop(event) {
+ event.preventDefault();
+
+ this.unhighlightTarget(event.target);
+
+ var treeId = event.dataTransfer.getData('treeId');
+ var nodeId = event.dataTransfer.getData('nodeId');
+
+ // Find the tree
+ var tree = InspireDOM.getTreeById(treeId);
+ var node = tree.node(nodeId);
+
+ node.state('drop-target', true);
+
+ // Remove the node from its previous context
+ var exported = node.remove(true);
+
+ // Add the node to this tree/level
+ var newNode = this._tree.addNode(exported);
+ var newIndex = this._tree.indexOf(newNode);
+
+ this._tree.emit('node.drop', event, newNode, null, newIndex);
+ }
+
+ /**
+ * Triggers rendering for the given node array.
+ *
+ * @category DOM
+ * @private
+ * @param {array} nodes Array of node objects.
+ * @return {void}
+ */
+
+ }, {
+ key: 'renderNodes',
+ value: function renderNodes(nodes) {
+ render(createComponentVNode(2, Tree, {
+ 'dom': this,
+ 'nodes': nodes || this._tree.nodes()
+ }), this.$target);
+ }
+ }, {
+ key: 'scrollListener',
+
+
+ /**
+ * Listens for scroll events, to automatically trigger
+ * Load More links when they're scrolled into view.
+ *
+ * @category DOM
+ * @private
+ * @param {Event} event Scroll event.
+ * @return {void}
+ */
+ value: function scrollListener(event) {
+ var _this2 = this;
+
+ if (!this.rendering && !this.loading) {
+ // Get the bounding rect of the scroll layer
+ var rect = this.$scrollLayer.getBoundingClientRect();
+
+ // Find all load-more links
+ var links = document.querySelectorAll('.load-more');
+ _.each(links, function (link) {
+ // Look for load-more links which overlap our "viewport"
+ var r = link.getBoundingClientRect();
+ var overlap = !(rect.right < r.left || rect.left > r.right || rect.bottom < r.top || rect.top > r.bottom);
+
+ if (overlap) {
+ // Auto-trigger Load More links
+ var context = void 0;
+
+ var $parent = link.parentNode.parentNode.parentNode;
+ if ($parent.tagName === 'LI') {
+ context = _this2._tree.node($parent.getAttribute('data-uid'));
+ }
+
+ _this2._tree.loadMore(context, event);
+ }
+ });
+ }
+ }
+
+ /**
+ * Scroll the first selected node into view.
+ *
+ * @category DOM
+ * @private
+ * @return {void}
+ */
+
+ }, {
+ key: 'scrollSelectedIntoView',
+ value: function scrollSelectedIntoView() {
+ var $selected = this.$target.querySelector('.selected');
+
+ if ($selected && this.$scrollLayer) {
+ this.$scrollLayer.scrollTop = $selected.offsetTop;
+ }
+ }
+
+ /**
+ * Remove highlight class.
+ *
+ * @category DOM
+ * @private
+ * @param {HTMLElement} element Target element.
+ * @return {void}
+ */
+
+ }, {
+ key: 'unhighlightTarget',
+ value: function unhighlightTarget(element) {
+ if (element) {
+ element.classList.remove('drag-targeting', 'drag-targeting-insert');
+ }
+ }
+ }], [{
+ key: 'getTreeById',
+ value: function getTreeById(id) {
+ var element = document.querySelector('[data-uid="' + id + '"]');
+ if (element) {
+ return element.inspireTree;
+ }
+ }
+ }]);
+ return InspireDOM;
+ }();
+
+ return InspireDOM;
+
+})));
diff --git a/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dom.js b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dom.js
new file mode 100644
index 0000000..7b3a60e
--- /dev/null
+++ b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dom.js
@@ -0,0 +1,3764 @@
+/**
+ * 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
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ /* Inspire Tree DOM
+ * @version 4.0.6
+ * https://github.com/helion3/inspire-tree-dom
+ * @copyright Copyright 2015 Helion3, and other contributors
+ * @license Licensed under MIT
+ * see https://github.com/helion3/inspire-tree-dom/blob/master/LICENSE
+ */
+(function (global, factory) {
+ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('lodash'), require('inspire-tree')) :
+ typeof define === 'function' && define.amd ? define(['lodash', 'inspire-tree'], factory) :
+ (global.InspireTreeDOM = factory(global._,global.InspireTree));
+}(this, (function (_,InspireTree) { 'use strict';
+
+ InspireTree = InspireTree && InspireTree.hasOwnProperty('default') ? InspireTree['default'] : InspireTree;
+
+ var NO_OP = '$NO_OP';
+ var ERROR_MSG = 'a runtime error occured! Use Inferno in development environment to find the error.';
+ var isBrowser = !!(typeof window !== 'undefined' && window.document);
+ var isArray = Array.isArray;
+ function isStringOrNumber(o) {
+ var type = typeof o;
+ return type === 'string' || type === 'number';
+ }
+ function isNullOrUndef(o) {
+ return isUndefined(o) || isNull(o);
+ }
+ function isInvalid(o) {
+ return isNull(o) || o === false || isTrue(o) || isUndefined(o);
+ }
+ function isFunction(o) {
+ return typeof o === 'function';
+ }
+ function isString(o) {
+ return typeof o === 'string';
+ }
+ function isNumber(o) {
+ return typeof o === 'number';
+ }
+ function isNull(o) {
+ return o === null;
+ }
+ function isTrue(o) {
+ return o === true;
+ }
+ function isUndefined(o) {
+ return o === void 0;
+ }
+ function throwError(message) {
+ if (!message) {
+ message = ERROR_MSG;
+ }
+ throw new Error(("Inferno Error: " + message));
+ }
+ function combineFrom(first, second) {
+ var out = {};
+ if (first) {
+ for (var key in first) {
+ out[key] = first[key];
+ }
+ }
+ if (second) {
+ for (var key$1 in second) {
+ out[key$1] = second[key$1];
+ }
+ }
+ return out;
+ }
+
+ var keyPrefix = '$';
+ function getVNode(childFlags, children, className, flags, key, props, ref, type) {
+ return {
+ childFlags: childFlags,
+ children: children,
+ className: className,
+ dom: null,
+ flags: flags,
+ key: key === void 0 ? null : key,
+ parentVNode: null,
+ props: props === void 0 ? null : props,
+ ref: ref === void 0 ? null : ref,
+ type: type
+ };
+ }
+ function createVNode(flags, type, className, children, childFlags, props, key, ref) {
+ var childFlag = childFlags === void 0 ? 1 /* HasInvalidChildren */ : childFlags;
+ var vNode = getVNode(childFlag, children, className, flags, key, props, ref, type);
+ if (childFlag === 0 /* UnknownChildren */) {
+ normalizeChildren(vNode, vNode.children);
+ }
+ return vNode;
+ }
+ function createComponentVNode(flags, type, props, key, ref) {
+ if ((flags & 2 /* ComponentUnknown */) > 0) {
+ flags = type.prototype && isFunction(type.prototype.render) ? 4 /* ComponentClass */ : 8 /* ComponentFunction */;
+ }
+ // set default props
+ var defaultProps = type.defaultProps;
+ if (!isNullOrUndef(defaultProps)) {
+ if (!props) {
+ props = {}; // Props can be referenced and modified at application level so always create new object
+ }
+ for (var prop in defaultProps) {
+ if (isUndefined(props[prop])) {
+ props[prop] = defaultProps[prop];
+ }
+ }
+ }
+ if ((flags & 8 /* ComponentFunction */) > 0) {
+ var defaultHooks = type.defaultHooks;
+ if (!isNullOrUndef(defaultHooks)) {
+ if (!ref) {
+ // As ref cannot be referenced from application level, we can use the same refs object
+ ref = defaultHooks;
+ }
+ else {
+ for (var prop$1 in defaultHooks) {
+ if (isUndefined(ref[prop$1])) {
+ ref[prop$1] = defaultHooks[prop$1];
+ }
+ }
+ }
+ }
+ }
+ var vNode = getVNode(1 /* HasInvalidChildren */, null, null, flags, key, props, ref, type);
+ var optsVNode = options.createVNode;
+ if (isFunction(optsVNode)) {
+ optsVNode(vNode);
+ }
+ return vNode;
+ }
+ function createTextVNode(text, key) {
+ return getVNode(1 /* HasInvalidChildren */, isNullOrUndef(text) ? '' : text, null, 16 /* Text */, key, null, null, null);
+ }
+ function normalizeProps(vNode) {
+ var props = vNode.props;
+ if (props) {
+ var flags = vNode.flags;
+ if (flags & 481 /* Element */) {
+ if (props.children !== void 0 && isNullOrUndef(vNode.children)) {
+ normalizeChildren(vNode, props.children);
+ }
+ if (props.className !== void 0) {
+ vNode.className = props.className || null;
+ props.className = undefined;
+ }
+ }
+ if (props.key !== void 0) {
+ vNode.key = props.key;
+ props.key = undefined;
+ }
+ if (props.ref !== void 0) {
+ if (flags & 8 /* ComponentFunction */) {
+ vNode.ref = combineFrom(vNode.ref, props.ref);
+ }
+ else {
+ vNode.ref = props.ref;
+ }
+ props.ref = undefined;
+ }
+ }
+ return vNode;
+ }
+ function directClone(vNodeToClone) {
+ var newVNode;
+ var flags = vNodeToClone.flags;
+ if (flags & 14 /* Component */) {
+ var props;
+ var propsToClone = vNodeToClone.props;
+ if (!isNull(propsToClone)) {
+ props = {};
+ for (var key in propsToClone) {
+ props[key] = propsToClone[key];
+ }
+ }
+ newVNode = createComponentVNode(flags, vNodeToClone.type, props, vNodeToClone.key, vNodeToClone.ref);
+ }
+ else if (flags & 481 /* Element */) {
+ newVNode = createVNode(flags, vNodeToClone.type, vNodeToClone.className, vNodeToClone.children, vNodeToClone.childFlags, vNodeToClone.props, vNodeToClone.key, vNodeToClone.ref);
+ }
+ else if (flags & 16 /* Text */) {
+ newVNode = createTextVNode(vNodeToClone.children, vNodeToClone.key);
+ }
+ else if (flags & 1024 /* Portal */) {
+ newVNode = vNodeToClone;
+ }
+ return newVNode;
+ }
+ function createVoidVNode() {
+ return createTextVNode('', null);
+ }
+ function _normalizeVNodes(nodes, result, index, currentKey) {
+ for (var len = nodes.length; index < len; index++) {
+ var n = nodes[index];
+ if (!isInvalid(n)) {
+ var newKey = currentKey + keyPrefix + index;
+ if (isArray(n)) {
+ _normalizeVNodes(n, result, 0, newKey);
+ }
+ else {
+ if (isStringOrNumber(n)) {
+ n = createTextVNode(n, newKey);
+ }
+ else {
+ var oldKey = n.key;
+ var isPrefixedKey = isString(oldKey) && oldKey[0] === keyPrefix;
+ if (!isNull(n.dom) || isPrefixedKey) {
+ n = directClone(n);
+ }
+ if (isNull(oldKey) || isPrefixedKey) {
+ n.key = newKey;
+ }
+ else {
+ n.key = currentKey + oldKey;
+ }
+ }
+ result.push(n);
+ }
+ }
+ }
+ }
+ function normalizeChildren(vNode, children) {
+ var newChildren;
+ var newChildFlags = 1 /* HasInvalidChildren */;
+ // Don't change children to match strict equal (===) true in patching
+ if (isInvalid(children)) {
+ newChildren = children;
+ }
+ else if (isString(children)) {
+ newChildFlags = 2 /* HasVNodeChildren */;
+ newChildren = createTextVNode(children);
+ }
+ else if (isNumber(children)) {
+ newChildFlags = 2 /* HasVNodeChildren */;
+ newChildren = createTextVNode(children + '');
+ }
+ else if (isArray(children)) {
+ var len = children.length;
+ if (len === 0) {
+ newChildren = null;
+ newChildFlags = 1 /* HasInvalidChildren */;
+ }
+ else {
+ // we assign $ which basically means we've flagged this array for future note
+ // if it comes back again, we need to clone it, as people are using it
+ // in an immutable way
+ // tslint:disable-next-line
+ if (Object.isFrozen(children) || children['$'] === true) {
+ children = children.slice();
+ }
+ newChildFlags = 8 /* HasKeyedChildren */;
+ for (var i = 0; i < len; i++) {
+ var n = children[i];
+ if (isInvalid(n) || isArray(n)) {
+ newChildren = newChildren || children.slice(0, i);
+ _normalizeVNodes(children, newChildren, i, '');
+ break;
+ }
+ else if (isStringOrNumber(n)) {
+ newChildren = newChildren || children.slice(0, i);
+ newChildren.push(createTextVNode(n, keyPrefix + i));
+ }
+ else {
+ var key = n.key;
+ var isNullDom = isNull(n.dom);
+ var isNullKey = isNull(key);
+ var isPrefixed = !isNullKey && key[0] === keyPrefix;
+ if (!isNullDom || isNullKey || isPrefixed) {
+ newChildren = newChildren || children.slice(0, i);
+ if (!isNullDom || isPrefixed) {
+ n = directClone(n);
+ }
+ if (isNullKey || isPrefixed) {
+ n.key = keyPrefix + i;
+ }
+ newChildren.push(n);
+ }
+ else if (newChildren) {
+ newChildren.push(n);
+ }
+ }
+ }
+ newChildren = newChildren || children;
+ newChildren.$ = true;
+ }
+ }
+ else {
+ newChildren = children;
+ if (!isNull(children.dom)) {
+ newChildren = directClone(children);
+ }
+ newChildFlags = 2 /* HasVNodeChildren */;
+ }
+ vNode.children = newChildren;
+ vNode.childFlags = newChildFlags;
+ return vNode;
+ }
+ var options = {
+ afterRender: null,
+ beforeRender: null,
+ createVNode: null,
+ renderComplete: null
+ };
+
+ var xlinkNS = 'http://www.w3.org/1999/xlink';
+ var xmlNS = 'http://www.w3.org/XML/1998/namespace';
+ var svgNS = 'http://www.w3.org/2000/svg';
+ var namespaces = {
+ 'xlink:actuate': xlinkNS,
+ 'xlink:arcrole': xlinkNS,
+ 'xlink:href': xlinkNS,
+ 'xlink:role': xlinkNS,
+ 'xlink:show': xlinkNS,
+ 'xlink:title': xlinkNS,
+ 'xlink:type': xlinkNS,
+ 'xml:base': xmlNS,
+ 'xml:lang': xmlNS,
+ 'xml:space': xmlNS
+ };
+
+ // We need EMPTY_OBJ defined in one place.
+ // Its used for comparison so we cant inline it into shared
+ var EMPTY_OBJ = {};
+ var LIFECYCLE = [];
+ function appendChild(parentDom, dom) {
+ parentDom.appendChild(dom);
+ }
+ function insertOrAppend(parentDom, newNode, nextNode) {
+ if (isNullOrUndef(nextNode)) {
+ appendChild(parentDom, newNode);
+ }
+ else {
+ parentDom.insertBefore(newNode, nextNode);
+ }
+ }
+ function documentCreateElement(tag, isSVG) {
+ if (isSVG === true) {
+ return document.createElementNS(svgNS, tag);
+ }
+ return document.createElement(tag);
+ }
+ function replaceChild(parentDom, newDom, lastDom) {
+ parentDom.replaceChild(newDom, lastDom);
+ }
+ function removeChild(parentDom, dom) {
+ parentDom.removeChild(dom);
+ }
+ function callAll(arrayFn) {
+ var listener;
+ while ((listener = arrayFn.shift()) !== undefined) {
+ listener();
+ }
+ }
+
+ var attachedEventCounts = {};
+ var attachedEvents = {};
+ function handleEvent(name, nextEvent, dom) {
+ var eventsLeft = attachedEventCounts[name];
+ var eventsObject = dom.$EV;
+ if (nextEvent) {
+ if (!eventsLeft) {
+ attachedEvents[name] = attachEventToDocument(name);
+ attachedEventCounts[name] = 0;
+ }
+ if (!eventsObject) {
+ eventsObject = dom.$EV = {};
+ }
+ if (!eventsObject[name]) {
+ attachedEventCounts[name]++;
+ }
+ eventsObject[name] = nextEvent;
+ }
+ else if (eventsObject && eventsObject[name]) {
+ attachedEventCounts[name]--;
+ if (eventsLeft === 1) {
+ document.removeEventListener(normalizeEventName(name), attachedEvents[name]);
+ attachedEvents[name] = null;
+ }
+ eventsObject[name] = nextEvent;
+ }
+ }
+ function dispatchEvents(event, target, isClick, name, eventData) {
+ var dom = target;
+ while (!isNull(dom)) {
+ // Html Nodes can be nested fe: span inside button in that scenario browser does not handle disabled attribute on parent,
+ // because the event listener is on document.body
+ // Don't process clicks on disabled elements
+ if (isClick && dom.disabled) {
+ return;
+ }
+ var eventsObject = dom.$EV;
+ if (eventsObject) {
+ var currentEvent = eventsObject[name];
+ if (currentEvent) {
+ // linkEvent object
+ eventData.dom = dom;
+ if (currentEvent.event) {
+ currentEvent.event(currentEvent.data, event);
+ }
+ else {
+ currentEvent(event);
+ }
+ if (event.cancelBubble) {
+ return;
+ }
+ }
+ }
+ dom = dom.parentNode;
+ }
+ }
+ function normalizeEventName(name) {
+ return name.substr(2).toLowerCase();
+ }
+ function stopPropagation() {
+ this.cancelBubble = true;
+ if (!this.immediatePropagationStopped) {
+ this.stopImmediatePropagation();
+ }
+ }
+ function attachEventToDocument(name) {
+ var docEvent = function (event) {
+ var type = event.type;
+ var isClick = type === 'click' || type === 'dblclick';
+ if (isClick && event.button !== 0) {
+ // Firefox incorrectly triggers click event for mid/right mouse buttons.
+ // This bug has been active for 12 years.
+ // https://bugzilla.mozilla.org/show_bug.cgi?id=184051
+ event.stopPropagation();
+ return false;
+ }
+ event.stopPropagation = stopPropagation;
+ // Event data needs to be object to save reference to currentTarget getter
+ var eventData = {
+ dom: document
+ };
+ Object.defineProperty(event, 'currentTarget', {
+ configurable: true,
+ get: function get() {
+ return eventData.dom;
+ }
+ });
+ dispatchEvents(event, event.target, isClick, name, eventData);
+ return;
+ };
+ document.addEventListener(normalizeEventName(name), docEvent);
+ return docEvent;
+ }
+
+ function isSameInnerHTML(dom, innerHTML) {
+ var tempdom = document.createElement('i');
+ tempdom.innerHTML = innerHTML;
+ return tempdom.innerHTML === dom.innerHTML;
+ }
+ function isSamePropsInnerHTML(dom, props) {
+ return Boolean(props && props.dangerouslySetInnerHTML && props.dangerouslySetInnerHTML.__html && isSameInnerHTML(dom, props.dangerouslySetInnerHTML.__html));
+ }
+
+ function triggerEventListener(props, methodName, e) {
+ if (props[methodName]) {
+ var listener = props[methodName];
+ if (listener.event) {
+ listener.event(listener.data, e);
+ }
+ else {
+ listener(e);
+ }
+ }
+ else {
+ var nativeListenerName = methodName.toLowerCase();
+ if (props[nativeListenerName]) {
+ props[nativeListenerName](e);
+ }
+ }
+ }
+ function createWrappedFunction(methodName, applyValue) {
+ var fnMethod = function (e) {
+ e.stopPropagation();
+ var vNode = this.$V;
+ // If vNode is gone by the time event fires, no-op
+ if (!vNode) {
+ return;
+ }
+ var props = vNode.props || EMPTY_OBJ;
+ var dom = vNode.dom;
+ if (isString(methodName)) {
+ triggerEventListener(props, methodName, e);
+ }
+ else {
+ for (var i = 0; i < methodName.length; i++) {
+ triggerEventListener(props, methodName[i], e);
+ }
+ }
+ if (isFunction(applyValue)) {
+ var newVNode = this.$V;
+ var newProps = newVNode.props || EMPTY_OBJ;
+ applyValue(newProps, dom, false, newVNode);
+ }
+ };
+ Object.defineProperty(fnMethod, 'wrapped', {
+ configurable: false,
+ enumerable: false,
+ value: true,
+ writable: false
+ });
+ return fnMethod;
+ }
+
+ function isCheckedType(type) {
+ return type === 'checkbox' || type === 'radio';
+ }
+ var onTextInputChange = createWrappedFunction('onInput', applyValueInput);
+ var wrappedOnChange = createWrappedFunction(['onClick', 'onChange'], applyValueInput);
+ /* tslint:disable-next-line:no-empty */
+ function emptywrapper(event) {
+ event.stopPropagation();
+ }
+ emptywrapper.wrapped = true;
+ function inputEvents(dom, nextPropsOrEmpty) {
+ if (isCheckedType(nextPropsOrEmpty.type)) {
+ dom.onchange = wrappedOnChange;
+ dom.onclick = emptywrapper;
+ }
+ else {
+ dom.oninput = onTextInputChange;
+ }
+ }
+ function applyValueInput(nextPropsOrEmpty, dom) {
+ var type = nextPropsOrEmpty.type;
+ var value = nextPropsOrEmpty.value;
+ var checked = nextPropsOrEmpty.checked;
+ var multiple = nextPropsOrEmpty.multiple;
+ var defaultValue = nextPropsOrEmpty.defaultValue;
+ var hasValue = !isNullOrUndef(value);
+ if (type && type !== dom.type) {
+ dom.setAttribute('type', type);
+ }
+ if (!isNullOrUndef(multiple) && multiple !== dom.multiple) {
+ dom.multiple = multiple;
+ }
+ if (!isNullOrUndef(defaultValue) && !hasValue) {
+ dom.defaultValue = defaultValue + '';
+ }
+ if (isCheckedType(type)) {
+ if (hasValue) {
+ dom.value = value;
+ }
+ if (!isNullOrUndef(checked)) {
+ dom.checked = checked;
+ }
+ }
+ else {
+ if (hasValue && dom.value !== value) {
+ dom.defaultValue = value;
+ dom.value = value;
+ }
+ else if (!isNullOrUndef(checked)) {
+ dom.checked = checked;
+ }
+ }
+ }
+
+ function updateChildOptionGroup(vNode, value) {
+ var type = vNode.type;
+ if (type === 'optgroup') {
+ var children = vNode.children;
+ var childFlags = vNode.childFlags;
+ if (childFlags & 12 /* MultipleChildren */) {
+ for (var i = 0, len = children.length; i < len; i++) {
+ updateChildOption(children[i], value);
+ }
+ }
+ else if (childFlags === 2 /* HasVNodeChildren */) {
+ updateChildOption(children, value);
+ }
+ }
+ else {
+ updateChildOption(vNode, value);
+ }
+ }
+ function updateChildOption(vNode, value) {
+ var props = vNode.props || EMPTY_OBJ;
+ var dom = vNode.dom;
+ // we do this as multiple may have changed
+ dom.value = props.value;
+ if ((isArray(value) && value.indexOf(props.value) !== -1) || props.value === value) {
+ dom.selected = true;
+ }
+ else if (!isNullOrUndef(value) || !isNullOrUndef(props.selected)) {
+ dom.selected = props.selected || false;
+ }
+ }
+ var onSelectChange = createWrappedFunction('onChange', applyValueSelect);
+ function selectEvents(dom) {
+ dom.onchange = onSelectChange;
+ }
+ function applyValueSelect(nextPropsOrEmpty, dom, mounting, vNode) {
+ var multiplePropInBoolean = Boolean(nextPropsOrEmpty.multiple);
+ if (!isNullOrUndef(nextPropsOrEmpty.multiple) && multiplePropInBoolean !== dom.multiple) {
+ dom.multiple = multiplePropInBoolean;
+ }
+ var childFlags = vNode.childFlags;
+ if ((childFlags & 1 /* HasInvalidChildren */) === 0) {
+ var children = vNode.children;
+ var value = nextPropsOrEmpty.value;
+ if (mounting && isNullOrUndef(value)) {
+ value = nextPropsOrEmpty.defaultValue;
+ }
+ if (childFlags & 12 /* MultipleChildren */) {
+ for (var i = 0, len = children.length; i < len; i++) {
+ updateChildOptionGroup(children[i], value);
+ }
+ }
+ else if (childFlags === 2 /* HasVNodeChildren */) {
+ updateChildOptionGroup(children, value);
+ }
+ }
+ }
+
+ var onTextareaInputChange = createWrappedFunction('onInput', applyValueTextArea);
+ var wrappedOnChange$1 = createWrappedFunction('onChange');
+ function textAreaEvents(dom, nextPropsOrEmpty) {
+ dom.oninput = onTextareaInputChange;
+ if (nextPropsOrEmpty.onChange) {
+ dom.onchange = wrappedOnChange$1;
+ }
+ }
+ function applyValueTextArea(nextPropsOrEmpty, dom, mounting) {
+ var value = nextPropsOrEmpty.value;
+ var domValue = dom.value;
+ if (isNullOrUndef(value)) {
+ if (mounting) {
+ var defaultValue = nextPropsOrEmpty.defaultValue;
+ if (!isNullOrUndef(defaultValue) && defaultValue !== domValue) {
+ dom.defaultValue = defaultValue;
+ dom.value = defaultValue;
+ }
+ }
+ }
+ else if (domValue !== value) {
+ /* There is value so keep it controlled */
+ dom.defaultValue = value;
+ dom.value = value;
+ }
+ }
+
+ /**
+ * There is currently no support for switching same input between controlled and nonControlled
+ * If that ever becomes a real issue, then re design controlled elements
+ * Currently user must choose either controlled or non-controlled and stick with that
+ */
+ function processElement(flags, vNode, dom, nextPropsOrEmpty, mounting, isControlled) {
+ if (flags & 64 /* InputElement */) {
+ applyValueInput(nextPropsOrEmpty, dom);
+ }
+ else if (flags & 256 /* SelectElement */) {
+ applyValueSelect(nextPropsOrEmpty, dom, mounting, vNode);
+ }
+ else if (flags & 128 /* TextareaElement */) {
+ applyValueTextArea(nextPropsOrEmpty, dom, mounting);
+ }
+ if (isControlled) {
+ dom.$V = vNode;
+ }
+ }
+ function addFormElementEventHandlers(flags, dom, nextPropsOrEmpty) {
+ if (flags & 64 /* InputElement */) {
+ inputEvents(dom, nextPropsOrEmpty);
+ }
+ else if (flags & 256 /* SelectElement */) {
+ selectEvents(dom);
+ }
+ else if (flags & 128 /* TextareaElement */) {
+ textAreaEvents(dom, nextPropsOrEmpty);
+ }
+ }
+ function isControlledFormElement(nextPropsOrEmpty) {
+ return nextPropsOrEmpty.type && isCheckedType(nextPropsOrEmpty.type) ? !isNullOrUndef(nextPropsOrEmpty.checked) : !isNullOrUndef(nextPropsOrEmpty.value);
+ }
+
+ function remove(vNode, parentDom) {
+ unmount(vNode);
+ if (parentDom && vNode.dom) {
+ removeChild(parentDom, vNode.dom);
+ // Let carbage collector free memory
+ vNode.dom = null;
+ }
+ }
+ function unmount(vNode) {
+ var flags = vNode.flags;
+ if (flags & 481 /* Element */) {
+ var ref = vNode.ref;
+ var props = vNode.props;
+ if (isFunction(ref)) {
+ ref(null);
+ }
+ var children = vNode.children;
+ var childFlags = vNode.childFlags;
+ if (childFlags & 12 /* MultipleChildren */) {
+ unmountAllChildren(children);
+ }
+ else if (childFlags === 2 /* HasVNodeChildren */) {
+ unmount(children);
+ }
+ if (!isNull(props)) {
+ for (var name in props) {
+ switch (name) {
+ case 'onClick':
+ case 'onDblClick':
+ case 'onFocusIn':
+ case 'onFocusOut':
+ case 'onKeyDown':
+ case 'onKeyPress':
+ case 'onKeyUp':
+ case 'onMouseDown':
+ case 'onMouseMove':
+ case 'onMouseUp':
+ case 'onSubmit':
+ case 'onTouchEnd':
+ case 'onTouchMove':
+ case 'onTouchStart':
+ handleEvent(name, null, vNode.dom);
+ break;
+ default:
+ break;
+ }
+ }
+ }
+ }
+ else {
+ var children$1 = vNode.children;
+ // Safe guard for crashed VNode
+ if (children$1) {
+ if (flags & 14 /* Component */) {
+ var ref$1 = vNode.ref;
+ if (flags & 4 /* ComponentClass */) {
+ if (isFunction(children$1.componentWillUnmount)) {
+ children$1.componentWillUnmount();
+ }
+ if (isFunction(ref$1)) {
+ ref$1(null);
+ }
+ children$1.$UN = true;
+ if (children$1.$LI) {
+ unmount(children$1.$LI);
+ }
+ }
+ else {
+ if (!isNullOrUndef(ref$1) && isFunction(ref$1.onComponentWillUnmount)) {
+ ref$1.onComponentWillUnmount(vNode.dom, vNode.props || EMPTY_OBJ);
+ }
+ unmount(children$1);
+ }
+ }
+ else if (flags & 1024 /* Portal */) {
+ remove(children$1, vNode.type);
+ }
+ }
+ }
+ }
+ function unmountAllChildren(children) {
+ for (var i = 0, len = children.length; i < len; i++) {
+ unmount(children[i]);
+ }
+ }
+ function removeAllChildren(dom, children) {
+ unmountAllChildren(children);
+ dom.textContent = '';
+ }
+
+ function createLinkEvent(linkEvent, nextValue) {
+ return function (e) {
+ linkEvent(nextValue.data, e);
+ };
+ }
+ function patchEvent(name, lastValue, nextValue, dom) {
+ var nameLowerCase = name.toLowerCase();
+ if (!isFunction(nextValue) && !isNullOrUndef(nextValue)) {
+ var linkEvent = nextValue.event;
+ if (linkEvent && isFunction(linkEvent)) {
+ dom[nameLowerCase] = createLinkEvent(linkEvent, nextValue);
+ }
+ }
+ else {
+ var domEvent = dom[nameLowerCase];
+ // if the function is wrapped, that means it's been controlled by a wrapper
+ if (!domEvent || !domEvent.wrapped) {
+ dom[nameLowerCase] = nextValue;
+ }
+ }
+ }
+ function getNumberStyleValue(style, value) {
+ switch (style) {
+ case 'animationIterationCount':
+ case 'borderImageOutset':
+ case 'borderImageSlice':
+ case 'borderImageWidth':
... 23678 lines suppressed ...
RE: [royale-asjs] branch develop updated: ExternsJS library in frameworks added. In ExternsJS project inspiretree external JS library added.
Posted by Yishay Weiss <yi...@hotmail.com>.
Hi Alina,
I think we are due for another release soon, so if this is a big change please make sure both mvn and ant tests pass after all files have been committed. You will receive an email from royale-builds@royale.apache.org<ma...@royale.apache.org> If there are issues.
Thanks for the work!
From: Alina Kazi<ma...@gmail.com>
Sent: Wednesday, November 24, 2021 12:29 AM
To: dev@royale.apache.org<ma...@royale.apache.org>
Subject: Re: [royale-asjs] branch develop updated: ExternsJS library in frameworks added. In ExternsJS project inspiretree external JS library added.
Yes i kept css file in the project as well, i get it from where i
downloaded js but I did a lot of modifications in the local.
On Wed, 24 Nov 2021, 3:19 am Harbs, <ha...@gmail.com> wrote:
> That’s fine. I did not mean that a lot of code is bad. (where’s a
> head-explode emoji when you need one?) ;-)
>
> I don’t know whether it’s better to include the inspiretree js or not, but
> if it’s included, we need to add a pointer in the LICENSE file, and we
> don’t add the Apache header AFAIK.
>
> Did you write the CSS, or did some of that come from inspiretree too?
>
> > On Nov 24, 2021, at 12:15 AM, Alina Kazi <al...@gmail.com>
> wrote:
> >
> > Hi Harbs,
> >
> > Thanks for the guidance, I will follow it.
> >
> > All the code is relevant to inspiretree and its beads. Its a lot because
> we
> > can use inspiretree multiple ways with checkbox without it, with parent
> > child icon and without and much more stuff handling.
> >
> > I will add the example in sdk soon or Maria will.
> >
> > I will remove files which has other license i will add only references of
> > the js file in as wrapper.
> >
> > Thanks and Best Regards,
> >
> > Alina Kazi
> >
> >
> > On Wed, 24 Nov 2021, 3:04 am Harbs, <ha...@gmail.com> wrote:
> >
> >> Here’s the instructions on how to add MIT licensed code:
> >> https://infra.apache.org/licensing-howto.html#permissive-deps
> >>
> >>> On Nov 23, 2021, at 11:57 PM, Harbs <ha...@gmail.com> wrote:
> >>>
> >>> That’s a lot of code.
> >>>
> >>> Where did all this code come from? In particular inspire-tree.js jumped
> >> out at me. Where’s that from? inspire tree seems to be MIT licensed:
> >>> https://github.com/helion3/inspire-tree/blob/master/LICENSE
> >>>
> >>> You can’t just add an apache header to that and put it in our repo.
> >>>
> >>>> On Nov 23, 2021, at 9:14 PM, alinakazi@apache.org wrote:
> >>>>
> >>>> This is an automated email from the ASF dual-hosted git repository.
> >>>>
> >>>> alinakazi pushed a commit to branch develop
> >>>> in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
> >>>>
> >>>>
> >>>> The following commit(s) were added to refs/heads/develop by this push:
> >>>> new b7b21fc ExternsJS library in frameworks added. In ExternsJS
> >> project inspiretree external JS library added.
> >>>> b7b21fc is described below
> >>>>
> >>>> commit b7b21fc0dafd309741acaa29acc745643a4b0d60
> >>>> Author: alinakazi <al...@gmail.com>
> >>>> AuthorDate: Wed Nov 24 00:14:10 2021 +0500
> >>>>
> >>>> ExternsJS library in frameworks added. In ExternsJS project
> >> inspiretree external JS library added.
> >>>> ---
> >>>> frameworks/projects/ExternsJS/asconfig.json | 33 +
> >>>> frameworks/projects/ExternsJS/build.xml | 182 +
> >>>> frameworks/projects/ExternsJS/pom.xml | 276 +
> >>>> .../src/main/config/compile-swf-config.xml | 112 +
> >>>> .../ExternsJS/src/main/resources/defaults.css | 3255 +++++++++
> >>>> .../src/main/resources/externsjs-as-manifest.xml | 25 +
> >>>> .../src/main/resources/externsjs-manifest.xml | 27 +
> >>>> .../externsjs/inspiretree/New Text Document.html | 56 +
> >>>> .../externsjs/inspiretree/inspire-tree-custom.css | 435 ++
> >>>> .../externsjs/inspiretree/inspire-tree-custom.sass | 541 ++
> >>>> .../externsjs/inspiretree/inspire-tree-dark.css | 325 +
> >>>> .../inspiretree/inspire-tree-dark.min.css | 14 +
> >>>> .../inspiretree/inspire-tree-dom-royale.js | 3766 +++++++++++
> >>>> .../externsjs/inspiretree/inspire-tree-dom.js | 3764 +++++++++++
> >>>> .../externsjs/inspiretree/inspire-tree-dom.min.js | 21 +
> >>>> .../inspiretree/inspire-tree-light-jewel-blue.css | 619 ++
> >>>> .../externsjs/inspiretree/inspire-tree-light.css | 347 +
> >>>> .../inspiretree/inspire-tree-light.min.css | 14 +
> >>>> .../externsjs/inspiretree/inspire-tree-royale.js | 7126
> >> ++++++++++++++++++++
> >>>> .../externsjs/inspiretree/inspire-tree.js | 7088
> >> +++++++++++++++++++
> >>>> .../externsjs/inspiretree/inspire-tree.min.js | 29 +
> >>>> .../inspiretree/jewel-blue/collapsed_blue.svg | 14 +
> >>>> .../jewel-blue/expand_less_black_24dp.svg | 14 +
> >>>> .../jewel-blue/expand_more_black_24dp.svg | 14 +
> >>>> .../inspiretree/jewel-blue/expanded_blue.svg | 21 +
> >>>> .../ExternsJS/src/main/royale/ExternsJSClasses.as | 53 +
> >>>> .../royale/externsjs/inspiretree/IInspireTree.as | 33 +
> >>>> .../royale/externsjs/inspiretree/InspireTree.as | 897 +++
> >>>> .../inspiretree/InspireTreeBasicControl.as | 277 +
> >>>> .../royale/externsjs/inspiretree/InspireTreeDOM.as | 74 +
> >>>> .../royale/externsjs/inspiretree/TreeEvent.as | 112 +
> >>>> .../royale/externsjs/inspiretree/TreeNode.as | 650 ++
> >>>> .../royale/externsjs/inspiretree/TreeNodes.as | 620 ++
> >>>> .../royale/externsjs/inspiretree/UtilsTree.as | 28 +
> >>>> .../beads/InspireTreeCheckBoxModeBead.as | 339 +
> >>>> .../inspiretree/beads/InspireTreeEventsBead.as | 215 +
> >>>> .../inspiretree/beads/InspireTreeIconBead.as | 576 ++
> >>>> .../inspiretree/beads/InspireTreePaginateBead.as | 162 +
> >>>> .../beads/InspireTreeReadOnlyCheckBead.as | 160 +
> >>>> .../beads/InspireTreeReadOnlyCheckBead_V0.as | 152 +
> >>>> .../beads/InspireTreeRevertCheckBead.as | 185 +
> >>>> .../inspiretree/beads/models/InspireTreeModel.as | 290 +
> >>>> .../royale/externsjs/inspiretree/vos/ConfigDOM.as | 64 +
> >>>> .../royale/externsjs/inspiretree/vos/ConfigTree.as | 30 +
> >>>> .../externsjs/inspiretree/vos/DragAndDropConfig.as | 33 +
> >>>> .../externsjs/inspiretree/vos/ItemTreeNode.as | 146 +
> >>>> .../externsjs/inspiretree/vos/OptionsTree.as | 101 +
> >>>> 47 files changed, 33315 insertions(+)
> >>>>
> >>>> diff --git a/frameworks/projects/ExternsJS/asconfig.json
> >> b/frameworks/projects/ExternsJS/asconfig.json
> >>>> new file mode 100644
> >>>> index 0000000..3b1f1b3
> >>>> --- /dev/null
> >>>> +++ b/frameworks/projects/ExternsJS/asconfig.json
> >>>> @@ -0,0 +1,33 @@
> >>>> +/*
> >>>> + * Licensed to the Apache Software Foundation (ASF) under one or more
> >>>> + * contributor license agreements. See the NOTICE file distributed
> >> with
> >>>> + * this work for additional information regarding copyright
> ownership.
> >>>> + * The ASF licenses this file to You 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
> >>>> + *
> >>>> + * Unless required by applicable law or agreed to in writing,
> software
> >>>> + * distributed under the License is distributed on an "AS IS" BASIS,
> >>>> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
> >> implied.
> >>>> + * See the License for the specific language governing permissions
> and
> >>>> + * limitations under the License.
> >>>> + */
> >>>> + {
> >>>> + "config": "royale",
> >>>> + "type": "lib",
> >>>> + "compilerOptions": {
> >>>> + "debug": true,
> >>>> + "targets": [
> >>>> + "JSRoyale", "SWF"
> >>>> + ],
> >>>> + "include-classes": [
> >>>> + "src/main/royale/ExternsJSClasses.as"
> >>>> + ],
> >>>> + "source-path": [
> >>>> + "src/main/royale"
> >>>> + ],
> >>>> + "output": "target/ExternsJS.swc"
> >>>> + }
> >>>> +}
> >>>> diff --git a/frameworks/projects/ExternsJS/build.xml
> >> b/frameworks/projects/ExternsJS/build.xml
> >>>> new file mode 100644
> >>>> index 0000000..697b257
> >>>> --- /dev/null
> >>>> +++ b/frameworks/projects/ExternsJS/build.xml
> >>>> @@ -0,0 +1,182 @@
> >>>> +<?xml version="1.0"?>
> >>>> +<!--
> >>>> +
> >>>> + Licensed to the Apache Software Foundation (ASF) under one or more
> >>>> + contributor license agreements. See the NOTICE file distributed
> with
> >>>> + this work for additional information regarding copyright ownership.
> >>>> + The ASF licenses this file to You 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
> >>>> +
> >>>> + Unless required by applicable law or agreed to in writing, software
> >>>> + distributed under the License is distributed on an "AS IS" BASIS,
> >>>> + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
> >> implied.
> >>>> + See the License for the specific language governing permissions and
> >>>> + limitations under the License.
> >>>> +
> >>>> +-->
> >>>> +
> >>>> +
> >>>> +<project name="ExternsJS" default="main" basedir=".">
> >>>> + <property name="ROYALE_HOME" location="../../.."/>
> >>>> +
> >>>> + <property file="${ROYALE_HOME}/env.properties"/>
> >>>> + <property environment="env"/>
> >>>> + <property file="${ROYALE_HOME}/local.properties"/>
> >>>> + <property file="${ROYALE_HOME}/build.properties"/>
> >>>> + <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
> >>>> + <condition property="AIR_HOME" value="${env.AIR_HOME}">
> >>>> + <isset property="env.AIR_HOME" />
> >>>> + </condition>
> >>>> + <property name="AIR_HOME" value="${ROYALE_HOME}"/>
> >>>> + <condition property="PLAYERGLOBAL_HOME"
> >> value="${env.PLAYERGLOBAL_HOME}">
> >>>> + <isset property="env.PLAYERGLOBAL_HOME" />
> >>>> + </condition>
> >>>> + <property name="PLAYERGLOBAL_HOME"
> >> value="${ROYALE_HOME}/frameworks/libs/player"/>
> >>>> +
> >>>> + <property name="target.name" value="${ant.project.name}.swc" />
> >>>> +
> >>>> + <tstamp>
> >>>> + <format property="royale.swc-date" pattern="MM/dd/yy HH:mm
> Z"/>
> >>>> + </tstamp>
> >>>> + <echo>swc-date is ${royale.swc-date}</echo>
> >>>> +
> >>>> + <target name="main"
> >> depends="clean,check-compiler,compile,compile-js,copy-swc,test"
> >> description="Full build of ${ant.project.name}.swc">
> >>>> + </target>
> >>>> +
> >>>> + <target name="compile-js">
> >>>> + <ant dir="${ROYALE_HOME}/frameworks/js/projects/${
> >> ant.project.name}JS/" inheritAll="false" >
> >>>> + <property name="ROYALE_SWF_COMPILER_HOME"
> >> value="${ROYALE_SWF_COMPILER_HOME}"/>
> >>>> + <property name="ROYALE_COMPILER_HOME"
> >> value="${ROYALE_COMPILER_HOME}"/>
> >>>> + <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
> >>>> + </ant>
> >>>> + </target>
> >>>> +
> >>>> + <target name="copy-swc" if="AIR_HOME">
> >>>> + <copy file="${basedir}/target/${target.name}"
> >> tofile="${ROYALE_HOME}/frameworks/libs/${target.name}" />
> >>>> + </target>
> >>>> +
> >>>> + <target name="check-for-tests" >
> >>>> + <condition property="skip-tests" >
> >>>> + <not>
> >>>> + <available
> file="${basedir}/src/test/royale/build.xml"
> >> />
> >>>> + </not>
> >>>> + </condition>
> >>>> + <!-- exclude from js-only build -->
> >>>> + <condition property="skip-swf-tests">
> >>>> + <or>
> >>>> + <isset property="skip-tests" />
> >>>> + <not>
> >>>> + <!-- env.AIR_HOME is how we determine if it's a
> >> SWF distritbution -->
> >>>> + <isset property="env.AIR_HOME" />
> >>>> + </not>
> >>>> + </or>
> >>>> + </condition>
> >>>> + </target>
> >>>> +
> >>>> + <target name="test" depends="check-for-tests,check-compiler"
> >> unless="skip-tests">
> >>>> + <antcall target="test-swf" />
> >>>> + </target>
> >>>> +
> >>>> + <target name="test-swf" unless="skip-swf-tests">
> >>>> + <ant dir="src/test/royale" />
> >>>> + </target>
> >>>> +
> >>>> + <target name="clean">
> >>>> + <delete failonerror="false">
> >>>> + <fileset dir="${ROYALE_HOME}/frameworks/libs">
> >>>> + <include name="${target.name}"/>
> >>>> + </fileset>
> >>>> + </delete>
> >>>> + <delete failonerror="false" includeemptydirs="true">
> >>>> + <fileset dir="${basedir}/target">
> >>>> + <include name="**/**"/>
> >>>> + </fileset>
> >>>> + </delete>
> >>>> + <antcall target="clean-tests" />
> >>>> + </target>
> >>>> +
> >>>> + <target name="clean-tests" depends="check-for-tests"
> >> unless="skip-tests">
> >>>> + <ant dir="src/test/royale" target="clean"/>
> >>>> + </target>
> >>>> +
> >>>> + <target name="compile" description="Compiles .as files into .swc"
> >> if="AIR_HOME">
> >>>> + <!-- use antcall so that resultproperty can be used in other
> >> projects and
> >>>> + they don't collide when being run one after the other -->
> >>>> + <antcall target="compile-swf" />
> >>>> + </target>
> >>>> +
> >>>> + <target name="compile-swf">
> >>>> + <echo message="Compiling libs/${ant.project.name}.swc"/>
> >>>> + <echo message="ROYALE_HOME: ${ROYALE_HOME}"/>
> >>>> + <echo message="ROYALE_SWF_COMPILER_HOME:
> >> ${ROYALE_SWF_COMPILER_HOME}"/>
> >>>> + <echo message="ROYALE_COMPILER_HOME:
> ${ROYALE_COMPILER_HOME}"/>
> >>>> +
> >>>> + <java jar="${ROYALE_COMPILER_HOME}/lib/compc.jar" fork="true"
> >> resultproperty="compcoutput">
> >>>> + <jvmarg value="-Xmx384m" />
> >>>> + <jvmarg value="-Dsun.io.useCanonCaches=false" />
> >>>> + <jvmarg value="-Droyalelib=${ROYALE_HOME}/frameworks" />
> >>>> + <arg value="+royalelib=${ROYALE_HOME}/frameworks" />
> >>>> + <arg
> value="+playerglobal.version=${playerglobal.version}"
> >> />
> >>>> + <arg value="+env.AIR_HOME=${AIR_HOME}" />
> >>>> + <arg value="-compiler.strict-xml=true" />
> >>>> + <arg value="-compiler.targets=SWF,JSRoyale" />
> >>>> + <arg line="-metadata.date="${royale.swc-date}""
> >> />
> >>>> + <arg line="-metadata.dateFormat="MM/dd/yy HH:mm
> >> Z"" />
> >>>> + <arg
> >>
> line="-swf-debugfile-alias="/org/apache/royale/${release.version}""
> >> />
> >>>> + <arg value="-output=${basedir}/target/${target.name}" />
> >>>> + <arg
> >> value="-load-config=${basedir}/src/main/config/compile-swf-config.xml"
> />
> >>>> + <arg
> >> value="-js-load-config=${ROYALE_HOME}/frameworks/js-config.xml" />
> >>>> + <arg
> >> value="-js-load-config+=${basedir}/../../js/projects/${ant.project.name
> }JS/src/main/config/compile-js-config.xml"
> >> />
> >>>> + </java>
> >>>> + <fail>
> >>>> + <condition>
> >>>> + <not>
> >>>> + <or>
> >>>> + <equals arg1="${compcoutput}" arg2="0" />
> >>>> + <equals arg1="${compcoutput}" arg2="2" />
> >>>> + </or>
> >>>> + </not>
> >>>> + </condition>
> >>>> + </fail>
> >>>> + </target>
> >>>> +
> >>>> + <target name="check-compiler"
> >> depends="check-compiler-home,check-transpiler-home">
> >>>> + <path id="lib.path">
> >>>> + <fileset dir="${ROYALE_COMPILER_HOME}/lib"
> >> includes="compiler-royaleTasks.jar"/>
> >>>> + </path>
> >>>> + <taskdef resource="flexTasks.tasks" classpathref="lib.path"/>
> >>>> + </target>
> >>>> +
> >>>> + <target name="check-compiler-home"
> >>>> + description="Set ROYALE_SWF_COMPILER_HOME to point at the
> >> compiler.">
> >>>> +
> >>>> + <available file="${ROYALE_HOME}/lib/compiler-mxmlc.jar"
> >>>> + type="file"
> >>>> + property="ROYALE_SWF_COMPILER_HOME"
> >>>> + value="${ROYALE_HOME}"/>
> >>>> +
> >>>> + <fail message="ROYALE_SWF_COMPILER_HOME must be set to a
> >> folder with a lib sub-folder containing compiler-mxmlc.jar such as the
> >> compiler folder in royale-compiler repo or the root of a Royale SDK"
> >>>> + unless="ROYALE_SWF_COMPILER_HOME"/>
> >>>> + </target>
> >>>> +
> >>>> + <target name="check-transpiler-home"
> >>>> + description="Set ROYALE_COMPILER_HOME to point at the
> >> cross-compiler.">
> >>>> +
> >>>> + <available file="${ROYALE_HOME}/js/lib/jsc.jar"
> >>>> + type="file"
> >>>> + property="ROYALE_COMPILER_HOME"
> >>>> + value="${ROYALE_HOME}/js"/>
> >>>> +
> >>>> + <available file="${env.ROYALE_COMPILER_HOME}/lib/jsc.jar"
> >>>> + type="file"
> >>>> + property="ROYALE_COMPILER_HOME"
> >>>> + value="${env.ROYALE_COMPILER_HOME}"/>
> >>>> +
> >>>> + <fail message="ROYALE_COMPILER_HOME must be set to a folder
> >> with a lib sub-folder containing jsc.jar such as the compiler-jx folder
> in
> >> royale-compiler repo or the js folder of a Royale SDK"
> >>>> + unless="ROYALE_COMPILER_HOME"/>
> >>>> + </target>
> >>>> +
> >>>> +</project>
> >>>> diff --git a/frameworks/projects/ExternsJS/pom.xml
> >> b/frameworks/projects/ExternsJS/pom.xml
> >>>> new file mode 100644
> >>>> index 0000000..8f97429
> >>>> --- /dev/null
> >>>> +++ b/frameworks/projects/ExternsJS/pom.xml
> >>>> @@ -0,0 +1,276 @@
> >>>> +<?xml version="1.0" encoding="UTF-8"?>
> >>>> +<!--
> >>>> +
> >>>> + Licensed to the Apache Software Foundation (ASF) under one or more
> >>>> + contributor license agreements. See the NOTICE file distributed
> with
> >>>> + this work for additional information regarding copyright ownership.
> >>>> + The ASF licenses this file to You 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
> >>>> +
> >>>> + Unless required by applicable law or agreed to in writing, software
> >>>> + distributed under the License is distributed on an "AS IS" BASIS,
> >>>> + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
> >> implied.
> >>>> + See the License for the specific language governing permissions and
> >>>> + limitations under the License.
> >>>> +
> >>>> +--><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="
> >> http://www.w3.org/2001/XMLSchema-instance"<http://www.w3.org/2001/XMLSchema-instance%22> xsi:schemaLocation="
> >> http://maven.apache.org/POM/4.0.0
> >> http://maven.apache.org/xsd/maven-4.0.0.xsd"><http://maven.apache.org/xsd/maven-4.0.0.xsd%22%3e>
> >>>> + <modelVersion>4.0.0</modelVersion>
> >>>> +
> >>>> + <parent>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>projects</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + </parent>
> >>>> +
> >>>> + <artifactId>ExternsJS</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <packaging>swc</packaging>
> >>>> +
> >>>> + <name>Apache Royale: Framework: Libs: ExternsJS</name>
> >>>> +
> >>>> + <build>
> >>>> + <sourceDirectory>src/main/royale</sourceDirectory>
> >>>> + <plugins>
> >>>> + <plugin>
> >>>> + <groupId>org.apache.royale.compiler</groupId>
> >>>> + <artifactId>royale-maven-plugin</artifactId>
> >>>> + <version>${project.royale.compiler.version}</version>
> >>>> + <extensions>true</extensions>
> >>>> + <configuration>
> >>>> + <namespaces>
> >>>> + <namespace>
> >>>> + <uri>library://ns.apache.org/royale/externsjs</uri>
> >>>> +
> >>
> <manifest>${project.basedir}/src/main/resources/externsjs-manifest.xml</manifest>
> >>>> + </namespace>
> >>>> + <namespace>
> >>>> + <type>as</type>
> >>>> + <uri>library://ns.apache.org/royale/externsjs</uri>
> >>>> +
> >>
> <manifest>${project.basedir}/src/main/resources/externsjs-as-manifest.xml</manifest>
> >>>> + </namespace>
> >>>> + </namespaces>
> >>>> + <includeClasses>
> >>>> + <includeClass>ExternsJSClasses</includeClass>
> >>>> + </includeClasses>
> >>>> + <includeFiles>
> >>>> + <include-file>
> >>>> + <name>defaults.css</name>
> >>>> + <path>../src/main/resources/defaults.css</path>
> >>>> + </include-file>
> >>>> + </includeFiles>
> >>>> + <includeLookupOnly>true</includeLookupOnly>
> >>>> + <allowSubclassOverrides>true</allowSubclassOverrides>
> >>>> + <skipExtern>true</skipExtern>
> >>>> + <skipAS>${royale.skipAS}</skipAS>
> >>>> + <!-- <additionalCompilerOptions>
> >>>> + -source-map=true;
> >>>> +
> >> -source-map-source-root=/frameworks/projects/ExternsJS/src/main/royale/
> >>>> + </additionalCompilerOptions> -->
> >>>> + </configuration>
> >>>> + </plugin>
> >>>> + <plugin>
> >>>> + <groupId>nl.geodienstencentrum.maven</groupId>
> >>>> + <artifactId>sass-maven-plugin</artifactId>
> >>>> + <configuration>
> >>>> + <resources>
> >>>> + <resource>
> >>>> + <source>
> >>>> +
> >>
> <directory>${basedir}/src/main/resources/externsjs/inspiretree</directory>
> >>>> + <includes>
> >>>> + <include>**/*.sass</include>
> >>>> + </includes>
> >>>> + </source>
> >>>> +
> >>
> <destination>${basedir}/src/main/resources/externsjs/inspiretree</destination>
> >>>> + </resource>
> >>>> + </resources>
> >>>> + </configuration>
> >>>> + <executions>
> >>>> + <execution>
> >>>> + <id>generate-css-using-sass</id>
> >>>> + <goals>
> >>>> + <goal>update-stylesheets</goal>
> >>>> + </goals>
> >>>> + <phase>generate-resources</phase>
> >>>> + </execution>
> >>>> + </executions>
> >>>> + </plugin>
> >>>> + <plugin>
> >>>> + <groupId>com.google.code.maven-replacer-plugin</groupId>
> >>>> + <artifactId>replacer</artifactId>
> >>>> + <version>1.5.3</version>
> >>>> + <executions>
> >>>> + <execution>
> >>>> + <phase>generate-resources</phase>
> >>>> + <goals>
> >>>> + <goal>replace</goal>
> >>>> + </goals>
> >>>> + </execution>
> >>>> + </executions>
> >>>> + <configuration>
> >>>> + <includes>
> >>>> + <include>${basedir}/src/main/resources/**/*.css</include>
> >>>> + </includes>
> >>>> + <regex>false</regex>
> >>>> + <replacements>
> >>>> + <replacement>
> >>>> + <token>@@ZERO_WIDTH_SPACE</token>
> >>>> + <value>\200b</value>
> >>>> + </replacement>
> >>>> + <replacement>
> >>>> + <token>@@NON_BREAKING_SPACE</token>
> >>>> + <value>\0a</value>
> >>>> + </replacement>
> >>>> + </replacements>
> >>>> + </configuration>
> >>>> + </plugin>
> >>>> + </plugins>
> >>>> + </build>
> >>>> +
> >>>> + <dependencies>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>Core</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>js</classifier>
> >>>> + </dependency>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>Binding</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>js</classifier>
> >>>> + </dependency>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>Graphics</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>js</classifier>
> >>>> + </dependency>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>Collections</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>js</classifier>
> >>>> + </dependency>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>HTML</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>js</classifier>
> >>>> + </dependency>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>Basic</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>js</classifier>
> >>>> + </dependency>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>Formatters</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>js</classifier>
> >>>> + </dependency>
> >>>> + </dependencies>
> >>>> +
> >>>> + <profiles>
> >>>> + <profile>
> >>>> + <id>platform-windows</id>
> >>>> + <activation>
> >>>> + <os>
> >>>> + <family>windows</family>
> >>>> + </os>
> >>>> + </activation>
> >>>> + <build>
> >>>> + <plugins>
> >>>> + <plugin>
> >>>> + <groupId>nl.geodienstencentrum.maven</groupId>
> >>>> + <artifactId>sass-maven-plugin</artifactId>
> >>>> + <executions>
> >>>> + <execution>
> >>>> + <id>generate-css-using-sass</id>
> >>>> + <goals>
> >>>> + <goal>update-stylesheets</goal>
> >>>> + </goals>
> >>>> + <phase>generate-resources</phase>
> >>>> + <configuration>
> >>>> + <sassOptions>
> >>>> + <!-- on windows it is typical to have
> >> autoCRLF=true,
> >>>> + so we don't want to overwrite
> >>>> + the CRLF newlines with unix newlines (which is
> >> true by default)
> >>>> + locally, because that will change git status of
> >> the css file
> >>>> + on windows
> >>>> + -->
> >>>> + <unix_newlines>false</unix_newlines>
> >>>> + </sassOptions>
> >>>> + </configuration>
> >>>> + </execution>
> >>>> + </executions>
> >>>> + </plugin>
> >>>> + </plugins>
> >>>> + </build>
> >>>> + </profile>
> >>>> + <profile>
> >>>> + <id>option-with-swf</id>
> >>>> + <dependencies>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>Core</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>swf</classifier>
> >>>> + </dependency>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>Binding</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>swf</classifier>
> >>>> + </dependency>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>Graphics</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>swf</classifier>
> >>>> + </dependency>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>Collections</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>swf</classifier>
> >>>> + </dependency>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>HTML</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>swf</classifier>
> >>>> + </dependency>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>Basic</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>swf</classifier>
> >>>> + </dependency>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>Formatters</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>swf</classifier>
> >>>> + </dependency>
> >>>> + </dependencies>
> >>>> + </profile>
> >>>> + </profiles>
> >>>> +
> >>>> +<properties /></project>
> >>>> diff --git
> >> a/frameworks/projects/ExternsJS/src/main/config/compile-swf-config.xml
> >> b/frameworks/projects/ExternsJS/src/main/config/compile-swf-config.xml
> >>>> new file mode 100644
> >>>> index 0000000..8981130
> >>>> --- /dev/null
> >>>> +++
> >> b/frameworks/projects/ExternsJS/src/main/config/compile-swf-config.xml
> >>>> @@ -0,0 +1,112 @@
> >>>> +<!--
> >>>> +
> >>>> + Licensed to the Apache Software Foundation (ASF) under one or more
> >>>> + contributor license agreements. See the NOTICE file distributed
> with
> >>>> + this work for additional information regarding copyright ownership.
> >>>> + The ASF licenses this file to You 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
> >>>> +
> >>>> + Unless required by applicable law or agreed to in writing, software
> >>>> + distributed under the License is distributed on an "AS IS" BASIS,
> >>>> + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
> >> implied.
> >>>> + See the License for the specific language governing permissions and
> >>>> + limitations under the License.
> >>>> +
> >>>> +-->
> >>>> +<royale-config>
> >>>> +
> >>>> + <compiler>
> >>>> + <accessible>false</accessible>
> >>>> +
> >>>> + <!-- build both SWF and JS. -->
> >>>> + <targets>
> >>>> + <target>JSRoyale</target>
> >>>> + </targets>
> >>>> + <strict-xml>true</strict-xml>
> >>>> +
> >>>> + <external-library-path>
> >>>> +
> >>
> <path-element>${env.AIR_HOME}/frameworks/libs/air/airglobal.swc</path-element>
> >>>> +
> >> <path-element>../../../../../libs/Binding.swc</path-element>
> >>>> + <path-element>../../../../../libs/Core.swc</path-element>
> >>>> +
> >> <path-element>../../../../../libs/Graphics.swc</path-element>
> >>>> +
> <path-element>../../../../../libs/Basic.swc</path-element>
> >>>> +
> >> <path-element>../../../../../libs/Collections.swc</path-element>
> >>>> + <path-element>../../../../../libs/HTML.swc</path-element>
> >>>> +
> >> <path-element>../../../../../libs/Formatters.swc</path-element>
> >>>> + </external-library-path>
> >>>> +
> >>>> + <allow-subclass-overrides>true</allow-subclass-overrides>
> >>>> + <mxml>
> >>>> + <children-as-data>true</children-as-data>
> >>>> + <imports>
> >>>> +
> >> <implicit-import>org.apache.royale.events.*</implicit-import>
> >>>> +
> >> <implicit-import>org.apache.royale.geom.*</implicit-import>
> >>>> +
> >> <implicit-import>org.apache.royale.core.ClassFactory</implicit-import>
> >>>> +
> >> <implicit-import>org.apache.royale.core.IFactory</implicit-import>
> >>>> + </imports>
> >>>> + </mxml>
> >>>> +
> >>
> <binding-value-change-event>org.apache.royale.events.ValueChangeEvent</binding-value-change-event>
> >>>> +
> >>
> <binding-value-change-event-kind>org.apache.royale.events.ValueChangeEvent</binding-value-change-event-kind>
> >>>> +
> >>
> <binding-value-change-event-type>valueChange</binding-value-change-event-type>
> >>>> +
> >>>> + <define>
> >>>> + <name>COMPILE::SWF</name>
> >>>> + <value>true</value>
> >>>> + </define>
> >>>> + <define>
> >>>> + <name>COMPILE::JS</name>
> >>>> + <value>false</value>
> >>>> + </define>
> >>>> +
> >>>> + <keep-as3-metadata>
> >>>> + <name>Bindable</name>
> >>>> + <name>Managed</name>
> >>>> + <name>ChangeEvent</name>
> >>>> + <name>NonCommittingChangeEvent</name>
> >>>> + <name>Transient</name>
> >>>> + </keep-as3-metadata>
> >>>> +
> >>>> + <locale/>
> >>>> +
> >>>> + <library-path/>
> >>>> +
> >>>> + <namespaces>
> >>>> + <namespace>
> >>>> + <uri>library://ns.apache.org/royale/externsjs</uri>
> >>>> +
> >> <manifest>../resources/externsjs-manifest.xml</manifest>
> >>>> + </namespace>
> >>>> + <namespace>
> >>>> + <uri>library://ns.apache.org/royale/externsjs</uri>
> >>>> +
> >> <manifest>../resources/externsjs-as-manifest.xml</manifest>
> >>>> + </namespace>
> >>>> + </namespaces>
> >>>> +
> >>>> + <source-path>
> >>>> + <path-element>../royale</path-element>
> >>>> + </source-path>
> >>>> +
> >>>> + <warn-no-constructor>false</warn-no-constructor>
> >>>> + </compiler>
> >>>> +
> >>>> + <include-file>
> >>>> + <name>defaults.css</name>
> >>>> + <path>../resources/defaults.css</path>
> >>>> + </include-file>
> >>>> +
> >>>> + <include-lookup-only>true</include-lookup-only>
> >>>> +
> >>>> + <include-classes>
> >>>> + <class>ExternsJSClasses</class>
> >>>> + </include-classes>
> >>>> +
> >>>> + <include-namespaces>
> >>>> + <uri>library://ns.apache.org/royale/externsjs</uri>
> >>>> + </include-namespaces>
> >>>> +
> >>>> + <target-player>${playerglobal.version}</target-player>
> >>>> +
> >>>> +
> >>>> +</royale-config>
> >>>> diff --git
> >> a/frameworks/projects/ExternsJS/src/main/resources/defaults.css
> >> b/frameworks/projects/ExternsJS/src/main/resources/defaults.css
> >>>> new file mode 100644
> >>>> index 0000000..c8dab5d
> >>>> --- /dev/null
> >>>> +++ b/frameworks/projects/ExternsJS/src/main/resources/defaults.css
> >>>> @@ -0,0 +1,3255 @@
> >>>> +/**
> >>>> + * Licensed to the Apache Software Foundation (ASF) under one or
> more
> >>>> + * contributor license agreements. See the NOTICE file distributed
> >> with
> >>>> + * this work for additional information regarding copyright
> ownership.
> >>>> + * The ASF licenses this file to You 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
> >>>> + *
> >>>> + * Unless required by applicable law or agreed to in writing,
> software
> >>>> + * distributed under the License is distributed on an "AS IS" BASIS,
> >>>> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
> >> implied.
> >>>> + * See the License for the specific language governing permissions
> and
> >>>> + * limitations under the License.
> >>>> + */
> >>>> +@namespace j "library://ns.apache.org/royale/externsjs";
> >>>> +@namespace "http://www.w3.org/1999/xhtml";
> >>>> +*, :after, :before {
> >>>> + box-sizing: border-box; }
> >>>> +
> >>>> +html, body {
> >>>> + height: 100%; }
> >>>> +
> >>>> +::-moz-focus-inner, ::-moz-focus-outer {
> >>>> + border: 0; }
> >>>> +
> >>>> +input:focus, textarea:focus, select:focus, div:focus, label:focus,
> >> nav:focus, li:focus, a:focus {
> >>>> + outline: none; }
> >>>> +
> >>>> +select::-ms-expand {
> >>>> + display: none; }
> >>>> +
> >>>> +button::-moz-focus-inner {
> >>>> + padding: 0; }
> >>>> +
> >>>> +button, input, textarea {
> >>>> + font-size: 100%; }
> >>>> +
> >>>> +.cursor-pointer {
> >>>> + cursor: pointer !important; }
> >>>> +
> >>>> +j|View {
> >>>> + IBeadView:
> ClassReference("org.apache.royale.html.beads.GroupView");
> >>>> + IBeadLayout:
> >> ClassReference("org.apache.royale.externsjs.beads.layouts.ViewLayout");
> }
> >>>> +
> >>>> +.responsive-view {
> >>>> + display: inline-flex;
> >>>> + width: 100%;
> >>>> + height: 100%; }
> >>>> +
> >>>> +j|Group {
> >>>> + IBeadLayout:
> >> ClassReference("org.apache.royale.externsjs.beads.layouts.BasicLayout");
> >>>> + IBeadView:
> ClassReference("org.apache.royale.html.beads.GroupView");
> >> }
> >>>> +
> >>>> +.externsjs.group {
> >>>> + overflow: visible; }
> >>>> +
> >>>> +j|HGroup {
> >>>> + IBeadLayout:
> >>
> ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
> >> }
> >>>> +
> >>>> +j|VGroup {
> >>>> + IBeadLayout:
> >>
> ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout");
> >> }
> >>>> +
> >>>> +j|Grid {
> >>>> + IBeadLayout:
> >> ClassReference("org.apache.royale.externsjs.beads.layouts.GridLayout");
> }
> >>>> +
> >>>> +j|ScrollableGrid {
> >>>> + IViewport:
> >>
> ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport");
> >> }
> >>>> +
> >>>> +j|GridCell {
> >>>> + IBeadLayout:
> >>
> ClassReference("org.apache.royale.externsjs.beads.layouts.GridCellLayout");
> >> }
> >>>> +
> >>>> +j|Container {
> >>>> + IBeadView:
> >> ClassReference("org.apache.royale.html.beads.ContainerView");
> >>>> + IBeadLayout:
> >> ClassReference("org.apache.royale.externsjs.beads.layouts.BasicLayout");
> >>>> + IViewport:
> >> ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
> >>>> +
> >>>> +j|HContainer {
> >>>> + IBeadLayout:
> >>
> ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
> >> }
> >>>> +
> >>>> +j|VContainer {
> >>>> + IBeadLayout:
> >>
> ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout");
> >> }
> >>>> +
> >>>> +j|Image {
> >>>> + IBeadModel:
> >> ClassReference("org.apache.royale.externsjs.beads.models.ImageModel");
> >>>> + IBeadView:
> >> ClassReference("org.apache.royale.externsjs.beads.views.ImageView"); }
> >>>> +
> >>>> +j|BinaryImage {
> >>>> + IBeadModel:
> >> ClassReference("org.apache.royale.html.beads.models.BinaryImageModel");
> >>>> + IBeadView:
> >> ClassReference("org.apache.royale.externsjs.beads.views.ImageView");
> >>>> + IBinaryImageLoader:
> >> ClassReference("org.apache.royale.html.beads.BinaryImageLoader"); }
> >>>> +
> >>>> +j|DataContainer {
> >>>> + IBeadModel:
> >>
> ClassReference("org.apache.royale.externsjs.beads.models.DataProviderModel");
> >>>> + IBeadView:
> >> ClassReference("org.apache.royale.html.beads.DataContainerView");
> >>>> + IBeadLayout:
> >>
> ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout");
> >>>> + IDataProviderItemRendererMapper:
> >>
> ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForCollectionView");
> >>>> + IItemRendererClassFactory:
> >> ClassReference("org.apache.royale.core.ItemRendererClassFactory");
> >>>> + IItemRenderer:
> >>
> ClassReference("org.apache.royale.externsjs.itemRenderers.StringItemRenderer");
> >>>> + IItemRendererInitializer:
> >>
> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DataContainerItemRendererInitializer");
> >>>> + IViewport:
> >> ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
> >>>> +
> >>>> +j|Validator {
> >>>> + ILocalizedValuesImpl:
> >> ClassReference("org.apache.royale.core.SimpleLocalizedValuesImpl"); }
> >>>> +
> >>>> +j|Form {
> >>>> + IBeadLayout:
> >> ClassReference("org.apache.royale.externsjs.beads.layouts.FormLayout");
> }
> >>>> +
> >>>> +@media -royale-swf {
> >>>> + j|Container {
> >>>> + IContentView:
> >>
> ClassReference("org.apache.royale.html.supportClasses.ContainerContentArea");
> >> } }
> >>>> +hr {
> >>>> + border: 0;
> >>>> + height: 1px; }
> >>>> +
> >>>> +.responsiveSizeMonitor {
> >>>> + background: rgba(0, 0, 0, 0.8);
> >>>> + color: white;
> >>>> + padding: 10px;
> >>>> + position: fixed;
> >>>> + bottom: 0;
> >>>> + right: 0;
> >>>> + width: 250px; }
> >>>> + .responsiveSizeMonitor strong {
> >>>> + color: yellow; }
> >>>> +
> >>>> +.externsjs.alert {
> >>>> + position: fixed;
> >>>> + top: 50%;
> >>>> + left: 50%;
> >>>> + min-width: 350px;
> >>>> + min-height: 200px; }
> >>>> + .externsjs.alert .externsjs.titlebar {
> >>>> + height: 50px; }
> >>>> + .externsjs.alert .content {
> >>>> + position: absolute;
> >>>> + top: 50px;
> >>>> + bottom: 50px;
> >>>> + width: 100%;
> >>>> + overflow-y: auto; }
> >>>> + .externsjs.alert .content .externsjs.label {
> >>>> + white-space: normal; }
> >>>> + .externsjs.alert .externsjs.controlbar {
> >>>> + bottom: 0;
> >>>> + height: 50px; }
> >>>> +
> >>>> +@media all and (-ms-high-contrast: none) {
> >>>> + .externsjs.alert {
> >>>> + display: table; } }
> >>>> +@media (min-width: 768px) {
> >>>> + .externsjs.alert {
> >>>> + min-width: 450px; } }
> >>>> +j|Alert {
> >>>> + IBeadLayout:
> >> ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout");
> >>>> + IBeadModel:
> >> ClassReference("org.apache.royale.externsjs.beads.models.AlertModel");
> >>>> + IBeadController:
> >>
> ClassReference("org.apache.royale.externsjs.beads.controllers.AlertController");
> >>>> + IBeadView:
> >> ClassReference("org.apache.royale.externsjs.beads.views.AlertView"); }
> >>>> +
> >>>> +.externsjs.badge {
> >>>> + z-index: 2;
> >>>> + position: absolute;
> >>>> + top: -1em;
> >>>> + right: -1em;
> >>>> + text-transform: initial;
> >>>> + padding: 0.5em;
> >>>> + min-width: 2.1em; }
> >>>> + .externsjs.badge.overlap {
> >>>> + top: 0em;
> >>>> + right: 0em; }
> >>>> + .externsjs.badge.subindex {
> >>>> + top: auto;
> >>>> + bottom: -1em; }
> >>>> + .externsjs.badge.subindex.overlap {
> >>>> + top: auto;
> >>>> + bottom: 0em; }
> >>>> + .externsjs.badge.preindex {
> >>>> + left: -1em;
> >>>> + right: auto; }
> >>>> + .externsjs.badge.preindex.overlap {
> >>>> + left: 0em;
> >>>> + right: auto; }
> >>>> +
> >>>> +.externsjs.button {
> >>>> + cursor: pointer;
> >>>> + user-select: none;
> >>>> + display: inline-flex;
> >>>> + position: relative;
> >>>> + align-items: center;
> >>>> + justify-content: center;
> >>>> + vertical-align: middle;
> >>>> + overflow: hidden;
> >>>> + outline: none;
> >>>> + white-space: nowrap;
> >>>> + line-height: normal !important;
> >>>> + text-align: center;
> >>>> + text-decoration: none; }
> >>>> + .externsjs.button[disabled] {
> >>>> + cursor: default; }
> >>>> + .externsjs.button.multiline {
> >>>> + white-space: pre-wrap; }
> >>>> + .externsjs.button .fonticon {
> >>>> + cursor: inherit; }
> >>>> + .externsjs.button.viewport {
> >>>> + overflow: visible; }
> >>>> +
> >>>> +@media -royale-swf {
> >>>> + j|Button {
> >>>> + IBeadModel:
> >> ClassReference("org.apache.royale.externsjs.beads.models.TextModel");
> >>>> + IBeadView:
> >> ClassReference("org.apache.royale.externsjs.beads.views.ButtonView"); }
> }
> >>>> +.externsjs.buttonbar .externsjs.button, .externsjs.buttonbar
> >> .externsjs.togglebutton {
> >>>> + border-radius: 0; }
> >>>> + .externsjs.buttonbar .externsjs.button.first, .externsjs.buttonbar
> >> .externsjs.togglebutton.first {
> >>>> + border-top-left-radius: 0.25rem;
> >>>> + border-bottom-left-radius: 0.25rem; }
> >>>> + .externsjs.buttonbar .externsjs.button.last, .externsjs.buttonbar
> >> .externsjs.togglebutton.last {
> >>>> + border-top-right-radius: 0.25rem;
> >>>> + border-bottom-right-radius: 0.25rem; }
> >>>> +
> >>>> +j|ButtonBar {
> >>>> + IBeadModel:
> >>
> ClassReference("org.apache.royale.externsjs.beads.models.ButtonBarModel");
> >>>> + IBeadView:
> >> ClassReference("org.apache.royale.externsjs.beads.views.ButtonBarView");
> >>>> + IBeadController:
> >>
> ClassReference("org.apache.royale.externsjs.beads.controllers.ListSingleSelectionMouseController");
> >>>> + IBeadLayout:
> >>
> ClassReference("org.apache.royale.externsjs.beads.layouts.ButtonBarLayout");
> >>>> + IDataProviderItemRendererMapper:
> >>
> ClassReference("org.apache.royale.html.beads.SelectionDataItemRendererFactoryForCollectionView");
> >>>> + IItemRendererClassFactory:
> >> ClassReference("org.apache.royale.core.ItemRendererClassFactory");
> >>>> + IItemRenderer:
> >>
> ClassReference("org.apache.royale.externsjs.itemRenderers.ButtonBarItemRenderer");
> >>>> + IItemRendererInitializer:
> >>
> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ButtonBarItemRendererInitializer");
> >> }
> >>>> +
> >>>> +@media -royale-swf {
> >>>> + j|ButtonBar {
> >>>> + IContentView:
> >>
> ClassReference("org.apache.royale.externsjs.supportClasses.list.DataGroup");
> >> } }
> >>>> +j|IconButtonBar {
> >>>> + IItemRenderer:
> >>
> ClassReference("org.apache.royale.externsjs.itemRenderers.IconButtonBarItemRenderer");
> >> }
> >>>> +
> >>>> +.externsjs.buttonbar.toggle-on-click
> .externsjs.togglebutton.selected {
> >>>> + pointer-events: none; }
> >>>> +
> >>>> +j|ToggleButtonBar {
> >>>> + IBeadView:
> >>
> ClassReference("org.apache.royale.externsjs.beads.views.ToggleButtonBarView");
> >>>> + IBeadController:
> >>
> ClassReference("org.apache.royale.externsjs.beads.controllers.ToggleButtonBarSelectionMouseController");
> >>>> + IItemRenderer:
> >>
> ClassReference("org.apache.royale.externsjs.itemRenderers.ToggleButtonBarItemRenderer");
> >> }
> >>>> +
> >>>> +.externsjs.card {
> >>>> + min-width: 120px;
> >>>> + min-height: 52px;
> >>>> + position: relative; }
> >>>> + .externsjs.card .card-header {
> >>>> + width: 100%; }
> >>>> + .externsjs.card .card-header .card-title {
> >>>> + flex: 1 1 auto;
> >>>> + overflow: hidden;
> >>>> + text-decoration: inherit;
> >>>> + text-overflow: ellipsis;
> >>>> + text-transform: inherit;
> >>>> + z-index: 1; }
> >>>> + .externsjs.card .card-expanded-content {
> >>>> + width: 100%; }
> >>>> + .externsjs.card .card-primary-content {
> >>>> + width: 100%;
> >>>> + min-height: 152px;
> >>>> + position: relative;
> >>>> + outline: none;
> >>>> + color: inherit;
> >>>> + text-decoration: none;
> >>>> + flex: 1 1 auto; }
> >>>> + .externsjs.card .card-actions {
> >>>> + width: 100%;
> >>>> + position: relative;
> >>>> + outline: none;
> >>>> + color: inherit;
> >>>> + text-decoration: none; }
> >>>> +
> >>>> +.externsjs.checkbox {
> >>>> + display: inline-flex;
> >>>> + position: relative;
> >>>> + margin: 0;
> >>>> + padding: 0;
> >>>> + height: auto; }
> >>>> + .externsjs.checkbox input {
> >>>> + -webkit-appearance: none;
> >>>> + -moz-appearance: none;
> >>>> + -o-appearance: none;
> >>>> + -ms-appearance: none;
> >>>> + appearance: none;
> >>>> + display: inline-flex;
> >>>> + margin: 0;
> >>>> + padding: 0;
> >>>> + width: 24px;
> >>>> + height: 24px;
> >>>> + opacity: 0; }
> >>>> + .externsjs.checkbox input + span::before {
> >>>> + content: " ";
> >>>> + position: absolute;
> >>>> + left: 0px;
> >>>> + top: 0px;
> >>>> + width: 22px;
> >>>> + height: 22px; }
> >>>> + .externsjs.checkbox input + span::after {
> >>>> + content: " ";
> >>>> + position: absolute;
> >>>> + width: 22px;
> >>>> + height: 22px;
> >>>> + left: 0px;
> >>>> + top: 0px;
> >>>> + opacity: 0; }
> >>>> + .externsjs.checkbox input:checked + span::after,
> >> .externsjs.checkbox input:checked:active + span::after {
> >>>> + opacity: 1; }
> >>>> + .externsjs.checkbox input:focus + span::before,
> >> .externsjs.checkbox input:checked:focus + span::before,
> .externsjs.checkbox
> >> input:checked:active:focus + span::before {
> >>>> + outline: none; }
> >>>> + .externsjs.checkbox input[disabled] + span {
> >>>> + cursor: unset; }
> >>>> + .externsjs.checkbox span {
> >>>> + cursor: pointer;
> >>>> + margin: auto;
> >>>> + width: inherit; }
> >>>> +
> >>>> +.externsjs.switch {
> >>>> + display: inline-flex;
> >>>> + position: relative;
> >>>> + height: auto; }
> >>>> + .externsjs.switch input {
> >>>> + -webkit-appearance: none;
> >>>> + -moz-appearance: none;
> >>>> + -o-appearance: none;
> >>>> + -ms-appearance: none;
> >>>> + appearance: none;
> >>>> + display: inline-flex;
> >>>> + opacity: 0;
> >>>> + width: 44px;
> >>>> + height: 24px;
> >>>> + margin: 0;
> >>>> + padding: 0; }
> >>>> + .externsjs.switch input[disabled] + span {
> >>>> + cursor: unset; }
> >>>> + .externsjs.switch .switch {
> >>>> + position: absolute;
> >>>> + cursor: pointer;
> >>>> + top: 0;
> >>>> + left: 0;
> >>>> + right: 0;
> >>>> + bottom: 0;
> >>>> + width: 44px;
> >>>> + height: 24px; }
> >>>> + .externsjs.switch .switch::before {
> >>>> + position: absolute;
> >>>> + content: "";
> >>>> + height: 20px;
> >>>> + width: 20px;
> >>>> + left: 2px;
> >>>> + bottom: 2px; }
> >>>> + .externsjs.switch .label {
> >>>> + cursor: pointer;
> >>>> + margin: auto;
> >>>> + width: inherit; }
> >>>> +
> >>>> +.externsjs.combobox {
> >>>> + display: inline-flex; }
> >>>> + .externsjs.combobox .externsjs.textinput {
> >>>> + display: block; }
> >>>> + .externsjs.combobox .externsjs.button::before {
> >>>> + margin: 0;
> >>>> + padding: 0; }
> >>>> + .externsjs.combobox .externsjs.button::after {
> >>>> + content: " ";
> >>>> + position: absolute; }
> >>>> +
> >>>> +j|ComboBox {
> >>>> + IBeadModel:
> >>
> ClassReference("org.apache.royale.externsjs.beads.models.ComboBoxModel");
> >>>> + IBeadView:
> >> ClassReference("org.apache.royale.externsjs.beads.views.ComboBoxView");
> >>>> + IBeadController:
> >>
> ClassReference("org.apache.royale.externsjs.beads.controllers.ComboBoxController");
> >>>> + IPopUp:
> >>
> ClassReference("org.apache.royale.externsjs.supportClasses.combobox.ComboBoxPopUp");
> >> }
> >>>> +
> >>>> +.combobox-popup {
> >>>> + position: fixed;
> >>>> + pointer-events: none;
> >>>> + bottom: 0;
> >>>> + left: 0;
> >>>> + width: 100%;
> >>>> + height: 100%;
> >>>> + overflow: hidden;
> >>>> + contain: strict;
> >>>> + z-index: 60;
> >>>> + color: rgba(0, 0, 0, 0.8); }
> >>>> + .combobox-popup::before {
> >>>> + position: absolute;
> >>>> + display: block;
> >>>> + top: 0;
> >>>> + left: 0;
> >>>> + width: 100%;
> >>>> + height: 100%;
> >>>> + content: "";
> >>>> + opacity: 0;
> >>>> + background-color: rgba(0, 0, 0, 0.65);
> >>>> + will-change: opacity;
> >>>> + transition: opacity 0.4s 0ms; }
> >>>> + .combobox-popup .externsjs.list {
> >>>> + position: relative;
> >>>> + transform: translate(-50%, 100%);
> >>>> + transition: none;
> >>>> + will-change: transform, opacity;
> >>>> + bottom: auto;
> >>>> + top: calc(100% - 10px);
> >>>> + left: 50%;
> >>>> + box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7) !important;
> >>>> + opacity: 0; }
> >>>> + .combobox-popup.open {
> >>>> + pointer-events: auto; }
> >>>> + .combobox-popup.open::before {
> >>>> + opacity: 1; }
> >>>> + .combobox-popup.open .externsjs.list {
> >>>> + transform: translate(-50%, -100%);
> >>>> + transition: transform 0.3s 0ms, opacity 0.3s 0ms;
> >>>> + opacity: 1; }
> >>>> +
> >>>> +@media (max-width: 767px) {
> >>>> + .combobox-popup .externsjs.list {
> >>>> + width: 98% !important;
> >>>> + max-height: 240px !important; }
> >>>> + .combobox-popup .externsjs.list .externsjs.item {
> >>>> + min-height: 48px !important; } }
> >>>> +@media (min-width: 767px) {
> >>>> + .combobox-popup::before {
> >>>> + background-color: rgba(0, 0, 0, 0); }
> >>>> + .combobox-popup .externsjs.list {
> >>>> + transform: none;
> >>>> + transition: none;
> >>>> + box-shadow: none !important; }
> >>>> + .combobox-popup .externsjs.list .externsjs.item {
> >>>> + overflow: hidden;
> >>>> + transition: height 200ms ease-in; }
> >>>> + .combobox-popup.open .externsjs.list {
> >>>> + transform: none;
> >>>> + top: auto;
> >>>> + left: auto; } }
> >>>> +j|ComboBoxPopUp {
> >>>> + IBeadView:
> >>
> ClassReference("org.apache.royale.externsjs.beads.views.ComboBoxPopUpView");
> >> }
> >>>> +
> >>>> +j|VirtualComboBox {
> >>>> + IPopUp:
> >>
> ClassReference("org.apache.royale.externsjs.supportClasses.combobox.VirtualComboBoxPopUp");
> >> }
> >>>> +
> >>>> +j|VirtualComboBoxPopUp {
> >>>> + IBeadView:
> >>
> ClassReference("org.apache.royale.externsjs.beads.views.VirtualComboBoxPopUpView");
> >> }
> >>>> +
> >>>> +.externsjs.datagrid {
> >>>> + display: flex;
> >>>> + flex-direction: column;
> >>>> + position: relative;
> >>>> + overflow: auto; }
> >>>> + .externsjs.datagrid .externsjs.buttonbar.header {
> >>>> + width: 100%;
> >>>> + flex: 0 0 auto; }
> >>>> + .externsjs.datagrid .externsjs.buttonbar.header
> .externsjs.button {
> >>>> + width: 100%; }
> >>>> + .externsjs.datagrid .listarea {
> >>>> + width: 100%;
> >>>> + flex: 1 1 auto; }
> >>>> + .externsjs.datagrid .externsjs.list.column {
> >>>> + padding-left: 0;
> >>>> + padding-right: 0;
> >>>> + position: relative;
> >>>> + min-height: 100%; }
> >>>> + .externsjs.datagrid .externsjs.list.column
> >> .externsjs.item.datagrid {
> >>>> + width: 100%; }
> >>>> + .externsjs.datagrid span:empty:before {
> >>>> + content: "\200b"; }
> >>>> +
> >>>> +j|DataGrid {
> >>>> + IBeadView:
> >> ClassReference("org.apache.royale.externsjs.beads.views.DataGridView");
> >>>> + IBeadModel:
> >>
> ClassReference("org.apache.royale.html.beads.models.DataGridCollectionViewModel");
> >>>> + IBeadLayout:
> >>
> ClassReference("org.apache.royale.externsjs.beads.layouts.DataGridLayout");
> >>>> + headerClass:
> >>
> ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.DataGridButtonBar");
> >>>> + headerLayoutClass:
> >>
> ClassReference("org.apache.royale.externsjs.beads.layouts.DataGridColumnLayout");
> >>>> + listAreaClass:
> >>
> ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.DataGridListArea");
> >>>> + columnClass:
> >>
> ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.DataGridColumnList");
> >> }
> >>>> +
> >>>> +j|DataGridListArea {
> >>>> + IBeadView:
> >> ClassReference("org.apache.royale.html.beads.ContainerView");
> >>>> + IBeadLayout:
> >>
> ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
> >>>> + IViewport:
> >>
> ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport");
> >> }
> >>>> +
> >>>> +j|DataGridColumnList {
> >>>> + IItemRendererClassFactory:
> >>
> ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
> >>>> + IItemRenderer:
> >>
> ClassReference("org.apache.royale.externsjs.itemRenderers.DataGridItemRenderer");
> >>>> + IItemRendererInitializer:
> >>
> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DataGridColumnListItemRendererInitializer");
> >>>> + ISelectableItemRenderer:
> >>
> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ClassSelectorListSelectableItemRendererBead");
> >>>> + IViewport:
> >> ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
> >>>> +
> >>>> +j|DataGridButtonBar {
> >>>> + IItemRenderer:
> >>
> ClassReference("org.apache.royale.externsjs.itemRenderers.DatagridHeaderRenderer");
> >> }
> >>>> +
> >>>> +j|VirtualDataGrid {
> >>>> + IBeadView:
> >>
> ClassReference("org.apache.royale.externsjs.beads.views.VirtualDataGridView");
> >>>> + columnClass:
> >>
> ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.VirtualDataGridColumnList");
> >> }
> >>>> +
> >>>> +j|VirtualDataGridListArea {
> >>>> + IBeadView:
> >> ClassReference("org.apache.royale.html.beads.ContainerView");
> >>>> + IBeadLayout:
> >>
> ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
> >>>> + listAreaClass:
> >>
> ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.VirtualDataGrid");
> >>>> + IViewport:
> >> ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
> >>>> +
> >>>> +j|VirtualDataGridColumnList {
> >>>> + IBeadLayout:
> >>
> ClassReference("org.apache.royale.externsjs.beads.layouts.VirtualDataGridListAreaLayout");
> >>>> + IItemRendererClassFactory:
> >>
> ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
> >>>> + IItemRenderer:
> >>
> ClassReference("org.apache.royale.externsjs.itemRenderers.DataGridItemRenderer");
> >>>> + IItemRendererInitializer:
> >>
> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DataGridColumnListItemRendererInitializer");
> >>>> + ISelectableItemRenderer:
> >>
> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ClassSelectorListSelectableItemRendererBead");
> >>>> + IViewport:
> >>
> ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport");
> >> }
> >>>> +
> >>>> +.externsjs.datechooser .externsjs.table {
> >>>> + min-width: 324px;
> >>>> + min-height: 364px; }
> >>>> + .externsjs.datechooser .externsjs.table .externsjs.tablecell {
> >>>> + height: auto; }
> >>>> + .externsjs.datechooser .externsjs.table
> >> .externsjs.tableheadercell.buttonsRow > .layout.horizontal {
> >>>> + float: right; }
> >>>> + .externsjs.datechooser .externsjs.table
> >> .externsjs.tableheadercell.buttonsRow .viewSelector::after {
> >>>> + content: " "; }
> >>>> + .externsjs.datechooser .externsjs.table
> >> .externsjs.tableheadercell.buttonsRow .previousButton::after,
> >> .externsjs.datechooser .externsjs.table
> >> .externsjs.tableheadercell.buttonsRow .nextButton::after {
> >>>> + content: " ";
> >>>> + position: absolute; }
> >>>> +
> >>>> +j|DateChooser {
> >>>> + IBeadModel:
> >>
> ClassReference("org.apache.royale.externsjs.beads.models.DateChooserModel");
> >>>> + IBeadView:
> >>
> ClassReference("org.apache.royale.externsjs.beads.views.DateChooserView");
> >>>> + IBeadLayout:
> >>
> ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout");
> >>>> + IBeadController:
> >>
> ClassReference("org.apache.royale.externsjs.beads.controllers.DateChooserMouseController");
> >> }
> >>>> +
> >>>> +.externsjs.datefield {
> >>>> + display: inline-flex; }
> >>>> + .externsjs.datefield .externsjs.textinput input {
> >>>> + width: 9.2em; }
> >>>> + .externsjs.datefield .externsjs.button::before {
> >>>> + margin: 0;
> >>>> + padding: 0;
> >>>> + line-height: 22px; }
> >>>> + .externsjs.datefield .externsjs.button::after {
> >>>> + content: " ";
> >>>> + position: absolute;
> >>>> + width: 22px;
> >>>> + height: 22px;
> >>>> + left: calc(50% - 11px);
> >>>> + top: calc(50% - 11px); }
> >>>> +
> >>>> +.datechooser-popup {
> >>>> + position: fixed;
> >>>> + pointer-events: none;
> >>>> + bottom: 0;
> >>>> + left: 0;
> >>>> + width: 100%;
> >>>> + height: 100%;
> >>>> + overflow: hidden;
> >>>> + contain: strict;
> >>>> + z-index: 60;
> >>>> + color: rgba(0, 0, 0, 0.8); }
> >>>> + .datechooser-popup::before {
> >>>> + position: absolute;
> >>>> + display: block;
> >>>> + top: 0;
> >>>> + left: 0;
> >>>> + width: 100%;
> >>>> + height: 100%;
> >>>> + content: "";
> >>>> + opacity: 0;
> >>>> + background-color: rgba(0, 0, 0, 0.65);
> >>>> + will-change: opacity;
> >>>> + transition: opacity 0.4s 0ms; }
> >>>> + .datechooser-popup .externsjs.table {
> >>>> + position: relative;
> >>>> + transform: translate(-50%, 100%);
> >>>> + transition: none;
> >>>> + will-change: transform, opacity;
> >>>> + bottom: auto;
> >>>> + top: calc(100% - 10px);
> >>>> + left: 50%;
> >>>> + touch-action: none;
> >>>> + box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7) !important;
> >>>> + opacity: 0; }
> >>>> + .datechooser-popup.open {
> >>>> + pointer-events: auto; }
> >>>> + .datechooser-popup.open::before {
> >>>> + opacity: 1; }
> >>>> + .datechooser-popup.open .externsjs.table {
> >>>> + transform: translate(-50%, -100%);
> >>>> + transition: transform 0.4s 0ms, opacity 0.4s 0ms;
> >>>> + opacity: 1; }
> >>>> +
> >>>> +@media (max-width: 768px) {
> >>>> + .datechooser-popup .externsjs.table {
> >>>> + width: calc(100% - 20px); } }
> >>>> +@media (min-width: 768px) and (max-width: 992px) {
> >>>> + .datechooser-popup .externsjs.table {
> >>>> + width: calc(100% - 300px); } }
> >>>> +@media (min-width: 992px) {
> >>>> + .datechooser-popup::before {
> >>>> + background-color: rgba(0, 0, 0, 0); }
> >>>> + .datechooser-popup .externsjs.table {
> >>>> + transform: none;
> >>>> + transition: none;
> >>>> + box-shadow: none !important; }
> >>>> + .datechooser-popup .externsjs.table .externsjs.item {
> >>>> + height: 0;
> >>>> + overflow: hidden;
> >>>> + transition: height 200ms ease-in; }
> >>>> + .datechooser-popup.open .externsjs.table {
> >>>> + transform: none;
> >>>> + top: auto;
> >>>> + left: auto; }
> >>>> + .datechooser-popup.open .externsjs.table .externsjs.item {
> >>>> + height: 34px; } }
> >>>> +j|DateField {
> >>>> + IBeadView:
> >> ClassReference("org.apache.royale.externsjs.beads.views.DateFieldView");
> >>>> + IBeadModel:
> >>
> ClassReference("org.apache.royale.externsjs.beads.models.DateChooserModel");
> >>>> + IBeadController:
> >>
> ClassReference("org.apache.royale.externsjs.beads.controllers.DateFieldMouseController");
> >>>> + IFormatter:
> >>
> ClassReference("org.apache.royale.html.accessories.StringDateFormatter");
> >>>> + IPopUp: ClassReference("org.apache.royale.externsjs.DateChooser");
> }
> >>>> +
> >>>> +.externsjs.divider {
> >>>> + height: 0;
> >>>> + margin: 0; }
> >>>> +
> >>>> +j|Divider {
> >>>> + IBeadLayout:
> >> ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout");
> }
> >>>> +
> >>>> +.externsjs.drawer.float {
> >>>> + position: fixed;
> >>>> + pointer-events: none;
> >>>> + top: 0;
> >>>> + left: 0;
> >>>> + width: 100%;
> >>>> + height: 100%;
> >>>> + overflow: hidden;
> >>>> + contain: strict;
> >>>> + z-index: 100; }
> >>>> + .externsjs.drawer.float::before {
> >>>> + position: absolute;
> >>>> + display: block;
> >>>> + top: 0;
> >>>> + left: 0;
> >>>> + width: 100%;
> >>>> + height: 100%;
> >>>> + content: "";
> >>>> + opacity: 0; }
> >>>> + .externsjs.drawer.float .drawermain {
> >>>> + position: absolute;
> >>>> + display: flex;
> >>>> + flex-direction: column;
> >>>> + left: 0;
> >>>> + right: initial;
> >>>> + height: 100%; }
> >>>> + .externsjs.drawer.float.open {
> >>>> + pointer-events: auto; }
> >>>> + .externsjs.drawer.float.open::before {
> >>>> + opacity: 1; }
> >>>> +.externsjs.drawer.fixed {
> >>>> + width: 0; }
> >>>> + .externsjs.drawer.fixed .drawermain {
> >>>> + display: inline-flex;
> >>>> + flex-direction: column;
> >>>> + left: 0;
> >>>> + right: auto;
> >>>> + height: 100%;
> >>>> + overflow: hidden;
> >>>> + touch-action: none; }
> >>>> + .externsjs.drawer.fixed.open {
> >>>> + pointer-events: auto; }
> >>>> + .externsjs.drawer.fixed.open .drawermain {
> >>>> + transform: none; }
> >>>> +
> >>>> +@media (min-width: 768px) {
> >>>> + .externsjs.drawer.float .drawermain {
> >>>> + width: calc(100% - 60px);
> >>>> + max-width: 310px; } }
> >>>> +.externsjs.drawerheader {
> >>>> + position: relative;
> >>>> + display: flex;
> >>>> + flex-direction: column;
> >>>> + align-items: center;
> >>>> + flex-shrink: 0; }
> >>>> + .externsjs.drawerheader div {
> >>>> + display: flex;
> >>>> + position: absolute;
> >>>> + top: 0;
> >>>> + right: 0;
> >>>> + bottom: 0;
> >>>> + left: 0;
> >>>> + align-items: flex-end; }
> >>>> +
> >>>> +.externsjs.draw
Re: [royale-asjs] branch develop updated: ExternsJS library in frameworks added. In ExternsJS project inspiretree external JS library added.
Posted by Alina Kazi <al...@gmail.com>.
Yes i kept css file in the project as well, i get it from where i
downloaded js but I did a lot of modifications in the local.
On Wed, 24 Nov 2021, 3:19 am Harbs, <ha...@gmail.com> wrote:
> That’s fine. I did not mean that a lot of code is bad. (where’s a
> head-explode emoji when you need one?) ;-)
>
> I don’t know whether it’s better to include the inspiretree js or not, but
> if it’s included, we need to add a pointer in the LICENSE file, and we
> don’t add the Apache header AFAIK.
>
> Did you write the CSS, or did some of that come from inspiretree too?
>
> > On Nov 24, 2021, at 12:15 AM, Alina Kazi <al...@gmail.com>
> wrote:
> >
> > Hi Harbs,
> >
> > Thanks for the guidance, I will follow it.
> >
> > All the code is relevant to inspiretree and its beads. Its a lot because
> we
> > can use inspiretree multiple ways with checkbox without it, with parent
> > child icon and without and much more stuff handling.
> >
> > I will add the example in sdk soon or Maria will.
> >
> > I will remove files which has other license i will add only references of
> > the js file in as wrapper.
> >
> > Thanks and Best Regards,
> >
> > Alina Kazi
> >
> >
> > On Wed, 24 Nov 2021, 3:04 am Harbs, <ha...@gmail.com> wrote:
> >
> >> Here’s the instructions on how to add MIT licensed code:
> >> https://infra.apache.org/licensing-howto.html#permissive-deps
> >>
> >>> On Nov 23, 2021, at 11:57 PM, Harbs <ha...@gmail.com> wrote:
> >>>
> >>> That’s a lot of code.
> >>>
> >>> Where did all this code come from? In particular inspire-tree.js jumped
> >> out at me. Where’s that from? inspire tree seems to be MIT licensed:
> >>> https://github.com/helion3/inspire-tree/blob/master/LICENSE
> >>>
> >>> You can’t just add an apache header to that and put it in our repo.
> >>>
> >>>> On Nov 23, 2021, at 9:14 PM, alinakazi@apache.org wrote:
> >>>>
> >>>> This is an automated email from the ASF dual-hosted git repository.
> >>>>
> >>>> alinakazi pushed a commit to branch develop
> >>>> in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
> >>>>
> >>>>
> >>>> The following commit(s) were added to refs/heads/develop by this push:
> >>>> new b7b21fc ExternsJS library in frameworks added. In ExternsJS
> >> project inspiretree external JS library added.
> >>>> b7b21fc is described below
> >>>>
> >>>> commit b7b21fc0dafd309741acaa29acc745643a4b0d60
> >>>> Author: alinakazi <al...@gmail.com>
> >>>> AuthorDate: Wed Nov 24 00:14:10 2021 +0500
> >>>>
> >>>> ExternsJS library in frameworks added. In ExternsJS project
> >> inspiretree external JS library added.
> >>>> ---
> >>>> frameworks/projects/ExternsJS/asconfig.json | 33 +
> >>>> frameworks/projects/ExternsJS/build.xml | 182 +
> >>>> frameworks/projects/ExternsJS/pom.xml | 276 +
> >>>> .../src/main/config/compile-swf-config.xml | 112 +
> >>>> .../ExternsJS/src/main/resources/defaults.css | 3255 +++++++++
> >>>> .../src/main/resources/externsjs-as-manifest.xml | 25 +
> >>>> .../src/main/resources/externsjs-manifest.xml | 27 +
> >>>> .../externsjs/inspiretree/New Text Document.html | 56 +
> >>>> .../externsjs/inspiretree/inspire-tree-custom.css | 435 ++
> >>>> .../externsjs/inspiretree/inspire-tree-custom.sass | 541 ++
> >>>> .../externsjs/inspiretree/inspire-tree-dark.css | 325 +
> >>>> .../inspiretree/inspire-tree-dark.min.css | 14 +
> >>>> .../inspiretree/inspire-tree-dom-royale.js | 3766 +++++++++++
> >>>> .../externsjs/inspiretree/inspire-tree-dom.js | 3764 +++++++++++
> >>>> .../externsjs/inspiretree/inspire-tree-dom.min.js | 21 +
> >>>> .../inspiretree/inspire-tree-light-jewel-blue.css | 619 ++
> >>>> .../externsjs/inspiretree/inspire-tree-light.css | 347 +
> >>>> .../inspiretree/inspire-tree-light.min.css | 14 +
> >>>> .../externsjs/inspiretree/inspire-tree-royale.js | 7126
> >> ++++++++++++++++++++
> >>>> .../externsjs/inspiretree/inspire-tree.js | 7088
> >> +++++++++++++++++++
> >>>> .../externsjs/inspiretree/inspire-tree.min.js | 29 +
> >>>> .../inspiretree/jewel-blue/collapsed_blue.svg | 14 +
> >>>> .../jewel-blue/expand_less_black_24dp.svg | 14 +
> >>>> .../jewel-blue/expand_more_black_24dp.svg | 14 +
> >>>> .../inspiretree/jewel-blue/expanded_blue.svg | 21 +
> >>>> .../ExternsJS/src/main/royale/ExternsJSClasses.as | 53 +
> >>>> .../royale/externsjs/inspiretree/IInspireTree.as | 33 +
> >>>> .../royale/externsjs/inspiretree/InspireTree.as | 897 +++
> >>>> .../inspiretree/InspireTreeBasicControl.as | 277 +
> >>>> .../royale/externsjs/inspiretree/InspireTreeDOM.as | 74 +
> >>>> .../royale/externsjs/inspiretree/TreeEvent.as | 112 +
> >>>> .../royale/externsjs/inspiretree/TreeNode.as | 650 ++
> >>>> .../royale/externsjs/inspiretree/TreeNodes.as | 620 ++
> >>>> .../royale/externsjs/inspiretree/UtilsTree.as | 28 +
> >>>> .../beads/InspireTreeCheckBoxModeBead.as | 339 +
> >>>> .../inspiretree/beads/InspireTreeEventsBead.as | 215 +
> >>>> .../inspiretree/beads/InspireTreeIconBead.as | 576 ++
> >>>> .../inspiretree/beads/InspireTreePaginateBead.as | 162 +
> >>>> .../beads/InspireTreeReadOnlyCheckBead.as | 160 +
> >>>> .../beads/InspireTreeReadOnlyCheckBead_V0.as | 152 +
> >>>> .../beads/InspireTreeRevertCheckBead.as | 185 +
> >>>> .../inspiretree/beads/models/InspireTreeModel.as | 290 +
> >>>> .../royale/externsjs/inspiretree/vos/ConfigDOM.as | 64 +
> >>>> .../royale/externsjs/inspiretree/vos/ConfigTree.as | 30 +
> >>>> .../externsjs/inspiretree/vos/DragAndDropConfig.as | 33 +
> >>>> .../externsjs/inspiretree/vos/ItemTreeNode.as | 146 +
> >>>> .../externsjs/inspiretree/vos/OptionsTree.as | 101 +
> >>>> 47 files changed, 33315 insertions(+)
> >>>>
> >>>> diff --git a/frameworks/projects/ExternsJS/asconfig.json
> >> b/frameworks/projects/ExternsJS/asconfig.json
> >>>> new file mode 100644
> >>>> index 0000000..3b1f1b3
> >>>> --- /dev/null
> >>>> +++ b/frameworks/projects/ExternsJS/asconfig.json
> >>>> @@ -0,0 +1,33 @@
> >>>> +/*
> >>>> + * Licensed to the Apache Software Foundation (ASF) under one or more
> >>>> + * contributor license agreements. See the NOTICE file distributed
> >> with
> >>>> + * this work for additional information regarding copyright
> ownership.
> >>>> + * The ASF licenses this file to You 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
> >>>> + *
> >>>> + * Unless required by applicable law or agreed to in writing,
> software
> >>>> + * distributed under the License is distributed on an "AS IS" BASIS,
> >>>> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
> >> implied.
> >>>> + * See the License for the specific language governing permissions
> and
> >>>> + * limitations under the License.
> >>>> + */
> >>>> + {
> >>>> + "config": "royale",
> >>>> + "type": "lib",
> >>>> + "compilerOptions": {
> >>>> + "debug": true,
> >>>> + "targets": [
> >>>> + "JSRoyale", "SWF"
> >>>> + ],
> >>>> + "include-classes": [
> >>>> + "src/main/royale/ExternsJSClasses.as"
> >>>> + ],
> >>>> + "source-path": [
> >>>> + "src/main/royale"
> >>>> + ],
> >>>> + "output": "target/ExternsJS.swc"
> >>>> + }
> >>>> +}
> >>>> diff --git a/frameworks/projects/ExternsJS/build.xml
> >> b/frameworks/projects/ExternsJS/build.xml
> >>>> new file mode 100644
> >>>> index 0000000..697b257
> >>>> --- /dev/null
> >>>> +++ b/frameworks/projects/ExternsJS/build.xml
> >>>> @@ -0,0 +1,182 @@
> >>>> +<?xml version="1.0"?>
> >>>> +<!--
> >>>> +
> >>>> + Licensed to the Apache Software Foundation (ASF) under one or more
> >>>> + contributor license agreements. See the NOTICE file distributed
> with
> >>>> + this work for additional information regarding copyright ownership.
> >>>> + The ASF licenses this file to You 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
> >>>> +
> >>>> + Unless required by applicable law or agreed to in writing, software
> >>>> + distributed under the License is distributed on an "AS IS" BASIS,
> >>>> + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
> >> implied.
> >>>> + See the License for the specific language governing permissions and
> >>>> + limitations under the License.
> >>>> +
> >>>> +-->
> >>>> +
> >>>> +
> >>>> +<project name="ExternsJS" default="main" basedir=".">
> >>>> + <property name="ROYALE_HOME" location="../../.."/>
> >>>> +
> >>>> + <property file="${ROYALE_HOME}/env.properties"/>
> >>>> + <property environment="env"/>
> >>>> + <property file="${ROYALE_HOME}/local.properties"/>
> >>>> + <property file="${ROYALE_HOME}/build.properties"/>
> >>>> + <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
> >>>> + <condition property="AIR_HOME" value="${env.AIR_HOME}">
> >>>> + <isset property="env.AIR_HOME" />
> >>>> + </condition>
> >>>> + <property name="AIR_HOME" value="${ROYALE_HOME}"/>
> >>>> + <condition property="PLAYERGLOBAL_HOME"
> >> value="${env.PLAYERGLOBAL_HOME}">
> >>>> + <isset property="env.PLAYERGLOBAL_HOME" />
> >>>> + </condition>
> >>>> + <property name="PLAYERGLOBAL_HOME"
> >> value="${ROYALE_HOME}/frameworks/libs/player"/>
> >>>> +
> >>>> + <property name="target.name" value="${ant.project.name}.swc" />
> >>>> +
> >>>> + <tstamp>
> >>>> + <format property="royale.swc-date" pattern="MM/dd/yy HH:mm
> Z"/>
> >>>> + </tstamp>
> >>>> + <echo>swc-date is ${royale.swc-date}</echo>
> >>>> +
> >>>> + <target name="main"
> >> depends="clean,check-compiler,compile,compile-js,copy-swc,test"
> >> description="Full build of ${ant.project.name}.swc">
> >>>> + </target>
> >>>> +
> >>>> + <target name="compile-js">
> >>>> + <ant dir="${ROYALE_HOME}/frameworks/js/projects/${
> >> ant.project.name}JS/" inheritAll="false" >
> >>>> + <property name="ROYALE_SWF_COMPILER_HOME"
> >> value="${ROYALE_SWF_COMPILER_HOME}"/>
> >>>> + <property name="ROYALE_COMPILER_HOME"
> >> value="${ROYALE_COMPILER_HOME}"/>
> >>>> + <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
> >>>> + </ant>
> >>>> + </target>
> >>>> +
> >>>> + <target name="copy-swc" if="AIR_HOME">
> >>>> + <copy file="${basedir}/target/${target.name}"
> >> tofile="${ROYALE_HOME}/frameworks/libs/${target.name}" />
> >>>> + </target>
> >>>> +
> >>>> + <target name="check-for-tests" >
> >>>> + <condition property="skip-tests" >
> >>>> + <not>
> >>>> + <available
> file="${basedir}/src/test/royale/build.xml"
> >> />
> >>>> + </not>
> >>>> + </condition>
> >>>> + <!-- exclude from js-only build -->
> >>>> + <condition property="skip-swf-tests">
> >>>> + <or>
> >>>> + <isset property="skip-tests" />
> >>>> + <not>
> >>>> + <!-- env.AIR_HOME is how we determine if it's a
> >> SWF distritbution -->
> >>>> + <isset property="env.AIR_HOME" />
> >>>> + </not>
> >>>> + </or>
> >>>> + </condition>
> >>>> + </target>
> >>>> +
> >>>> + <target name="test" depends="check-for-tests,check-compiler"
> >> unless="skip-tests">
> >>>> + <antcall target="test-swf" />
> >>>> + </target>
> >>>> +
> >>>> + <target name="test-swf" unless="skip-swf-tests">
> >>>> + <ant dir="src/test/royale" />
> >>>> + </target>
> >>>> +
> >>>> + <target name="clean">
> >>>> + <delete failonerror="false">
> >>>> + <fileset dir="${ROYALE_HOME}/frameworks/libs">
> >>>> + <include name="${target.name}"/>
> >>>> + </fileset>
> >>>> + </delete>
> >>>> + <delete failonerror="false" includeemptydirs="true">
> >>>> + <fileset dir="${basedir}/target">
> >>>> + <include name="**/**"/>
> >>>> + </fileset>
> >>>> + </delete>
> >>>> + <antcall target="clean-tests" />
> >>>> + </target>
> >>>> +
> >>>> + <target name="clean-tests" depends="check-for-tests"
> >> unless="skip-tests">
> >>>> + <ant dir="src/test/royale" target="clean"/>
> >>>> + </target>
> >>>> +
> >>>> + <target name="compile" description="Compiles .as files into .swc"
> >> if="AIR_HOME">
> >>>> + <!-- use antcall so that resultproperty can be used in other
> >> projects and
> >>>> + they don't collide when being run one after the other -->
> >>>> + <antcall target="compile-swf" />
> >>>> + </target>
> >>>> +
> >>>> + <target name="compile-swf">
> >>>> + <echo message="Compiling libs/${ant.project.name}.swc"/>
> >>>> + <echo message="ROYALE_HOME: ${ROYALE_HOME}"/>
> >>>> + <echo message="ROYALE_SWF_COMPILER_HOME:
> >> ${ROYALE_SWF_COMPILER_HOME}"/>
> >>>> + <echo message="ROYALE_COMPILER_HOME:
> ${ROYALE_COMPILER_HOME}"/>
> >>>> +
> >>>> + <java jar="${ROYALE_COMPILER_HOME}/lib/compc.jar" fork="true"
> >> resultproperty="compcoutput">
> >>>> + <jvmarg value="-Xmx384m" />
> >>>> + <jvmarg value="-Dsun.io.useCanonCaches=false" />
> >>>> + <jvmarg value="-Droyalelib=${ROYALE_HOME}/frameworks" />
> >>>> + <arg value="+royalelib=${ROYALE_HOME}/frameworks" />
> >>>> + <arg
> value="+playerglobal.version=${playerglobal.version}"
> >> />
> >>>> + <arg value="+env.AIR_HOME=${AIR_HOME}" />
> >>>> + <arg value="-compiler.strict-xml=true" />
> >>>> + <arg value="-compiler.targets=SWF,JSRoyale" />
> >>>> + <arg line="-metadata.date="${royale.swc-date}""
> >> />
> >>>> + <arg line="-metadata.dateFormat="MM/dd/yy HH:mm
> >> Z"" />
> >>>> + <arg
> >>
> line="-swf-debugfile-alias="/org/apache/royale/${release.version}""
> >> />
> >>>> + <arg value="-output=${basedir}/target/${target.name}" />
> >>>> + <arg
> >> value="-load-config=${basedir}/src/main/config/compile-swf-config.xml"
> />
> >>>> + <arg
> >> value="-js-load-config=${ROYALE_HOME}/frameworks/js-config.xml" />
> >>>> + <arg
> >> value="-js-load-config+=${basedir}/../../js/projects/${ant.project.name
> }JS/src/main/config/compile-js-config.xml"
> >> />
> >>>> + </java>
> >>>> + <fail>
> >>>> + <condition>
> >>>> + <not>
> >>>> + <or>
> >>>> + <equals arg1="${compcoutput}" arg2="0" />
> >>>> + <equals arg1="${compcoutput}" arg2="2" />
> >>>> + </or>
> >>>> + </not>
> >>>> + </condition>
> >>>> + </fail>
> >>>> + </target>
> >>>> +
> >>>> + <target name="check-compiler"
> >> depends="check-compiler-home,check-transpiler-home">
> >>>> + <path id="lib.path">
> >>>> + <fileset dir="${ROYALE_COMPILER_HOME}/lib"
> >> includes="compiler-royaleTasks.jar"/>
> >>>> + </path>
> >>>> + <taskdef resource="flexTasks.tasks" classpathref="lib.path"/>
> >>>> + </target>
> >>>> +
> >>>> + <target name="check-compiler-home"
> >>>> + description="Set ROYALE_SWF_COMPILER_HOME to point at the
> >> compiler.">
> >>>> +
> >>>> + <available file="${ROYALE_HOME}/lib/compiler-mxmlc.jar"
> >>>> + type="file"
> >>>> + property="ROYALE_SWF_COMPILER_HOME"
> >>>> + value="${ROYALE_HOME}"/>
> >>>> +
> >>>> + <fail message="ROYALE_SWF_COMPILER_HOME must be set to a
> >> folder with a lib sub-folder containing compiler-mxmlc.jar such as the
> >> compiler folder in royale-compiler repo or the root of a Royale SDK"
> >>>> + unless="ROYALE_SWF_COMPILER_HOME"/>
> >>>> + </target>
> >>>> +
> >>>> + <target name="check-transpiler-home"
> >>>> + description="Set ROYALE_COMPILER_HOME to point at the
> >> cross-compiler.">
> >>>> +
> >>>> + <available file="${ROYALE_HOME}/js/lib/jsc.jar"
> >>>> + type="file"
> >>>> + property="ROYALE_COMPILER_HOME"
> >>>> + value="${ROYALE_HOME}/js"/>
> >>>> +
> >>>> + <available file="${env.ROYALE_COMPILER_HOME}/lib/jsc.jar"
> >>>> + type="file"
> >>>> + property="ROYALE_COMPILER_HOME"
> >>>> + value="${env.ROYALE_COMPILER_HOME}"/>
> >>>> +
> >>>> + <fail message="ROYALE_COMPILER_HOME must be set to a folder
> >> with a lib sub-folder containing jsc.jar such as the compiler-jx folder
> in
> >> royale-compiler repo or the js folder of a Royale SDK"
> >>>> + unless="ROYALE_COMPILER_HOME"/>
> >>>> + </target>
> >>>> +
> >>>> +</project>
> >>>> diff --git a/frameworks/projects/ExternsJS/pom.xml
> >> b/frameworks/projects/ExternsJS/pom.xml
> >>>> new file mode 100644
> >>>> index 0000000..8f97429
> >>>> --- /dev/null
> >>>> +++ b/frameworks/projects/ExternsJS/pom.xml
> >>>> @@ -0,0 +1,276 @@
> >>>> +<?xml version="1.0" encoding="UTF-8"?>
> >>>> +<!--
> >>>> +
> >>>> + Licensed to the Apache Software Foundation (ASF) under one or more
> >>>> + contributor license agreements. See the NOTICE file distributed
> with
> >>>> + this work for additional information regarding copyright ownership.
> >>>> + The ASF licenses this file to You 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
> >>>> +
> >>>> + Unless required by applicable law or agreed to in writing, software
> >>>> + distributed under the License is distributed on an "AS IS" BASIS,
> >>>> + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
> >> implied.
> >>>> + See the License for the specific language governing permissions and
> >>>> + limitations under the License.
> >>>> +
> >>>> +--><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="
> >> http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="
> >> http://maven.apache.org/POM/4.0.0
> >> http://maven.apache.org/xsd/maven-4.0.0.xsd">
> >>>> + <modelVersion>4.0.0</modelVersion>
> >>>> +
> >>>> + <parent>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>projects</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + </parent>
> >>>> +
> >>>> + <artifactId>ExternsJS</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <packaging>swc</packaging>
> >>>> +
> >>>> + <name>Apache Royale: Framework: Libs: ExternsJS</name>
> >>>> +
> >>>> + <build>
> >>>> + <sourceDirectory>src/main/royale</sourceDirectory>
> >>>> + <plugins>
> >>>> + <plugin>
> >>>> + <groupId>org.apache.royale.compiler</groupId>
> >>>> + <artifactId>royale-maven-plugin</artifactId>
> >>>> + <version>${project.royale.compiler.version}</version>
> >>>> + <extensions>true</extensions>
> >>>> + <configuration>
> >>>> + <namespaces>
> >>>> + <namespace>
> >>>> + <uri>library://ns.apache.org/royale/externsjs</uri>
> >>>> +
> >>
> <manifest>${project.basedir}/src/main/resources/externsjs-manifest.xml</manifest>
> >>>> + </namespace>
> >>>> + <namespace>
> >>>> + <type>as</type>
> >>>> + <uri>library://ns.apache.org/royale/externsjs</uri>
> >>>> +
> >>
> <manifest>${project.basedir}/src/main/resources/externsjs-as-manifest.xml</manifest>
> >>>> + </namespace>
> >>>> + </namespaces>
> >>>> + <includeClasses>
> >>>> + <includeClass>ExternsJSClasses</includeClass>
> >>>> + </includeClasses>
> >>>> + <includeFiles>
> >>>> + <include-file>
> >>>> + <name>defaults.css</name>
> >>>> + <path>../src/main/resources/defaults.css</path>
> >>>> + </include-file>
> >>>> + </includeFiles>
> >>>> + <includeLookupOnly>true</includeLookupOnly>
> >>>> + <allowSubclassOverrides>true</allowSubclassOverrides>
> >>>> + <skipExtern>true</skipExtern>
> >>>> + <skipAS>${royale.skipAS}</skipAS>
> >>>> + <!-- <additionalCompilerOptions>
> >>>> + -source-map=true;
> >>>> +
> >> -source-map-source-root=/frameworks/projects/ExternsJS/src/main/royale/
> >>>> + </additionalCompilerOptions> -->
> >>>> + </configuration>
> >>>> + </plugin>
> >>>> + <plugin>
> >>>> + <groupId>nl.geodienstencentrum.maven</groupId>
> >>>> + <artifactId>sass-maven-plugin</artifactId>
> >>>> + <configuration>
> >>>> + <resources>
> >>>> + <resource>
> >>>> + <source>
> >>>> +
> >>
> <directory>${basedir}/src/main/resources/externsjs/inspiretree</directory>
> >>>> + <includes>
> >>>> + <include>**/*.sass</include>
> >>>> + </includes>
> >>>> + </source>
> >>>> +
> >>
> <destination>${basedir}/src/main/resources/externsjs/inspiretree</destination>
> >>>> + </resource>
> >>>> + </resources>
> >>>> + </configuration>
> >>>> + <executions>
> >>>> + <execution>
> >>>> + <id>generate-css-using-sass</id>
> >>>> + <goals>
> >>>> + <goal>update-stylesheets</goal>
> >>>> + </goals>
> >>>> + <phase>generate-resources</phase>
> >>>> + </execution>
> >>>> + </executions>
> >>>> + </plugin>
> >>>> + <plugin>
> >>>> + <groupId>com.google.code.maven-replacer-plugin</groupId>
> >>>> + <artifactId>replacer</artifactId>
> >>>> + <version>1.5.3</version>
> >>>> + <executions>
> >>>> + <execution>
> >>>> + <phase>generate-resources</phase>
> >>>> + <goals>
> >>>> + <goal>replace</goal>
> >>>> + </goals>
> >>>> + </execution>
> >>>> + </executions>
> >>>> + <configuration>
> >>>> + <includes>
> >>>> + <include>${basedir}/src/main/resources/**/*.css</include>
> >>>> + </includes>
> >>>> + <regex>false</regex>
> >>>> + <replacements>
> >>>> + <replacement>
> >>>> + <token>@@ZERO_WIDTH_SPACE</token>
> >>>> + <value>\200b</value>
> >>>> + </replacement>
> >>>> + <replacement>
> >>>> + <token>@@NON_BREAKING_SPACE</token>
> >>>> + <value>\0a</value>
> >>>> + </replacement>
> >>>> + </replacements>
> >>>> + </configuration>
> >>>> + </plugin>
> >>>> + </plugins>
> >>>> + </build>
> >>>> +
> >>>> + <dependencies>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>Core</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>js</classifier>
> >>>> + </dependency>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>Binding</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>js</classifier>
> >>>> + </dependency>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>Graphics</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>js</classifier>
> >>>> + </dependency>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>Collections</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>js</classifier>
> >>>> + </dependency>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>HTML</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>js</classifier>
> >>>> + </dependency>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>Basic</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>js</classifier>
> >>>> + </dependency>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>Formatters</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>js</classifier>
> >>>> + </dependency>
> >>>> + </dependencies>
> >>>> +
> >>>> + <profiles>
> >>>> + <profile>
> >>>> + <id>platform-windows</id>
> >>>> + <activation>
> >>>> + <os>
> >>>> + <family>windows</family>
> >>>> + </os>
> >>>> + </activation>
> >>>> + <build>
> >>>> + <plugins>
> >>>> + <plugin>
> >>>> + <groupId>nl.geodienstencentrum.maven</groupId>
> >>>> + <artifactId>sass-maven-plugin</artifactId>
> >>>> + <executions>
> >>>> + <execution>
> >>>> + <id>generate-css-using-sass</id>
> >>>> + <goals>
> >>>> + <goal>update-stylesheets</goal>
> >>>> + </goals>
> >>>> + <phase>generate-resources</phase>
> >>>> + <configuration>
> >>>> + <sassOptions>
> >>>> + <!-- on windows it is typical to have
> >> autoCRLF=true,
> >>>> + so we don't want to overwrite
> >>>> + the CRLF newlines with unix newlines (which is
> >> true by default)
> >>>> + locally, because that will change git status of
> >> the css file
> >>>> + on windows
> >>>> + -->
> >>>> + <unix_newlines>false</unix_newlines>
> >>>> + </sassOptions>
> >>>> + </configuration>
> >>>> + </execution>
> >>>> + </executions>
> >>>> + </plugin>
> >>>> + </plugins>
> >>>> + </build>
> >>>> + </profile>
> >>>> + <profile>
> >>>> + <id>option-with-swf</id>
> >>>> + <dependencies>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>Core</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>swf</classifier>
> >>>> + </dependency>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>Binding</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>swf</classifier>
> >>>> + </dependency>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>Graphics</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>swf</classifier>
> >>>> + </dependency>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>Collections</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>swf</classifier>
> >>>> + </dependency>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>HTML</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>swf</classifier>
> >>>> + </dependency>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>Basic</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>swf</classifier>
> >>>> + </dependency>
> >>>> + <dependency>
> >>>> + <groupId>org.apache.royale.framework</groupId>
> >>>> + <artifactId>Formatters</artifactId>
> >>>> + <version>0.9.9-SNAPSHOT</version>
> >>>> + <type>swc</type>
> >>>> + <classifier>swf</classifier>
> >>>> + </dependency>
> >>>> + </dependencies>
> >>>> + </profile>
> >>>> + </profiles>
> >>>> +
> >>>> +<properties /></project>
> >>>> diff --git
> >> a/frameworks/projects/ExternsJS/src/main/config/compile-swf-config.xml
> >> b/frameworks/projects/ExternsJS/src/main/config/compile-swf-config.xml
> >>>> new file mode 100644
> >>>> index 0000000..8981130
> >>>> --- /dev/null
> >>>> +++
> >> b/frameworks/projects/ExternsJS/src/main/config/compile-swf-config.xml
> >>>> @@ -0,0 +1,112 @@
> >>>> +<!--
> >>>> +
> >>>> + Licensed to the Apache Software Foundation (ASF) under one or more
> >>>> + contributor license agreements. See the NOTICE file distributed
> with
> >>>> + this work for additional information regarding copyright ownership.
> >>>> + The ASF licenses this file to You 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
> >>>> +
> >>>> + Unless required by applicable law or agreed to in writing, software
> >>>> + distributed under the License is distributed on an "AS IS" BASIS,
> >>>> + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
> >> implied.
> >>>> + See the License for the specific language governing permissions and
> >>>> + limitations under the License.
> >>>> +
> >>>> +-->
> >>>> +<royale-config>
> >>>> +
> >>>> + <compiler>
> >>>> + <accessible>false</accessible>
> >>>> +
> >>>> + <!-- build both SWF and JS. -->
> >>>> + <targets>
> >>>> + <target>JSRoyale</target>
> >>>> + </targets>
> >>>> + <strict-xml>true</strict-xml>
> >>>> +
> >>>> + <external-library-path>
> >>>> +
> >>
> <path-element>${env.AIR_HOME}/frameworks/libs/air/airglobal.swc</path-element>
> >>>> +
> >> <path-element>../../../../../libs/Binding.swc</path-element>
> >>>> + <path-element>../../../../../libs/Core.swc</path-element>
> >>>> +
> >> <path-element>../../../../../libs/Graphics.swc</path-element>
> >>>> +
> <path-element>../../../../../libs/Basic.swc</path-element>
> >>>> +
> >> <path-element>../../../../../libs/Collections.swc</path-element>
> >>>> + <path-element>../../../../../libs/HTML.swc</path-element>
> >>>> +
> >> <path-element>../../../../../libs/Formatters.swc</path-element>
> >>>> + </external-library-path>
> >>>> +
> >>>> + <allow-subclass-overrides>true</allow-subclass-overrides>
> >>>> + <mxml>
> >>>> + <children-as-data>true</children-as-data>
> >>>> + <imports>
> >>>> +
> >> <implicit-import>org.apache.royale.events.*</implicit-import>
> >>>> +
> >> <implicit-import>org.apache.royale.geom.*</implicit-import>
> >>>> +
> >> <implicit-import>org.apache.royale.core.ClassFactory</implicit-import>
> >>>> +
> >> <implicit-import>org.apache.royale.core.IFactory</implicit-import>
> >>>> + </imports>
> >>>> + </mxml>
> >>>> +
> >>
> <binding-value-change-event>org.apache.royale.events.ValueChangeEvent</binding-value-change-event>
> >>>> +
> >>
> <binding-value-change-event-kind>org.apache.royale.events.ValueChangeEvent</binding-value-change-event-kind>
> >>>> +
> >>
> <binding-value-change-event-type>valueChange</binding-value-change-event-type>
> >>>> +
> >>>> + <define>
> >>>> + <name>COMPILE::SWF</name>
> >>>> + <value>true</value>
> >>>> + </define>
> >>>> + <define>
> >>>> + <name>COMPILE::JS</name>
> >>>> + <value>false</value>
> >>>> + </define>
> >>>> +
> >>>> + <keep-as3-metadata>
> >>>> + <name>Bindable</name>
> >>>> + <name>Managed</name>
> >>>> + <name>ChangeEvent</name>
> >>>> + <name>NonCommittingChangeEvent</name>
> >>>> + <name>Transient</name>
> >>>> + </keep-as3-metadata>
> >>>> +
> >>>> + <locale/>
> >>>> +
> >>>> + <library-path/>
> >>>> +
> >>>> + <namespaces>
> >>>> + <namespace>
> >>>> + <uri>library://ns.apache.org/royale/externsjs</uri>
> >>>> +
> >> <manifest>../resources/externsjs-manifest.xml</manifest>
> >>>> + </namespace>
> >>>> + <namespace>
> >>>> + <uri>library://ns.apache.org/royale/externsjs</uri>
> >>>> +
> >> <manifest>../resources/externsjs-as-manifest.xml</manifest>
> >>>> + </namespace>
> >>>> + </namespaces>
> >>>> +
> >>>> + <source-path>
> >>>> + <path-element>../royale</path-element>
> >>>> + </source-path>
> >>>> +
> >>>> + <warn-no-constructor>false</warn-no-constructor>
> >>>> + </compiler>
> >>>> +
> >>>> + <include-file>
> >>>> + <name>defaults.css</name>
> >>>> + <path>../resources/defaults.css</path>
> >>>> + </include-file>
> >>>> +
> >>>> + <include-lookup-only>true</include-lookup-only>
> >>>> +
> >>>> + <include-classes>
> >>>> + <class>ExternsJSClasses</class>
> >>>> + </include-classes>
> >>>> +
> >>>> + <include-namespaces>
> >>>> + <uri>library://ns.apache.org/royale/externsjs</uri>
> >>>> + </include-namespaces>
> >>>> +
> >>>> + <target-player>${playerglobal.version}</target-player>
> >>>> +
> >>>> +
> >>>> +</royale-config>
> >>>> diff --git
> >> a/frameworks/projects/ExternsJS/src/main/resources/defaults.css
> >> b/frameworks/projects/ExternsJS/src/main/resources/defaults.css
> >>>> new file mode 100644
> >>>> index 0000000..c8dab5d
> >>>> --- /dev/null
> >>>> +++ b/frameworks/projects/ExternsJS/src/main/resources/defaults.css
> >>>> @@ -0,0 +1,3255 @@
> >>>> +/**
> >>>> + * Licensed to the Apache Software Foundation (ASF) under one or
> more
> >>>> + * contributor license agreements. See the NOTICE file distributed
> >> with
> >>>> + * this work for additional information regarding copyright
> ownership.
> >>>> + * The ASF licenses this file to You 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
> >>>> + *
> >>>> + * Unless required by applicable law or agreed to in writing,
> software
> >>>> + * distributed under the License is distributed on an "AS IS" BASIS,
> >>>> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
> >> implied.
> >>>> + * See the License for the specific language governing permissions
> and
> >>>> + * limitations under the License.
> >>>> + */
> >>>> +@namespace j "library://ns.apache.org/royale/externsjs";
> >>>> +@namespace "http://www.w3.org/1999/xhtml";
> >>>> +*, :after, :before {
> >>>> + box-sizing: border-box; }
> >>>> +
> >>>> +html, body {
> >>>> + height: 100%; }
> >>>> +
> >>>> +::-moz-focus-inner, ::-moz-focus-outer {
> >>>> + border: 0; }
> >>>> +
> >>>> +input:focus, textarea:focus, select:focus, div:focus, label:focus,
> >> nav:focus, li:focus, a:focus {
> >>>> + outline: none; }
> >>>> +
> >>>> +select::-ms-expand {
> >>>> + display: none; }
> >>>> +
> >>>> +button::-moz-focus-inner {
> >>>> + padding: 0; }
> >>>> +
> >>>> +button, input, textarea {
> >>>> + font-size: 100%; }
> >>>> +
> >>>> +.cursor-pointer {
> >>>> + cursor: pointer !important; }
> >>>> +
> >>>> +j|View {
> >>>> + IBeadView:
> ClassReference("org.apache.royale.html.beads.GroupView");
> >>>> + IBeadLayout:
> >> ClassReference("org.apache.royale.externsjs.beads.layouts.ViewLayout");
> }
> >>>> +
> >>>> +.responsive-view {
> >>>> + display: inline-flex;
> >>>> + width: 100%;
> >>>> + height: 100%; }
> >>>> +
> >>>> +j|Group {
> >>>> + IBeadLayout:
> >> ClassReference("org.apache.royale.externsjs.beads.layouts.BasicLayout");
> >>>> + IBeadView:
> ClassReference("org.apache.royale.html.beads.GroupView");
> >> }
> >>>> +
> >>>> +.externsjs.group {
> >>>> + overflow: visible; }
> >>>> +
> >>>> +j|HGroup {
> >>>> + IBeadLayout:
> >>
> ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
> >> }
> >>>> +
> >>>> +j|VGroup {
> >>>> + IBeadLayout:
> >>
> ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout");
> >> }
> >>>> +
> >>>> +j|Grid {
> >>>> + IBeadLayout:
> >> ClassReference("org.apache.royale.externsjs.beads.layouts.GridLayout");
> }
> >>>> +
> >>>> +j|ScrollableGrid {
> >>>> + IViewport:
> >>
> ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport");
> >> }
> >>>> +
> >>>> +j|GridCell {
> >>>> + IBeadLayout:
> >>
> ClassReference("org.apache.royale.externsjs.beads.layouts.GridCellLayout");
> >> }
> >>>> +
> >>>> +j|Container {
> >>>> + IBeadView:
> >> ClassReference("org.apache.royale.html.beads.ContainerView");
> >>>> + IBeadLayout:
> >> ClassReference("org.apache.royale.externsjs.beads.layouts.BasicLayout");
> >>>> + IViewport:
> >> ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
> >>>> +
> >>>> +j|HContainer {
> >>>> + IBeadLayout:
> >>
> ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
> >> }
> >>>> +
> >>>> +j|VContainer {
> >>>> + IBeadLayout:
> >>
> ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout");
> >> }
> >>>> +
> >>>> +j|Image {
> >>>> + IBeadModel:
> >> ClassReference("org.apache.royale.externsjs.beads.models.ImageModel");
> >>>> + IBeadView:
> >> ClassReference("org.apache.royale.externsjs.beads.views.ImageView"); }
> >>>> +
> >>>> +j|BinaryImage {
> >>>> + IBeadModel:
> >> ClassReference("org.apache.royale.html.beads.models.BinaryImageModel");
> >>>> + IBeadView:
> >> ClassReference("org.apache.royale.externsjs.beads.views.ImageView");
> >>>> + IBinaryImageLoader:
> >> ClassReference("org.apache.royale.html.beads.BinaryImageLoader"); }
> >>>> +
> >>>> +j|DataContainer {
> >>>> + IBeadModel:
> >>
> ClassReference("org.apache.royale.externsjs.beads.models.DataProviderModel");
> >>>> + IBeadView:
> >> ClassReference("org.apache.royale.html.beads.DataContainerView");
> >>>> + IBeadLayout:
> >>
> ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout");
> >>>> + IDataProviderItemRendererMapper:
> >>
> ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForCollectionView");
> >>>> + IItemRendererClassFactory:
> >> ClassReference("org.apache.royale.core.ItemRendererClassFactory");
> >>>> + IItemRenderer:
> >>
> ClassReference("org.apache.royale.externsjs.itemRenderers.StringItemRenderer");
> >>>> + IItemRendererInitializer:
> >>
> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DataContainerItemRendererInitializer");
> >>>> + IViewport:
> >> ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
> >>>> +
> >>>> +j|Validator {
> >>>> + ILocalizedValuesImpl:
> >> ClassReference("org.apache.royale.core.SimpleLocalizedValuesImpl"); }
> >>>> +
> >>>> +j|Form {
> >>>> + IBeadLayout:
> >> ClassReference("org.apache.royale.externsjs.beads.layouts.FormLayout");
> }
> >>>> +
> >>>> +@media -royale-swf {
> >>>> + j|Container {
> >>>> + IContentView:
> >>
> ClassReference("org.apache.royale.html.supportClasses.ContainerContentArea");
> >> } }
> >>>> +hr {
> >>>> + border: 0;
> >>>> + height: 1px; }
> >>>> +
> >>>> +.responsiveSizeMonitor {
> >>>> + background: rgba(0, 0, 0, 0.8);
> >>>> + color: white;
> >>>> + padding: 10px;
> >>>> + position: fixed;
> >>>> + bottom: 0;
> >>>> + right: 0;
> >>>> + width: 250px; }
> >>>> + .responsiveSizeMonitor strong {
> >>>> + color: yellow; }
> >>>> +
> >>>> +.externsjs.alert {
> >>>> + position: fixed;
> >>>> + top: 50%;
> >>>> + left: 50%;
> >>>> + min-width: 350px;
> >>>> + min-height: 200px; }
> >>>> + .externsjs.alert .externsjs.titlebar {
> >>>> + height: 50px; }
> >>>> + .externsjs.alert .content {
> >>>> + position: absolute;
> >>>> + top: 50px;
> >>>> + bottom: 50px;
> >>>> + width: 100%;
> >>>> + overflow-y: auto; }
> >>>> + .externsjs.alert .content .externsjs.label {
> >>>> + white-space: normal; }
> >>>> + .externsjs.alert .externsjs.controlbar {
> >>>> + bottom: 0;
> >>>> + height: 50px; }
> >>>> +
> >>>> +@media all and (-ms-high-contrast: none) {
> >>>> + .externsjs.alert {
> >>>> + display: table; } }
> >>>> +@media (min-width: 768px) {
> >>>> + .externsjs.alert {
> >>>> + min-width: 450px; } }
> >>>> +j|Alert {
> >>>> + IBeadLayout:
> >> ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout");
> >>>> + IBeadModel:
> >> ClassReference("org.apache.royale.externsjs.beads.models.AlertModel");
> >>>> + IBeadController:
> >>
> ClassReference("org.apache.royale.externsjs.beads.controllers.AlertController");
> >>>> + IBeadView:
> >> ClassReference("org.apache.royale.externsjs.beads.views.AlertView"); }
> >>>> +
> >>>> +.externsjs.badge {
> >>>> + z-index: 2;
> >>>> + position: absolute;
> >>>> + top: -1em;
> >>>> + right: -1em;
> >>>> + text-transform: initial;
> >>>> + padding: 0.5em;
> >>>> + min-width: 2.1em; }
> >>>> + .externsjs.badge.overlap {
> >>>> + top: 0em;
> >>>> + right: 0em; }
> >>>> + .externsjs.badge.subindex {
> >>>> + top: auto;
> >>>> + bottom: -1em; }
> >>>> + .externsjs.badge.subindex.overlap {
> >>>> + top: auto;
> >>>> + bottom: 0em; }
> >>>> + .externsjs.badge.preindex {
> >>>> + left: -1em;
> >>>> + right: auto; }
> >>>> + .externsjs.badge.preindex.overlap {
> >>>> + left: 0em;
> >>>> + right: auto; }
> >>>> +
> >>>> +.externsjs.button {
> >>>> + cursor: pointer;
> >>>> + user-select: none;
> >>>> + display: inline-flex;
> >>>> + position: relative;
> >>>> + align-items: center;
> >>>> + justify-content: center;
> >>>> + vertical-align: middle;
> >>>> + overflow: hidden;
> >>>> + outline: none;
> >>>> + white-space: nowrap;
> >>>> + line-height: normal !important;
> >>>> + text-align: center;
> >>>> + text-decoration: none; }
> >>>> + .externsjs.button[disabled] {
> >>>> + cursor: default; }
> >>>> + .externsjs.button.multiline {
> >>>> + white-space: pre-wrap; }
> >>>> + .externsjs.button .fonticon {
> >>>> + cursor: inherit; }
> >>>> + .externsjs.button.viewport {
> >>>> + overflow: visible; }
> >>>> +
> >>>> +@media -royale-swf {
> >>>> + j|Button {
> >>>> + IBeadModel:
> >> ClassReference("org.apache.royale.externsjs.beads.models.TextModel");
> >>>> + IBeadView:
> >> ClassReference("org.apache.royale.externsjs.beads.views.ButtonView"); }
> }
> >>>> +.externsjs.buttonbar .externsjs.button, .externsjs.buttonbar
> >> .externsjs.togglebutton {
> >>>> + border-radius: 0; }
> >>>> + .externsjs.buttonbar .externsjs.button.first, .externsjs.buttonbar
> >> .externsjs.togglebutton.first {
> >>>> + border-top-left-radius: 0.25rem;
> >>>> + border-bottom-left-radius: 0.25rem; }
> >>>> + .externsjs.buttonbar .externsjs.button.last, .externsjs.buttonbar
> >> .externsjs.togglebutton.last {
> >>>> + border-top-right-radius: 0.25rem;
> >>>> + border-bottom-right-radius: 0.25rem; }
> >>>> +
> >>>> +j|ButtonBar {
> >>>> + IBeadModel:
> >>
> ClassReference("org.apache.royale.externsjs.beads.models.ButtonBarModel");
> >>>> + IBeadView:
> >> ClassReference("org.apache.royale.externsjs.beads.views.ButtonBarView");
> >>>> + IBeadController:
> >>
> ClassReference("org.apache.royale.externsjs.beads.controllers.ListSingleSelectionMouseController");
> >>>> + IBeadLayout:
> >>
> ClassReference("org.apache.royale.externsjs.beads.layouts.ButtonBarLayout");
> >>>> + IDataProviderItemRendererMapper:
> >>
> ClassReference("org.apache.royale.html.beads.SelectionDataItemRendererFactoryForCollectionView");
> >>>> + IItemRendererClassFactory:
> >> ClassReference("org.apache.royale.core.ItemRendererClassFactory");
> >>>> + IItemRenderer:
> >>
> ClassReference("org.apache.royale.externsjs.itemRenderers.ButtonBarItemRenderer");
> >>>> + IItemRendererInitializer:
> >>
> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ButtonBarItemRendererInitializer");
> >> }
> >>>> +
> >>>> +@media -royale-swf {
> >>>> + j|ButtonBar {
> >>>> + IContentView:
> >>
> ClassReference("org.apache.royale.externsjs.supportClasses.list.DataGroup");
> >> } }
> >>>> +j|IconButtonBar {
> >>>> + IItemRenderer:
> >>
> ClassReference("org.apache.royale.externsjs.itemRenderers.IconButtonBarItemRenderer");
> >> }
> >>>> +
> >>>> +.externsjs.buttonbar.toggle-on-click
> .externsjs.togglebutton.selected {
> >>>> + pointer-events: none; }
> >>>> +
> >>>> +j|ToggleButtonBar {
> >>>> + IBeadView:
> >>
> ClassReference("org.apache.royale.externsjs.beads.views.ToggleButtonBarView");
> >>>> + IBeadController:
> >>
> ClassReference("org.apache.royale.externsjs.beads.controllers.ToggleButtonBarSelectionMouseController");
> >>>> + IItemRenderer:
> >>
> ClassReference("org.apache.royale.externsjs.itemRenderers.ToggleButtonBarItemRenderer");
> >> }
> >>>> +
> >>>> +.externsjs.card {
> >>>> + min-width: 120px;
> >>>> + min-height: 52px;
> >>>> + position: relative; }
> >>>> + .externsjs.card .card-header {
> >>>> + width: 100%; }
> >>>> + .externsjs.card .card-header .card-title {
> >>>> + flex: 1 1 auto;
> >>>> + overflow: hidden;
> >>>> + text-decoration: inherit;
> >>>> + text-overflow: ellipsis;
> >>>> + text-transform: inherit;
> >>>> + z-index: 1; }
> >>>> + .externsjs.card .card-expanded-content {
> >>>> + width: 100%; }
> >>>> + .externsjs.card .card-primary-content {
> >>>> + width: 100%;
> >>>> + min-height: 152px;
> >>>> + position: relative;
> >>>> + outline: none;
> >>>> + color: inherit;
> >>>> + text-decoration: none;
> >>>> + flex: 1 1 auto; }
> >>>> + .externsjs.card .card-actions {
> >>>> + width: 100%;
> >>>> + position: relative;
> >>>> + outline: none;
> >>>> + color: inherit;
> >>>> + text-decoration: none; }
> >>>> +
> >>>> +.externsjs.checkbox {
> >>>> + display: inline-flex;
> >>>> + position: relative;
> >>>> + margin: 0;
> >>>> + padding: 0;
> >>>> + height: auto; }
> >>>> + .externsjs.checkbox input {
> >>>> + -webkit-appearance: none;
> >>>> + -moz-appearance: none;
> >>>> + -o-appearance: none;
> >>>> + -ms-appearance: none;
> >>>> + appearance: none;
> >>>> + display: inline-flex;
> >>>> + margin: 0;
> >>>> + padding: 0;
> >>>> + width: 24px;
> >>>> + height: 24px;
> >>>> + opacity: 0; }
> >>>> + .externsjs.checkbox input + span::before {
> >>>> + content: " ";
> >>>> + position: absolute;
> >>>> + left: 0px;
> >>>> + top: 0px;
> >>>> + width: 22px;
> >>>> + height: 22px; }
> >>>> + .externsjs.checkbox input + span::after {
> >>>> + content: " ";
> >>>> + position: absolute;
> >>>> + width: 22px;
> >>>> + height: 22px;
> >>>> + left: 0px;
> >>>> + top: 0px;
> >>>> + opacity: 0; }
> >>>> + .externsjs.checkbox input:checked + span::after,
> >> .externsjs.checkbox input:checked:active + span::after {
> >>>> + opacity: 1; }
> >>>> + .externsjs.checkbox input:focus + span::before,
> >> .externsjs.checkbox input:checked:focus + span::before,
> .externsjs.checkbox
> >> input:checked:active:focus + span::before {
> >>>> + outline: none; }
> >>>> + .externsjs.checkbox input[disabled] + span {
> >>>> + cursor: unset; }
> >>>> + .externsjs.checkbox span {
> >>>> + cursor: pointer;
> >>>> + margin: auto;
> >>>> + width: inherit; }
> >>>> +
> >>>> +.externsjs.switch {
> >>>> + display: inline-flex;
> >>>> + position: relative;
> >>>> + height: auto; }
> >>>> + .externsjs.switch input {
> >>>> + -webkit-appearance: none;
> >>>> + -moz-appearance: none;
> >>>> + -o-appearance: none;
> >>>> + -ms-appearance: none;
> >>>> + appearance: none;
> >>>> + display: inline-flex;
> >>>> + opacity: 0;
> >>>> + width: 44px;
> >>>> + height: 24px;
> >>>> + margin: 0;
> >>>> + padding: 0; }
> >>>> + .externsjs.switch input[disabled] + span {
> >>>> + cursor: unset; }
> >>>> + .externsjs.switch .switch {
> >>>> + position: absolute;
> >>>> + cursor: pointer;
> >>>> + top: 0;
> >>>> + left: 0;
> >>>> + right: 0;
> >>>> + bottom: 0;
> >>>> + width: 44px;
> >>>> + height: 24px; }
> >>>> + .externsjs.switch .switch::before {
> >>>> + position: absolute;
> >>>> + content: "";
> >>>> + height: 20px;
> >>>> + width: 20px;
> >>>> + left: 2px;
> >>>> + bottom: 2px; }
> >>>> + .externsjs.switch .label {
> >>>> + cursor: pointer;
> >>>> + margin: auto;
> >>>> + width: inherit; }
> >>>> +
> >>>> +.externsjs.combobox {
> >>>> + display: inline-flex; }
> >>>> + .externsjs.combobox .externsjs.textinput {
> >>>> + display: block; }
> >>>> + .externsjs.combobox .externsjs.button::before {
> >>>> + margin: 0;
> >>>> + padding: 0; }
> >>>> + .externsjs.combobox .externsjs.button::after {
> >>>> + content: " ";
> >>>> + position: absolute; }
> >>>> +
> >>>> +j|ComboBox {
> >>>> + IBeadModel:
> >>
> ClassReference("org.apache.royale.externsjs.beads.models.ComboBoxModel");
> >>>> + IBeadView:
> >> ClassReference("org.apache.royale.externsjs.beads.views.ComboBoxView");
> >>>> + IBeadController:
> >>
> ClassReference("org.apache.royale.externsjs.beads.controllers.ComboBoxController");
> >>>> + IPopUp:
> >>
> ClassReference("org.apache.royale.externsjs.supportClasses.combobox.ComboBoxPopUp");
> >> }
> >>>> +
> >>>> +.combobox-popup {
> >>>> + position: fixed;
> >>>> + pointer-events: none;
> >>>> + bottom: 0;
> >>>> + left: 0;
> >>>> + width: 100%;
> >>>> + height: 100%;
> >>>> + overflow: hidden;
> >>>> + contain: strict;
> >>>> + z-index: 60;
> >>>> + color: rgba(0, 0, 0, 0.8); }
> >>>> + .combobox-popup::before {
> >>>> + position: absolute;
> >>>> + display: block;
> >>>> + top: 0;
> >>>> + left: 0;
> >>>> + width: 100%;
> >>>> + height: 100%;
> >>>> + content: "";
> >>>> + opacity: 0;
> >>>> + background-color: rgba(0, 0, 0, 0.65);
> >>>> + will-change: opacity;
> >>>> + transition: opacity 0.4s 0ms; }
> >>>> + .combobox-popup .externsjs.list {
> >>>> + position: relative;
> >>>> + transform: translate(-50%, 100%);
> >>>> + transition: none;
> >>>> + will-change: transform, opacity;
> >>>> + bottom: auto;
> >>>> + top: calc(100% - 10px);
> >>>> + left: 50%;
> >>>> + box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7) !important;
> >>>> + opacity: 0; }
> >>>> + .combobox-popup.open {
> >>>> + pointer-events: auto; }
> >>>> + .combobox-popup.open::before {
> >>>> + opacity: 1; }
> >>>> + .combobox-popup.open .externsjs.list {
> >>>> + transform: translate(-50%, -100%);
> >>>> + transition: transform 0.3s 0ms, opacity 0.3s 0ms;
> >>>> + opacity: 1; }
> >>>> +
> >>>> +@media (max-width: 767px) {
> >>>> + .combobox-popup .externsjs.list {
> >>>> + width: 98% !important;
> >>>> + max-height: 240px !important; }
> >>>> + .combobox-popup .externsjs.list .externsjs.item {
> >>>> + min-height: 48px !important; } }
> >>>> +@media (min-width: 767px) {
> >>>> + .combobox-popup::before {
> >>>> + background-color: rgba(0, 0, 0, 0); }
> >>>> + .combobox-popup .externsjs.list {
> >>>> + transform: none;
> >>>> + transition: none;
> >>>> + box-shadow: none !important; }
> >>>> + .combobox-popup .externsjs.list .externsjs.item {
> >>>> + overflow: hidden;
> >>>> + transition: height 200ms ease-in; }
> >>>> + .combobox-popup.open .externsjs.list {
> >>>> + transform: none;
> >>>> + top: auto;
> >>>> + left: auto; } }
> >>>> +j|ComboBoxPopUp {
> >>>> + IBeadView:
> >>
> ClassReference("org.apache.royale.externsjs.beads.views.ComboBoxPopUpView");
> >> }
> >>>> +
> >>>> +j|VirtualComboBox {
> >>>> + IPopUp:
> >>
> ClassReference("org.apache.royale.externsjs.supportClasses.combobox.VirtualComboBoxPopUp");
> >> }
> >>>> +
> >>>> +j|VirtualComboBoxPopUp {
> >>>> + IBeadView:
> >>
> ClassReference("org.apache.royale.externsjs.beads.views.VirtualComboBoxPopUpView");
> >> }
> >>>> +
> >>>> +.externsjs.datagrid {
> >>>> + display: flex;
> >>>> + flex-direction: column;
> >>>> + position: relative;
> >>>> + overflow: auto; }
> >>>> + .externsjs.datagrid .externsjs.buttonbar.header {
> >>>> + width: 100%;
> >>>> + flex: 0 0 auto; }
> >>>> + .externsjs.datagrid .externsjs.buttonbar.header
> .externsjs.button {
> >>>> + width: 100%; }
> >>>> + .externsjs.datagrid .listarea {
> >>>> + width: 100%;
> >>>> + flex: 1 1 auto; }
> >>>> + .externsjs.datagrid .externsjs.list.column {
> >>>> + padding-left: 0;
> >>>> + padding-right: 0;
> >>>> + position: relative;
> >>>> + min-height: 100%; }
> >>>> + .externsjs.datagrid .externsjs.list.column
> >> .externsjs.item.datagrid {
> >>>> + width: 100%; }
> >>>> + .externsjs.datagrid span:empty:before {
> >>>> + content: "\200b"; }
> >>>> +
> >>>> +j|DataGrid {
> >>>> + IBeadView:
> >> ClassReference("org.apache.royale.externsjs.beads.views.DataGridView");
> >>>> + IBeadModel:
> >>
> ClassReference("org.apache.royale.html.beads.models.DataGridCollectionViewModel");
> >>>> + IBeadLayout:
> >>
> ClassReference("org.apache.royale.externsjs.beads.layouts.DataGridLayout");
> >>>> + headerClass:
> >>
> ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.DataGridButtonBar");
> >>>> + headerLayoutClass:
> >>
> ClassReference("org.apache.royale.externsjs.beads.layouts.DataGridColumnLayout");
> >>>> + listAreaClass:
> >>
> ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.DataGridListArea");
> >>>> + columnClass:
> >>
> ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.DataGridColumnList");
> >> }
> >>>> +
> >>>> +j|DataGridListArea {
> >>>> + IBeadView:
> >> ClassReference("org.apache.royale.html.beads.ContainerView");
> >>>> + IBeadLayout:
> >>
> ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
> >>>> + IViewport:
> >>
> ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport");
> >> }
> >>>> +
> >>>> +j|DataGridColumnList {
> >>>> + IItemRendererClassFactory:
> >>
> ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
> >>>> + IItemRenderer:
> >>
> ClassReference("org.apache.royale.externsjs.itemRenderers.DataGridItemRenderer");
> >>>> + IItemRendererInitializer:
> >>
> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DataGridColumnListItemRendererInitializer");
> >>>> + ISelectableItemRenderer:
> >>
> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ClassSelectorListSelectableItemRendererBead");
> >>>> + IViewport:
> >> ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
> >>>> +
> >>>> +j|DataGridButtonBar {
> >>>> + IItemRenderer:
> >>
> ClassReference("org.apache.royale.externsjs.itemRenderers.DatagridHeaderRenderer");
> >> }
> >>>> +
> >>>> +j|VirtualDataGrid {
> >>>> + IBeadView:
> >>
> ClassReference("org.apache.royale.externsjs.beads.views.VirtualDataGridView");
> >>>> + columnClass:
> >>
> ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.VirtualDataGridColumnList");
> >> }
> >>>> +
> >>>> +j|VirtualDataGridListArea {
> >>>> + IBeadView:
> >> ClassReference("org.apache.royale.html.beads.ContainerView");
> >>>> + IBeadLayout:
> >>
> ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
> >>>> + listAreaClass:
> >>
> ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.VirtualDataGrid");
> >>>> + IViewport:
> >> ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
> >>>> +
> >>>> +j|VirtualDataGridColumnList {
> >>>> + IBeadLayout:
> >>
> ClassReference("org.apache.royale.externsjs.beads.layouts.VirtualDataGridListAreaLayout");
> >>>> + IItemRendererClassFactory:
> >>
> ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
> >>>> + IItemRenderer:
> >>
> ClassReference("org.apache.royale.externsjs.itemRenderers.DataGridItemRenderer");
> >>>> + IItemRendererInitializer:
> >>
> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DataGridColumnListItemRendererInitializer");
> >>>> + ISelectableItemRenderer:
> >>
> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ClassSelectorListSelectableItemRendererBead");
> >>>> + IViewport:
> >>
> ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport");
> >> }
> >>>> +
> >>>> +.externsjs.datechooser .externsjs.table {
> >>>> + min-width: 324px;
> >>>> + min-height: 364px; }
> >>>> + .externsjs.datechooser .externsjs.table .externsjs.tablecell {
> >>>> + height: auto; }
> >>>> + .externsjs.datechooser .externsjs.table
> >> .externsjs.tableheadercell.buttonsRow > .layout.horizontal {
> >>>> + float: right; }
> >>>> + .externsjs.datechooser .externsjs.table
> >> .externsjs.tableheadercell.buttonsRow .viewSelector::after {
> >>>> + content: " "; }
> >>>> + .externsjs.datechooser .externsjs.table
> >> .externsjs.tableheadercell.buttonsRow .previousButton::after,
> >> .externsjs.datechooser .externsjs.table
> >> .externsjs.tableheadercell.buttonsRow .nextButton::after {
> >>>> + content: " ";
> >>>> + position: absolute; }
> >>>> +
> >>>> +j|DateChooser {
> >>>> + IBeadModel:
> >>
> ClassReference("org.apache.royale.externsjs.beads.models.DateChooserModel");
> >>>> + IBeadView:
> >>
> ClassReference("org.apache.royale.externsjs.beads.views.DateChooserView");
> >>>> + IBeadLayout:
> >>
> ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout");
> >>>> + IBeadController:
> >>
> ClassReference("org.apache.royale.externsjs.beads.controllers.DateChooserMouseController");
> >> }
> >>>> +
> >>>> +.externsjs.datefield {
> >>>> + display: inline-flex; }
> >>>> + .externsjs.datefield .externsjs.textinput input {
> >>>> + width: 9.2em; }
> >>>> + .externsjs.datefield .externsjs.button::before {
> >>>> + margin: 0;
> >>>> + padding: 0;
> >>>> + line-height: 22px; }
> >>>> + .externsjs.datefield .externsjs.button::after {
> >>>> + content: " ";
> >>>> + position: absolute;
> >>>> + width: 22px;
> >>>> + height: 22px;
> >>>> + left: calc(50% - 11px);
> >>>> + top: calc(50% - 11px); }
> >>>> +
> >>>> +.datechooser-popup {
> >>>> + position: fixed;
> >>>> + pointer-events: none;
> >>>> + bottom: 0;
> >>>> + left: 0;
> >>>> + width: 100%;
> >>>> + height: 100%;
> >>>> + overflow: hidden;
> >>>> + contain: strict;
> >>>> + z-index: 60;
> >>>> + color: rgba(0, 0, 0, 0.8); }
> >>>> + .datechooser-popup::before {
> >>>> + position: absolute;
> >>>> + display: block;
> >>>> + top: 0;
> >>>> + left: 0;
> >>>> + width: 100%;
> >>>> + height: 100%;
> >>>> + content: "";
> >>>> + opacity: 0;
> >>>> + background-color: rgba(0, 0, 0, 0.65);
> >>>> + will-change: opacity;
> >>>> + transition: opacity 0.4s 0ms; }
> >>>> + .datechooser-popup .externsjs.table {
> >>>> + position: relative;
> >>>> + transform: translate(-50%, 100%);
> >>>> + transition: none;
> >>>> + will-change: transform, opacity;
> >>>> + bottom: auto;
> >>>> + top: calc(100% - 10px);
> >>>> + left: 50%;
> >>>> + touch-action: none;
> >>>> + box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7) !important;
> >>>> + opacity: 0; }
> >>>> + .datechooser-popup.open {
> >>>> + pointer-events: auto; }
> >>>> + .datechooser-popup.open::before {
> >>>> + opacity: 1; }
> >>>> + .datechooser-popup.open .externsjs.table {
> >>>> + transform: translate(-50%, -100%);
> >>>> + transition: transform 0.4s 0ms, opacity 0.4s 0ms;
> >>>> + opacity: 1; }
> >>>> +
> >>>> +@media (max-width: 768px) {
> >>>> + .datechooser-popup .externsjs.table {
> >>>> + width: calc(100% - 20px); } }
> >>>> +@media (min-width: 768px) and (max-width: 992px) {
> >>>> + .datechooser-popup .externsjs.table {
> >>>> + width: calc(100% - 300px); } }
> >>>> +@media (min-width: 992px) {
> >>>> + .datechooser-popup::before {
> >>>> + background-color: rgba(0, 0, 0, 0); }
> >>>> + .datechooser-popup .externsjs.table {
> >>>> + transform: none;
> >>>> + transition: none;
> >>>> + box-shadow: none !important; }
> >>>> + .datechooser-popup .externsjs.table .externsjs.item {
> >>>> + height: 0;
> >>>> + overflow: hidden;
> >>>> + transition: height 200ms ease-in; }
> >>>> + .datechooser-popup.open .externsjs.table {
> >>>> + transform: none;
> >>>> + top: auto;
> >>>> + left: auto; }
> >>>> + .datechooser-popup.open .externsjs.table .externsjs.item {
> >>>> + height: 34px; } }
> >>>> +j|DateField {
> >>>> + IBeadView:
> >> ClassReference("org.apache.royale.externsjs.beads.views.DateFieldView");
> >>>> + IBeadModel:
> >>
> ClassReference("org.apache.royale.externsjs.beads.models.DateChooserModel");
> >>>> + IBeadController:
> >>
> ClassReference("org.apache.royale.externsjs.beads.controllers.DateFieldMouseController");
> >>>> + IFormatter:
> >>
> ClassReference("org.apache.royale.html.accessories.StringDateFormatter");
> >>>> + IPopUp: ClassReference("org.apache.royale.externsjs.DateChooser");
> }
> >>>> +
> >>>> +.externsjs.divider {
> >>>> + height: 0;
> >>>> + margin: 0; }
> >>>> +
> >>>> +j|Divider {
> >>>> + IBeadLayout:
> >> ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout");
> }
> >>>> +
> >>>> +.externsjs.drawer.float {
> >>>> + position: fixed;
> >>>> + pointer-events: none;
> >>>> + top: 0;
> >>>> + left: 0;
> >>>> + width: 100%;
> >>>> + height: 100%;
> >>>> + overflow: hidden;
> >>>> + contain: strict;
> >>>> + z-index: 100; }
> >>>> + .externsjs.drawer.float::before {
> >>>> + position: absolute;
> >>>> + display: block;
> >>>> + top: 0;
> >>>> + left: 0;
> >>>> + width: 100%;
> >>>> + height: 100%;
> >>>> + content: "";
> >>>> + opacity: 0; }
> >>>> + .externsjs.drawer.float .drawermain {
> >>>> + position: absolute;
> >>>> + display: flex;
> >>>> + flex-direction: column;
> >>>> + left: 0;
> >>>> + right: initial;
> >>>> + height: 100%; }
> >>>> + .externsjs.drawer.float.open {
> >>>> + pointer-events: auto; }
> >>>> + .externsjs.drawer.float.open::before {
> >>>> + opacity: 1; }
> >>>> +.externsjs.drawer.fixed {
> >>>> + width: 0; }
> >>>> + .externsjs.drawer.fixed .drawermain {
> >>>> + display: inline-flex;
> >>>> + flex-direction: column;
> >>>> + left: 0;
> >>>> + right: auto;
> >>>> + height: 100%;
> >>>> + overflow: hidden;
> >>>> + touch-action: none; }
> >>>> + .externsjs.drawer.fixed.open {
> >>>> + pointer-events: auto; }
> >>>> + .externsjs.drawer.fixed.open .drawermain {
> >>>> + transform: none; }
> >>>> +
> >>>> +@media (min-width: 768px) {
> >>>> + .externsjs.drawer.float .drawermain {
> >>>> + width: calc(100% - 60px);
> >>>> + max-width: 310px; } }
> >>>> +.externsjs.drawerheader {
> >>>> + position: relative;
> >>>> + display: flex;
> >>>> + flex-direction: column;
> >>>> + align-items: center;
> >>>> + flex-shrink: 0; }
> >>>> + .externsjs.drawerheader div {
> >>>> + display: flex;
> >>>> + position: absolute;
> >>>> + top: 0;
> >>>> + right: 0;
> >>>> + bottom: 0;
> >>>> + left: 0;
> >>>> + align-items: flex-end; }
> >>>> +
> >>>> +.externsjs.draw
Re: [royale-asjs] branch develop updated: ExternsJS library in frameworks added. In ExternsJS project inspiretree external JS library added.
Posted by Harbs <ha...@gmail.com>.
That’s fine. I did not mean that a lot of code is bad. (where’s a head-explode emoji when you need one?) ;-)
I don’t know whether it’s better to include the inspiretree js or not, but if it’s included, we need to add a pointer in the LICENSE file, and we don’t add the Apache header AFAIK.
Did you write the CSS, or did some of that come from inspiretree too?
> On Nov 24, 2021, at 12:15 AM, Alina Kazi <al...@gmail.com> wrote:
>
> Hi Harbs,
>
> Thanks for the guidance, I will follow it.
>
> All the code is relevant to inspiretree and its beads. Its a lot because we
> can use inspiretree multiple ways with checkbox without it, with parent
> child icon and without and much more stuff handling.
>
> I will add the example in sdk soon or Maria will.
>
> I will remove files which has other license i will add only references of
> the js file in as wrapper.
>
> Thanks and Best Regards,
>
> Alina Kazi
>
>
> On Wed, 24 Nov 2021, 3:04 am Harbs, <ha...@gmail.com> wrote:
>
>> Here’s the instructions on how to add MIT licensed code:
>> https://infra.apache.org/licensing-howto.html#permissive-deps
>>
>>> On Nov 23, 2021, at 11:57 PM, Harbs <ha...@gmail.com> wrote:
>>>
>>> That’s a lot of code.
>>>
>>> Where did all this code come from? In particular inspire-tree.js jumped
>> out at me. Where’s that from? inspire tree seems to be MIT licensed:
>>> https://github.com/helion3/inspire-tree/blob/master/LICENSE
>>>
>>> You can’t just add an apache header to that and put it in our repo.
>>>
>>>> On Nov 23, 2021, at 9:14 PM, alinakazi@apache.org wrote:
>>>>
>>>> This is an automated email from the ASF dual-hosted git repository.
>>>>
>>>> alinakazi pushed a commit to branch develop
>>>> in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
>>>>
>>>>
>>>> The following commit(s) were added to refs/heads/develop by this push:
>>>> new b7b21fc ExternsJS library in frameworks added. In ExternsJS
>> project inspiretree external JS library added.
>>>> b7b21fc is described below
>>>>
>>>> commit b7b21fc0dafd309741acaa29acc745643a4b0d60
>>>> Author: alinakazi <al...@gmail.com>
>>>> AuthorDate: Wed Nov 24 00:14:10 2021 +0500
>>>>
>>>> ExternsJS library in frameworks added. In ExternsJS project
>> inspiretree external JS library added.
>>>> ---
>>>> frameworks/projects/ExternsJS/asconfig.json | 33 +
>>>> frameworks/projects/ExternsJS/build.xml | 182 +
>>>> frameworks/projects/ExternsJS/pom.xml | 276 +
>>>> .../src/main/config/compile-swf-config.xml | 112 +
>>>> .../ExternsJS/src/main/resources/defaults.css | 3255 +++++++++
>>>> .../src/main/resources/externsjs-as-manifest.xml | 25 +
>>>> .../src/main/resources/externsjs-manifest.xml | 27 +
>>>> .../externsjs/inspiretree/New Text Document.html | 56 +
>>>> .../externsjs/inspiretree/inspire-tree-custom.css | 435 ++
>>>> .../externsjs/inspiretree/inspire-tree-custom.sass | 541 ++
>>>> .../externsjs/inspiretree/inspire-tree-dark.css | 325 +
>>>> .../inspiretree/inspire-tree-dark.min.css | 14 +
>>>> .../inspiretree/inspire-tree-dom-royale.js | 3766 +++++++++++
>>>> .../externsjs/inspiretree/inspire-tree-dom.js | 3764 +++++++++++
>>>> .../externsjs/inspiretree/inspire-tree-dom.min.js | 21 +
>>>> .../inspiretree/inspire-tree-light-jewel-blue.css | 619 ++
>>>> .../externsjs/inspiretree/inspire-tree-light.css | 347 +
>>>> .../inspiretree/inspire-tree-light.min.css | 14 +
>>>> .../externsjs/inspiretree/inspire-tree-royale.js | 7126
>> ++++++++++++++++++++
>>>> .../externsjs/inspiretree/inspire-tree.js | 7088
>> +++++++++++++++++++
>>>> .../externsjs/inspiretree/inspire-tree.min.js | 29 +
>>>> .../inspiretree/jewel-blue/collapsed_blue.svg | 14 +
>>>> .../jewel-blue/expand_less_black_24dp.svg | 14 +
>>>> .../jewel-blue/expand_more_black_24dp.svg | 14 +
>>>> .../inspiretree/jewel-blue/expanded_blue.svg | 21 +
>>>> .../ExternsJS/src/main/royale/ExternsJSClasses.as | 53 +
>>>> .../royale/externsjs/inspiretree/IInspireTree.as | 33 +
>>>> .../royale/externsjs/inspiretree/InspireTree.as | 897 +++
>>>> .../inspiretree/InspireTreeBasicControl.as | 277 +
>>>> .../royale/externsjs/inspiretree/InspireTreeDOM.as | 74 +
>>>> .../royale/externsjs/inspiretree/TreeEvent.as | 112 +
>>>> .../royale/externsjs/inspiretree/TreeNode.as | 650 ++
>>>> .../royale/externsjs/inspiretree/TreeNodes.as | 620 ++
>>>> .../royale/externsjs/inspiretree/UtilsTree.as | 28 +
>>>> .../beads/InspireTreeCheckBoxModeBead.as | 339 +
>>>> .../inspiretree/beads/InspireTreeEventsBead.as | 215 +
>>>> .../inspiretree/beads/InspireTreeIconBead.as | 576 ++
>>>> .../inspiretree/beads/InspireTreePaginateBead.as | 162 +
>>>> .../beads/InspireTreeReadOnlyCheckBead.as | 160 +
>>>> .../beads/InspireTreeReadOnlyCheckBead_V0.as | 152 +
>>>> .../beads/InspireTreeRevertCheckBead.as | 185 +
>>>> .../inspiretree/beads/models/InspireTreeModel.as | 290 +
>>>> .../royale/externsjs/inspiretree/vos/ConfigDOM.as | 64 +
>>>> .../royale/externsjs/inspiretree/vos/ConfigTree.as | 30 +
>>>> .../externsjs/inspiretree/vos/DragAndDropConfig.as | 33 +
>>>> .../externsjs/inspiretree/vos/ItemTreeNode.as | 146 +
>>>> .../externsjs/inspiretree/vos/OptionsTree.as | 101 +
>>>> 47 files changed, 33315 insertions(+)
>>>>
>>>> diff --git a/frameworks/projects/ExternsJS/asconfig.json
>> b/frameworks/projects/ExternsJS/asconfig.json
>>>> new file mode 100644
>>>> index 0000000..3b1f1b3
>>>> --- /dev/null
>>>> +++ b/frameworks/projects/ExternsJS/asconfig.json
>>>> @@ -0,0 +1,33 @@
>>>> +/*
>>>> + * Licensed to the Apache Software Foundation (ASF) under one or more
>>>> + * contributor license agreements. See the NOTICE file distributed
>> with
>>>> + * this work for additional information regarding copyright ownership.
>>>> + * The ASF licenses this file to You 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
>>>> + *
>>>> + * Unless required by applicable law or agreed to in writing, software
>>>> + * distributed under the License is distributed on an "AS IS" BASIS,
>>>> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
>> implied.
>>>> + * See the License for the specific language governing permissions and
>>>> + * limitations under the License.
>>>> + */
>>>> + {
>>>> + "config": "royale",
>>>> + "type": "lib",
>>>> + "compilerOptions": {
>>>> + "debug": true,
>>>> + "targets": [
>>>> + "JSRoyale", "SWF"
>>>> + ],
>>>> + "include-classes": [
>>>> + "src/main/royale/ExternsJSClasses.as"
>>>> + ],
>>>> + "source-path": [
>>>> + "src/main/royale"
>>>> + ],
>>>> + "output": "target/ExternsJS.swc"
>>>> + }
>>>> +}
>>>> diff --git a/frameworks/projects/ExternsJS/build.xml
>> b/frameworks/projects/ExternsJS/build.xml
>>>> new file mode 100644
>>>> index 0000000..697b257
>>>> --- /dev/null
>>>> +++ b/frameworks/projects/ExternsJS/build.xml
>>>> @@ -0,0 +1,182 @@
>>>> +<?xml version="1.0"?>
>>>> +<!--
>>>> +
>>>> + Licensed to the Apache Software Foundation (ASF) under one or more
>>>> + contributor license agreements. See the NOTICE file distributed with
>>>> + this work for additional information regarding copyright ownership.
>>>> + The ASF licenses this file to You 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
>>>> +
>>>> + Unless required by applicable law or agreed to in writing, software
>>>> + distributed under the License is distributed on an "AS IS" BASIS,
>>>> + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
>> implied.
>>>> + See the License for the specific language governing permissions and
>>>> + limitations under the License.
>>>> +
>>>> +-->
>>>> +
>>>> +
>>>> +<project name="ExternsJS" default="main" basedir=".">
>>>> + <property name="ROYALE_HOME" location="../../.."/>
>>>> +
>>>> + <property file="${ROYALE_HOME}/env.properties"/>
>>>> + <property environment="env"/>
>>>> + <property file="${ROYALE_HOME}/local.properties"/>
>>>> + <property file="${ROYALE_HOME}/build.properties"/>
>>>> + <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
>>>> + <condition property="AIR_HOME" value="${env.AIR_HOME}">
>>>> + <isset property="env.AIR_HOME" />
>>>> + </condition>
>>>> + <property name="AIR_HOME" value="${ROYALE_HOME}"/>
>>>> + <condition property="PLAYERGLOBAL_HOME"
>> value="${env.PLAYERGLOBAL_HOME}">
>>>> + <isset property="env.PLAYERGLOBAL_HOME" />
>>>> + </condition>
>>>> + <property name="PLAYERGLOBAL_HOME"
>> value="${ROYALE_HOME}/frameworks/libs/player"/>
>>>> +
>>>> + <property name="target.name" value="${ant.project.name}.swc" />
>>>> +
>>>> + <tstamp>
>>>> + <format property="royale.swc-date" pattern="MM/dd/yy HH:mm Z"/>
>>>> + </tstamp>
>>>> + <echo>swc-date is ${royale.swc-date}</echo>
>>>> +
>>>> + <target name="main"
>> depends="clean,check-compiler,compile,compile-js,copy-swc,test"
>> description="Full build of ${ant.project.name}.swc">
>>>> + </target>
>>>> +
>>>> + <target name="compile-js">
>>>> + <ant dir="${ROYALE_HOME}/frameworks/js/projects/${
>> ant.project.name}JS/" inheritAll="false" >
>>>> + <property name="ROYALE_SWF_COMPILER_HOME"
>> value="${ROYALE_SWF_COMPILER_HOME}"/>
>>>> + <property name="ROYALE_COMPILER_HOME"
>> value="${ROYALE_COMPILER_HOME}"/>
>>>> + <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
>>>> + </ant>
>>>> + </target>
>>>> +
>>>> + <target name="copy-swc" if="AIR_HOME">
>>>> + <copy file="${basedir}/target/${target.name}"
>> tofile="${ROYALE_HOME}/frameworks/libs/${target.name}" />
>>>> + </target>
>>>> +
>>>> + <target name="check-for-tests" >
>>>> + <condition property="skip-tests" >
>>>> + <not>
>>>> + <available file="${basedir}/src/test/royale/build.xml"
>> />
>>>> + </not>
>>>> + </condition>
>>>> + <!-- exclude from js-only build -->
>>>> + <condition property="skip-swf-tests">
>>>> + <or>
>>>> + <isset property="skip-tests" />
>>>> + <not>
>>>> + <!-- env.AIR_HOME is how we determine if it's a
>> SWF distritbution -->
>>>> + <isset property="env.AIR_HOME" />
>>>> + </not>
>>>> + </or>
>>>> + </condition>
>>>> + </target>
>>>> +
>>>> + <target name="test" depends="check-for-tests,check-compiler"
>> unless="skip-tests">
>>>> + <antcall target="test-swf" />
>>>> + </target>
>>>> +
>>>> + <target name="test-swf" unless="skip-swf-tests">
>>>> + <ant dir="src/test/royale" />
>>>> + </target>
>>>> +
>>>> + <target name="clean">
>>>> + <delete failonerror="false">
>>>> + <fileset dir="${ROYALE_HOME}/frameworks/libs">
>>>> + <include name="${target.name}"/>
>>>> + </fileset>
>>>> + </delete>
>>>> + <delete failonerror="false" includeemptydirs="true">
>>>> + <fileset dir="${basedir}/target">
>>>> + <include name="**/**"/>
>>>> + </fileset>
>>>> + </delete>
>>>> + <antcall target="clean-tests" />
>>>> + </target>
>>>> +
>>>> + <target name="clean-tests" depends="check-for-tests"
>> unless="skip-tests">
>>>> + <ant dir="src/test/royale" target="clean"/>
>>>> + </target>
>>>> +
>>>> + <target name="compile" description="Compiles .as files into .swc"
>> if="AIR_HOME">
>>>> + <!-- use antcall so that resultproperty can be used in other
>> projects and
>>>> + they don't collide when being run one after the other -->
>>>> + <antcall target="compile-swf" />
>>>> + </target>
>>>> +
>>>> + <target name="compile-swf">
>>>> + <echo message="Compiling libs/${ant.project.name}.swc"/>
>>>> + <echo message="ROYALE_HOME: ${ROYALE_HOME}"/>
>>>> + <echo message="ROYALE_SWF_COMPILER_HOME:
>> ${ROYALE_SWF_COMPILER_HOME}"/>
>>>> + <echo message="ROYALE_COMPILER_HOME: ${ROYALE_COMPILER_HOME}"/>
>>>> +
>>>> + <java jar="${ROYALE_COMPILER_HOME}/lib/compc.jar" fork="true"
>> resultproperty="compcoutput">
>>>> + <jvmarg value="-Xmx384m" />
>>>> + <jvmarg value="-Dsun.io.useCanonCaches=false" />
>>>> + <jvmarg value="-Droyalelib=${ROYALE_HOME}/frameworks" />
>>>> + <arg value="+royalelib=${ROYALE_HOME}/frameworks" />
>>>> + <arg value="+playerglobal.version=${playerglobal.version}"
>> />
>>>> + <arg value="+env.AIR_HOME=${AIR_HOME}" />
>>>> + <arg value="-compiler.strict-xml=true" />
>>>> + <arg value="-compiler.targets=SWF,JSRoyale" />
>>>> + <arg line="-metadata.date="${royale.swc-date}""
>> />
>>>> + <arg line="-metadata.dateFormat="MM/dd/yy HH:mm
>> Z"" />
>>>> + <arg
>> line="-swf-debugfile-alias="/org/apache/royale/${release.version}""
>> />
>>>> + <arg value="-output=${basedir}/target/${target.name}" />
>>>> + <arg
>> value="-load-config=${basedir}/src/main/config/compile-swf-config.xml" />
>>>> + <arg
>> value="-js-load-config=${ROYALE_HOME}/frameworks/js-config.xml" />
>>>> + <arg
>> value="-js-load-config+=${basedir}/../../js/projects/${ant.project.name}JS/src/main/config/compile-js-config.xml"
>> />
>>>> + </java>
>>>> + <fail>
>>>> + <condition>
>>>> + <not>
>>>> + <or>
>>>> + <equals arg1="${compcoutput}" arg2="0" />
>>>> + <equals arg1="${compcoutput}" arg2="2" />
>>>> + </or>
>>>> + </not>
>>>> + </condition>
>>>> + </fail>
>>>> + </target>
>>>> +
>>>> + <target name="check-compiler"
>> depends="check-compiler-home,check-transpiler-home">
>>>> + <path id="lib.path">
>>>> + <fileset dir="${ROYALE_COMPILER_HOME}/lib"
>> includes="compiler-royaleTasks.jar"/>
>>>> + </path>
>>>> + <taskdef resource="flexTasks.tasks" classpathref="lib.path"/>
>>>> + </target>
>>>> +
>>>> + <target name="check-compiler-home"
>>>> + description="Set ROYALE_SWF_COMPILER_HOME to point at the
>> compiler.">
>>>> +
>>>> + <available file="${ROYALE_HOME}/lib/compiler-mxmlc.jar"
>>>> + type="file"
>>>> + property="ROYALE_SWF_COMPILER_HOME"
>>>> + value="${ROYALE_HOME}"/>
>>>> +
>>>> + <fail message="ROYALE_SWF_COMPILER_HOME must be set to a
>> folder with a lib sub-folder containing compiler-mxmlc.jar such as the
>> compiler folder in royale-compiler repo or the root of a Royale SDK"
>>>> + unless="ROYALE_SWF_COMPILER_HOME"/>
>>>> + </target>
>>>> +
>>>> + <target name="check-transpiler-home"
>>>> + description="Set ROYALE_COMPILER_HOME to point at the
>> cross-compiler.">
>>>> +
>>>> + <available file="${ROYALE_HOME}/js/lib/jsc.jar"
>>>> + type="file"
>>>> + property="ROYALE_COMPILER_HOME"
>>>> + value="${ROYALE_HOME}/js"/>
>>>> +
>>>> + <available file="${env.ROYALE_COMPILER_HOME}/lib/jsc.jar"
>>>> + type="file"
>>>> + property="ROYALE_COMPILER_HOME"
>>>> + value="${env.ROYALE_COMPILER_HOME}"/>
>>>> +
>>>> + <fail message="ROYALE_COMPILER_HOME must be set to a folder
>> with a lib sub-folder containing jsc.jar such as the compiler-jx folder in
>> royale-compiler repo or the js folder of a Royale SDK"
>>>> + unless="ROYALE_COMPILER_HOME"/>
>>>> + </target>
>>>> +
>>>> +</project>
>>>> diff --git a/frameworks/projects/ExternsJS/pom.xml
>> b/frameworks/projects/ExternsJS/pom.xml
>>>> new file mode 100644
>>>> index 0000000..8f97429
>>>> --- /dev/null
>>>> +++ b/frameworks/projects/ExternsJS/pom.xml
>>>> @@ -0,0 +1,276 @@
>>>> +<?xml version="1.0" encoding="UTF-8"?>
>>>> +<!--
>>>> +
>>>> + Licensed to the Apache Software Foundation (ASF) under one or more
>>>> + contributor license agreements. See the NOTICE file distributed with
>>>> + this work for additional information regarding copyright ownership.
>>>> + The ASF licenses this file to You 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
>>>> +
>>>> + Unless required by applicable law or agreed to in writing, software
>>>> + distributed under the License is distributed on an "AS IS" BASIS,
>>>> + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
>> implied.
>>>> + See the License for the specific language governing permissions and
>>>> + limitations under the License.
>>>> +
>>>> +--><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="
>> http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="
>> http://maven.apache.org/POM/4.0.0
>> http://maven.apache.org/xsd/maven-4.0.0.xsd">
>>>> + <modelVersion>4.0.0</modelVersion>
>>>> +
>>>> + <parent>
>>>> + <groupId>org.apache.royale.framework</groupId>
>>>> + <artifactId>projects</artifactId>
>>>> + <version>0.9.9-SNAPSHOT</version>
>>>> + </parent>
>>>> +
>>>> + <artifactId>ExternsJS</artifactId>
>>>> + <version>0.9.9-SNAPSHOT</version>
>>>> + <packaging>swc</packaging>
>>>> +
>>>> + <name>Apache Royale: Framework: Libs: ExternsJS</name>
>>>> +
>>>> + <build>
>>>> + <sourceDirectory>src/main/royale</sourceDirectory>
>>>> + <plugins>
>>>> + <plugin>
>>>> + <groupId>org.apache.royale.compiler</groupId>
>>>> + <artifactId>royale-maven-plugin</artifactId>
>>>> + <version>${project.royale.compiler.version}</version>
>>>> + <extensions>true</extensions>
>>>> + <configuration>
>>>> + <namespaces>
>>>> + <namespace>
>>>> + <uri>library://ns.apache.org/royale/externsjs</uri>
>>>> +
>> <manifest>${project.basedir}/src/main/resources/externsjs-manifest.xml</manifest>
>>>> + </namespace>
>>>> + <namespace>
>>>> + <type>as</type>
>>>> + <uri>library://ns.apache.org/royale/externsjs</uri>
>>>> +
>> <manifest>${project.basedir}/src/main/resources/externsjs-as-manifest.xml</manifest>
>>>> + </namespace>
>>>> + </namespaces>
>>>> + <includeClasses>
>>>> + <includeClass>ExternsJSClasses</includeClass>
>>>> + </includeClasses>
>>>> + <includeFiles>
>>>> + <include-file>
>>>> + <name>defaults.css</name>
>>>> + <path>../src/main/resources/defaults.css</path>
>>>> + </include-file>
>>>> + </includeFiles>
>>>> + <includeLookupOnly>true</includeLookupOnly>
>>>> + <allowSubclassOverrides>true</allowSubclassOverrides>
>>>> + <skipExtern>true</skipExtern>
>>>> + <skipAS>${royale.skipAS}</skipAS>
>>>> + <!-- <additionalCompilerOptions>
>>>> + -source-map=true;
>>>> +
>> -source-map-source-root=/frameworks/projects/ExternsJS/src/main/royale/
>>>> + </additionalCompilerOptions> -->
>>>> + </configuration>
>>>> + </plugin>
>>>> + <plugin>
>>>> + <groupId>nl.geodienstencentrum.maven</groupId>
>>>> + <artifactId>sass-maven-plugin</artifactId>
>>>> + <configuration>
>>>> + <resources>
>>>> + <resource>
>>>> + <source>
>>>> +
>> <directory>${basedir}/src/main/resources/externsjs/inspiretree</directory>
>>>> + <includes>
>>>> + <include>**/*.sass</include>
>>>> + </includes>
>>>> + </source>
>>>> +
>> <destination>${basedir}/src/main/resources/externsjs/inspiretree</destination>
>>>> + </resource>
>>>> + </resources>
>>>> + </configuration>
>>>> + <executions>
>>>> + <execution>
>>>> + <id>generate-css-using-sass</id>
>>>> + <goals>
>>>> + <goal>update-stylesheets</goal>
>>>> + </goals>
>>>> + <phase>generate-resources</phase>
>>>> + </execution>
>>>> + </executions>
>>>> + </plugin>
>>>> + <plugin>
>>>> + <groupId>com.google.code.maven-replacer-plugin</groupId>
>>>> + <artifactId>replacer</artifactId>
>>>> + <version>1.5.3</version>
>>>> + <executions>
>>>> + <execution>
>>>> + <phase>generate-resources</phase>
>>>> + <goals>
>>>> + <goal>replace</goal>
>>>> + </goals>
>>>> + </execution>
>>>> + </executions>
>>>> + <configuration>
>>>> + <includes>
>>>> + <include>${basedir}/src/main/resources/**/*.css</include>
>>>> + </includes>
>>>> + <regex>false</regex>
>>>> + <replacements>
>>>> + <replacement>
>>>> + <token>@@ZERO_WIDTH_SPACE</token>
>>>> + <value>\200b</value>
>>>> + </replacement>
>>>> + <replacement>
>>>> + <token>@@NON_BREAKING_SPACE</token>
>>>> + <value>\0a</value>
>>>> + </replacement>
>>>> + </replacements>
>>>> + </configuration>
>>>> + </plugin>
>>>> + </plugins>
>>>> + </build>
>>>> +
>>>> + <dependencies>
>>>> + <dependency>
>>>> + <groupId>org.apache.royale.framework</groupId>
>>>> + <artifactId>Core</artifactId>
>>>> + <version>0.9.9-SNAPSHOT</version>
>>>> + <type>swc</type>
>>>> + <classifier>js</classifier>
>>>> + </dependency>
>>>> + <dependency>
>>>> + <groupId>org.apache.royale.framework</groupId>
>>>> + <artifactId>Binding</artifactId>
>>>> + <version>0.9.9-SNAPSHOT</version>
>>>> + <type>swc</type>
>>>> + <classifier>js</classifier>
>>>> + </dependency>
>>>> + <dependency>
>>>> + <groupId>org.apache.royale.framework</groupId>
>>>> + <artifactId>Graphics</artifactId>
>>>> + <version>0.9.9-SNAPSHOT</version>
>>>> + <type>swc</type>
>>>> + <classifier>js</classifier>
>>>> + </dependency>
>>>> + <dependency>
>>>> + <groupId>org.apache.royale.framework</groupId>
>>>> + <artifactId>Collections</artifactId>
>>>> + <version>0.9.9-SNAPSHOT</version>
>>>> + <type>swc</type>
>>>> + <classifier>js</classifier>
>>>> + </dependency>
>>>> + <dependency>
>>>> + <groupId>org.apache.royale.framework</groupId>
>>>> + <artifactId>HTML</artifactId>
>>>> + <version>0.9.9-SNAPSHOT</version>
>>>> + <type>swc</type>
>>>> + <classifier>js</classifier>
>>>> + </dependency>
>>>> + <dependency>
>>>> + <groupId>org.apache.royale.framework</groupId>
>>>> + <artifactId>Basic</artifactId>
>>>> + <version>0.9.9-SNAPSHOT</version>
>>>> + <type>swc</type>
>>>> + <classifier>js</classifier>
>>>> + </dependency>
>>>> + <dependency>
>>>> + <groupId>org.apache.royale.framework</groupId>
>>>> + <artifactId>Formatters</artifactId>
>>>> + <version>0.9.9-SNAPSHOT</version>
>>>> + <type>swc</type>
>>>> + <classifier>js</classifier>
>>>> + </dependency>
>>>> + </dependencies>
>>>> +
>>>> + <profiles>
>>>> + <profile>
>>>> + <id>platform-windows</id>
>>>> + <activation>
>>>> + <os>
>>>> + <family>windows</family>
>>>> + </os>
>>>> + </activation>
>>>> + <build>
>>>> + <plugins>
>>>> + <plugin>
>>>> + <groupId>nl.geodienstencentrum.maven</groupId>
>>>> + <artifactId>sass-maven-plugin</artifactId>
>>>> + <executions>
>>>> + <execution>
>>>> + <id>generate-css-using-sass</id>
>>>> + <goals>
>>>> + <goal>update-stylesheets</goal>
>>>> + </goals>
>>>> + <phase>generate-resources</phase>
>>>> + <configuration>
>>>> + <sassOptions>
>>>> + <!-- on windows it is typical to have
>> autoCRLF=true,
>>>> + so we don't want to overwrite
>>>> + the CRLF newlines with unix newlines (which is
>> true by default)
>>>> + locally, because that will change git status of
>> the css file
>>>> + on windows
>>>> + -->
>>>> + <unix_newlines>false</unix_newlines>
>>>> + </sassOptions>
>>>> + </configuration>
>>>> + </execution>
>>>> + </executions>
>>>> + </plugin>
>>>> + </plugins>
>>>> + </build>
>>>> + </profile>
>>>> + <profile>
>>>> + <id>option-with-swf</id>
>>>> + <dependencies>
>>>> + <dependency>
>>>> + <groupId>org.apache.royale.framework</groupId>
>>>> + <artifactId>Core</artifactId>
>>>> + <version>0.9.9-SNAPSHOT</version>
>>>> + <type>swc</type>
>>>> + <classifier>swf</classifier>
>>>> + </dependency>
>>>> + <dependency>
>>>> + <groupId>org.apache.royale.framework</groupId>
>>>> + <artifactId>Binding</artifactId>
>>>> + <version>0.9.9-SNAPSHOT</version>
>>>> + <type>swc</type>
>>>> + <classifier>swf</classifier>
>>>> + </dependency>
>>>> + <dependency>
>>>> + <groupId>org.apache.royale.framework</groupId>
>>>> + <artifactId>Graphics</artifactId>
>>>> + <version>0.9.9-SNAPSHOT</version>
>>>> + <type>swc</type>
>>>> + <classifier>swf</classifier>
>>>> + </dependency>
>>>> + <dependency>
>>>> + <groupId>org.apache.royale.framework</groupId>
>>>> + <artifactId>Collections</artifactId>
>>>> + <version>0.9.9-SNAPSHOT</version>
>>>> + <type>swc</type>
>>>> + <classifier>swf</classifier>
>>>> + </dependency>
>>>> + <dependency>
>>>> + <groupId>org.apache.royale.framework</groupId>
>>>> + <artifactId>HTML</artifactId>
>>>> + <version>0.9.9-SNAPSHOT</version>
>>>> + <type>swc</type>
>>>> + <classifier>swf</classifier>
>>>> + </dependency>
>>>> + <dependency>
>>>> + <groupId>org.apache.royale.framework</groupId>
>>>> + <artifactId>Basic</artifactId>
>>>> + <version>0.9.9-SNAPSHOT</version>
>>>> + <type>swc</type>
>>>> + <classifier>swf</classifier>
>>>> + </dependency>
>>>> + <dependency>
>>>> + <groupId>org.apache.royale.framework</groupId>
>>>> + <artifactId>Formatters</artifactId>
>>>> + <version>0.9.9-SNAPSHOT</version>
>>>> + <type>swc</type>
>>>> + <classifier>swf</classifier>
>>>> + </dependency>
>>>> + </dependencies>
>>>> + </profile>
>>>> + </profiles>
>>>> +
>>>> +<properties /></project>
>>>> diff --git
>> a/frameworks/projects/ExternsJS/src/main/config/compile-swf-config.xml
>> b/frameworks/projects/ExternsJS/src/main/config/compile-swf-config.xml
>>>> new file mode 100644
>>>> index 0000000..8981130
>>>> --- /dev/null
>>>> +++
>> b/frameworks/projects/ExternsJS/src/main/config/compile-swf-config.xml
>>>> @@ -0,0 +1,112 @@
>>>> +<!--
>>>> +
>>>> + Licensed to the Apache Software Foundation (ASF) under one or more
>>>> + contributor license agreements. See the NOTICE file distributed with
>>>> + this work for additional information regarding copyright ownership.
>>>> + The ASF licenses this file to You 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
>>>> +
>>>> + Unless required by applicable law or agreed to in writing, software
>>>> + distributed under the License is distributed on an "AS IS" BASIS,
>>>> + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
>> implied.
>>>> + See the License for the specific language governing permissions and
>>>> + limitations under the License.
>>>> +
>>>> +-->
>>>> +<royale-config>
>>>> +
>>>> + <compiler>
>>>> + <accessible>false</accessible>
>>>> +
>>>> + <!-- build both SWF and JS. -->
>>>> + <targets>
>>>> + <target>JSRoyale</target>
>>>> + </targets>
>>>> + <strict-xml>true</strict-xml>
>>>> +
>>>> + <external-library-path>
>>>> +
>> <path-element>${env.AIR_HOME}/frameworks/libs/air/airglobal.swc</path-element>
>>>> +
>> <path-element>../../../../../libs/Binding.swc</path-element>
>>>> + <path-element>../../../../../libs/Core.swc</path-element>
>>>> +
>> <path-element>../../../../../libs/Graphics.swc</path-element>
>>>> + <path-element>../../../../../libs/Basic.swc</path-element>
>>>> +
>> <path-element>../../../../../libs/Collections.swc</path-element>
>>>> + <path-element>../../../../../libs/HTML.swc</path-element>
>>>> +
>> <path-element>../../../../../libs/Formatters.swc</path-element>
>>>> + </external-library-path>
>>>> +
>>>> + <allow-subclass-overrides>true</allow-subclass-overrides>
>>>> + <mxml>
>>>> + <children-as-data>true</children-as-data>
>>>> + <imports>
>>>> +
>> <implicit-import>org.apache.royale.events.*</implicit-import>
>>>> +
>> <implicit-import>org.apache.royale.geom.*</implicit-import>
>>>> +
>> <implicit-import>org.apache.royale.core.ClassFactory</implicit-import>
>>>> +
>> <implicit-import>org.apache.royale.core.IFactory</implicit-import>
>>>> + </imports>
>>>> + </mxml>
>>>> +
>> <binding-value-change-event>org.apache.royale.events.ValueChangeEvent</binding-value-change-event>
>>>> +
>> <binding-value-change-event-kind>org.apache.royale.events.ValueChangeEvent</binding-value-change-event-kind>
>>>> +
>> <binding-value-change-event-type>valueChange</binding-value-change-event-type>
>>>> +
>>>> + <define>
>>>> + <name>COMPILE::SWF</name>
>>>> + <value>true</value>
>>>> + </define>
>>>> + <define>
>>>> + <name>COMPILE::JS</name>
>>>> + <value>false</value>
>>>> + </define>
>>>> +
>>>> + <keep-as3-metadata>
>>>> + <name>Bindable</name>
>>>> + <name>Managed</name>
>>>> + <name>ChangeEvent</name>
>>>> + <name>NonCommittingChangeEvent</name>
>>>> + <name>Transient</name>
>>>> + </keep-as3-metadata>
>>>> +
>>>> + <locale/>
>>>> +
>>>> + <library-path/>
>>>> +
>>>> + <namespaces>
>>>> + <namespace>
>>>> + <uri>library://ns.apache.org/royale/externsjs</uri>
>>>> +
>> <manifest>../resources/externsjs-manifest.xml</manifest>
>>>> + </namespace>
>>>> + <namespace>
>>>> + <uri>library://ns.apache.org/royale/externsjs</uri>
>>>> +
>> <manifest>../resources/externsjs-as-manifest.xml</manifest>
>>>> + </namespace>
>>>> + </namespaces>
>>>> +
>>>> + <source-path>
>>>> + <path-element>../royale</path-element>
>>>> + </source-path>
>>>> +
>>>> + <warn-no-constructor>false</warn-no-constructor>
>>>> + </compiler>
>>>> +
>>>> + <include-file>
>>>> + <name>defaults.css</name>
>>>> + <path>../resources/defaults.css</path>
>>>> + </include-file>
>>>> +
>>>> + <include-lookup-only>true</include-lookup-only>
>>>> +
>>>> + <include-classes>
>>>> + <class>ExternsJSClasses</class>
>>>> + </include-classes>
>>>> +
>>>> + <include-namespaces>
>>>> + <uri>library://ns.apache.org/royale/externsjs</uri>
>>>> + </include-namespaces>
>>>> +
>>>> + <target-player>${playerglobal.version}</target-player>
>>>> +
>>>> +
>>>> +</royale-config>
>>>> diff --git
>> a/frameworks/projects/ExternsJS/src/main/resources/defaults.css
>> b/frameworks/projects/ExternsJS/src/main/resources/defaults.css
>>>> new file mode 100644
>>>> index 0000000..c8dab5d
>>>> --- /dev/null
>>>> +++ b/frameworks/projects/ExternsJS/src/main/resources/defaults.css
>>>> @@ -0,0 +1,3255 @@
>>>> +/**
>>>> + * Licensed to the Apache Software Foundation (ASF) under one or more
>>>> + * contributor license agreements. See the NOTICE file distributed
>> with
>>>> + * this work for additional information regarding copyright ownership.
>>>> + * The ASF licenses this file to You 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
>>>> + *
>>>> + * Unless required by applicable law or agreed to in writing, software
>>>> + * distributed under the License is distributed on an "AS IS" BASIS,
>>>> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
>> implied.
>>>> + * See the License for the specific language governing permissions and
>>>> + * limitations under the License.
>>>> + */
>>>> +@namespace j "library://ns.apache.org/royale/externsjs";
>>>> +@namespace "http://www.w3.org/1999/xhtml";
>>>> +*, :after, :before {
>>>> + box-sizing: border-box; }
>>>> +
>>>> +html, body {
>>>> + height: 100%; }
>>>> +
>>>> +::-moz-focus-inner, ::-moz-focus-outer {
>>>> + border: 0; }
>>>> +
>>>> +input:focus, textarea:focus, select:focus, div:focus, label:focus,
>> nav:focus, li:focus, a:focus {
>>>> + outline: none; }
>>>> +
>>>> +select::-ms-expand {
>>>> + display: none; }
>>>> +
>>>> +button::-moz-focus-inner {
>>>> + padding: 0; }
>>>> +
>>>> +button, input, textarea {
>>>> + font-size: 100%; }
>>>> +
>>>> +.cursor-pointer {
>>>> + cursor: pointer !important; }
>>>> +
>>>> +j|View {
>>>> + IBeadView: ClassReference("org.apache.royale.html.beads.GroupView");
>>>> + IBeadLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.ViewLayout"); }
>>>> +
>>>> +.responsive-view {
>>>> + display: inline-flex;
>>>> + width: 100%;
>>>> + height: 100%; }
>>>> +
>>>> +j|Group {
>>>> + IBeadLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.BasicLayout");
>>>> + IBeadView: ClassReference("org.apache.royale.html.beads.GroupView");
>> }
>>>> +
>>>> +.externsjs.group {
>>>> + overflow: visible; }
>>>> +
>>>> +j|HGroup {
>>>> + IBeadLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
>> }
>>>> +
>>>> +j|VGroup {
>>>> + IBeadLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout");
>> }
>>>> +
>>>> +j|Grid {
>>>> + IBeadLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.GridLayout"); }
>>>> +
>>>> +j|ScrollableGrid {
>>>> + IViewport:
>> ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport");
>> }
>>>> +
>>>> +j|GridCell {
>>>> + IBeadLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.GridCellLayout");
>> }
>>>> +
>>>> +j|Container {
>>>> + IBeadView:
>> ClassReference("org.apache.royale.html.beads.ContainerView");
>>>> + IBeadLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.BasicLayout");
>>>> + IViewport:
>> ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
>>>> +
>>>> +j|HContainer {
>>>> + IBeadLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
>> }
>>>> +
>>>> +j|VContainer {
>>>> + IBeadLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout");
>> }
>>>> +
>>>> +j|Image {
>>>> + IBeadModel:
>> ClassReference("org.apache.royale.externsjs.beads.models.ImageModel");
>>>> + IBeadView:
>> ClassReference("org.apache.royale.externsjs.beads.views.ImageView"); }
>>>> +
>>>> +j|BinaryImage {
>>>> + IBeadModel:
>> ClassReference("org.apache.royale.html.beads.models.BinaryImageModel");
>>>> + IBeadView:
>> ClassReference("org.apache.royale.externsjs.beads.views.ImageView");
>>>> + IBinaryImageLoader:
>> ClassReference("org.apache.royale.html.beads.BinaryImageLoader"); }
>>>> +
>>>> +j|DataContainer {
>>>> + IBeadModel:
>> ClassReference("org.apache.royale.externsjs.beads.models.DataProviderModel");
>>>> + IBeadView:
>> ClassReference("org.apache.royale.html.beads.DataContainerView");
>>>> + IBeadLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout");
>>>> + IDataProviderItemRendererMapper:
>> ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForCollectionView");
>>>> + IItemRendererClassFactory:
>> ClassReference("org.apache.royale.core.ItemRendererClassFactory");
>>>> + IItemRenderer:
>> ClassReference("org.apache.royale.externsjs.itemRenderers.StringItemRenderer");
>>>> + IItemRendererInitializer:
>> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DataContainerItemRendererInitializer");
>>>> + IViewport:
>> ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
>>>> +
>>>> +j|Validator {
>>>> + ILocalizedValuesImpl:
>> ClassReference("org.apache.royale.core.SimpleLocalizedValuesImpl"); }
>>>> +
>>>> +j|Form {
>>>> + IBeadLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.FormLayout"); }
>>>> +
>>>> +@media -royale-swf {
>>>> + j|Container {
>>>> + IContentView:
>> ClassReference("org.apache.royale.html.supportClasses.ContainerContentArea");
>> } }
>>>> +hr {
>>>> + border: 0;
>>>> + height: 1px; }
>>>> +
>>>> +.responsiveSizeMonitor {
>>>> + background: rgba(0, 0, 0, 0.8);
>>>> + color: white;
>>>> + padding: 10px;
>>>> + position: fixed;
>>>> + bottom: 0;
>>>> + right: 0;
>>>> + width: 250px; }
>>>> + .responsiveSizeMonitor strong {
>>>> + color: yellow; }
>>>> +
>>>> +.externsjs.alert {
>>>> + position: fixed;
>>>> + top: 50%;
>>>> + left: 50%;
>>>> + min-width: 350px;
>>>> + min-height: 200px; }
>>>> + .externsjs.alert .externsjs.titlebar {
>>>> + height: 50px; }
>>>> + .externsjs.alert .content {
>>>> + position: absolute;
>>>> + top: 50px;
>>>> + bottom: 50px;
>>>> + width: 100%;
>>>> + overflow-y: auto; }
>>>> + .externsjs.alert .content .externsjs.label {
>>>> + white-space: normal; }
>>>> + .externsjs.alert .externsjs.controlbar {
>>>> + bottom: 0;
>>>> + height: 50px; }
>>>> +
>>>> +@media all and (-ms-high-contrast: none) {
>>>> + .externsjs.alert {
>>>> + display: table; } }
>>>> +@media (min-width: 768px) {
>>>> + .externsjs.alert {
>>>> + min-width: 450px; } }
>>>> +j|Alert {
>>>> + IBeadLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout");
>>>> + IBeadModel:
>> ClassReference("org.apache.royale.externsjs.beads.models.AlertModel");
>>>> + IBeadController:
>> ClassReference("org.apache.royale.externsjs.beads.controllers.AlertController");
>>>> + IBeadView:
>> ClassReference("org.apache.royale.externsjs.beads.views.AlertView"); }
>>>> +
>>>> +.externsjs.badge {
>>>> + z-index: 2;
>>>> + position: absolute;
>>>> + top: -1em;
>>>> + right: -1em;
>>>> + text-transform: initial;
>>>> + padding: 0.5em;
>>>> + min-width: 2.1em; }
>>>> + .externsjs.badge.overlap {
>>>> + top: 0em;
>>>> + right: 0em; }
>>>> + .externsjs.badge.subindex {
>>>> + top: auto;
>>>> + bottom: -1em; }
>>>> + .externsjs.badge.subindex.overlap {
>>>> + top: auto;
>>>> + bottom: 0em; }
>>>> + .externsjs.badge.preindex {
>>>> + left: -1em;
>>>> + right: auto; }
>>>> + .externsjs.badge.preindex.overlap {
>>>> + left: 0em;
>>>> + right: auto; }
>>>> +
>>>> +.externsjs.button {
>>>> + cursor: pointer;
>>>> + user-select: none;
>>>> + display: inline-flex;
>>>> + position: relative;
>>>> + align-items: center;
>>>> + justify-content: center;
>>>> + vertical-align: middle;
>>>> + overflow: hidden;
>>>> + outline: none;
>>>> + white-space: nowrap;
>>>> + line-height: normal !important;
>>>> + text-align: center;
>>>> + text-decoration: none; }
>>>> + .externsjs.button[disabled] {
>>>> + cursor: default; }
>>>> + .externsjs.button.multiline {
>>>> + white-space: pre-wrap; }
>>>> + .externsjs.button .fonticon {
>>>> + cursor: inherit; }
>>>> + .externsjs.button.viewport {
>>>> + overflow: visible; }
>>>> +
>>>> +@media -royale-swf {
>>>> + j|Button {
>>>> + IBeadModel:
>> ClassReference("org.apache.royale.externsjs.beads.models.TextModel");
>>>> + IBeadView:
>> ClassReference("org.apache.royale.externsjs.beads.views.ButtonView"); } }
>>>> +.externsjs.buttonbar .externsjs.button, .externsjs.buttonbar
>> .externsjs.togglebutton {
>>>> + border-radius: 0; }
>>>> + .externsjs.buttonbar .externsjs.button.first, .externsjs.buttonbar
>> .externsjs.togglebutton.first {
>>>> + border-top-left-radius: 0.25rem;
>>>> + border-bottom-left-radius: 0.25rem; }
>>>> + .externsjs.buttonbar .externsjs.button.last, .externsjs.buttonbar
>> .externsjs.togglebutton.last {
>>>> + border-top-right-radius: 0.25rem;
>>>> + border-bottom-right-radius: 0.25rem; }
>>>> +
>>>> +j|ButtonBar {
>>>> + IBeadModel:
>> ClassReference("org.apache.royale.externsjs.beads.models.ButtonBarModel");
>>>> + IBeadView:
>> ClassReference("org.apache.royale.externsjs.beads.views.ButtonBarView");
>>>> + IBeadController:
>> ClassReference("org.apache.royale.externsjs.beads.controllers.ListSingleSelectionMouseController");
>>>> + IBeadLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.ButtonBarLayout");
>>>> + IDataProviderItemRendererMapper:
>> ClassReference("org.apache.royale.html.beads.SelectionDataItemRendererFactoryForCollectionView");
>>>> + IItemRendererClassFactory:
>> ClassReference("org.apache.royale.core.ItemRendererClassFactory");
>>>> + IItemRenderer:
>> ClassReference("org.apache.royale.externsjs.itemRenderers.ButtonBarItemRenderer");
>>>> + IItemRendererInitializer:
>> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ButtonBarItemRendererInitializer");
>> }
>>>> +
>>>> +@media -royale-swf {
>>>> + j|ButtonBar {
>>>> + IContentView:
>> ClassReference("org.apache.royale.externsjs.supportClasses.list.DataGroup");
>> } }
>>>> +j|IconButtonBar {
>>>> + IItemRenderer:
>> ClassReference("org.apache.royale.externsjs.itemRenderers.IconButtonBarItemRenderer");
>> }
>>>> +
>>>> +.externsjs.buttonbar.toggle-on-click .externsjs.togglebutton.selected {
>>>> + pointer-events: none; }
>>>> +
>>>> +j|ToggleButtonBar {
>>>> + IBeadView:
>> ClassReference("org.apache.royale.externsjs.beads.views.ToggleButtonBarView");
>>>> + IBeadController:
>> ClassReference("org.apache.royale.externsjs.beads.controllers.ToggleButtonBarSelectionMouseController");
>>>> + IItemRenderer:
>> ClassReference("org.apache.royale.externsjs.itemRenderers.ToggleButtonBarItemRenderer");
>> }
>>>> +
>>>> +.externsjs.card {
>>>> + min-width: 120px;
>>>> + min-height: 52px;
>>>> + position: relative; }
>>>> + .externsjs.card .card-header {
>>>> + width: 100%; }
>>>> + .externsjs.card .card-header .card-title {
>>>> + flex: 1 1 auto;
>>>> + overflow: hidden;
>>>> + text-decoration: inherit;
>>>> + text-overflow: ellipsis;
>>>> + text-transform: inherit;
>>>> + z-index: 1; }
>>>> + .externsjs.card .card-expanded-content {
>>>> + width: 100%; }
>>>> + .externsjs.card .card-primary-content {
>>>> + width: 100%;
>>>> + min-height: 152px;
>>>> + position: relative;
>>>> + outline: none;
>>>> + color: inherit;
>>>> + text-decoration: none;
>>>> + flex: 1 1 auto; }
>>>> + .externsjs.card .card-actions {
>>>> + width: 100%;
>>>> + position: relative;
>>>> + outline: none;
>>>> + color: inherit;
>>>> + text-decoration: none; }
>>>> +
>>>> +.externsjs.checkbox {
>>>> + display: inline-flex;
>>>> + position: relative;
>>>> + margin: 0;
>>>> + padding: 0;
>>>> + height: auto; }
>>>> + .externsjs.checkbox input {
>>>> + -webkit-appearance: none;
>>>> + -moz-appearance: none;
>>>> + -o-appearance: none;
>>>> + -ms-appearance: none;
>>>> + appearance: none;
>>>> + display: inline-flex;
>>>> + margin: 0;
>>>> + padding: 0;
>>>> + width: 24px;
>>>> + height: 24px;
>>>> + opacity: 0; }
>>>> + .externsjs.checkbox input + span::before {
>>>> + content: " ";
>>>> + position: absolute;
>>>> + left: 0px;
>>>> + top: 0px;
>>>> + width: 22px;
>>>> + height: 22px; }
>>>> + .externsjs.checkbox input + span::after {
>>>> + content: " ";
>>>> + position: absolute;
>>>> + width: 22px;
>>>> + height: 22px;
>>>> + left: 0px;
>>>> + top: 0px;
>>>> + opacity: 0; }
>>>> + .externsjs.checkbox input:checked + span::after,
>> .externsjs.checkbox input:checked:active + span::after {
>>>> + opacity: 1; }
>>>> + .externsjs.checkbox input:focus + span::before,
>> .externsjs.checkbox input:checked:focus + span::before, .externsjs.checkbox
>> input:checked:active:focus + span::before {
>>>> + outline: none; }
>>>> + .externsjs.checkbox input[disabled] + span {
>>>> + cursor: unset; }
>>>> + .externsjs.checkbox span {
>>>> + cursor: pointer;
>>>> + margin: auto;
>>>> + width: inherit; }
>>>> +
>>>> +.externsjs.switch {
>>>> + display: inline-flex;
>>>> + position: relative;
>>>> + height: auto; }
>>>> + .externsjs.switch input {
>>>> + -webkit-appearance: none;
>>>> + -moz-appearance: none;
>>>> + -o-appearance: none;
>>>> + -ms-appearance: none;
>>>> + appearance: none;
>>>> + display: inline-flex;
>>>> + opacity: 0;
>>>> + width: 44px;
>>>> + height: 24px;
>>>> + margin: 0;
>>>> + padding: 0; }
>>>> + .externsjs.switch input[disabled] + span {
>>>> + cursor: unset; }
>>>> + .externsjs.switch .switch {
>>>> + position: absolute;
>>>> + cursor: pointer;
>>>> + top: 0;
>>>> + left: 0;
>>>> + right: 0;
>>>> + bottom: 0;
>>>> + width: 44px;
>>>> + height: 24px; }
>>>> + .externsjs.switch .switch::before {
>>>> + position: absolute;
>>>> + content: "";
>>>> + height: 20px;
>>>> + width: 20px;
>>>> + left: 2px;
>>>> + bottom: 2px; }
>>>> + .externsjs.switch .label {
>>>> + cursor: pointer;
>>>> + margin: auto;
>>>> + width: inherit; }
>>>> +
>>>> +.externsjs.combobox {
>>>> + display: inline-flex; }
>>>> + .externsjs.combobox .externsjs.textinput {
>>>> + display: block; }
>>>> + .externsjs.combobox .externsjs.button::before {
>>>> + margin: 0;
>>>> + padding: 0; }
>>>> + .externsjs.combobox .externsjs.button::after {
>>>> + content: " ";
>>>> + position: absolute; }
>>>> +
>>>> +j|ComboBox {
>>>> + IBeadModel:
>> ClassReference("org.apache.royale.externsjs.beads.models.ComboBoxModel");
>>>> + IBeadView:
>> ClassReference("org.apache.royale.externsjs.beads.views.ComboBoxView");
>>>> + IBeadController:
>> ClassReference("org.apache.royale.externsjs.beads.controllers.ComboBoxController");
>>>> + IPopUp:
>> ClassReference("org.apache.royale.externsjs.supportClasses.combobox.ComboBoxPopUp");
>> }
>>>> +
>>>> +.combobox-popup {
>>>> + position: fixed;
>>>> + pointer-events: none;
>>>> + bottom: 0;
>>>> + left: 0;
>>>> + width: 100%;
>>>> + height: 100%;
>>>> + overflow: hidden;
>>>> + contain: strict;
>>>> + z-index: 60;
>>>> + color: rgba(0, 0, 0, 0.8); }
>>>> + .combobox-popup::before {
>>>> + position: absolute;
>>>> + display: block;
>>>> + top: 0;
>>>> + left: 0;
>>>> + width: 100%;
>>>> + height: 100%;
>>>> + content: "";
>>>> + opacity: 0;
>>>> + background-color: rgba(0, 0, 0, 0.65);
>>>> + will-change: opacity;
>>>> + transition: opacity 0.4s 0ms; }
>>>> + .combobox-popup .externsjs.list {
>>>> + position: relative;
>>>> + transform: translate(-50%, 100%);
>>>> + transition: none;
>>>> + will-change: transform, opacity;
>>>> + bottom: auto;
>>>> + top: calc(100% - 10px);
>>>> + left: 50%;
>>>> + box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7) !important;
>>>> + opacity: 0; }
>>>> + .combobox-popup.open {
>>>> + pointer-events: auto; }
>>>> + .combobox-popup.open::before {
>>>> + opacity: 1; }
>>>> + .combobox-popup.open .externsjs.list {
>>>> + transform: translate(-50%, -100%);
>>>> + transition: transform 0.3s 0ms, opacity 0.3s 0ms;
>>>> + opacity: 1; }
>>>> +
>>>> +@media (max-width: 767px) {
>>>> + .combobox-popup .externsjs.list {
>>>> + width: 98% !important;
>>>> + max-height: 240px !important; }
>>>> + .combobox-popup .externsjs.list .externsjs.item {
>>>> + min-height: 48px !important; } }
>>>> +@media (min-width: 767px) {
>>>> + .combobox-popup::before {
>>>> + background-color: rgba(0, 0, 0, 0); }
>>>> + .combobox-popup .externsjs.list {
>>>> + transform: none;
>>>> + transition: none;
>>>> + box-shadow: none !important; }
>>>> + .combobox-popup .externsjs.list .externsjs.item {
>>>> + overflow: hidden;
>>>> + transition: height 200ms ease-in; }
>>>> + .combobox-popup.open .externsjs.list {
>>>> + transform: none;
>>>> + top: auto;
>>>> + left: auto; } }
>>>> +j|ComboBoxPopUp {
>>>> + IBeadView:
>> ClassReference("org.apache.royale.externsjs.beads.views.ComboBoxPopUpView");
>> }
>>>> +
>>>> +j|VirtualComboBox {
>>>> + IPopUp:
>> ClassReference("org.apache.royale.externsjs.supportClasses.combobox.VirtualComboBoxPopUp");
>> }
>>>> +
>>>> +j|VirtualComboBoxPopUp {
>>>> + IBeadView:
>> ClassReference("org.apache.royale.externsjs.beads.views.VirtualComboBoxPopUpView");
>> }
>>>> +
>>>> +.externsjs.datagrid {
>>>> + display: flex;
>>>> + flex-direction: column;
>>>> + position: relative;
>>>> + overflow: auto; }
>>>> + .externsjs.datagrid .externsjs.buttonbar.header {
>>>> + width: 100%;
>>>> + flex: 0 0 auto; }
>>>> + .externsjs.datagrid .externsjs.buttonbar.header .externsjs.button {
>>>> + width: 100%; }
>>>> + .externsjs.datagrid .listarea {
>>>> + width: 100%;
>>>> + flex: 1 1 auto; }
>>>> + .externsjs.datagrid .externsjs.list.column {
>>>> + padding-left: 0;
>>>> + padding-right: 0;
>>>> + position: relative;
>>>> + min-height: 100%; }
>>>> + .externsjs.datagrid .externsjs.list.column
>> .externsjs.item.datagrid {
>>>> + width: 100%; }
>>>> + .externsjs.datagrid span:empty:before {
>>>> + content: "\200b"; }
>>>> +
>>>> +j|DataGrid {
>>>> + IBeadView:
>> ClassReference("org.apache.royale.externsjs.beads.views.DataGridView");
>>>> + IBeadModel:
>> ClassReference("org.apache.royale.html.beads.models.DataGridCollectionViewModel");
>>>> + IBeadLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.DataGridLayout");
>>>> + headerClass:
>> ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.DataGridButtonBar");
>>>> + headerLayoutClass:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.DataGridColumnLayout");
>>>> + listAreaClass:
>> ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.DataGridListArea");
>>>> + columnClass:
>> ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.DataGridColumnList");
>> }
>>>> +
>>>> +j|DataGridListArea {
>>>> + IBeadView:
>> ClassReference("org.apache.royale.html.beads.ContainerView");
>>>> + IBeadLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
>>>> + IViewport:
>> ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport");
>> }
>>>> +
>>>> +j|DataGridColumnList {
>>>> + IItemRendererClassFactory:
>> ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
>>>> + IItemRenderer:
>> ClassReference("org.apache.royale.externsjs.itemRenderers.DataGridItemRenderer");
>>>> + IItemRendererInitializer:
>> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DataGridColumnListItemRendererInitializer");
>>>> + ISelectableItemRenderer:
>> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ClassSelectorListSelectableItemRendererBead");
>>>> + IViewport:
>> ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
>>>> +
>>>> +j|DataGridButtonBar {
>>>> + IItemRenderer:
>> ClassReference("org.apache.royale.externsjs.itemRenderers.DatagridHeaderRenderer");
>> }
>>>> +
>>>> +j|VirtualDataGrid {
>>>> + IBeadView:
>> ClassReference("org.apache.royale.externsjs.beads.views.VirtualDataGridView");
>>>> + columnClass:
>> ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.VirtualDataGridColumnList");
>> }
>>>> +
>>>> +j|VirtualDataGridListArea {
>>>> + IBeadView:
>> ClassReference("org.apache.royale.html.beads.ContainerView");
>>>> + IBeadLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
>>>> + listAreaClass:
>> ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.VirtualDataGrid");
>>>> + IViewport:
>> ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
>>>> +
>>>> +j|VirtualDataGridColumnList {
>>>> + IBeadLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.VirtualDataGridListAreaLayout");
>>>> + IItemRendererClassFactory:
>> ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
>>>> + IItemRenderer:
>> ClassReference("org.apache.royale.externsjs.itemRenderers.DataGridItemRenderer");
>>>> + IItemRendererInitializer:
>> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DataGridColumnListItemRendererInitializer");
>>>> + ISelectableItemRenderer:
>> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ClassSelectorListSelectableItemRendererBead");
>>>> + IViewport:
>> ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport");
>> }
>>>> +
>>>> +.externsjs.datechooser .externsjs.table {
>>>> + min-width: 324px;
>>>> + min-height: 364px; }
>>>> + .externsjs.datechooser .externsjs.table .externsjs.tablecell {
>>>> + height: auto; }
>>>> + .externsjs.datechooser .externsjs.table
>> .externsjs.tableheadercell.buttonsRow > .layout.horizontal {
>>>> + float: right; }
>>>> + .externsjs.datechooser .externsjs.table
>> .externsjs.tableheadercell.buttonsRow .viewSelector::after {
>>>> + content: " "; }
>>>> + .externsjs.datechooser .externsjs.table
>> .externsjs.tableheadercell.buttonsRow .previousButton::after,
>> .externsjs.datechooser .externsjs.table
>> .externsjs.tableheadercell.buttonsRow .nextButton::after {
>>>> + content: " ";
>>>> + position: absolute; }
>>>> +
>>>> +j|DateChooser {
>>>> + IBeadModel:
>> ClassReference("org.apache.royale.externsjs.beads.models.DateChooserModel");
>>>> + IBeadView:
>> ClassReference("org.apache.royale.externsjs.beads.views.DateChooserView");
>>>> + IBeadLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout");
>>>> + IBeadController:
>> ClassReference("org.apache.royale.externsjs.beads.controllers.DateChooserMouseController");
>> }
>>>> +
>>>> +.externsjs.datefield {
>>>> + display: inline-flex; }
>>>> + .externsjs.datefield .externsjs.textinput input {
>>>> + width: 9.2em; }
>>>> + .externsjs.datefield .externsjs.button::before {
>>>> + margin: 0;
>>>> + padding: 0;
>>>> + line-height: 22px; }
>>>> + .externsjs.datefield .externsjs.button::after {
>>>> + content: " ";
>>>> + position: absolute;
>>>> + width: 22px;
>>>> + height: 22px;
>>>> + left: calc(50% - 11px);
>>>> + top: calc(50% - 11px); }
>>>> +
>>>> +.datechooser-popup {
>>>> + position: fixed;
>>>> + pointer-events: none;
>>>> + bottom: 0;
>>>> + left: 0;
>>>> + width: 100%;
>>>> + height: 100%;
>>>> + overflow: hidden;
>>>> + contain: strict;
>>>> + z-index: 60;
>>>> + color: rgba(0, 0, 0, 0.8); }
>>>> + .datechooser-popup::before {
>>>> + position: absolute;
>>>> + display: block;
>>>> + top: 0;
>>>> + left: 0;
>>>> + width: 100%;
>>>> + height: 100%;
>>>> + content: "";
>>>> + opacity: 0;
>>>> + background-color: rgba(0, 0, 0, 0.65);
>>>> + will-change: opacity;
>>>> + transition: opacity 0.4s 0ms; }
>>>> + .datechooser-popup .externsjs.table {
>>>> + position: relative;
>>>> + transform: translate(-50%, 100%);
>>>> + transition: none;
>>>> + will-change: transform, opacity;
>>>> + bottom: auto;
>>>> + top: calc(100% - 10px);
>>>> + left: 50%;
>>>> + touch-action: none;
>>>> + box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7) !important;
>>>> + opacity: 0; }
>>>> + .datechooser-popup.open {
>>>> + pointer-events: auto; }
>>>> + .datechooser-popup.open::before {
>>>> + opacity: 1; }
>>>> + .datechooser-popup.open .externsjs.table {
>>>> + transform: translate(-50%, -100%);
>>>> + transition: transform 0.4s 0ms, opacity 0.4s 0ms;
>>>> + opacity: 1; }
>>>> +
>>>> +@media (max-width: 768px) {
>>>> + .datechooser-popup .externsjs.table {
>>>> + width: calc(100% - 20px); } }
>>>> +@media (min-width: 768px) and (max-width: 992px) {
>>>> + .datechooser-popup .externsjs.table {
>>>> + width: calc(100% - 300px); } }
>>>> +@media (min-width: 992px) {
>>>> + .datechooser-popup::before {
>>>> + background-color: rgba(0, 0, 0, 0); }
>>>> + .datechooser-popup .externsjs.table {
>>>> + transform: none;
>>>> + transition: none;
>>>> + box-shadow: none !important; }
>>>> + .datechooser-popup .externsjs.table .externsjs.item {
>>>> + height: 0;
>>>> + overflow: hidden;
>>>> + transition: height 200ms ease-in; }
>>>> + .datechooser-popup.open .externsjs.table {
>>>> + transform: none;
>>>> + top: auto;
>>>> + left: auto; }
>>>> + .datechooser-popup.open .externsjs.table .externsjs.item {
>>>> + height: 34px; } }
>>>> +j|DateField {
>>>> + IBeadView:
>> ClassReference("org.apache.royale.externsjs.beads.views.DateFieldView");
>>>> + IBeadModel:
>> ClassReference("org.apache.royale.externsjs.beads.models.DateChooserModel");
>>>> + IBeadController:
>> ClassReference("org.apache.royale.externsjs.beads.controllers.DateFieldMouseController");
>>>> + IFormatter:
>> ClassReference("org.apache.royale.html.accessories.StringDateFormatter");
>>>> + IPopUp: ClassReference("org.apache.royale.externsjs.DateChooser"); }
>>>> +
>>>> +.externsjs.divider {
>>>> + height: 0;
>>>> + margin: 0; }
>>>> +
>>>> +j|Divider {
>>>> + IBeadLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
>>>> +
>>>> +.externsjs.drawer.float {
>>>> + position: fixed;
>>>> + pointer-events: none;
>>>> + top: 0;
>>>> + left: 0;
>>>> + width: 100%;
>>>> + height: 100%;
>>>> + overflow: hidden;
>>>> + contain: strict;
>>>> + z-index: 100; }
>>>> + .externsjs.drawer.float::before {
>>>> + position: absolute;
>>>> + display: block;
>>>> + top: 0;
>>>> + left: 0;
>>>> + width: 100%;
>>>> + height: 100%;
>>>> + content: "";
>>>> + opacity: 0; }
>>>> + .externsjs.drawer.float .drawermain {
>>>> + position: absolute;
>>>> + display: flex;
>>>> + flex-direction: column;
>>>> + left: 0;
>>>> + right: initial;
>>>> + height: 100%; }
>>>> + .externsjs.drawer.float.open {
>>>> + pointer-events: auto; }
>>>> + .externsjs.drawer.float.open::before {
>>>> + opacity: 1; }
>>>> +.externsjs.drawer.fixed {
>>>> + width: 0; }
>>>> + .externsjs.drawer.fixed .drawermain {
>>>> + display: inline-flex;
>>>> + flex-direction: column;
>>>> + left: 0;
>>>> + right: auto;
>>>> + height: 100%;
>>>> + overflow: hidden;
>>>> + touch-action: none; }
>>>> + .externsjs.drawer.fixed.open {
>>>> + pointer-events: auto; }
>>>> + .externsjs.drawer.fixed.open .drawermain {
>>>> + transform: none; }
>>>> +
>>>> +@media (min-width: 768px) {
>>>> + .externsjs.drawer.float .drawermain {
>>>> + width: calc(100% - 60px);
>>>> + max-width: 310px; } }
>>>> +.externsjs.drawerheader {
>>>> + position: relative;
>>>> + display: flex;
>>>> + flex-direction: column;
>>>> + align-items: center;
>>>> + flex-shrink: 0; }
>>>> + .externsjs.drawerheader div {
>>>> + display: flex;
>>>> + position: absolute;
>>>> + top: 0;
>>>> + right: 0;
>>>> + bottom: 0;
>>>> + left: 0;
>>>> + align-items: flex-end; }
>>>> +
>>>> +.externsjs.drawercontent {
>>>> + flex: 1 100 auto;
>>>> + margin: 0;
>>>> + overflow-x: hidden;
>>>> + overflow-y: auto;
>>>> + -webkit-overflow-scrolling: touch;
>>>> + touch-action: pan-y; }
>>>> +
>>>> +.externsjs.drawerfooter {
>>>> + display: flex;
>>>> + position: relative;
>>>> + width: 100%;
>>>> + height: 66px; }
>>>> +
>>>> +j|DrawerBase {
>>>> + IBeadLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
>>>> +
>>>> +j|Drawer {
>>>> + IBeadLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
>>>> +
>>>> +j|DrawerHeader {
>>>> + IBeadLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
>>>> +
>>>> +j|DrawerContent {
>>>> + IBeadLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
>>>> +
>>>> +.externsjs.dropdownlist {
>>>> + -webkit-appearance: none;
>>>> + -moz-appearance: none;
>>>> + -o-appearance: none;
>>>> + -ms-appearance: none;
>>>> + appearance: none;
>>>> + width: 200px;
>>>> + margin: 0;
>>>> + padding: 0.68em 2.38em 0.68em 1.12em;
>>>> + cursor: pointer;
>>>> + display: inline-flex;
>>>> + line-height: normal !important;
>>>> + outline: none; }
>>>> +
>>>> +j|DropDownList {
>>>> + IBeadView:
>> ClassReference("org.apache.royale.externsjs.beads.views.DropDownListView");
>>>> + IBeadModel:
>> ClassReference("org.apache.royale.externsjs.beads.models.DropDownListModel");
>>>> + IDataProviderItemRendererMapper:
>> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DropDownListItemRendererFactoryForCollectionView");
>>>> + IItemRendererClassFactory:
>> ClassReference("org.apache.royale.core.ItemRendererClassFactory");
>>>> + IItemRendererInitializer:
>> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DropDownListItemRendererInitializer");
>>>> + IItemRenderer:
>> ClassReference("org.apache.royale.externsjs.itemRenderers.DropDownListItemRenderer");
>>>> + IBeadController:
>> ClassReference("org.apache.royale.externsjs.beads.controllers.DropDownListController");
>> }
>>>> +
>>>> +@media -royale-swf {
>>>> + j|DropDownList {
>>>> + IBeadModel:
>> ClassReference("org.apache.royale.externsjs.beads.models.ArrayListSelectionModel");
>>>> + IBeadController:
>> ClassReference("org.apache.royale.externsjs.beads.controllers.DropDownListController");
>>>> + IPopUp:
>> ClassReference("org.apache.royale.externsjs.supportClasses.dropdownlist.DropDownListList");
>> } }
>>>> +.externsjs.footerbar {
>>>> + display: inline-flex;
>>>> + flex: 1 1 auto; }
>>>> + .externsjs.footerbar .footerBarAppHeader {
>>>> + display: flex;
>>>> + flex-direction: column;
>>>> + justify-content: space-between;
>>>> + width: 100%;
>>>> + z-index: 20;
>>>> + position: fixed;
>>>> + bottom: 0px; }
>>>> + .externsjs.footerbar .footerBarAppHeader.fixed {
>>>> + transition: box-shadow 200ms linear; }
>>>> + .externsjs.footerbar .externsjs.barrow {
>>>> + display: flex;
>>>> + position: relative;
>>>> + width: 100%;
>>>> + height: 64px; }
>>>> + .externsjs.footerbar .externsjs.barsection {
>>>> + display: inline-flex;
>>>> + flex: 1 1 auto;
>>>> + align-items: center;
>>>> + min-width: 0;
>>>> + z-index: 1;
>>>> + order: -1; }
>>>> + .externsjs.footerbar .externsjs.barsection button {
>>>> + will-change: transform, opacity;
>>>> + display: flex;
>>>> + position: relative;
>>>> + flex-shrink: 0;
>>>> + align-items: center;
>>>> + justify-content: center;
>>>> + width: 48px;
>>>> + height: 48px;
>>>> + outline: none;
>>>> + text-decoration: none;
>>>> + opacity: 1; }
>>>> + .externsjs.footerbar .externsjs.barsection button .fonticon {
>>>> + margin-left: 0px;
>>>> + margin-right: 0px; }
>>>> + .externsjs.footerbar .externsjs.bartitle {
>>>> + -moz-osx-font-smoothing: grayscale;
>>>> + -webkit-font-smoothing: antialiased;
>>>> + white-space: nowrap;
>>>> + flex: 1 1 auto;
>>>> + overflow: hidden;
>>>> + z-index: 1;
>>>> + line-height: 2rem;
>>>> + letter-spacing: 0.0125em;
>>>> + text-decoration: inherit;
>>>> + text-transform: inherit;
>>>> + text-overflow: ellipsis; }
>>>> +
>>>> +j|FooterBar {
>>>> + IBeadLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
>>>> +
>>>> +.externsjs.formheading .externsjs.label.headingLabel {
>>>> + white-space: initial;
>>>> + flex: 1 1 auto; }
>>>> +
>>>> +j|FormHeading {
>>>> + IBeadLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
>>>> + IBeadView:
>> ClassReference("org.apache.royale.externsjs.beads.views.FormHeadingView");
>>>> + IBeadModel:
>> ClassReference("org.apache.royale.externsjs.beads.models.TextModel"); }
>>>> +
>>>> +j|FormItem {
>>>> + IBeadLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.FormItemLayout");
>>>> + IBeadView:
>> ClassReference("org.apache.royale.externsjs.beads.views.FormItemView");
>>>> + IBeadModel:
>> ClassReference("org.apache.royale.externsjs.beads.models.FormItemModel");
>>>> + IFormItemContentArea:
>> ClassReference("org.apache.royale.externsjs.Group");
>>>> + IFormItemLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout");
>> }
>>>> +
>>>> +.fonticon {
>>>> + cursor: default; }
>>>> + .fonticon.size-18 {
>>>> + font-size: 18px; }
>>>> + .fonticon.size-24 {
>>>> + font-size: 24px; }
>>>> + .fonticon.size-36 {
>>>> + font-size: 36px; }
>>>> + .fonticon.size-48 {
>>>> + font-size: 48px; }
>>>> +
>>>> +.externsjs.imagebutton {
>>>> + border-style: none;
>>>> + padding: 0px; }
>>>> +
>>>> +j|ImageButton {
>>>> + IBeadModel:
>> ClassReference("org.apache.royale.externsjs.beads.models.ImageModel"); }
>>>> +
>>>> +.externsjs.item, .externsjs.navigationlink, .externsjs.tabbarbutton {
>>>> + text-decoration: none;
>>>> + letter-spacing: 0;
>>>> + line-height: normal !important;
>>>> + overflow: hidden;
>>>> + cursor: auto;
>>>> + flex-shrink: 0;
>>>> + position: relative;
>>>> + list-style: none; }
>>>> + .externsjs.item.selectable, .externsjs.item.hoverable,
>> .externsjs.navigationlink.selectable, .externsjs.navigationlink.hoverable,
>> .externsjs.tabbarbutton.selectable, .externsjs.tabbarbutton.hoverable {
>>>> + cursor: pointer; }
>>>> + .externsjs.item .fonticon, .externsjs.navigationlink .fonticon,
>> .externsjs.tabbarbutton .fonticon {
>>>> + cursor: inherit; }
>>>> +
>>>> +j|ListItemRenderer {
>>>> + IBeadLayout:
>> ClassReference("org.apache.royale.externsjs.beads.layouts.BasicLayout");
>>>> + IBeadController:
>> ClassReference("org.apache.royale.html.beads.controllers.ItemRendererMouseController");
>> }
>>>> +
>>>> +.externsjs.label {
>>>> + -webkit-font-smoothing: antialiased;
>>>> + cursor: default;
>>>> + white-space: nowrap; }
>>>> + .externsjs.label.multiline {
>>>> + white-space: pre-wrap;
>>>> + word-wrap: break-word; }
>>>> + .externsjs.label.truncate {
>>>> + overflow: hidden;
>>>> + text-overflow: ellipsis; }
>>>> +
>>>> +j|Label {
>>>> + IBeadModel:
>> ClassReference("org.apache.royale.externsjs.beads.models.TextModel"); }
>>>> +
>>>> +.viewport {
>>>> + overflow: visible; }
>>>> + .viewport.clipped {
>>>> + overflow: hidden; }
>>>> + .viewport.scroll {
>>>> + overflow: auto; }
>>>> +
>>>> +.layout.basic {
>>>> + position: relative; }
>>>> + .layout.basic > * {
>>>> + position: absolute !important; }
>>>> +
>>>> +.layout {
>>>> + display: flex; }
>>>> + .layout.horizontal {
>>>> + flex-direction: row;
>>>> + flex-wrap: nowrap;
>>>> + align-items: flex-start; }
>>>> + .layout.horizontal > * {
>>>> + flex: 0 1 auto; }
>>>> + .layout.horizontal.flow {
>>>> + flex-wrap: wrap;
>>>> + max-width: 100%; }
>>>> + .layout.horizontal.centered {
>>>> + justify-content: center;
>>>> + align-items: center;
>>>> + align-content: center; }
>>>> + .layout.horizontal.centered > * {
>>>> + flex: 0 0 auto !important; }
>>>> + .layout.horizontal.tile {
>>>> + flex-wrap: wrap; }
>>>> + .layout.horizontal.formitem {
>>>> + width: 100%;
>>>> + align-items: flex-start; }
>>>> + .layout.horizontal.gap-1x3px > *:first-child {
>>>> + margin-left: 0px; }
>>>> + .layout.horizontal.gap-1x3px > * {
>>>> + margin-left: 3px; }
>>>> + .layout.horizontal.gap-2x3px > *:first-child {
>>>> + margin-left: 0px; }
>>>> + .layout.horizontal.gap-2x3px > * {
>>>> + margin-left: 6px; }
>>>> + .layout.horizontal.gap-3x3px > *:first-child {
>>>> + margin-left: 0px; }
>>>> + .layout.horizontal.gap-3x3px > * {
>>>> + margin-left: 9px; }
>>>> + .layout.horizontal.gap-4x3px > *:first-child {
>>>> + margin-left: 0px; }
>>>> + .layout.horizontal.gap-4x3px > * {
>>>> + margin-left: 12px; }
>>>> + .layout.horizontal.gap-5x3px > *:first-child {
>>>> + margin-left: 0px; }
>>>> + .layout.horizontal.gap-5x3px > * {
>>>> + margin-left: 15px; }
>>>> + .layout.horizontal.gap-6x3px > *:first-child {
>>>> + margin-left: 0px; }
>>>> + .layout.horizontal.gap-6x3px > * {
>>>> + margin-left: 18px; }
>>>> + .layout.horizontal.gap-7x3px > *:first-child {
>>>> + margin-left: 0px; }
>>>> + .layout.horizontal.gap-7x3px > * {
>>>> + margin-left: 21px; }
>>>> + .layout.horizontal.gap-8x3px > *:first-child {
>>>> + margin-left: 0px; }
>>>> + .layout.horizontal.gap-8x3px > * {
>>>> + margin-left: 24px; }
>>>> + .layout.horizontal.gap-9x3px > *:first-child {
>>>> + margin-left: 0px; }
>>>> + .layout.horizontal.gap-9x3px > * {
>>>> + margin-left: 27px; }
>>>> + .layout.horizontal.gap-10x3px > *:first-child {
>>>> + margin-left: 0px; }
>>>> + .layout.horizontal.gap-10x3px > * {
>>>> + margin-left: 30px; }
>>>> + .layout.horizontal.itemsReverse.gap-1x3px > *:last-child {
>>>> + margin-left: 0px; }
>>>> + .layout.horizontal.itemsReverse.gap-1x3px > * {
>>>> + margin-left: 3px; }
>>>> + .layout.horizontal.itemsReverse.gap-2x3px > *:last-child {
>>>> + margin-left: 0px; }
>>>> + .layout.horizontal.itemsReverse.gap-2x3px > * {
>>>> + margin-left: 6px; }
>>>> + .layout.horizontal.itemsReverse.gap-3x3px > *:last-child {
>>>> + margin-left: 0px; }
>>>> + .layout.horizontal.itemsReverse.gap-3x3px > * {
>>>> + margin-left: 9px; }
>>>> + .layout.horizontal.itemsReverse.gap-4x3px > *:last-child {
>>>> + margin-left: 0px; }
>>>> + .layout.horizontal.itemsReverse.gap-4x3px > * {
>>>> + margin-left: 12px; }
>>>> + .layout.horizontal.itemsReverse.gap-5x3px > *:last-child {
>>>> + margin-left: 0px; }
>>>> + .layout.horizontal.itemsReverse.gap-5x3px > * {
>>>> + margin-left: 15px; }
>>>> + .layout.horizontal.itemsReverse.gap-6x3px > *:last-child {
>>>> + margin-left: 0px; }
>>>> + .layout.horizontal.itemsReverse.gap-6x3px > * {
>>>> + margin-left: 18px; }
>>>> + .layout.horizontal.itemsReverse.gap-7x3px > *:last-child {
>>>> + margin-left: 0px; }
>>>> + .layout.horizontal.itemsReverse.gap-7x3px > * {
>>>> + margin-left: 21px; }
>>>> + .layout.horizontal.itemsReverse.gap-8x3px > *:last-child {
>>>> + margin-left: 0px; }
>>>> + .layout.horizontal.itemsReverse.gap-8x3px > * {
>>>> + margin-left: 24px; }
>>>> + .layout.horizontal.itemsReverse.gap-9x3px > *:last-child {
>>>> + margin-left: 0px; }
>>>> + .layout.horizontal.itemsReverse.gap-9x3px > * {
>>>> + margin-left: 27px; }
>>>> + .layout.horizontal.itemsReverse.gap-10x3px > *:last-child {
>>>> + margin-left: 0px; }
>>>> + .layout.horizontal.itemsReverse.gap-10x3px > * {
>>
Re: [royale-asjs] branch develop updated: ExternsJS library in frameworks added. In ExternsJS project inspiretree external JS library added.
Posted by Alina Kazi <al...@gmail.com>.
Hi Harbs,
Thanks for the guidance, I will follow it.
All the code is relevant to inspiretree and its beads. Its a lot because we
can use inspiretree multiple ways with checkbox without it, with parent
child icon and without and much more stuff handling.
I will add the example in sdk soon or Maria will.
I will remove files which has other license i will add only references of
the js file in as wrapper.
Thanks and Best Regards,
Alina Kazi
On Wed, 24 Nov 2021, 3:04 am Harbs, <ha...@gmail.com> wrote:
> Here’s the instructions on how to add MIT licensed code:
> https://infra.apache.org/licensing-howto.html#permissive-deps
>
> > On Nov 23, 2021, at 11:57 PM, Harbs <ha...@gmail.com> wrote:
> >
> > That’s a lot of code.
> >
> > Where did all this code come from? In particular inspire-tree.js jumped
> out at me. Where’s that from? inspire tree seems to be MIT licensed:
> > https://github.com/helion3/inspire-tree/blob/master/LICENSE
> >
> > You can’t just add an apache header to that and put it in our repo.
> >
> >> On Nov 23, 2021, at 9:14 PM, alinakazi@apache.org wrote:
> >>
> >> This is an automated email from the ASF dual-hosted git repository.
> >>
> >> alinakazi pushed a commit to branch develop
> >> in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
> >>
> >>
> >> The following commit(s) were added to refs/heads/develop by this push:
> >> new b7b21fc ExternsJS library in frameworks added. In ExternsJS
> project inspiretree external JS library added.
> >> b7b21fc is described below
> >>
> >> commit b7b21fc0dafd309741acaa29acc745643a4b0d60
> >> Author: alinakazi <al...@gmail.com>
> >> AuthorDate: Wed Nov 24 00:14:10 2021 +0500
> >>
> >> ExternsJS library in frameworks added. In ExternsJS project
> inspiretree external JS library added.
> >> ---
> >> frameworks/projects/ExternsJS/asconfig.json | 33 +
> >> frameworks/projects/ExternsJS/build.xml | 182 +
> >> frameworks/projects/ExternsJS/pom.xml | 276 +
> >> .../src/main/config/compile-swf-config.xml | 112 +
> >> .../ExternsJS/src/main/resources/defaults.css | 3255 +++++++++
> >> .../src/main/resources/externsjs-as-manifest.xml | 25 +
> >> .../src/main/resources/externsjs-manifest.xml | 27 +
> >> .../externsjs/inspiretree/New Text Document.html | 56 +
> >> .../externsjs/inspiretree/inspire-tree-custom.css | 435 ++
> >> .../externsjs/inspiretree/inspire-tree-custom.sass | 541 ++
> >> .../externsjs/inspiretree/inspire-tree-dark.css | 325 +
> >> .../inspiretree/inspire-tree-dark.min.css | 14 +
> >> .../inspiretree/inspire-tree-dom-royale.js | 3766 +++++++++++
> >> .../externsjs/inspiretree/inspire-tree-dom.js | 3764 +++++++++++
> >> .../externsjs/inspiretree/inspire-tree-dom.min.js | 21 +
> >> .../inspiretree/inspire-tree-light-jewel-blue.css | 619 ++
> >> .../externsjs/inspiretree/inspire-tree-light.css | 347 +
> >> .../inspiretree/inspire-tree-light.min.css | 14 +
> >> .../externsjs/inspiretree/inspire-tree-royale.js | 7126
> ++++++++++++++++++++
> >> .../externsjs/inspiretree/inspire-tree.js | 7088
> +++++++++++++++++++
> >> .../externsjs/inspiretree/inspire-tree.min.js | 29 +
> >> .../inspiretree/jewel-blue/collapsed_blue.svg | 14 +
> >> .../jewel-blue/expand_less_black_24dp.svg | 14 +
> >> .../jewel-blue/expand_more_black_24dp.svg | 14 +
> >> .../inspiretree/jewel-blue/expanded_blue.svg | 21 +
> >> .../ExternsJS/src/main/royale/ExternsJSClasses.as | 53 +
> >> .../royale/externsjs/inspiretree/IInspireTree.as | 33 +
> >> .../royale/externsjs/inspiretree/InspireTree.as | 897 +++
> >> .../inspiretree/InspireTreeBasicControl.as | 277 +
> >> .../royale/externsjs/inspiretree/InspireTreeDOM.as | 74 +
> >> .../royale/externsjs/inspiretree/TreeEvent.as | 112 +
> >> .../royale/externsjs/inspiretree/TreeNode.as | 650 ++
> >> .../royale/externsjs/inspiretree/TreeNodes.as | 620 ++
> >> .../royale/externsjs/inspiretree/UtilsTree.as | 28 +
> >> .../beads/InspireTreeCheckBoxModeBead.as | 339 +
> >> .../inspiretree/beads/InspireTreeEventsBead.as | 215 +
> >> .../inspiretree/beads/InspireTreeIconBead.as | 576 ++
> >> .../inspiretree/beads/InspireTreePaginateBead.as | 162 +
> >> .../beads/InspireTreeReadOnlyCheckBead.as | 160 +
> >> .../beads/InspireTreeReadOnlyCheckBead_V0.as | 152 +
> >> .../beads/InspireTreeRevertCheckBead.as | 185 +
> >> .../inspiretree/beads/models/InspireTreeModel.as | 290 +
> >> .../royale/externsjs/inspiretree/vos/ConfigDOM.as | 64 +
> >> .../royale/externsjs/inspiretree/vos/ConfigTree.as | 30 +
> >> .../externsjs/inspiretree/vos/DragAndDropConfig.as | 33 +
> >> .../externsjs/inspiretree/vos/ItemTreeNode.as | 146 +
> >> .../externsjs/inspiretree/vos/OptionsTree.as | 101 +
> >> 47 files changed, 33315 insertions(+)
> >>
> >> diff --git a/frameworks/projects/ExternsJS/asconfig.json
> b/frameworks/projects/ExternsJS/asconfig.json
> >> new file mode 100644
> >> index 0000000..3b1f1b3
> >> --- /dev/null
> >> +++ b/frameworks/projects/ExternsJS/asconfig.json
> >> @@ -0,0 +1,33 @@
> >> +/*
> >> + * Licensed to the Apache Software Foundation (ASF) under one or more
> >> + * contributor license agreements. See the NOTICE file distributed
> with
> >> + * this work for additional information regarding copyright ownership.
> >> + * The ASF licenses this file to You 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
> >> + *
> >> + * Unless required by applicable law or agreed to in writing, software
> >> + * distributed under the License is distributed on an "AS IS" BASIS,
> >> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
> implied.
> >> + * See the License for the specific language governing permissions and
> >> + * limitations under the License.
> >> + */
> >> + {
> >> + "config": "royale",
> >> + "type": "lib",
> >> + "compilerOptions": {
> >> + "debug": true,
> >> + "targets": [
> >> + "JSRoyale", "SWF"
> >> + ],
> >> + "include-classes": [
> >> + "src/main/royale/ExternsJSClasses.as"
> >> + ],
> >> + "source-path": [
> >> + "src/main/royale"
> >> + ],
> >> + "output": "target/ExternsJS.swc"
> >> + }
> >> +}
> >> diff --git a/frameworks/projects/ExternsJS/build.xml
> b/frameworks/projects/ExternsJS/build.xml
> >> new file mode 100644
> >> index 0000000..697b257
> >> --- /dev/null
> >> +++ b/frameworks/projects/ExternsJS/build.xml
> >> @@ -0,0 +1,182 @@
> >> +<?xml version="1.0"?>
> >> +<!--
> >> +
> >> + Licensed to the Apache Software Foundation (ASF) under one or more
> >> + contributor license agreements. See the NOTICE file distributed with
> >> + this work for additional information regarding copyright ownership.
> >> + The ASF licenses this file to You 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
> >> +
> >> + Unless required by applicable law or agreed to in writing, software
> >> + distributed under the License is distributed on an "AS IS" BASIS,
> >> + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
> implied.
> >> + See the License for the specific language governing permissions and
> >> + limitations under the License.
> >> +
> >> +-->
> >> +
> >> +
> >> +<project name="ExternsJS" default="main" basedir=".">
> >> + <property name="ROYALE_HOME" location="../../.."/>
> >> +
> >> + <property file="${ROYALE_HOME}/env.properties"/>
> >> + <property environment="env"/>
> >> + <property file="${ROYALE_HOME}/local.properties"/>
> >> + <property file="${ROYALE_HOME}/build.properties"/>
> >> + <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
> >> + <condition property="AIR_HOME" value="${env.AIR_HOME}">
> >> + <isset property="env.AIR_HOME" />
> >> + </condition>
> >> + <property name="AIR_HOME" value="${ROYALE_HOME}"/>
> >> + <condition property="PLAYERGLOBAL_HOME"
> value="${env.PLAYERGLOBAL_HOME}">
> >> + <isset property="env.PLAYERGLOBAL_HOME" />
> >> + </condition>
> >> + <property name="PLAYERGLOBAL_HOME"
> value="${ROYALE_HOME}/frameworks/libs/player"/>
> >> +
> >> + <property name="target.name" value="${ant.project.name}.swc" />
> >> +
> >> + <tstamp>
> >> + <format property="royale.swc-date" pattern="MM/dd/yy HH:mm Z"/>
> >> + </tstamp>
> >> + <echo>swc-date is ${royale.swc-date}</echo>
> >> +
> >> + <target name="main"
> depends="clean,check-compiler,compile,compile-js,copy-swc,test"
> description="Full build of ${ant.project.name}.swc">
> >> + </target>
> >> +
> >> + <target name="compile-js">
> >> + <ant dir="${ROYALE_HOME}/frameworks/js/projects/${
> ant.project.name}JS/" inheritAll="false" >
> >> + <property name="ROYALE_SWF_COMPILER_HOME"
> value="${ROYALE_SWF_COMPILER_HOME}"/>
> >> + <property name="ROYALE_COMPILER_HOME"
> value="${ROYALE_COMPILER_HOME}"/>
> >> + <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
> >> + </ant>
> >> + </target>
> >> +
> >> + <target name="copy-swc" if="AIR_HOME">
> >> + <copy file="${basedir}/target/${target.name}"
> tofile="${ROYALE_HOME}/frameworks/libs/${target.name}" />
> >> + </target>
> >> +
> >> + <target name="check-for-tests" >
> >> + <condition property="skip-tests" >
> >> + <not>
> >> + <available file="${basedir}/src/test/royale/build.xml"
> />
> >> + </not>
> >> + </condition>
> >> + <!-- exclude from js-only build -->
> >> + <condition property="skip-swf-tests">
> >> + <or>
> >> + <isset property="skip-tests" />
> >> + <not>
> >> + <!-- env.AIR_HOME is how we determine if it's a
> SWF distritbution -->
> >> + <isset property="env.AIR_HOME" />
> >> + </not>
> >> + </or>
> >> + </condition>
> >> + </target>
> >> +
> >> + <target name="test" depends="check-for-tests,check-compiler"
> unless="skip-tests">
> >> + <antcall target="test-swf" />
> >> + </target>
> >> +
> >> + <target name="test-swf" unless="skip-swf-tests">
> >> + <ant dir="src/test/royale" />
> >> + </target>
> >> +
> >> + <target name="clean">
> >> + <delete failonerror="false">
> >> + <fileset dir="${ROYALE_HOME}/frameworks/libs">
> >> + <include name="${target.name}"/>
> >> + </fileset>
> >> + </delete>
> >> + <delete failonerror="false" includeemptydirs="true">
> >> + <fileset dir="${basedir}/target">
> >> + <include name="**/**"/>
> >> + </fileset>
> >> + </delete>
> >> + <antcall target="clean-tests" />
> >> + </target>
> >> +
> >> + <target name="clean-tests" depends="check-for-tests"
> unless="skip-tests">
> >> + <ant dir="src/test/royale" target="clean"/>
> >> + </target>
> >> +
> >> + <target name="compile" description="Compiles .as files into .swc"
> if="AIR_HOME">
> >> + <!-- use antcall so that resultproperty can be used in other
> projects and
> >> + they don't collide when being run one after the other -->
> >> + <antcall target="compile-swf" />
> >> + </target>
> >> +
> >> + <target name="compile-swf">
> >> + <echo message="Compiling libs/${ant.project.name}.swc"/>
> >> + <echo message="ROYALE_HOME: ${ROYALE_HOME}"/>
> >> + <echo message="ROYALE_SWF_COMPILER_HOME:
> ${ROYALE_SWF_COMPILER_HOME}"/>
> >> + <echo message="ROYALE_COMPILER_HOME: ${ROYALE_COMPILER_HOME}"/>
> >> +
> >> + <java jar="${ROYALE_COMPILER_HOME}/lib/compc.jar" fork="true"
> resultproperty="compcoutput">
> >> + <jvmarg value="-Xmx384m" />
> >> + <jvmarg value="-Dsun.io.useCanonCaches=false" />
> >> + <jvmarg value="-Droyalelib=${ROYALE_HOME}/frameworks" />
> >> + <arg value="+royalelib=${ROYALE_HOME}/frameworks" />
> >> + <arg value="+playerglobal.version=${playerglobal.version}"
> />
> >> + <arg value="+env.AIR_HOME=${AIR_HOME}" />
> >> + <arg value="-compiler.strict-xml=true" />
> >> + <arg value="-compiler.targets=SWF,JSRoyale" />
> >> + <arg line="-metadata.date="${royale.swc-date}""
> />
> >> + <arg line="-metadata.dateFormat="MM/dd/yy HH:mm
> Z"" />
> >> + <arg
> line="-swf-debugfile-alias="/org/apache/royale/${release.version}""
> />
> >> + <arg value="-output=${basedir}/target/${target.name}" />
> >> + <arg
> value="-load-config=${basedir}/src/main/config/compile-swf-config.xml" />
> >> + <arg
> value="-js-load-config=${ROYALE_HOME}/frameworks/js-config.xml" />
> >> + <arg
> value="-js-load-config+=${basedir}/../../js/projects/${ant.project.name}JS/src/main/config/compile-js-config.xml"
> />
> >> + </java>
> >> + <fail>
> >> + <condition>
> >> + <not>
> >> + <or>
> >> + <equals arg1="${compcoutput}" arg2="0" />
> >> + <equals arg1="${compcoutput}" arg2="2" />
> >> + </or>
> >> + </not>
> >> + </condition>
> >> + </fail>
> >> + </target>
> >> +
> >> + <target name="check-compiler"
> depends="check-compiler-home,check-transpiler-home">
> >> + <path id="lib.path">
> >> + <fileset dir="${ROYALE_COMPILER_HOME}/lib"
> includes="compiler-royaleTasks.jar"/>
> >> + </path>
> >> + <taskdef resource="flexTasks.tasks" classpathref="lib.path"/>
> >> + </target>
> >> +
> >> + <target name="check-compiler-home"
> >> + description="Set ROYALE_SWF_COMPILER_HOME to point at the
> compiler.">
> >> +
> >> + <available file="${ROYALE_HOME}/lib/compiler-mxmlc.jar"
> >> + type="file"
> >> + property="ROYALE_SWF_COMPILER_HOME"
> >> + value="${ROYALE_HOME}"/>
> >> +
> >> + <fail message="ROYALE_SWF_COMPILER_HOME must be set to a
> folder with a lib sub-folder containing compiler-mxmlc.jar such as the
> compiler folder in royale-compiler repo or the root of a Royale SDK"
> >> + unless="ROYALE_SWF_COMPILER_HOME"/>
> >> + </target>
> >> +
> >> + <target name="check-transpiler-home"
> >> + description="Set ROYALE_COMPILER_HOME to point at the
> cross-compiler.">
> >> +
> >> + <available file="${ROYALE_HOME}/js/lib/jsc.jar"
> >> + type="file"
> >> + property="ROYALE_COMPILER_HOME"
> >> + value="${ROYALE_HOME}/js"/>
> >> +
> >> + <available file="${env.ROYALE_COMPILER_HOME}/lib/jsc.jar"
> >> + type="file"
> >> + property="ROYALE_COMPILER_HOME"
> >> + value="${env.ROYALE_COMPILER_HOME}"/>
> >> +
> >> + <fail message="ROYALE_COMPILER_HOME must be set to a folder
> with a lib sub-folder containing jsc.jar such as the compiler-jx folder in
> royale-compiler repo or the js folder of a Royale SDK"
> >> + unless="ROYALE_COMPILER_HOME"/>
> >> + </target>
> >> +
> >> +</project>
> >> diff --git a/frameworks/projects/ExternsJS/pom.xml
> b/frameworks/projects/ExternsJS/pom.xml
> >> new file mode 100644
> >> index 0000000..8f97429
> >> --- /dev/null
> >> +++ b/frameworks/projects/ExternsJS/pom.xml
> >> @@ -0,0 +1,276 @@
> >> +<?xml version="1.0" encoding="UTF-8"?>
> >> +<!--
> >> +
> >> + Licensed to the Apache Software Foundation (ASF) under one or more
> >> + contributor license agreements. See the NOTICE file distributed with
> >> + this work for additional information regarding copyright ownership.
> >> + The ASF licenses this file to You 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
> >> +
> >> + Unless required by applicable law or agreed to in writing, software
> >> + distributed under the License is distributed on an "AS IS" BASIS,
> >> + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
> implied.
> >> + See the License for the specific language governing permissions and
> >> + limitations under the License.
> >> +
> >> +--><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="
> http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="
> http://maven.apache.org/POM/4.0.0
> http://maven.apache.org/xsd/maven-4.0.0.xsd">
> >> + <modelVersion>4.0.0</modelVersion>
> >> +
> >> + <parent>
> >> + <groupId>org.apache.royale.framework</groupId>
> >> + <artifactId>projects</artifactId>
> >> + <version>0.9.9-SNAPSHOT</version>
> >> + </parent>
> >> +
> >> + <artifactId>ExternsJS</artifactId>
> >> + <version>0.9.9-SNAPSHOT</version>
> >> + <packaging>swc</packaging>
> >> +
> >> + <name>Apache Royale: Framework: Libs: ExternsJS</name>
> >> +
> >> + <build>
> >> + <sourceDirectory>src/main/royale</sourceDirectory>
> >> + <plugins>
> >> + <plugin>
> >> + <groupId>org.apache.royale.compiler</groupId>
> >> + <artifactId>royale-maven-plugin</artifactId>
> >> + <version>${project.royale.compiler.version}</version>
> >> + <extensions>true</extensions>
> >> + <configuration>
> >> + <namespaces>
> >> + <namespace>
> >> + <uri>library://ns.apache.org/royale/externsjs</uri>
> >> +
> <manifest>${project.basedir}/src/main/resources/externsjs-manifest.xml</manifest>
> >> + </namespace>
> >> + <namespace>
> >> + <type>as</type>
> >> + <uri>library://ns.apache.org/royale/externsjs</uri>
> >> +
> <manifest>${project.basedir}/src/main/resources/externsjs-as-manifest.xml</manifest>
> >> + </namespace>
> >> + </namespaces>
> >> + <includeClasses>
> >> + <includeClass>ExternsJSClasses</includeClass>
> >> + </includeClasses>
> >> + <includeFiles>
> >> + <include-file>
> >> + <name>defaults.css</name>
> >> + <path>../src/main/resources/defaults.css</path>
> >> + </include-file>
> >> + </includeFiles>
> >> + <includeLookupOnly>true</includeLookupOnly>
> >> + <allowSubclassOverrides>true</allowSubclassOverrides>
> >> + <skipExtern>true</skipExtern>
> >> + <skipAS>${royale.skipAS}</skipAS>
> >> + <!-- <additionalCompilerOptions>
> >> + -source-map=true;
> >> +
> -source-map-source-root=/frameworks/projects/ExternsJS/src/main/royale/
> >> + </additionalCompilerOptions> -->
> >> + </configuration>
> >> + </plugin>
> >> + <plugin>
> >> + <groupId>nl.geodienstencentrum.maven</groupId>
> >> + <artifactId>sass-maven-plugin</artifactId>
> >> + <configuration>
> >> + <resources>
> >> + <resource>
> >> + <source>
> >> +
> <directory>${basedir}/src/main/resources/externsjs/inspiretree</directory>
> >> + <includes>
> >> + <include>**/*.sass</include>
> >> + </includes>
> >> + </source>
> >> +
> <destination>${basedir}/src/main/resources/externsjs/inspiretree</destination>
> >> + </resource>
> >> + </resources>
> >> + </configuration>
> >> + <executions>
> >> + <execution>
> >> + <id>generate-css-using-sass</id>
> >> + <goals>
> >> + <goal>update-stylesheets</goal>
> >> + </goals>
> >> + <phase>generate-resources</phase>
> >> + </execution>
> >> + </executions>
> >> + </plugin>
> >> + <plugin>
> >> + <groupId>com.google.code.maven-replacer-plugin</groupId>
> >> + <artifactId>replacer</artifactId>
> >> + <version>1.5.3</version>
> >> + <executions>
> >> + <execution>
> >> + <phase>generate-resources</phase>
> >> + <goals>
> >> + <goal>replace</goal>
> >> + </goals>
> >> + </execution>
> >> + </executions>
> >> + <configuration>
> >> + <includes>
> >> + <include>${basedir}/src/main/resources/**/*.css</include>
> >> + </includes>
> >> + <regex>false</regex>
> >> + <replacements>
> >> + <replacement>
> >> + <token>@@ZERO_WIDTH_SPACE</token>
> >> + <value>\200b</value>
> >> + </replacement>
> >> + <replacement>
> >> + <token>@@NON_BREAKING_SPACE</token>
> >> + <value>\0a</value>
> >> + </replacement>
> >> + </replacements>
> >> + </configuration>
> >> + </plugin>
> >> + </plugins>
> >> + </build>
> >> +
> >> + <dependencies>
> >> + <dependency>
> >> + <groupId>org.apache.royale.framework</groupId>
> >> + <artifactId>Core</artifactId>
> >> + <version>0.9.9-SNAPSHOT</version>
> >> + <type>swc</type>
> >> + <classifier>js</classifier>
> >> + </dependency>
> >> + <dependency>
> >> + <groupId>org.apache.royale.framework</groupId>
> >> + <artifactId>Binding</artifactId>
> >> + <version>0.9.9-SNAPSHOT</version>
> >> + <type>swc</type>
> >> + <classifier>js</classifier>
> >> + </dependency>
> >> + <dependency>
> >> + <groupId>org.apache.royale.framework</groupId>
> >> + <artifactId>Graphics</artifactId>
> >> + <version>0.9.9-SNAPSHOT</version>
> >> + <type>swc</type>
> >> + <classifier>js</classifier>
> >> + </dependency>
> >> + <dependency>
> >> + <groupId>org.apache.royale.framework</groupId>
> >> + <artifactId>Collections</artifactId>
> >> + <version>0.9.9-SNAPSHOT</version>
> >> + <type>swc</type>
> >> + <classifier>js</classifier>
> >> + </dependency>
> >> + <dependency>
> >> + <groupId>org.apache.royale.framework</groupId>
> >> + <artifactId>HTML</artifactId>
> >> + <version>0.9.9-SNAPSHOT</version>
> >> + <type>swc</type>
> >> + <classifier>js</classifier>
> >> + </dependency>
> >> + <dependency>
> >> + <groupId>org.apache.royale.framework</groupId>
> >> + <artifactId>Basic</artifactId>
> >> + <version>0.9.9-SNAPSHOT</version>
> >> + <type>swc</type>
> >> + <classifier>js</classifier>
> >> + </dependency>
> >> + <dependency>
> >> + <groupId>org.apache.royale.framework</groupId>
> >> + <artifactId>Formatters</artifactId>
> >> + <version>0.9.9-SNAPSHOT</version>
> >> + <type>swc</type>
> >> + <classifier>js</classifier>
> >> + </dependency>
> >> + </dependencies>
> >> +
> >> + <profiles>
> >> + <profile>
> >> + <id>platform-windows</id>
> >> + <activation>
> >> + <os>
> >> + <family>windows</family>
> >> + </os>
> >> + </activation>
> >> + <build>
> >> + <plugins>
> >> + <plugin>
> >> + <groupId>nl.geodienstencentrum.maven</groupId>
> >> + <artifactId>sass-maven-plugin</artifactId>
> >> + <executions>
> >> + <execution>
> >> + <id>generate-css-using-sass</id>
> >> + <goals>
> >> + <goal>update-stylesheets</goal>
> >> + </goals>
> >> + <phase>generate-resources</phase>
> >> + <configuration>
> >> + <sassOptions>
> >> + <!-- on windows it is typical to have
> autoCRLF=true,
> >> + so we don't want to overwrite
> >> + the CRLF newlines with unix newlines (which is
> true by default)
> >> + locally, because that will change git status of
> the css file
> >> + on windows
> >> + -->
> >> + <unix_newlines>false</unix_newlines>
> >> + </sassOptions>
> >> + </configuration>
> >> + </execution>
> >> + </executions>
> >> + </plugin>
> >> + </plugins>
> >> + </build>
> >> + </profile>
> >> + <profile>
> >> + <id>option-with-swf</id>
> >> + <dependencies>
> >> + <dependency>
> >> + <groupId>org.apache.royale.framework</groupId>
> >> + <artifactId>Core</artifactId>
> >> + <version>0.9.9-SNAPSHOT</version>
> >> + <type>swc</type>
> >> + <classifier>swf</classifier>
> >> + </dependency>
> >> + <dependency>
> >> + <groupId>org.apache.royale.framework</groupId>
> >> + <artifactId>Binding</artifactId>
> >> + <version>0.9.9-SNAPSHOT</version>
> >> + <type>swc</type>
> >> + <classifier>swf</classifier>
> >> + </dependency>
> >> + <dependency>
> >> + <groupId>org.apache.royale.framework</groupId>
> >> + <artifactId>Graphics</artifactId>
> >> + <version>0.9.9-SNAPSHOT</version>
> >> + <type>swc</type>
> >> + <classifier>swf</classifier>
> >> + </dependency>
> >> + <dependency>
> >> + <groupId>org.apache.royale.framework</groupId>
> >> + <artifactId>Collections</artifactId>
> >> + <version>0.9.9-SNAPSHOT</version>
> >> + <type>swc</type>
> >> + <classifier>swf</classifier>
> >> + </dependency>
> >> + <dependency>
> >> + <groupId>org.apache.royale.framework</groupId>
> >> + <artifactId>HTML</artifactId>
> >> + <version>0.9.9-SNAPSHOT</version>
> >> + <type>swc</type>
> >> + <classifier>swf</classifier>
> >> + </dependency>
> >> + <dependency>
> >> + <groupId>org.apache.royale.framework</groupId>
> >> + <artifactId>Basic</artifactId>
> >> + <version>0.9.9-SNAPSHOT</version>
> >> + <type>swc</type>
> >> + <classifier>swf</classifier>
> >> + </dependency>
> >> + <dependency>
> >> + <groupId>org.apache.royale.framework</groupId>
> >> + <artifactId>Formatters</artifactId>
> >> + <version>0.9.9-SNAPSHOT</version>
> >> + <type>swc</type>
> >> + <classifier>swf</classifier>
> >> + </dependency>
> >> + </dependencies>
> >> + </profile>
> >> + </profiles>
> >> +
> >> +<properties /></project>
> >> diff --git
> a/frameworks/projects/ExternsJS/src/main/config/compile-swf-config.xml
> b/frameworks/projects/ExternsJS/src/main/config/compile-swf-config.xml
> >> new file mode 100644
> >> index 0000000..8981130
> >> --- /dev/null
> >> +++
> b/frameworks/projects/ExternsJS/src/main/config/compile-swf-config.xml
> >> @@ -0,0 +1,112 @@
> >> +<!--
> >> +
> >> + Licensed to the Apache Software Foundation (ASF) under one or more
> >> + contributor license agreements. See the NOTICE file distributed with
> >> + this work for additional information regarding copyright ownership.
> >> + The ASF licenses this file to You 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
> >> +
> >> + Unless required by applicable law or agreed to in writing, software
> >> + distributed under the License is distributed on an "AS IS" BASIS,
> >> + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
> implied.
> >> + See the License for the specific language governing permissions and
> >> + limitations under the License.
> >> +
> >> +-->
> >> +<royale-config>
> >> +
> >> + <compiler>
> >> + <accessible>false</accessible>
> >> +
> >> + <!-- build both SWF and JS. -->
> >> + <targets>
> >> + <target>JSRoyale</target>
> >> + </targets>
> >> + <strict-xml>true</strict-xml>
> >> +
> >> + <external-library-path>
> >> +
> <path-element>${env.AIR_HOME}/frameworks/libs/air/airglobal.swc</path-element>
> >> +
> <path-element>../../../../../libs/Binding.swc</path-element>
> >> + <path-element>../../../../../libs/Core.swc</path-element>
> >> +
> <path-element>../../../../../libs/Graphics.swc</path-element>
> >> + <path-element>../../../../../libs/Basic.swc</path-element>
> >> +
> <path-element>../../../../../libs/Collections.swc</path-element>
> >> + <path-element>../../../../../libs/HTML.swc</path-element>
> >> +
> <path-element>../../../../../libs/Formatters.swc</path-element>
> >> + </external-library-path>
> >> +
> >> + <allow-subclass-overrides>true</allow-subclass-overrides>
> >> + <mxml>
> >> + <children-as-data>true</children-as-data>
> >> + <imports>
> >> +
> <implicit-import>org.apache.royale.events.*</implicit-import>
> >> +
> <implicit-import>org.apache.royale.geom.*</implicit-import>
> >> +
> <implicit-import>org.apache.royale.core.ClassFactory</implicit-import>
> >> +
> <implicit-import>org.apache.royale.core.IFactory</implicit-import>
> >> + </imports>
> >> + </mxml>
> >> +
> <binding-value-change-event>org.apache.royale.events.ValueChangeEvent</binding-value-change-event>
> >> +
> <binding-value-change-event-kind>org.apache.royale.events.ValueChangeEvent</binding-value-change-event-kind>
> >> +
> <binding-value-change-event-type>valueChange</binding-value-change-event-type>
> >> +
> >> + <define>
> >> + <name>COMPILE::SWF</name>
> >> + <value>true</value>
> >> + </define>
> >> + <define>
> >> + <name>COMPILE::JS</name>
> >> + <value>false</value>
> >> + </define>
> >> +
> >> + <keep-as3-metadata>
> >> + <name>Bindable</name>
> >> + <name>Managed</name>
> >> + <name>ChangeEvent</name>
> >> + <name>NonCommittingChangeEvent</name>
> >> + <name>Transient</name>
> >> + </keep-as3-metadata>
> >> +
> >> + <locale/>
> >> +
> >> + <library-path/>
> >> +
> >> + <namespaces>
> >> + <namespace>
> >> + <uri>library://ns.apache.org/royale/externsjs</uri>
> >> +
> <manifest>../resources/externsjs-manifest.xml</manifest>
> >> + </namespace>
> >> + <namespace>
> >> + <uri>library://ns.apache.org/royale/externsjs</uri>
> >> +
> <manifest>../resources/externsjs-as-manifest.xml</manifest>
> >> + </namespace>
> >> + </namespaces>
> >> +
> >> + <source-path>
> >> + <path-element>../royale</path-element>
> >> + </source-path>
> >> +
> >> + <warn-no-constructor>false</warn-no-constructor>
> >> + </compiler>
> >> +
> >> + <include-file>
> >> + <name>defaults.css</name>
> >> + <path>../resources/defaults.css</path>
> >> + </include-file>
> >> +
> >> + <include-lookup-only>true</include-lookup-only>
> >> +
> >> + <include-classes>
> >> + <class>ExternsJSClasses</class>
> >> + </include-classes>
> >> +
> >> + <include-namespaces>
> >> + <uri>library://ns.apache.org/royale/externsjs</uri>
> >> + </include-namespaces>
> >> +
> >> + <target-player>${playerglobal.version}</target-player>
> >> +
> >> +
> >> +</royale-config>
> >> diff --git
> a/frameworks/projects/ExternsJS/src/main/resources/defaults.css
> b/frameworks/projects/ExternsJS/src/main/resources/defaults.css
> >> new file mode 100644
> >> index 0000000..c8dab5d
> >> --- /dev/null
> >> +++ b/frameworks/projects/ExternsJS/src/main/resources/defaults.css
> >> @@ -0,0 +1,3255 @@
> >> +/**
> >> + * Licensed to the Apache Software Foundation (ASF) under one or more
> >> + * contributor license agreements. See the NOTICE file distributed
> with
> >> + * this work for additional information regarding copyright ownership.
> >> + * The ASF licenses this file to You 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
> >> + *
> >> + * Unless required by applicable law or agreed to in writing, software
> >> + * distributed under the License is distributed on an "AS IS" BASIS,
> >> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
> implied.
> >> + * See the License for the specific language governing permissions and
> >> + * limitations under the License.
> >> + */
> >> +@namespace j "library://ns.apache.org/royale/externsjs";
> >> +@namespace "http://www.w3.org/1999/xhtml";
> >> +*, :after, :before {
> >> + box-sizing: border-box; }
> >> +
> >> +html, body {
> >> + height: 100%; }
> >> +
> >> +::-moz-focus-inner, ::-moz-focus-outer {
> >> + border: 0; }
> >> +
> >> +input:focus, textarea:focus, select:focus, div:focus, label:focus,
> nav:focus, li:focus, a:focus {
> >> + outline: none; }
> >> +
> >> +select::-ms-expand {
> >> + display: none; }
> >> +
> >> +button::-moz-focus-inner {
> >> + padding: 0; }
> >> +
> >> +button, input, textarea {
> >> + font-size: 100%; }
> >> +
> >> +.cursor-pointer {
> >> + cursor: pointer !important; }
> >> +
> >> +j|View {
> >> + IBeadView: ClassReference("org.apache.royale.html.beads.GroupView");
> >> + IBeadLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.ViewLayout"); }
> >> +
> >> +.responsive-view {
> >> + display: inline-flex;
> >> + width: 100%;
> >> + height: 100%; }
> >> +
> >> +j|Group {
> >> + IBeadLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.BasicLayout");
> >> + IBeadView: ClassReference("org.apache.royale.html.beads.GroupView");
> }
> >> +
> >> +.externsjs.group {
> >> + overflow: visible; }
> >> +
> >> +j|HGroup {
> >> + IBeadLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
> }
> >> +
> >> +j|VGroup {
> >> + IBeadLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout");
> }
> >> +
> >> +j|Grid {
> >> + IBeadLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.GridLayout"); }
> >> +
> >> +j|ScrollableGrid {
> >> + IViewport:
> ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport");
> }
> >> +
> >> +j|GridCell {
> >> + IBeadLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.GridCellLayout");
> }
> >> +
> >> +j|Container {
> >> + IBeadView:
> ClassReference("org.apache.royale.html.beads.ContainerView");
> >> + IBeadLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.BasicLayout");
> >> + IViewport:
> ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
> >> +
> >> +j|HContainer {
> >> + IBeadLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
> }
> >> +
> >> +j|VContainer {
> >> + IBeadLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout");
> }
> >> +
> >> +j|Image {
> >> + IBeadModel:
> ClassReference("org.apache.royale.externsjs.beads.models.ImageModel");
> >> + IBeadView:
> ClassReference("org.apache.royale.externsjs.beads.views.ImageView"); }
> >> +
> >> +j|BinaryImage {
> >> + IBeadModel:
> ClassReference("org.apache.royale.html.beads.models.BinaryImageModel");
> >> + IBeadView:
> ClassReference("org.apache.royale.externsjs.beads.views.ImageView");
> >> + IBinaryImageLoader:
> ClassReference("org.apache.royale.html.beads.BinaryImageLoader"); }
> >> +
> >> +j|DataContainer {
> >> + IBeadModel:
> ClassReference("org.apache.royale.externsjs.beads.models.DataProviderModel");
> >> + IBeadView:
> ClassReference("org.apache.royale.html.beads.DataContainerView");
> >> + IBeadLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout");
> >> + IDataProviderItemRendererMapper:
> ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForCollectionView");
> >> + IItemRendererClassFactory:
> ClassReference("org.apache.royale.core.ItemRendererClassFactory");
> >> + IItemRenderer:
> ClassReference("org.apache.royale.externsjs.itemRenderers.StringItemRenderer");
> >> + IItemRendererInitializer:
> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DataContainerItemRendererInitializer");
> >> + IViewport:
> ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
> >> +
> >> +j|Validator {
> >> + ILocalizedValuesImpl:
> ClassReference("org.apache.royale.core.SimpleLocalizedValuesImpl"); }
> >> +
> >> +j|Form {
> >> + IBeadLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.FormLayout"); }
> >> +
> >> +@media -royale-swf {
> >> + j|Container {
> >> + IContentView:
> ClassReference("org.apache.royale.html.supportClasses.ContainerContentArea");
> } }
> >> +hr {
> >> + border: 0;
> >> + height: 1px; }
> >> +
> >> +.responsiveSizeMonitor {
> >> + background: rgba(0, 0, 0, 0.8);
> >> + color: white;
> >> + padding: 10px;
> >> + position: fixed;
> >> + bottom: 0;
> >> + right: 0;
> >> + width: 250px; }
> >> + .responsiveSizeMonitor strong {
> >> + color: yellow; }
> >> +
> >> +.externsjs.alert {
> >> + position: fixed;
> >> + top: 50%;
> >> + left: 50%;
> >> + min-width: 350px;
> >> + min-height: 200px; }
> >> + .externsjs.alert .externsjs.titlebar {
> >> + height: 50px; }
> >> + .externsjs.alert .content {
> >> + position: absolute;
> >> + top: 50px;
> >> + bottom: 50px;
> >> + width: 100%;
> >> + overflow-y: auto; }
> >> + .externsjs.alert .content .externsjs.label {
> >> + white-space: normal; }
> >> + .externsjs.alert .externsjs.controlbar {
> >> + bottom: 0;
> >> + height: 50px; }
> >> +
> >> +@media all and (-ms-high-contrast: none) {
> >> + .externsjs.alert {
> >> + display: table; } }
> >> +@media (min-width: 768px) {
> >> + .externsjs.alert {
> >> + min-width: 450px; } }
> >> +j|Alert {
> >> + IBeadLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout");
> >> + IBeadModel:
> ClassReference("org.apache.royale.externsjs.beads.models.AlertModel");
> >> + IBeadController:
> ClassReference("org.apache.royale.externsjs.beads.controllers.AlertController");
> >> + IBeadView:
> ClassReference("org.apache.royale.externsjs.beads.views.AlertView"); }
> >> +
> >> +.externsjs.badge {
> >> + z-index: 2;
> >> + position: absolute;
> >> + top: -1em;
> >> + right: -1em;
> >> + text-transform: initial;
> >> + padding: 0.5em;
> >> + min-width: 2.1em; }
> >> + .externsjs.badge.overlap {
> >> + top: 0em;
> >> + right: 0em; }
> >> + .externsjs.badge.subindex {
> >> + top: auto;
> >> + bottom: -1em; }
> >> + .externsjs.badge.subindex.overlap {
> >> + top: auto;
> >> + bottom: 0em; }
> >> + .externsjs.badge.preindex {
> >> + left: -1em;
> >> + right: auto; }
> >> + .externsjs.badge.preindex.overlap {
> >> + left: 0em;
> >> + right: auto; }
> >> +
> >> +.externsjs.button {
> >> + cursor: pointer;
> >> + user-select: none;
> >> + display: inline-flex;
> >> + position: relative;
> >> + align-items: center;
> >> + justify-content: center;
> >> + vertical-align: middle;
> >> + overflow: hidden;
> >> + outline: none;
> >> + white-space: nowrap;
> >> + line-height: normal !important;
> >> + text-align: center;
> >> + text-decoration: none; }
> >> + .externsjs.button[disabled] {
> >> + cursor: default; }
> >> + .externsjs.button.multiline {
> >> + white-space: pre-wrap; }
> >> + .externsjs.button .fonticon {
> >> + cursor: inherit; }
> >> + .externsjs.button.viewport {
> >> + overflow: visible; }
> >> +
> >> +@media -royale-swf {
> >> + j|Button {
> >> + IBeadModel:
> ClassReference("org.apache.royale.externsjs.beads.models.TextModel");
> >> + IBeadView:
> ClassReference("org.apache.royale.externsjs.beads.views.ButtonView"); } }
> >> +.externsjs.buttonbar .externsjs.button, .externsjs.buttonbar
> .externsjs.togglebutton {
> >> + border-radius: 0; }
> >> + .externsjs.buttonbar .externsjs.button.first, .externsjs.buttonbar
> .externsjs.togglebutton.first {
> >> + border-top-left-radius: 0.25rem;
> >> + border-bottom-left-radius: 0.25rem; }
> >> + .externsjs.buttonbar .externsjs.button.last, .externsjs.buttonbar
> .externsjs.togglebutton.last {
> >> + border-top-right-radius: 0.25rem;
> >> + border-bottom-right-radius: 0.25rem; }
> >> +
> >> +j|ButtonBar {
> >> + IBeadModel:
> ClassReference("org.apache.royale.externsjs.beads.models.ButtonBarModel");
> >> + IBeadView:
> ClassReference("org.apache.royale.externsjs.beads.views.ButtonBarView");
> >> + IBeadController:
> ClassReference("org.apache.royale.externsjs.beads.controllers.ListSingleSelectionMouseController");
> >> + IBeadLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.ButtonBarLayout");
> >> + IDataProviderItemRendererMapper:
> ClassReference("org.apache.royale.html.beads.SelectionDataItemRendererFactoryForCollectionView");
> >> + IItemRendererClassFactory:
> ClassReference("org.apache.royale.core.ItemRendererClassFactory");
> >> + IItemRenderer:
> ClassReference("org.apache.royale.externsjs.itemRenderers.ButtonBarItemRenderer");
> >> + IItemRendererInitializer:
> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ButtonBarItemRendererInitializer");
> }
> >> +
> >> +@media -royale-swf {
> >> + j|ButtonBar {
> >> + IContentView:
> ClassReference("org.apache.royale.externsjs.supportClasses.list.DataGroup");
> } }
> >> +j|IconButtonBar {
> >> + IItemRenderer:
> ClassReference("org.apache.royale.externsjs.itemRenderers.IconButtonBarItemRenderer");
> }
> >> +
> >> +.externsjs.buttonbar.toggle-on-click .externsjs.togglebutton.selected {
> >> + pointer-events: none; }
> >> +
> >> +j|ToggleButtonBar {
> >> + IBeadView:
> ClassReference("org.apache.royale.externsjs.beads.views.ToggleButtonBarView");
> >> + IBeadController:
> ClassReference("org.apache.royale.externsjs.beads.controllers.ToggleButtonBarSelectionMouseController");
> >> + IItemRenderer:
> ClassReference("org.apache.royale.externsjs.itemRenderers.ToggleButtonBarItemRenderer");
> }
> >> +
> >> +.externsjs.card {
> >> + min-width: 120px;
> >> + min-height: 52px;
> >> + position: relative; }
> >> + .externsjs.card .card-header {
> >> + width: 100%; }
> >> + .externsjs.card .card-header .card-title {
> >> + flex: 1 1 auto;
> >> + overflow: hidden;
> >> + text-decoration: inherit;
> >> + text-overflow: ellipsis;
> >> + text-transform: inherit;
> >> + z-index: 1; }
> >> + .externsjs.card .card-expanded-content {
> >> + width: 100%; }
> >> + .externsjs.card .card-primary-content {
> >> + width: 100%;
> >> + min-height: 152px;
> >> + position: relative;
> >> + outline: none;
> >> + color: inherit;
> >> + text-decoration: none;
> >> + flex: 1 1 auto; }
> >> + .externsjs.card .card-actions {
> >> + width: 100%;
> >> + position: relative;
> >> + outline: none;
> >> + color: inherit;
> >> + text-decoration: none; }
> >> +
> >> +.externsjs.checkbox {
> >> + display: inline-flex;
> >> + position: relative;
> >> + margin: 0;
> >> + padding: 0;
> >> + height: auto; }
> >> + .externsjs.checkbox input {
> >> + -webkit-appearance: none;
> >> + -moz-appearance: none;
> >> + -o-appearance: none;
> >> + -ms-appearance: none;
> >> + appearance: none;
> >> + display: inline-flex;
> >> + margin: 0;
> >> + padding: 0;
> >> + width: 24px;
> >> + height: 24px;
> >> + opacity: 0; }
> >> + .externsjs.checkbox input + span::before {
> >> + content: " ";
> >> + position: absolute;
> >> + left: 0px;
> >> + top: 0px;
> >> + width: 22px;
> >> + height: 22px; }
> >> + .externsjs.checkbox input + span::after {
> >> + content: " ";
> >> + position: absolute;
> >> + width: 22px;
> >> + height: 22px;
> >> + left: 0px;
> >> + top: 0px;
> >> + opacity: 0; }
> >> + .externsjs.checkbox input:checked + span::after,
> .externsjs.checkbox input:checked:active + span::after {
> >> + opacity: 1; }
> >> + .externsjs.checkbox input:focus + span::before,
> .externsjs.checkbox input:checked:focus + span::before, .externsjs.checkbox
> input:checked:active:focus + span::before {
> >> + outline: none; }
> >> + .externsjs.checkbox input[disabled] + span {
> >> + cursor: unset; }
> >> + .externsjs.checkbox span {
> >> + cursor: pointer;
> >> + margin: auto;
> >> + width: inherit; }
> >> +
> >> +.externsjs.switch {
> >> + display: inline-flex;
> >> + position: relative;
> >> + height: auto; }
> >> + .externsjs.switch input {
> >> + -webkit-appearance: none;
> >> + -moz-appearance: none;
> >> + -o-appearance: none;
> >> + -ms-appearance: none;
> >> + appearance: none;
> >> + display: inline-flex;
> >> + opacity: 0;
> >> + width: 44px;
> >> + height: 24px;
> >> + margin: 0;
> >> + padding: 0; }
> >> + .externsjs.switch input[disabled] + span {
> >> + cursor: unset; }
> >> + .externsjs.switch .switch {
> >> + position: absolute;
> >> + cursor: pointer;
> >> + top: 0;
> >> + left: 0;
> >> + right: 0;
> >> + bottom: 0;
> >> + width: 44px;
> >> + height: 24px; }
> >> + .externsjs.switch .switch::before {
> >> + position: absolute;
> >> + content: "";
> >> + height: 20px;
> >> + width: 20px;
> >> + left: 2px;
> >> + bottom: 2px; }
> >> + .externsjs.switch .label {
> >> + cursor: pointer;
> >> + margin: auto;
> >> + width: inherit; }
> >> +
> >> +.externsjs.combobox {
> >> + display: inline-flex; }
> >> + .externsjs.combobox .externsjs.textinput {
> >> + display: block; }
> >> + .externsjs.combobox .externsjs.button::before {
> >> + margin: 0;
> >> + padding: 0; }
> >> + .externsjs.combobox .externsjs.button::after {
> >> + content: " ";
> >> + position: absolute; }
> >> +
> >> +j|ComboBox {
> >> + IBeadModel:
> ClassReference("org.apache.royale.externsjs.beads.models.ComboBoxModel");
> >> + IBeadView:
> ClassReference("org.apache.royale.externsjs.beads.views.ComboBoxView");
> >> + IBeadController:
> ClassReference("org.apache.royale.externsjs.beads.controllers.ComboBoxController");
> >> + IPopUp:
> ClassReference("org.apache.royale.externsjs.supportClasses.combobox.ComboBoxPopUp");
> }
> >> +
> >> +.combobox-popup {
> >> + position: fixed;
> >> + pointer-events: none;
> >> + bottom: 0;
> >> + left: 0;
> >> + width: 100%;
> >> + height: 100%;
> >> + overflow: hidden;
> >> + contain: strict;
> >> + z-index: 60;
> >> + color: rgba(0, 0, 0, 0.8); }
> >> + .combobox-popup::before {
> >> + position: absolute;
> >> + display: block;
> >> + top: 0;
> >> + left: 0;
> >> + width: 100%;
> >> + height: 100%;
> >> + content: "";
> >> + opacity: 0;
> >> + background-color: rgba(0, 0, 0, 0.65);
> >> + will-change: opacity;
> >> + transition: opacity 0.4s 0ms; }
> >> + .combobox-popup .externsjs.list {
> >> + position: relative;
> >> + transform: translate(-50%, 100%);
> >> + transition: none;
> >> + will-change: transform, opacity;
> >> + bottom: auto;
> >> + top: calc(100% - 10px);
> >> + left: 50%;
> >> + box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7) !important;
> >> + opacity: 0; }
> >> + .combobox-popup.open {
> >> + pointer-events: auto; }
> >> + .combobox-popup.open::before {
> >> + opacity: 1; }
> >> + .combobox-popup.open .externsjs.list {
> >> + transform: translate(-50%, -100%);
> >> + transition: transform 0.3s 0ms, opacity 0.3s 0ms;
> >> + opacity: 1; }
> >> +
> >> +@media (max-width: 767px) {
> >> + .combobox-popup .externsjs.list {
> >> + width: 98% !important;
> >> + max-height: 240px !important; }
> >> + .combobox-popup .externsjs.list .externsjs.item {
> >> + min-height: 48px !important; } }
> >> +@media (min-width: 767px) {
> >> + .combobox-popup::before {
> >> + background-color: rgba(0, 0, 0, 0); }
> >> + .combobox-popup .externsjs.list {
> >> + transform: none;
> >> + transition: none;
> >> + box-shadow: none !important; }
> >> + .combobox-popup .externsjs.list .externsjs.item {
> >> + overflow: hidden;
> >> + transition: height 200ms ease-in; }
> >> + .combobox-popup.open .externsjs.list {
> >> + transform: none;
> >> + top: auto;
> >> + left: auto; } }
> >> +j|ComboBoxPopUp {
> >> + IBeadView:
> ClassReference("org.apache.royale.externsjs.beads.views.ComboBoxPopUpView");
> }
> >> +
> >> +j|VirtualComboBox {
> >> + IPopUp:
> ClassReference("org.apache.royale.externsjs.supportClasses.combobox.VirtualComboBoxPopUp");
> }
> >> +
> >> +j|VirtualComboBoxPopUp {
> >> + IBeadView:
> ClassReference("org.apache.royale.externsjs.beads.views.VirtualComboBoxPopUpView");
> }
> >> +
> >> +.externsjs.datagrid {
> >> + display: flex;
> >> + flex-direction: column;
> >> + position: relative;
> >> + overflow: auto; }
> >> + .externsjs.datagrid .externsjs.buttonbar.header {
> >> + width: 100%;
> >> + flex: 0 0 auto; }
> >> + .externsjs.datagrid .externsjs.buttonbar.header .externsjs.button {
> >> + width: 100%; }
> >> + .externsjs.datagrid .listarea {
> >> + width: 100%;
> >> + flex: 1 1 auto; }
> >> + .externsjs.datagrid .externsjs.list.column {
> >> + padding-left: 0;
> >> + padding-right: 0;
> >> + position: relative;
> >> + min-height: 100%; }
> >> + .externsjs.datagrid .externsjs.list.column
> .externsjs.item.datagrid {
> >> + width: 100%; }
> >> + .externsjs.datagrid span:empty:before {
> >> + content: "\200b"; }
> >> +
> >> +j|DataGrid {
> >> + IBeadView:
> ClassReference("org.apache.royale.externsjs.beads.views.DataGridView");
> >> + IBeadModel:
> ClassReference("org.apache.royale.html.beads.models.DataGridCollectionViewModel");
> >> + IBeadLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.DataGridLayout");
> >> + headerClass:
> ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.DataGridButtonBar");
> >> + headerLayoutClass:
> ClassReference("org.apache.royale.externsjs.beads.layouts.DataGridColumnLayout");
> >> + listAreaClass:
> ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.DataGridListArea");
> >> + columnClass:
> ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.DataGridColumnList");
> }
> >> +
> >> +j|DataGridListArea {
> >> + IBeadView:
> ClassReference("org.apache.royale.html.beads.ContainerView");
> >> + IBeadLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
> >> + IViewport:
> ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport");
> }
> >> +
> >> +j|DataGridColumnList {
> >> + IItemRendererClassFactory:
> ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
> >> + IItemRenderer:
> ClassReference("org.apache.royale.externsjs.itemRenderers.DataGridItemRenderer");
> >> + IItemRendererInitializer:
> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DataGridColumnListItemRendererInitializer");
> >> + ISelectableItemRenderer:
> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ClassSelectorListSelectableItemRendererBead");
> >> + IViewport:
> ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
> >> +
> >> +j|DataGridButtonBar {
> >> + IItemRenderer:
> ClassReference("org.apache.royale.externsjs.itemRenderers.DatagridHeaderRenderer");
> }
> >> +
> >> +j|VirtualDataGrid {
> >> + IBeadView:
> ClassReference("org.apache.royale.externsjs.beads.views.VirtualDataGridView");
> >> + columnClass:
> ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.VirtualDataGridColumnList");
> }
> >> +
> >> +j|VirtualDataGridListArea {
> >> + IBeadView:
> ClassReference("org.apache.royale.html.beads.ContainerView");
> >> + IBeadLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
> >> + listAreaClass:
> ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.VirtualDataGrid");
> >> + IViewport:
> ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
> >> +
> >> +j|VirtualDataGridColumnList {
> >> + IBeadLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.VirtualDataGridListAreaLayout");
> >> + IItemRendererClassFactory:
> ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
> >> + IItemRenderer:
> ClassReference("org.apache.royale.externsjs.itemRenderers.DataGridItemRenderer");
> >> + IItemRendererInitializer:
> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DataGridColumnListItemRendererInitializer");
> >> + ISelectableItemRenderer:
> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ClassSelectorListSelectableItemRendererBead");
> >> + IViewport:
> ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport");
> }
> >> +
> >> +.externsjs.datechooser .externsjs.table {
> >> + min-width: 324px;
> >> + min-height: 364px; }
> >> + .externsjs.datechooser .externsjs.table .externsjs.tablecell {
> >> + height: auto; }
> >> + .externsjs.datechooser .externsjs.table
> .externsjs.tableheadercell.buttonsRow > .layout.horizontal {
> >> + float: right; }
> >> + .externsjs.datechooser .externsjs.table
> .externsjs.tableheadercell.buttonsRow .viewSelector::after {
> >> + content: " "; }
> >> + .externsjs.datechooser .externsjs.table
> .externsjs.tableheadercell.buttonsRow .previousButton::after,
> .externsjs.datechooser .externsjs.table
> .externsjs.tableheadercell.buttonsRow .nextButton::after {
> >> + content: " ";
> >> + position: absolute; }
> >> +
> >> +j|DateChooser {
> >> + IBeadModel:
> ClassReference("org.apache.royale.externsjs.beads.models.DateChooserModel");
> >> + IBeadView:
> ClassReference("org.apache.royale.externsjs.beads.views.DateChooserView");
> >> + IBeadLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout");
> >> + IBeadController:
> ClassReference("org.apache.royale.externsjs.beads.controllers.DateChooserMouseController");
> }
> >> +
> >> +.externsjs.datefield {
> >> + display: inline-flex; }
> >> + .externsjs.datefield .externsjs.textinput input {
> >> + width: 9.2em; }
> >> + .externsjs.datefield .externsjs.button::before {
> >> + margin: 0;
> >> + padding: 0;
> >> + line-height: 22px; }
> >> + .externsjs.datefield .externsjs.button::after {
> >> + content: " ";
> >> + position: absolute;
> >> + width: 22px;
> >> + height: 22px;
> >> + left: calc(50% - 11px);
> >> + top: calc(50% - 11px); }
> >> +
> >> +.datechooser-popup {
> >> + position: fixed;
> >> + pointer-events: none;
> >> + bottom: 0;
> >> + left: 0;
> >> + width: 100%;
> >> + height: 100%;
> >> + overflow: hidden;
> >> + contain: strict;
> >> + z-index: 60;
> >> + color: rgba(0, 0, 0, 0.8); }
> >> + .datechooser-popup::before {
> >> + position: absolute;
> >> + display: block;
> >> + top: 0;
> >> + left: 0;
> >> + width: 100%;
> >> + height: 100%;
> >> + content: "";
> >> + opacity: 0;
> >> + background-color: rgba(0, 0, 0, 0.65);
> >> + will-change: opacity;
> >> + transition: opacity 0.4s 0ms; }
> >> + .datechooser-popup .externsjs.table {
> >> + position: relative;
> >> + transform: translate(-50%, 100%);
> >> + transition: none;
> >> + will-change: transform, opacity;
> >> + bottom: auto;
> >> + top: calc(100% - 10px);
> >> + left: 50%;
> >> + touch-action: none;
> >> + box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7) !important;
> >> + opacity: 0; }
> >> + .datechooser-popup.open {
> >> + pointer-events: auto; }
> >> + .datechooser-popup.open::before {
> >> + opacity: 1; }
> >> + .datechooser-popup.open .externsjs.table {
> >> + transform: translate(-50%, -100%);
> >> + transition: transform 0.4s 0ms, opacity 0.4s 0ms;
> >> + opacity: 1; }
> >> +
> >> +@media (max-width: 768px) {
> >> + .datechooser-popup .externsjs.table {
> >> + width: calc(100% - 20px); } }
> >> +@media (min-width: 768px) and (max-width: 992px) {
> >> + .datechooser-popup .externsjs.table {
> >> + width: calc(100% - 300px); } }
> >> +@media (min-width: 992px) {
> >> + .datechooser-popup::before {
> >> + background-color: rgba(0, 0, 0, 0); }
> >> + .datechooser-popup .externsjs.table {
> >> + transform: none;
> >> + transition: none;
> >> + box-shadow: none !important; }
> >> + .datechooser-popup .externsjs.table .externsjs.item {
> >> + height: 0;
> >> + overflow: hidden;
> >> + transition: height 200ms ease-in; }
> >> + .datechooser-popup.open .externsjs.table {
> >> + transform: none;
> >> + top: auto;
> >> + left: auto; }
> >> + .datechooser-popup.open .externsjs.table .externsjs.item {
> >> + height: 34px; } }
> >> +j|DateField {
> >> + IBeadView:
> ClassReference("org.apache.royale.externsjs.beads.views.DateFieldView");
> >> + IBeadModel:
> ClassReference("org.apache.royale.externsjs.beads.models.DateChooserModel");
> >> + IBeadController:
> ClassReference("org.apache.royale.externsjs.beads.controllers.DateFieldMouseController");
> >> + IFormatter:
> ClassReference("org.apache.royale.html.accessories.StringDateFormatter");
> >> + IPopUp: ClassReference("org.apache.royale.externsjs.DateChooser"); }
> >> +
> >> +.externsjs.divider {
> >> + height: 0;
> >> + margin: 0; }
> >> +
> >> +j|Divider {
> >> + IBeadLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
> >> +
> >> +.externsjs.drawer.float {
> >> + position: fixed;
> >> + pointer-events: none;
> >> + top: 0;
> >> + left: 0;
> >> + width: 100%;
> >> + height: 100%;
> >> + overflow: hidden;
> >> + contain: strict;
> >> + z-index: 100; }
> >> + .externsjs.drawer.float::before {
> >> + position: absolute;
> >> + display: block;
> >> + top: 0;
> >> + left: 0;
> >> + width: 100%;
> >> + height: 100%;
> >> + content: "";
> >> + opacity: 0; }
> >> + .externsjs.drawer.float .drawermain {
> >> + position: absolute;
> >> + display: flex;
> >> + flex-direction: column;
> >> + left: 0;
> >> + right: initial;
> >> + height: 100%; }
> >> + .externsjs.drawer.float.open {
> >> + pointer-events: auto; }
> >> + .externsjs.drawer.float.open::before {
> >> + opacity: 1; }
> >> +.externsjs.drawer.fixed {
> >> + width: 0; }
> >> + .externsjs.drawer.fixed .drawermain {
> >> + display: inline-flex;
> >> + flex-direction: column;
> >> + left: 0;
> >> + right: auto;
> >> + height: 100%;
> >> + overflow: hidden;
> >> + touch-action: none; }
> >> + .externsjs.drawer.fixed.open {
> >> + pointer-events: auto; }
> >> + .externsjs.drawer.fixed.open .drawermain {
> >> + transform: none; }
> >> +
> >> +@media (min-width: 768px) {
> >> + .externsjs.drawer.float .drawermain {
> >> + width: calc(100% - 60px);
> >> + max-width: 310px; } }
> >> +.externsjs.drawerheader {
> >> + position: relative;
> >> + display: flex;
> >> + flex-direction: column;
> >> + align-items: center;
> >> + flex-shrink: 0; }
> >> + .externsjs.drawerheader div {
> >> + display: flex;
> >> + position: absolute;
> >> + top: 0;
> >> + right: 0;
> >> + bottom: 0;
> >> + left: 0;
> >> + align-items: flex-end; }
> >> +
> >> +.externsjs.drawercontent {
> >> + flex: 1 100 auto;
> >> + margin: 0;
> >> + overflow-x: hidden;
> >> + overflow-y: auto;
> >> + -webkit-overflow-scrolling: touch;
> >> + touch-action: pan-y; }
> >> +
> >> +.externsjs.drawerfooter {
> >> + display: flex;
> >> + position: relative;
> >> + width: 100%;
> >> + height: 66px; }
> >> +
> >> +j|DrawerBase {
> >> + IBeadLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
> >> +
> >> +j|Drawer {
> >> + IBeadLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
> >> +
> >> +j|DrawerHeader {
> >> + IBeadLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
> >> +
> >> +j|DrawerContent {
> >> + IBeadLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
> >> +
> >> +.externsjs.dropdownlist {
> >> + -webkit-appearance: none;
> >> + -moz-appearance: none;
> >> + -o-appearance: none;
> >> + -ms-appearance: none;
> >> + appearance: none;
> >> + width: 200px;
> >> + margin: 0;
> >> + padding: 0.68em 2.38em 0.68em 1.12em;
> >> + cursor: pointer;
> >> + display: inline-flex;
> >> + line-height: normal !important;
> >> + outline: none; }
> >> +
> >> +j|DropDownList {
> >> + IBeadView:
> ClassReference("org.apache.royale.externsjs.beads.views.DropDownListView");
> >> + IBeadModel:
> ClassReference("org.apache.royale.externsjs.beads.models.DropDownListModel");
> >> + IDataProviderItemRendererMapper:
> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DropDownListItemRendererFactoryForCollectionView");
> >> + IItemRendererClassFactory:
> ClassReference("org.apache.royale.core.ItemRendererClassFactory");
> >> + IItemRendererInitializer:
> ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DropDownListItemRendererInitializer");
> >> + IItemRenderer:
> ClassReference("org.apache.royale.externsjs.itemRenderers.DropDownListItemRenderer");
> >> + IBeadController:
> ClassReference("org.apache.royale.externsjs.beads.controllers.DropDownListController");
> }
> >> +
> >> +@media -royale-swf {
> >> + j|DropDownList {
> >> + IBeadModel:
> ClassReference("org.apache.royale.externsjs.beads.models.ArrayListSelectionModel");
> >> + IBeadController:
> ClassReference("org.apache.royale.externsjs.beads.controllers.DropDownListController");
> >> + IPopUp:
> ClassReference("org.apache.royale.externsjs.supportClasses.dropdownlist.DropDownListList");
> } }
> >> +.externsjs.footerbar {
> >> + display: inline-flex;
> >> + flex: 1 1 auto; }
> >> + .externsjs.footerbar .footerBarAppHeader {
> >> + display: flex;
> >> + flex-direction: column;
> >> + justify-content: space-between;
> >> + width: 100%;
> >> + z-index: 20;
> >> + position: fixed;
> >> + bottom: 0px; }
> >> + .externsjs.footerbar .footerBarAppHeader.fixed {
> >> + transition: box-shadow 200ms linear; }
> >> + .externsjs.footerbar .externsjs.barrow {
> >> + display: flex;
> >> + position: relative;
> >> + width: 100%;
> >> + height: 64px; }
> >> + .externsjs.footerbar .externsjs.barsection {
> >> + display: inline-flex;
> >> + flex: 1 1 auto;
> >> + align-items: center;
> >> + min-width: 0;
> >> + z-index: 1;
> >> + order: -1; }
> >> + .externsjs.footerbar .externsjs.barsection button {
> >> + will-change: transform, opacity;
> >> + display: flex;
> >> + position: relative;
> >> + flex-shrink: 0;
> >> + align-items: center;
> >> + justify-content: center;
> >> + width: 48px;
> >> + height: 48px;
> >> + outline: none;
> >> + text-decoration: none;
> >> + opacity: 1; }
> >> + .externsjs.footerbar .externsjs.barsection button .fonticon {
> >> + margin-left: 0px;
> >> + margin-right: 0px; }
> >> + .externsjs.footerbar .externsjs.bartitle {
> >> + -moz-osx-font-smoothing: grayscale;
> >> + -webkit-font-smoothing: antialiased;
> >> + white-space: nowrap;
> >> + flex: 1 1 auto;
> >> + overflow: hidden;
> >> + z-index: 1;
> >> + line-height: 2rem;
> >> + letter-spacing: 0.0125em;
> >> + text-decoration: inherit;
> >> + text-transform: inherit;
> >> + text-overflow: ellipsis; }
> >> +
> >> +j|FooterBar {
> >> + IBeadLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
> >> +
> >> +.externsjs.formheading .externsjs.label.headingLabel {
> >> + white-space: initial;
> >> + flex: 1 1 auto; }
> >> +
> >> +j|FormHeading {
> >> + IBeadLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
> >> + IBeadView:
> ClassReference("org.apache.royale.externsjs.beads.views.FormHeadingView");
> >> + IBeadModel:
> ClassReference("org.apache.royale.externsjs.beads.models.TextModel"); }
> >> +
> >> +j|FormItem {
> >> + IBeadLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.FormItemLayout");
> >> + IBeadView:
> ClassReference("org.apache.royale.externsjs.beads.views.FormItemView");
> >> + IBeadModel:
> ClassReference("org.apache.royale.externsjs.beads.models.FormItemModel");
> >> + IFormItemContentArea:
> ClassReference("org.apache.royale.externsjs.Group");
> >> + IFormItemLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout");
> }
> >> +
> >> +.fonticon {
> >> + cursor: default; }
> >> + .fonticon.size-18 {
> >> + font-size: 18px; }
> >> + .fonticon.size-24 {
> >> + font-size: 24px; }
> >> + .fonticon.size-36 {
> >> + font-size: 36px; }
> >> + .fonticon.size-48 {
> >> + font-size: 48px; }
> >> +
> >> +.externsjs.imagebutton {
> >> + border-style: none;
> >> + padding: 0px; }
> >> +
> >> +j|ImageButton {
> >> + IBeadModel:
> ClassReference("org.apache.royale.externsjs.beads.models.ImageModel"); }
> >> +
> >> +.externsjs.item, .externsjs.navigationlink, .externsjs.tabbarbutton {
> >> + text-decoration: none;
> >> + letter-spacing: 0;
> >> + line-height: normal !important;
> >> + overflow: hidden;
> >> + cursor: auto;
> >> + flex-shrink: 0;
> >> + position: relative;
> >> + list-style: none; }
> >> + .externsjs.item.selectable, .externsjs.item.hoverable,
> .externsjs.navigationlink.selectable, .externsjs.navigationlink.hoverable,
> .externsjs.tabbarbutton.selectable, .externsjs.tabbarbutton.hoverable {
> >> + cursor: pointer; }
> >> + .externsjs.item .fonticon, .externsjs.navigationlink .fonticon,
> .externsjs.tabbarbutton .fonticon {
> >> + cursor: inherit; }
> >> +
> >> +j|ListItemRenderer {
> >> + IBeadLayout:
> ClassReference("org.apache.royale.externsjs.beads.layouts.BasicLayout");
> >> + IBeadController:
> ClassReference("org.apache.royale.html.beads.controllers.ItemRendererMouseController");
> }
> >> +
> >> +.externsjs.label {
> >> + -webkit-font-smoothing: antialiased;
> >> + cursor: default;
> >> + white-space: nowrap; }
> >> + .externsjs.label.multiline {
> >> + white-space: pre-wrap;
> >> + word-wrap: break-word; }
> >> + .externsjs.label.truncate {
> >> + overflow: hidden;
> >> + text-overflow: ellipsis; }
> >> +
> >> +j|Label {
> >> + IBeadModel:
> ClassReference("org.apache.royale.externsjs.beads.models.TextModel"); }
> >> +
> >> +.viewport {
> >> + overflow: visible; }
> >> + .viewport.clipped {
> >> + overflow: hidden; }
> >> + .viewport.scroll {
> >> + overflow: auto; }
> >> +
> >> +.layout.basic {
> >> + position: relative; }
> >> + .layout.basic > * {
> >> + position: absolute !important; }
> >> +
> >> +.layout {
> >> + display: flex; }
> >> + .layout.horizontal {
> >> + flex-direction: row;
> >> + flex-wrap: nowrap;
> >> + align-items: flex-start; }
> >> + .layout.horizontal > * {
> >> + flex: 0 1 auto; }
> >> + .layout.horizontal.flow {
> >> + flex-wrap: wrap;
> >> + max-width: 100%; }
> >> + .layout.horizontal.centered {
> >> + justify-content: center;
> >> + align-items: center;
> >> + align-content: center; }
> >> + .layout.horizontal.centered > * {
> >> + flex: 0 0 auto !important; }
> >> + .layout.horizontal.tile {
> >> + flex-wrap: wrap; }
> >> + .layout.horizontal.formitem {
> >> + width: 100%;
> >> + align-items: flex-start; }
> >> + .layout.horizontal.gap-1x3px > *:first-child {
> >> + margin-left: 0px; }
> >> + .layout.horizontal.gap-1x3px > * {
> >> + margin-left: 3px; }
> >> + .layout.horizontal.gap-2x3px > *:first-child {
> >> + margin-left: 0px; }
> >> + .layout.horizontal.gap-2x3px > * {
> >> + margin-left: 6px; }
> >> + .layout.horizontal.gap-3x3px > *:first-child {
> >> + margin-left: 0px; }
> >> + .layout.horizontal.gap-3x3px > * {
> >> + margin-left: 9px; }
> >> + .layout.horizontal.gap-4x3px > *:first-child {
> >> + margin-left: 0px; }
> >> + .layout.horizontal.gap-4x3px > * {
> >> + margin-left: 12px; }
> >> + .layout.horizontal.gap-5x3px > *:first-child {
> >> + margin-left: 0px; }
> >> + .layout.horizontal.gap-5x3px > * {
> >> + margin-left: 15px; }
> >> + .layout.horizontal.gap-6x3px > *:first-child {
> >> + margin-left: 0px; }
> >> + .layout.horizontal.gap-6x3px > * {
> >> + margin-left: 18px; }
> >> + .layout.horizontal.gap-7x3px > *:first-child {
> >> + margin-left: 0px; }
> >> + .layout.horizontal.gap-7x3px > * {
> >> + margin-left: 21px; }
> >> + .layout.horizontal.gap-8x3px > *:first-child {
> >> + margin-left: 0px; }
> >> + .layout.horizontal.gap-8x3px > * {
> >> + margin-left: 24px; }
> >> + .layout.horizontal.gap-9x3px > *:first-child {
> >> + margin-left: 0px; }
> >> + .layout.horizontal.gap-9x3px > * {
> >> + margin-left: 27px; }
> >> + .layout.horizontal.gap-10x3px > *:first-child {
> >> + margin-left: 0px; }
> >> + .layout.horizontal.gap-10x3px > * {
> >> + margin-left: 30px; }
> >> + .layout.horizontal.itemsReverse.gap-1x3px > *:last-child {
> >> + margin-left: 0px; }
> >> + .layout.horizontal.itemsReverse.gap-1x3px > * {
> >> + margin-left: 3px; }
> >> + .layout.horizontal.itemsReverse.gap-2x3px > *:last-child {
> >> + margin-left: 0px; }
> >> + .layout.horizontal.itemsReverse.gap-2x3px > * {
> >> + margin-left: 6px; }
> >> + .layout.horizontal.itemsReverse.gap-3x3px > *:last-child {
> >> + margin-left: 0px; }
> >> + .layout.horizontal.itemsReverse.gap-3x3px > * {
> >> + margin-left: 9px; }
> >> + .layout.horizontal.itemsReverse.gap-4x3px > *:last-child {
> >> + margin-left: 0px; }
> >> + .layout.horizontal.itemsReverse.gap-4x3px > * {
> >> + margin-left: 12px; }
> >> + .layout.horizontal.itemsReverse.gap-5x3px > *:last-child {
> >> + margin-left: 0px; }
> >> + .layout.horizontal.itemsReverse.gap-5x3px > * {
> >> + margin-left: 15px; }
> >> + .layout.horizontal.itemsReverse.gap-6x3px > *:last-child {
> >> + margin-left: 0px; }
> >> + .layout.horizontal.itemsReverse.gap-6x3px > * {
> >> + margin-left: 18px; }
> >> + .layout.horizontal.itemsReverse.gap-7x3px > *:last-child {
> >> + margin-left: 0px; }
> >> + .layout.horizontal.itemsReverse.gap-7x3px > * {
> >> + margin-left: 21px; }
> >> + .layout.horizontal.itemsReverse.gap-8x3px > *:last-child {
> >> + margin-left: 0px; }
> >> + .layout.horizontal.itemsReverse.gap-8x3px > * {
> >> + margin-left: 24px; }
> >> + .layout.horizontal.itemsReverse.gap-9x3px > *:last-child {
> >> + margin-left: 0px; }
> >> + .layout.horizontal.itemsReverse.gap-9x3px > * {
> >> + margin-left: 27px; }
> >> + .layout.horizontal.itemsReverse.gap-10x3px > *:last-child {
> >> + margin-left: 0px; }
> >> + .layout.horizontal.itemsReverse.gap-10x3px > * {
>
Re: [royale-asjs] branch develop updated: ExternsJS library in frameworks added. In ExternsJS project inspiretree external JS library added.
Posted by Harbs <ha...@gmail.com>.
Here’s the instructions on how to add MIT licensed code:
https://infra.apache.org/licensing-howto.html#permissive-deps
> On Nov 23, 2021, at 11:57 PM, Harbs <ha...@gmail.com> wrote:
>
> That’s a lot of code.
>
> Where did all this code come from? In particular inspire-tree.js jumped out at me. Where’s that from? inspire tree seems to be MIT licensed:
> https://github.com/helion3/inspire-tree/blob/master/LICENSE
>
> You can’t just add an apache header to that and put it in our repo.
>
>> On Nov 23, 2021, at 9:14 PM, alinakazi@apache.org wrote:
>>
>> This is an automated email from the ASF dual-hosted git repository.
>>
>> alinakazi pushed a commit to branch develop
>> in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
>>
>>
>> The following commit(s) were added to refs/heads/develop by this push:
>> new b7b21fc ExternsJS library in frameworks added. In ExternsJS project inspiretree external JS library added.
>> b7b21fc is described below
>>
>> commit b7b21fc0dafd309741acaa29acc745643a4b0d60
>> Author: alinakazi <al...@gmail.com>
>> AuthorDate: Wed Nov 24 00:14:10 2021 +0500
>>
>> ExternsJS library in frameworks added. In ExternsJS project inspiretree external JS library added.
>> ---
>> frameworks/projects/ExternsJS/asconfig.json | 33 +
>> frameworks/projects/ExternsJS/build.xml | 182 +
>> frameworks/projects/ExternsJS/pom.xml | 276 +
>> .../src/main/config/compile-swf-config.xml | 112 +
>> .../ExternsJS/src/main/resources/defaults.css | 3255 +++++++++
>> .../src/main/resources/externsjs-as-manifest.xml | 25 +
>> .../src/main/resources/externsjs-manifest.xml | 27 +
>> .../externsjs/inspiretree/New Text Document.html | 56 +
>> .../externsjs/inspiretree/inspire-tree-custom.css | 435 ++
>> .../externsjs/inspiretree/inspire-tree-custom.sass | 541 ++
>> .../externsjs/inspiretree/inspire-tree-dark.css | 325 +
>> .../inspiretree/inspire-tree-dark.min.css | 14 +
>> .../inspiretree/inspire-tree-dom-royale.js | 3766 +++++++++++
>> .../externsjs/inspiretree/inspire-tree-dom.js | 3764 +++++++++++
>> .../externsjs/inspiretree/inspire-tree-dom.min.js | 21 +
>> .../inspiretree/inspire-tree-light-jewel-blue.css | 619 ++
>> .../externsjs/inspiretree/inspire-tree-light.css | 347 +
>> .../inspiretree/inspire-tree-light.min.css | 14 +
>> .../externsjs/inspiretree/inspire-tree-royale.js | 7126 ++++++++++++++++++++
>> .../externsjs/inspiretree/inspire-tree.js | 7088 +++++++++++++++++++
>> .../externsjs/inspiretree/inspire-tree.min.js | 29 +
>> .../inspiretree/jewel-blue/collapsed_blue.svg | 14 +
>> .../jewel-blue/expand_less_black_24dp.svg | 14 +
>> .../jewel-blue/expand_more_black_24dp.svg | 14 +
>> .../inspiretree/jewel-blue/expanded_blue.svg | 21 +
>> .../ExternsJS/src/main/royale/ExternsJSClasses.as | 53 +
>> .../royale/externsjs/inspiretree/IInspireTree.as | 33 +
>> .../royale/externsjs/inspiretree/InspireTree.as | 897 +++
>> .../inspiretree/InspireTreeBasicControl.as | 277 +
>> .../royale/externsjs/inspiretree/InspireTreeDOM.as | 74 +
>> .../royale/externsjs/inspiretree/TreeEvent.as | 112 +
>> .../royale/externsjs/inspiretree/TreeNode.as | 650 ++
>> .../royale/externsjs/inspiretree/TreeNodes.as | 620 ++
>> .../royale/externsjs/inspiretree/UtilsTree.as | 28 +
>> .../beads/InspireTreeCheckBoxModeBead.as | 339 +
>> .../inspiretree/beads/InspireTreeEventsBead.as | 215 +
>> .../inspiretree/beads/InspireTreeIconBead.as | 576 ++
>> .../inspiretree/beads/InspireTreePaginateBead.as | 162 +
>> .../beads/InspireTreeReadOnlyCheckBead.as | 160 +
>> .../beads/InspireTreeReadOnlyCheckBead_V0.as | 152 +
>> .../beads/InspireTreeRevertCheckBead.as | 185 +
>> .../inspiretree/beads/models/InspireTreeModel.as | 290 +
>> .../royale/externsjs/inspiretree/vos/ConfigDOM.as | 64 +
>> .../royale/externsjs/inspiretree/vos/ConfigTree.as | 30 +
>> .../externsjs/inspiretree/vos/DragAndDropConfig.as | 33 +
>> .../externsjs/inspiretree/vos/ItemTreeNode.as | 146 +
>> .../externsjs/inspiretree/vos/OptionsTree.as | 101 +
>> 47 files changed, 33315 insertions(+)
>>
>> diff --git a/frameworks/projects/ExternsJS/asconfig.json b/frameworks/projects/ExternsJS/asconfig.json
>> new file mode 100644
>> index 0000000..3b1f1b3
>> --- /dev/null
>> +++ b/frameworks/projects/ExternsJS/asconfig.json
>> @@ -0,0 +1,33 @@
>> +/*
>> + * Licensed to the Apache Software Foundation (ASF) under one or more
>> + * contributor license agreements. See the NOTICE file distributed with
>> + * this work for additional information regarding copyright ownership.
>> + * The ASF licenses this file to You 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
>> + *
>> + * Unless required by applicable law or agreed to in writing, software
>> + * distributed under the License is distributed on an "AS IS" BASIS,
>> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
>> + * See the License for the specific language governing permissions and
>> + * limitations under the License.
>> + */
>> + {
>> + "config": "royale",
>> + "type": "lib",
>> + "compilerOptions": {
>> + "debug": true,
>> + "targets": [
>> + "JSRoyale", "SWF"
>> + ],
>> + "include-classes": [
>> + "src/main/royale/ExternsJSClasses.as"
>> + ],
>> + "source-path": [
>> + "src/main/royale"
>> + ],
>> + "output": "target/ExternsJS.swc"
>> + }
>> +}
>> diff --git a/frameworks/projects/ExternsJS/build.xml b/frameworks/projects/ExternsJS/build.xml
>> new file mode 100644
>> index 0000000..697b257
>> --- /dev/null
>> +++ b/frameworks/projects/ExternsJS/build.xml
>> @@ -0,0 +1,182 @@
>> +<?xml version="1.0"?>
>> +<!--
>> +
>> + Licensed to the Apache Software Foundation (ASF) under one or more
>> + contributor license agreements. See the NOTICE file distributed with
>> + this work for additional information regarding copyright ownership.
>> + The ASF licenses this file to You 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
>> +
>> + Unless required by applicable law or agreed to in writing, software
>> + distributed under the License is distributed on an "AS IS" BASIS,
>> + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
>> + See the License for the specific language governing permissions and
>> + limitations under the License.
>> +
>> +-->
>> +
>> +
>> +<project name="ExternsJS" default="main" basedir=".">
>> + <property name="ROYALE_HOME" location="../../.."/>
>> +
>> + <property file="${ROYALE_HOME}/env.properties"/>
>> + <property environment="env"/>
>> + <property file="${ROYALE_HOME}/local.properties"/>
>> + <property file="${ROYALE_HOME}/build.properties"/>
>> + <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
>> + <condition property="AIR_HOME" value="${env.AIR_HOME}">
>> + <isset property="env.AIR_HOME" />
>> + </condition>
>> + <property name="AIR_HOME" value="${ROYALE_HOME}"/>
>> + <condition property="PLAYERGLOBAL_HOME" value="${env.PLAYERGLOBAL_HOME}">
>> + <isset property="env.PLAYERGLOBAL_HOME" />
>> + </condition>
>> + <property name="PLAYERGLOBAL_HOME" value="${ROYALE_HOME}/frameworks/libs/player"/>
>> +
>> + <property name="target.name" value="${ant.project.name}.swc" />
>> +
>> + <tstamp>
>> + <format property="royale.swc-date" pattern="MM/dd/yy HH:mm Z"/>
>> + </tstamp>
>> + <echo>swc-date is ${royale.swc-date}</echo>
>> +
>> + <target name="main" depends="clean,check-compiler,compile,compile-js,copy-swc,test" description="Full build of ${ant.project.name}.swc">
>> + </target>
>> +
>> + <target name="compile-js">
>> + <ant dir="${ROYALE_HOME}/frameworks/js/projects/${ant.project.name}JS/" inheritAll="false" >
>> + <property name="ROYALE_SWF_COMPILER_HOME" value="${ROYALE_SWF_COMPILER_HOME}"/>
>> + <property name="ROYALE_COMPILER_HOME" value="${ROYALE_COMPILER_HOME}"/>
>> + <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
>> + </ant>
>> + </target>
>> +
>> + <target name="copy-swc" if="AIR_HOME">
>> + <copy file="${basedir}/target/${target.name}" tofile="${ROYALE_HOME}/frameworks/libs/${target.name}" />
>> + </target>
>> +
>> + <target name="check-for-tests" >
>> + <condition property="skip-tests" >
>> + <not>
>> + <available file="${basedir}/src/test/royale/build.xml" />
>> + </not>
>> + </condition>
>> + <!-- exclude from js-only build -->
>> + <condition property="skip-swf-tests">
>> + <or>
>> + <isset property="skip-tests" />
>> + <not>
>> + <!-- env.AIR_HOME is how we determine if it's a SWF distritbution -->
>> + <isset property="env.AIR_HOME" />
>> + </not>
>> + </or>
>> + </condition>
>> + </target>
>> +
>> + <target name="test" depends="check-for-tests,check-compiler" unless="skip-tests">
>> + <antcall target="test-swf" />
>> + </target>
>> +
>> + <target name="test-swf" unless="skip-swf-tests">
>> + <ant dir="src/test/royale" />
>> + </target>
>> +
>> + <target name="clean">
>> + <delete failonerror="false">
>> + <fileset dir="${ROYALE_HOME}/frameworks/libs">
>> + <include name="${target.name}"/>
>> + </fileset>
>> + </delete>
>> + <delete failonerror="false" includeemptydirs="true">
>> + <fileset dir="${basedir}/target">
>> + <include name="**/**"/>
>> + </fileset>
>> + </delete>
>> + <antcall target="clean-tests" />
>> + </target>
>> +
>> + <target name="clean-tests" depends="check-for-tests" unless="skip-tests">
>> + <ant dir="src/test/royale" target="clean"/>
>> + </target>
>> +
>> + <target name="compile" description="Compiles .as files into .swc" if="AIR_HOME">
>> + <!-- use antcall so that resultproperty can be used in other projects and
>> + they don't collide when being run one after the other -->
>> + <antcall target="compile-swf" />
>> + </target>
>> +
>> + <target name="compile-swf">
>> + <echo message="Compiling libs/${ant.project.name}.swc"/>
>> + <echo message="ROYALE_HOME: ${ROYALE_HOME}"/>
>> + <echo message="ROYALE_SWF_COMPILER_HOME: ${ROYALE_SWF_COMPILER_HOME}"/>
>> + <echo message="ROYALE_COMPILER_HOME: ${ROYALE_COMPILER_HOME}"/>
>> +
>> + <java jar="${ROYALE_COMPILER_HOME}/lib/compc.jar" fork="true" resultproperty="compcoutput">
>> + <jvmarg value="-Xmx384m" />
>> + <jvmarg value="-Dsun.io.useCanonCaches=false" />
>> + <jvmarg value="-Droyalelib=${ROYALE_HOME}/frameworks" />
>> + <arg value="+royalelib=${ROYALE_HOME}/frameworks" />
>> + <arg value="+playerglobal.version=${playerglobal.version}" />
>> + <arg value="+env.AIR_HOME=${AIR_HOME}" />
>> + <arg value="-compiler.strict-xml=true" />
>> + <arg value="-compiler.targets=SWF,JSRoyale" />
>> + <arg line="-metadata.date="${royale.swc-date}"" />
>> + <arg line="-metadata.dateFormat="MM/dd/yy HH:mm Z"" />
>> + <arg line="-swf-debugfile-alias="/org/apache/royale/${release.version}"" />
>> + <arg value="-output=${basedir}/target/${target.name}" />
>> + <arg value="-load-config=${basedir}/src/main/config/compile-swf-config.xml" />
>> + <arg value="-js-load-config=${ROYALE_HOME}/frameworks/js-config.xml" />
>> + <arg value="-js-load-config+=${basedir}/../../js/projects/${ant.project.name}JS/src/main/config/compile-js-config.xml" />
>> + </java>
>> + <fail>
>> + <condition>
>> + <not>
>> + <or>
>> + <equals arg1="${compcoutput}" arg2="0" />
>> + <equals arg1="${compcoutput}" arg2="2" />
>> + </or>
>> + </not>
>> + </condition>
>> + </fail>
>> + </target>
>> +
>> + <target name="check-compiler" depends="check-compiler-home,check-transpiler-home">
>> + <path id="lib.path">
>> + <fileset dir="${ROYALE_COMPILER_HOME}/lib" includes="compiler-royaleTasks.jar"/>
>> + </path>
>> + <taskdef resource="flexTasks.tasks" classpathref="lib.path"/>
>> + </target>
>> +
>> + <target name="check-compiler-home"
>> + description="Set ROYALE_SWF_COMPILER_HOME to point at the compiler.">
>> +
>> + <available file="${ROYALE_HOME}/lib/compiler-mxmlc.jar"
>> + type="file"
>> + property="ROYALE_SWF_COMPILER_HOME"
>> + value="${ROYALE_HOME}"/>
>> +
>> + <fail message="ROYALE_SWF_COMPILER_HOME must be set to a folder with a lib sub-folder containing compiler-mxmlc.jar such as the compiler folder in royale-compiler repo or the root of a Royale SDK"
>> + unless="ROYALE_SWF_COMPILER_HOME"/>
>> + </target>
>> +
>> + <target name="check-transpiler-home"
>> + description="Set ROYALE_COMPILER_HOME to point at the cross-compiler.">
>> +
>> + <available file="${ROYALE_HOME}/js/lib/jsc.jar"
>> + type="file"
>> + property="ROYALE_COMPILER_HOME"
>> + value="${ROYALE_HOME}/js"/>
>> +
>> + <available file="${env.ROYALE_COMPILER_HOME}/lib/jsc.jar"
>> + type="file"
>> + property="ROYALE_COMPILER_HOME"
>> + value="${env.ROYALE_COMPILER_HOME}"/>
>> +
>> + <fail message="ROYALE_COMPILER_HOME must be set to a folder with a lib sub-folder containing jsc.jar such as the compiler-jx folder in royale-compiler repo or the js folder of a Royale SDK"
>> + unless="ROYALE_COMPILER_HOME"/>
>> + </target>
>> +
>> +</project>
>> diff --git a/frameworks/projects/ExternsJS/pom.xml b/frameworks/projects/ExternsJS/pom.xml
>> new file mode 100644
>> index 0000000..8f97429
>> --- /dev/null
>> +++ b/frameworks/projects/ExternsJS/pom.xml
>> @@ -0,0 +1,276 @@
>> +<?xml version="1.0" encoding="UTF-8"?>
>> +<!--
>> +
>> + Licensed to the Apache Software Foundation (ASF) under one or more
>> + contributor license agreements. See the NOTICE file distributed with
>> + this work for additional information regarding copyright ownership.
>> + The ASF licenses this file to You 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
>> +
>> + Unless required by applicable law or agreed to in writing, software
>> + distributed under the License is distributed on an "AS IS" BASIS,
>> + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
>> + See the License for the specific language governing permissions and
>> + limitations under the License.
>> +
>> +--><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
>> + <modelVersion>4.0.0</modelVersion>
>> +
>> + <parent>
>> + <groupId>org.apache.royale.framework</groupId>
>> + <artifactId>projects</artifactId>
>> + <version>0.9.9-SNAPSHOT</version>
>> + </parent>
>> +
>> + <artifactId>ExternsJS</artifactId>
>> + <version>0.9.9-SNAPSHOT</version>
>> + <packaging>swc</packaging>
>> +
>> + <name>Apache Royale: Framework: Libs: ExternsJS</name>
>> +
>> + <build>
>> + <sourceDirectory>src/main/royale</sourceDirectory>
>> + <plugins>
>> + <plugin>
>> + <groupId>org.apache.royale.compiler</groupId>
>> + <artifactId>royale-maven-plugin</artifactId>
>> + <version>${project.royale.compiler.version}</version>
>> + <extensions>true</extensions>
>> + <configuration>
>> + <namespaces>
>> + <namespace>
>> + <uri>library://ns.apache.org/royale/externsjs</uri>
>> + <manifest>${project.basedir}/src/main/resources/externsjs-manifest.xml</manifest>
>> + </namespace>
>> + <namespace>
>> + <type>as</type>
>> + <uri>library://ns.apache.org/royale/externsjs</uri>
>> + <manifest>${project.basedir}/src/main/resources/externsjs-as-manifest.xml</manifest>
>> + </namespace>
>> + </namespaces>
>> + <includeClasses>
>> + <includeClass>ExternsJSClasses</includeClass>
>> + </includeClasses>
>> + <includeFiles>
>> + <include-file>
>> + <name>defaults.css</name>
>> + <path>../src/main/resources/defaults.css</path>
>> + </include-file>
>> + </includeFiles>
>> + <includeLookupOnly>true</includeLookupOnly>
>> + <allowSubclassOverrides>true</allowSubclassOverrides>
>> + <skipExtern>true</skipExtern>
>> + <skipAS>${royale.skipAS}</skipAS>
>> + <!-- <additionalCompilerOptions>
>> + -source-map=true;
>> + -source-map-source-root=/frameworks/projects/ExternsJS/src/main/royale/
>> + </additionalCompilerOptions> -->
>> + </configuration>
>> + </plugin>
>> + <plugin>
>> + <groupId>nl.geodienstencentrum.maven</groupId>
>> + <artifactId>sass-maven-plugin</artifactId>
>> + <configuration>
>> + <resources>
>> + <resource>
>> + <source>
>> + <directory>${basedir}/src/main/resources/externsjs/inspiretree</directory>
>> + <includes>
>> + <include>**/*.sass</include>
>> + </includes>
>> + </source>
>> + <destination>${basedir}/src/main/resources/externsjs/inspiretree</destination>
>> + </resource>
>> + </resources>
>> + </configuration>
>> + <executions>
>> + <execution>
>> + <id>generate-css-using-sass</id>
>> + <goals>
>> + <goal>update-stylesheets</goal>
>> + </goals>
>> + <phase>generate-resources</phase>
>> + </execution>
>> + </executions>
>> + </plugin>
>> + <plugin>
>> + <groupId>com.google.code.maven-replacer-plugin</groupId>
>> + <artifactId>replacer</artifactId>
>> + <version>1.5.3</version>
>> + <executions>
>> + <execution>
>> + <phase>generate-resources</phase>
>> + <goals>
>> + <goal>replace</goal>
>> + </goals>
>> + </execution>
>> + </executions>
>> + <configuration>
>> + <includes>
>> + <include>${basedir}/src/main/resources/**/*.css</include>
>> + </includes>
>> + <regex>false</regex>
>> + <replacements>
>> + <replacement>
>> + <token>@@ZERO_WIDTH_SPACE</token>
>> + <value>\200b</value>
>> + </replacement>
>> + <replacement>
>> + <token>@@NON_BREAKING_SPACE</token>
>> + <value>\0a</value>
>> + </replacement>
>> + </replacements>
>> + </configuration>
>> + </plugin>
>> + </plugins>
>> + </build>
>> +
>> + <dependencies>
>> + <dependency>
>> + <groupId>org.apache.royale.framework</groupId>
>> + <artifactId>Core</artifactId>
>> + <version>0.9.9-SNAPSHOT</version>
>> + <type>swc</type>
>> + <classifier>js</classifier>
>> + </dependency>
>> + <dependency>
>> + <groupId>org.apache.royale.framework</groupId>
>> + <artifactId>Binding</artifactId>
>> + <version>0.9.9-SNAPSHOT</version>
>> + <type>swc</type>
>> + <classifier>js</classifier>
>> + </dependency>
>> + <dependency>
>> + <groupId>org.apache.royale.framework</groupId>
>> + <artifactId>Graphics</artifactId>
>> + <version>0.9.9-SNAPSHOT</version>
>> + <type>swc</type>
>> + <classifier>js</classifier>
>> + </dependency>
>> + <dependency>
>> + <groupId>org.apache.royale.framework</groupId>
>> + <artifactId>Collections</artifactId>
>> + <version>0.9.9-SNAPSHOT</version>
>> + <type>swc</type>
>> + <classifier>js</classifier>
>> + </dependency>
>> + <dependency>
>> + <groupId>org.apache.royale.framework</groupId>
>> + <artifactId>HTML</artifactId>
>> + <version>0.9.9-SNAPSHOT</version>
>> + <type>swc</type>
>> + <classifier>js</classifier>
>> + </dependency>
>> + <dependency>
>> + <groupId>org.apache.royale.framework</groupId>
>> + <artifactId>Basic</artifactId>
>> + <version>0.9.9-SNAPSHOT</version>
>> + <type>swc</type>
>> + <classifier>js</classifier>
>> + </dependency>
>> + <dependency>
>> + <groupId>org.apache.royale.framework</groupId>
>> + <artifactId>Formatters</artifactId>
>> + <version>0.9.9-SNAPSHOT</version>
>> + <type>swc</type>
>> + <classifier>js</classifier>
>> + </dependency>
>> + </dependencies>
>> +
>> + <profiles>
>> + <profile>
>> + <id>platform-windows</id>
>> + <activation>
>> + <os>
>> + <family>windows</family>
>> + </os>
>> + </activation>
>> + <build>
>> + <plugins>
>> + <plugin>
>> + <groupId>nl.geodienstencentrum.maven</groupId>
>> + <artifactId>sass-maven-plugin</artifactId>
>> + <executions>
>> + <execution>
>> + <id>generate-css-using-sass</id>
>> + <goals>
>> + <goal>update-stylesheets</goal>
>> + </goals>
>> + <phase>generate-resources</phase>
>> + <configuration>
>> + <sassOptions>
>> + <!-- on windows it is typical to have autoCRLF=true,
>> + so we don't want to overwrite
>> + the CRLF newlines with unix newlines (which is true by default)
>> + locally, because that will change git status of the css file
>> + on windows
>> + -->
>> + <unix_newlines>false</unix_newlines>
>> + </sassOptions>
>> + </configuration>
>> + </execution>
>> + </executions>
>> + </plugin>
>> + </plugins>
>> + </build>
>> + </profile>
>> + <profile>
>> + <id>option-with-swf</id>
>> + <dependencies>
>> + <dependency>
>> + <groupId>org.apache.royale.framework</groupId>
>> + <artifactId>Core</artifactId>
>> + <version>0.9.9-SNAPSHOT</version>
>> + <type>swc</type>
>> + <classifier>swf</classifier>
>> + </dependency>
>> + <dependency>
>> + <groupId>org.apache.royale.framework</groupId>
>> + <artifactId>Binding</artifactId>
>> + <version>0.9.9-SNAPSHOT</version>
>> + <type>swc</type>
>> + <classifier>swf</classifier>
>> + </dependency>
>> + <dependency>
>> + <groupId>org.apache.royale.framework</groupId>
>> + <artifactId>Graphics</artifactId>
>> + <version>0.9.9-SNAPSHOT</version>
>> + <type>swc</type>
>> + <classifier>swf</classifier>
>> + </dependency>
>> + <dependency>
>> + <groupId>org.apache.royale.framework</groupId>
>> + <artifactId>Collections</artifactId>
>> + <version>0.9.9-SNAPSHOT</version>
>> + <type>swc</type>
>> + <classifier>swf</classifier>
>> + </dependency>
>> + <dependency>
>> + <groupId>org.apache.royale.framework</groupId>
>> + <artifactId>HTML</artifactId>
>> + <version>0.9.9-SNAPSHOT</version>
>> + <type>swc</type>
>> + <classifier>swf</classifier>
>> + </dependency>
>> + <dependency>
>> + <groupId>org.apache.royale.framework</groupId>
>> + <artifactId>Basic</artifactId>
>> + <version>0.9.9-SNAPSHOT</version>
>> + <type>swc</type>
>> + <classifier>swf</classifier>
>> + </dependency>
>> + <dependency>
>> + <groupId>org.apache.royale.framework</groupId>
>> + <artifactId>Formatters</artifactId>
>> + <version>0.9.9-SNAPSHOT</version>
>> + <type>swc</type>
>> + <classifier>swf</classifier>
>> + </dependency>
>> + </dependencies>
>> + </profile>
>> + </profiles>
>> +
>> +<properties /></project>
>> diff --git a/frameworks/projects/ExternsJS/src/main/config/compile-swf-config.xml b/frameworks/projects/ExternsJS/src/main/config/compile-swf-config.xml
>> new file mode 100644
>> index 0000000..8981130
>> --- /dev/null
>> +++ b/frameworks/projects/ExternsJS/src/main/config/compile-swf-config.xml
>> @@ -0,0 +1,112 @@
>> +<!--
>> +
>> + Licensed to the Apache Software Foundation (ASF) under one or more
>> + contributor license agreements. See the NOTICE file distributed with
>> + this work for additional information regarding copyright ownership.
>> + The ASF licenses this file to You 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
>> +
>> + Unless required by applicable law or agreed to in writing, software
>> + distributed under the License is distributed on an "AS IS" BASIS,
>> + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
>> + See the License for the specific language governing permissions and
>> + limitations under the License.
>> +
>> +-->
>> +<royale-config>
>> +
>> + <compiler>
>> + <accessible>false</accessible>
>> +
>> + <!-- build both SWF and JS. -->
>> + <targets>
>> + <target>JSRoyale</target>
>> + </targets>
>> + <strict-xml>true</strict-xml>
>> +
>> + <external-library-path>
>> + <path-element>${env.AIR_HOME}/frameworks/libs/air/airglobal.swc</path-element>
>> + <path-element>../../../../../libs/Binding.swc</path-element>
>> + <path-element>../../../../../libs/Core.swc</path-element>
>> + <path-element>../../../../../libs/Graphics.swc</path-element>
>> + <path-element>../../../../../libs/Basic.swc</path-element>
>> + <path-element>../../../../../libs/Collections.swc</path-element>
>> + <path-element>../../../../../libs/HTML.swc</path-element>
>> + <path-element>../../../../../libs/Formatters.swc</path-element>
>> + </external-library-path>
>> +
>> + <allow-subclass-overrides>true</allow-subclass-overrides>
>> + <mxml>
>> + <children-as-data>true</children-as-data>
>> + <imports>
>> + <implicit-import>org.apache.royale.events.*</implicit-import>
>> + <implicit-import>org.apache.royale.geom.*</implicit-import>
>> + <implicit-import>org.apache.royale.core.ClassFactory</implicit-import>
>> + <implicit-import>org.apache.royale.core.IFactory</implicit-import>
>> + </imports>
>> + </mxml>
>> + <binding-value-change-event>org.apache.royale.events.ValueChangeEvent</binding-value-change-event>
>> + <binding-value-change-event-kind>org.apache.royale.events.ValueChangeEvent</binding-value-change-event-kind>
>> + <binding-value-change-event-type>valueChange</binding-value-change-event-type>
>> +
>> + <define>
>> + <name>COMPILE::SWF</name>
>> + <value>true</value>
>> + </define>
>> + <define>
>> + <name>COMPILE::JS</name>
>> + <value>false</value>
>> + </define>
>> +
>> + <keep-as3-metadata>
>> + <name>Bindable</name>
>> + <name>Managed</name>
>> + <name>ChangeEvent</name>
>> + <name>NonCommittingChangeEvent</name>
>> + <name>Transient</name>
>> + </keep-as3-metadata>
>> +
>> + <locale/>
>> +
>> + <library-path/>
>> +
>> + <namespaces>
>> + <namespace>
>> + <uri>library://ns.apache.org/royale/externsjs</uri>
>> + <manifest>../resources/externsjs-manifest.xml</manifest>
>> + </namespace>
>> + <namespace>
>> + <uri>library://ns.apache.org/royale/externsjs</uri>
>> + <manifest>../resources/externsjs-as-manifest.xml</manifest>
>> + </namespace>
>> + </namespaces>
>> +
>> + <source-path>
>> + <path-element>../royale</path-element>
>> + </source-path>
>> +
>> + <warn-no-constructor>false</warn-no-constructor>
>> + </compiler>
>> +
>> + <include-file>
>> + <name>defaults.css</name>
>> + <path>../resources/defaults.css</path>
>> + </include-file>
>> +
>> + <include-lookup-only>true</include-lookup-only>
>> +
>> + <include-classes>
>> + <class>ExternsJSClasses</class>
>> + </include-classes>
>> +
>> + <include-namespaces>
>> + <uri>library://ns.apache.org/royale/externsjs</uri>
>> + </include-namespaces>
>> +
>> + <target-player>${playerglobal.version}</target-player>
>> +
>> +
>> +</royale-config>
>> diff --git a/frameworks/projects/ExternsJS/src/main/resources/defaults.css b/frameworks/projects/ExternsJS/src/main/resources/defaults.css
>> new file mode 100644
>> index 0000000..c8dab5d
>> --- /dev/null
>> +++ b/frameworks/projects/ExternsJS/src/main/resources/defaults.css
>> @@ -0,0 +1,3255 @@
>> +/**
>> + * Licensed to the Apache Software Foundation (ASF) under one or more
>> + * contributor license agreements. See the NOTICE file distributed with
>> + * this work for additional information regarding copyright ownership.
>> + * The ASF licenses this file to You 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
>> + *
>> + * Unless required by applicable law or agreed to in writing, software
>> + * distributed under the License is distributed on an "AS IS" BASIS,
>> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
>> + * See the License for the specific language governing permissions and
>> + * limitations under the License.
>> + */
>> +@namespace j "library://ns.apache.org/royale/externsjs";
>> +@namespace "http://www.w3.org/1999/xhtml";
>> +*, :after, :before {
>> + box-sizing: border-box; }
>> +
>> +html, body {
>> + height: 100%; }
>> +
>> +::-moz-focus-inner, ::-moz-focus-outer {
>> + border: 0; }
>> +
>> +input:focus, textarea:focus, select:focus, div:focus, label:focus, nav:focus, li:focus, a:focus {
>> + outline: none; }
>> +
>> +select::-ms-expand {
>> + display: none; }
>> +
>> +button::-moz-focus-inner {
>> + padding: 0; }
>> +
>> +button, input, textarea {
>> + font-size: 100%; }
>> +
>> +.cursor-pointer {
>> + cursor: pointer !important; }
>> +
>> +j|View {
>> + IBeadView: ClassReference("org.apache.royale.html.beads.GroupView");
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.ViewLayout"); }
>> +
>> +.responsive-view {
>> + display: inline-flex;
>> + width: 100%;
>> + height: 100%; }
>> +
>> +j|Group {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.BasicLayout");
>> + IBeadView: ClassReference("org.apache.royale.html.beads.GroupView"); }
>> +
>> +.externsjs.group {
>> + overflow: visible; }
>> +
>> +j|HGroup {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout"); }
>> +
>> +j|VGroup {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout"); }
>> +
>> +j|Grid {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.GridLayout"); }
>> +
>> +j|ScrollableGrid {
>> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport"); }
>> +
>> +j|GridCell {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.GridCellLayout"); }
>> +
>> +j|Container {
>> + IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.BasicLayout");
>> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
>> +
>> +j|HContainer {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout"); }
>> +
>> +j|VContainer {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout"); }
>> +
>> +j|Image {
>> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.ImageModel");
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.ImageView"); }
>> +
>> +j|BinaryImage {
>> + IBeadModel: ClassReference("org.apache.royale.html.beads.models.BinaryImageModel");
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.ImageView");
>> + IBinaryImageLoader: ClassReference("org.apache.royale.html.beads.BinaryImageLoader"); }
>> +
>> +j|DataContainer {
>> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.DataProviderModel");
>> + IBeadView: ClassReference("org.apache.royale.html.beads.DataContainerView");
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout");
>> + IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForCollectionView");
>> + IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
>> + IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.StringItemRenderer");
>> + IItemRendererInitializer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DataContainerItemRendererInitializer");
>> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
>> +
>> +j|Validator {
>> + ILocalizedValuesImpl: ClassReference("org.apache.royale.core.SimpleLocalizedValuesImpl"); }
>> +
>> +j|Form {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.FormLayout"); }
>> +
>> +@media -royale-swf {
>> + j|Container {
>> + IContentView: ClassReference("org.apache.royale.html.supportClasses.ContainerContentArea"); } }
>> +hr {
>> + border: 0;
>> + height: 1px; }
>> +
>> +.responsiveSizeMonitor {
>> + background: rgba(0, 0, 0, 0.8);
>> + color: white;
>> + padding: 10px;
>> + position: fixed;
>> + bottom: 0;
>> + right: 0;
>> + width: 250px; }
>> + .responsiveSizeMonitor strong {
>> + color: yellow; }
>> +
>> +.externsjs.alert {
>> + position: fixed;
>> + top: 50%;
>> + left: 50%;
>> + min-width: 350px;
>> + min-height: 200px; }
>> + .externsjs.alert .externsjs.titlebar {
>> + height: 50px; }
>> + .externsjs.alert .content {
>> + position: absolute;
>> + top: 50px;
>> + bottom: 50px;
>> + width: 100%;
>> + overflow-y: auto; }
>> + .externsjs.alert .content .externsjs.label {
>> + white-space: normal; }
>> + .externsjs.alert .externsjs.controlbar {
>> + bottom: 0;
>> + height: 50px; }
>> +
>> +@media all and (-ms-high-contrast: none) {
>> + .externsjs.alert {
>> + display: table; } }
>> +@media (min-width: 768px) {
>> + .externsjs.alert {
>> + min-width: 450px; } }
>> +j|Alert {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout");
>> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.AlertModel");
>> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.AlertController");
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.AlertView"); }
>> +
>> +.externsjs.badge {
>> + z-index: 2;
>> + position: absolute;
>> + top: -1em;
>> + right: -1em;
>> + text-transform: initial;
>> + padding: 0.5em;
>> + min-width: 2.1em; }
>> + .externsjs.badge.overlap {
>> + top: 0em;
>> + right: 0em; }
>> + .externsjs.badge.subindex {
>> + top: auto;
>> + bottom: -1em; }
>> + .externsjs.badge.subindex.overlap {
>> + top: auto;
>> + bottom: 0em; }
>> + .externsjs.badge.preindex {
>> + left: -1em;
>> + right: auto; }
>> + .externsjs.badge.preindex.overlap {
>> + left: 0em;
>> + right: auto; }
>> +
>> +.externsjs.button {
>> + cursor: pointer;
>> + user-select: none;
>> + display: inline-flex;
>> + position: relative;
>> + align-items: center;
>> + justify-content: center;
>> + vertical-align: middle;
>> + overflow: hidden;
>> + outline: none;
>> + white-space: nowrap;
>> + line-height: normal !important;
>> + text-align: center;
>> + text-decoration: none; }
>> + .externsjs.button[disabled] {
>> + cursor: default; }
>> + .externsjs.button.multiline {
>> + white-space: pre-wrap; }
>> + .externsjs.button .fonticon {
>> + cursor: inherit; }
>> + .externsjs.button.viewport {
>> + overflow: visible; }
>> +
>> +@media -royale-swf {
>> + j|Button {
>> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.TextModel");
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.ButtonView"); } }
>> +.externsjs.buttonbar .externsjs.button, .externsjs.buttonbar .externsjs.togglebutton {
>> + border-radius: 0; }
>> + .externsjs.buttonbar .externsjs.button.first, .externsjs.buttonbar .externsjs.togglebutton.first {
>> + border-top-left-radius: 0.25rem;
>> + border-bottom-left-radius: 0.25rem; }
>> + .externsjs.buttonbar .externsjs.button.last, .externsjs.buttonbar .externsjs.togglebutton.last {
>> + border-top-right-radius: 0.25rem;
>> + border-bottom-right-radius: 0.25rem; }
>> +
>> +j|ButtonBar {
>> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.ButtonBarModel");
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.ButtonBarView");
>> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.ListSingleSelectionMouseController");
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.ButtonBarLayout");
>> + IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.SelectionDataItemRendererFactoryForCollectionView");
>> + IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
>> + IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.ButtonBarItemRenderer");
>> + IItemRendererInitializer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ButtonBarItemRendererInitializer"); }
>> +
>> +@media -royale-swf {
>> + j|ButtonBar {
>> + IContentView: ClassReference("org.apache.royale.externsjs.supportClasses.list.DataGroup"); } }
>> +j|IconButtonBar {
>> + IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.IconButtonBarItemRenderer"); }
>> +
>> +.externsjs.buttonbar.toggle-on-click .externsjs.togglebutton.selected {
>> + pointer-events: none; }
>> +
>> +j|ToggleButtonBar {
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.ToggleButtonBarView");
>> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.ToggleButtonBarSelectionMouseController");
>> + IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.ToggleButtonBarItemRenderer"); }
>> +
>> +.externsjs.card {
>> + min-width: 120px;
>> + min-height: 52px;
>> + position: relative; }
>> + .externsjs.card .card-header {
>> + width: 100%; }
>> + .externsjs.card .card-header .card-title {
>> + flex: 1 1 auto;
>> + overflow: hidden;
>> + text-decoration: inherit;
>> + text-overflow: ellipsis;
>> + text-transform: inherit;
>> + z-index: 1; }
>> + .externsjs.card .card-expanded-content {
>> + width: 100%; }
>> + .externsjs.card .card-primary-content {
>> + width: 100%;
>> + min-height: 152px;
>> + position: relative;
>> + outline: none;
>> + color: inherit;
>> + text-decoration: none;
>> + flex: 1 1 auto; }
>> + .externsjs.card .card-actions {
>> + width: 100%;
>> + position: relative;
>> + outline: none;
>> + color: inherit;
>> + text-decoration: none; }
>> +
>> +.externsjs.checkbox {
>> + display: inline-flex;
>> + position: relative;
>> + margin: 0;
>> + padding: 0;
>> + height: auto; }
>> + .externsjs.checkbox input {
>> + -webkit-appearance: none;
>> + -moz-appearance: none;
>> + -o-appearance: none;
>> + -ms-appearance: none;
>> + appearance: none;
>> + display: inline-flex;
>> + margin: 0;
>> + padding: 0;
>> + width: 24px;
>> + height: 24px;
>> + opacity: 0; }
>> + .externsjs.checkbox input + span::before {
>> + content: " ";
>> + position: absolute;
>> + left: 0px;
>> + top: 0px;
>> + width: 22px;
>> + height: 22px; }
>> + .externsjs.checkbox input + span::after {
>> + content: " ";
>> + position: absolute;
>> + width: 22px;
>> + height: 22px;
>> + left: 0px;
>> + top: 0px;
>> + opacity: 0; }
>> + .externsjs.checkbox input:checked + span::after, .externsjs.checkbox input:checked:active + span::after {
>> + opacity: 1; }
>> + .externsjs.checkbox input:focus + span::before, .externsjs.checkbox input:checked:focus + span::before, .externsjs.checkbox input:checked:active:focus + span::before {
>> + outline: none; }
>> + .externsjs.checkbox input[disabled] + span {
>> + cursor: unset; }
>> + .externsjs.checkbox span {
>> + cursor: pointer;
>> + margin: auto;
>> + width: inherit; }
>> +
>> +.externsjs.switch {
>> + display: inline-flex;
>> + position: relative;
>> + height: auto; }
>> + .externsjs.switch input {
>> + -webkit-appearance: none;
>> + -moz-appearance: none;
>> + -o-appearance: none;
>> + -ms-appearance: none;
>> + appearance: none;
>> + display: inline-flex;
>> + opacity: 0;
>> + width: 44px;
>> + height: 24px;
>> + margin: 0;
>> + padding: 0; }
>> + .externsjs.switch input[disabled] + span {
>> + cursor: unset; }
>> + .externsjs.switch .switch {
>> + position: absolute;
>> + cursor: pointer;
>> + top: 0;
>> + left: 0;
>> + right: 0;
>> + bottom: 0;
>> + width: 44px;
>> + height: 24px; }
>> + .externsjs.switch .switch::before {
>> + position: absolute;
>> + content: "";
>> + height: 20px;
>> + width: 20px;
>> + left: 2px;
>> + bottom: 2px; }
>> + .externsjs.switch .label {
>> + cursor: pointer;
>> + margin: auto;
>> + width: inherit; }
>> +
>> +.externsjs.combobox {
>> + display: inline-flex; }
>> + .externsjs.combobox .externsjs.textinput {
>> + display: block; }
>> + .externsjs.combobox .externsjs.button::before {
>> + margin: 0;
>> + padding: 0; }
>> + .externsjs.combobox .externsjs.button::after {
>> + content: " ";
>> + position: absolute; }
>> +
>> +j|ComboBox {
>> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.ComboBoxModel");
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.ComboBoxView");
>> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.ComboBoxController");
>> + IPopUp: ClassReference("org.apache.royale.externsjs.supportClasses.combobox.ComboBoxPopUp"); }
>> +
>> +.combobox-popup {
>> + position: fixed;
>> + pointer-events: none;
>> + bottom: 0;
>> + left: 0;
>> + width: 100%;
>> + height: 100%;
>> + overflow: hidden;
>> + contain: strict;
>> + z-index: 60;
>> + color: rgba(0, 0, 0, 0.8); }
>> + .combobox-popup::before {
>> + position: absolute;
>> + display: block;
>> + top: 0;
>> + left: 0;
>> + width: 100%;
>> + height: 100%;
>> + content: "";
>> + opacity: 0;
>> + background-color: rgba(0, 0, 0, 0.65);
>> + will-change: opacity;
>> + transition: opacity 0.4s 0ms; }
>> + .combobox-popup .externsjs.list {
>> + position: relative;
>> + transform: translate(-50%, 100%);
>> + transition: none;
>> + will-change: transform, opacity;
>> + bottom: auto;
>> + top: calc(100% - 10px);
>> + left: 50%;
>> + box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7) !important;
>> + opacity: 0; }
>> + .combobox-popup.open {
>> + pointer-events: auto; }
>> + .combobox-popup.open::before {
>> + opacity: 1; }
>> + .combobox-popup.open .externsjs.list {
>> + transform: translate(-50%, -100%);
>> + transition: transform 0.3s 0ms, opacity 0.3s 0ms;
>> + opacity: 1; }
>> +
>> +@media (max-width: 767px) {
>> + .combobox-popup .externsjs.list {
>> + width: 98% !important;
>> + max-height: 240px !important; }
>> + .combobox-popup .externsjs.list .externsjs.item {
>> + min-height: 48px !important; } }
>> +@media (min-width: 767px) {
>> + .combobox-popup::before {
>> + background-color: rgba(0, 0, 0, 0); }
>> + .combobox-popup .externsjs.list {
>> + transform: none;
>> + transition: none;
>> + box-shadow: none !important; }
>> + .combobox-popup .externsjs.list .externsjs.item {
>> + overflow: hidden;
>> + transition: height 200ms ease-in; }
>> + .combobox-popup.open .externsjs.list {
>> + transform: none;
>> + top: auto;
>> + left: auto; } }
>> +j|ComboBoxPopUp {
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.ComboBoxPopUpView"); }
>> +
>> +j|VirtualComboBox {
>> + IPopUp: ClassReference("org.apache.royale.externsjs.supportClasses.combobox.VirtualComboBoxPopUp"); }
>> +
>> +j|VirtualComboBoxPopUp {
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.VirtualComboBoxPopUpView"); }
>> +
>> +.externsjs.datagrid {
>> + display: flex;
>> + flex-direction: column;
>> + position: relative;
>> + overflow: auto; }
>> + .externsjs.datagrid .externsjs.buttonbar.header {
>> + width: 100%;
>> + flex: 0 0 auto; }
>> + .externsjs.datagrid .externsjs.buttonbar.header .externsjs.button {
>> + width: 100%; }
>> + .externsjs.datagrid .listarea {
>> + width: 100%;
>> + flex: 1 1 auto; }
>> + .externsjs.datagrid .externsjs.list.column {
>> + padding-left: 0;
>> + padding-right: 0;
>> + position: relative;
>> + min-height: 100%; }
>> + .externsjs.datagrid .externsjs.list.column .externsjs.item.datagrid {
>> + width: 100%; }
>> + .externsjs.datagrid span:empty:before {
>> + content: "\200b"; }
>> +
>> +j|DataGrid {
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.DataGridView");
>> + IBeadModel: ClassReference("org.apache.royale.html.beads.models.DataGridCollectionViewModel");
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.DataGridLayout");
>> + headerClass: ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.DataGridButtonBar");
>> + headerLayoutClass: ClassReference("org.apache.royale.externsjs.beads.layouts.DataGridColumnLayout");
>> + listAreaClass: ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.DataGridListArea");
>> + columnClass: ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.DataGridColumnList"); }
>> +
>> +j|DataGridListArea {
>> + IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
>> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport"); }
>> +
>> +j|DataGridColumnList {
>> + IItemRendererClassFactory: ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
>> + IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.DataGridItemRenderer");
>> + IItemRendererInitializer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DataGridColumnListItemRendererInitializer");
>> + ISelectableItemRenderer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ClassSelectorListSelectableItemRendererBead");
>> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
>> +
>> +j|DataGridButtonBar {
>> + IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.DatagridHeaderRenderer"); }
>> +
>> +j|VirtualDataGrid {
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.VirtualDataGridView");
>> + columnClass: ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.VirtualDataGridColumnList"); }
>> +
>> +j|VirtualDataGridListArea {
>> + IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
>> + listAreaClass: ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.VirtualDataGrid");
>> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
>> +
>> +j|VirtualDataGridColumnList {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.VirtualDataGridListAreaLayout");
>> + IItemRendererClassFactory: ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
>> + IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.DataGridItemRenderer");
>> + IItemRendererInitializer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DataGridColumnListItemRendererInitializer");
>> + ISelectableItemRenderer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ClassSelectorListSelectableItemRendererBead");
>> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport"); }
>> +
>> +.externsjs.datechooser .externsjs.table {
>> + min-width: 324px;
>> + min-height: 364px; }
>> + .externsjs.datechooser .externsjs.table .externsjs.tablecell {
>> + height: auto; }
>> + .externsjs.datechooser .externsjs.table .externsjs.tableheadercell.buttonsRow > .layout.horizontal {
>> + float: right; }
>> + .externsjs.datechooser .externsjs.table .externsjs.tableheadercell.buttonsRow .viewSelector::after {
>> + content: " "; }
>> + .externsjs.datechooser .externsjs.table .externsjs.tableheadercell.buttonsRow .previousButton::after, .externsjs.datechooser .externsjs.table .externsjs.tableheadercell.buttonsRow .nextButton::after {
>> + content: " ";
>> + position: absolute; }
>> +
>> +j|DateChooser {
>> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.DateChooserModel");
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.DateChooserView");
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout");
>> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.DateChooserMouseController"); }
>> +
>> +.externsjs.datefield {
>> + display: inline-flex; }
>> + .externsjs.datefield .externsjs.textinput input {
>> + width: 9.2em; }
>> + .externsjs.datefield .externsjs.button::before {
>> + margin: 0;
>> + padding: 0;
>> + line-height: 22px; }
>> + .externsjs.datefield .externsjs.button::after {
>> + content: " ";
>> + position: absolute;
>> + width: 22px;
>> + height: 22px;
>> + left: calc(50% - 11px);
>> + top: calc(50% - 11px); }
>> +
>> +.datechooser-popup {
>> + position: fixed;
>> + pointer-events: none;
>> + bottom: 0;
>> + left: 0;
>> + width: 100%;
>> + height: 100%;
>> + overflow: hidden;
>> + contain: strict;
>> + z-index: 60;
>> + color: rgba(0, 0, 0, 0.8); }
>> + .datechooser-popup::before {
>> + position: absolute;
>> + display: block;
>> + top: 0;
>> + left: 0;
>> + width: 100%;
>> + height: 100%;
>> + content: "";
>> + opacity: 0;
>> + background-color: rgba(0, 0, 0, 0.65);
>> + will-change: opacity;
>> + transition: opacity 0.4s 0ms; }
>> + .datechooser-popup .externsjs.table {
>> + position: relative;
>> + transform: translate(-50%, 100%);
>> + transition: none;
>> + will-change: transform, opacity;
>> + bottom: auto;
>> + top: calc(100% - 10px);
>> + left: 50%;
>> + touch-action: none;
>> + box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7) !important;
>> + opacity: 0; }
>> + .datechooser-popup.open {
>> + pointer-events: auto; }
>> + .datechooser-popup.open::before {
>> + opacity: 1; }
>> + .datechooser-popup.open .externsjs.table {
>> + transform: translate(-50%, -100%);
>> + transition: transform 0.4s 0ms, opacity 0.4s 0ms;
>> + opacity: 1; }
>> +
>> +@media (max-width: 768px) {
>> + .datechooser-popup .externsjs.table {
>> + width: calc(100% - 20px); } }
>> +@media (min-width: 768px) and (max-width: 992px) {
>> + .datechooser-popup .externsjs.table {
>> + width: calc(100% - 300px); } }
>> +@media (min-width: 992px) {
>> + .datechooser-popup::before {
>> + background-color: rgba(0, 0, 0, 0); }
>> + .datechooser-popup .externsjs.table {
>> + transform: none;
>> + transition: none;
>> + box-shadow: none !important; }
>> + .datechooser-popup .externsjs.table .externsjs.item {
>> + height: 0;
>> + overflow: hidden;
>> + transition: height 200ms ease-in; }
>> + .datechooser-popup.open .externsjs.table {
>> + transform: none;
>> + top: auto;
>> + left: auto; }
>> + .datechooser-popup.open .externsjs.table .externsjs.item {
>> + height: 34px; } }
>> +j|DateField {
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.DateFieldView");
>> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.DateChooserModel");
>> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.DateFieldMouseController");
>> + IFormatter: ClassReference("org.apache.royale.html.accessories.StringDateFormatter");
>> + IPopUp: ClassReference("org.apache.royale.externsjs.DateChooser"); }
>> +
>> +.externsjs.divider {
>> + height: 0;
>> + margin: 0; }
>> +
>> +j|Divider {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
>> +
>> +.externsjs.drawer.float {
>> + position: fixed;
>> + pointer-events: none;
>> + top: 0;
>> + left: 0;
>> + width: 100%;
>> + height: 100%;
>> + overflow: hidden;
>> + contain: strict;
>> + z-index: 100; }
>> + .externsjs.drawer.float::before {
>> + position: absolute;
>> + display: block;
>> + top: 0;
>> + left: 0;
>> + width: 100%;
>> + height: 100%;
>> + content: "";
>> + opacity: 0; }
>> + .externsjs.drawer.float .drawermain {
>> + position: absolute;
>> + display: flex;
>> + flex-direction: column;
>> + left: 0;
>> + right: initial;
>> + height: 100%; }
>> + .externsjs.drawer.float.open {
>> + pointer-events: auto; }
>> + .externsjs.drawer.float.open::before {
>> + opacity: 1; }
>> +.externsjs.drawer.fixed {
>> + width: 0; }
>> + .externsjs.drawer.fixed .drawermain {
>> + display: inline-flex;
>> + flex-direction: column;
>> + left: 0;
>> + right: auto;
>> + height: 100%;
>> + overflow: hidden;
>> + touch-action: none; }
>> + .externsjs.drawer.fixed.open {
>> + pointer-events: auto; }
>> + .externsjs.drawer.fixed.open .drawermain {
>> + transform: none; }
>> +
>> +@media (min-width: 768px) {
>> + .externsjs.drawer.float .drawermain {
>> + width: calc(100% - 60px);
>> + max-width: 310px; } }
>> +.externsjs.drawerheader {
>> + position: relative;
>> + display: flex;
>> + flex-direction: column;
>> + align-items: center;
>> + flex-shrink: 0; }
>> + .externsjs.drawerheader div {
>> + display: flex;
>> + position: absolute;
>> + top: 0;
>> + right: 0;
>> + bottom: 0;
>> + left: 0;
>> + align-items: flex-end; }
>> +
>> +.externsjs.drawercontent {
>> + flex: 1 100 auto;
>> + margin: 0;
>> + overflow-x: hidden;
>> + overflow-y: auto;
>> + -webkit-overflow-scrolling: touch;
>> + touch-action: pan-y; }
>> +
>> +.externsjs.drawerfooter {
>> + display: flex;
>> + position: relative;
>> + width: 100%;
>> + height: 66px; }
>> +
>> +j|DrawerBase {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
>> +
>> +j|Drawer {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
>> +
>> +j|DrawerHeader {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
>> +
>> +j|DrawerContent {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
>> +
>> +.externsjs.dropdownlist {
>> + -webkit-appearance: none;
>> + -moz-appearance: none;
>> + -o-appearance: none;
>> + -ms-appearance: none;
>> + appearance: none;
>> + width: 200px;
>> + margin: 0;
>> + padding: 0.68em 2.38em 0.68em 1.12em;
>> + cursor: pointer;
>> + display: inline-flex;
>> + line-height: normal !important;
>> + outline: none; }
>> +
>> +j|DropDownList {
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.DropDownListView");
>> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.DropDownListModel");
>> + IDataProviderItemRendererMapper: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DropDownListItemRendererFactoryForCollectionView");
>> + IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
>> + IItemRendererInitializer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DropDownListItemRendererInitializer");
>> + IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.DropDownListItemRenderer");
>> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.DropDownListController"); }
>> +
>> +@media -royale-swf {
>> + j|DropDownList {
>> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.ArrayListSelectionModel");
>> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.DropDownListController");
>> + IPopUp: ClassReference("org.apache.royale.externsjs.supportClasses.dropdownlist.DropDownListList"); } }
>> +.externsjs.footerbar {
>> + display: inline-flex;
>> + flex: 1 1 auto; }
>> + .externsjs.footerbar .footerBarAppHeader {
>> + display: flex;
>> + flex-direction: column;
>> + justify-content: space-between;
>> + width: 100%;
>> + z-index: 20;
>> + position: fixed;
>> + bottom: 0px; }
>> + .externsjs.footerbar .footerBarAppHeader.fixed {
>> + transition: box-shadow 200ms linear; }
>> + .externsjs.footerbar .externsjs.barrow {
>> + display: flex;
>> + position: relative;
>> + width: 100%;
>> + height: 64px; }
>> + .externsjs.footerbar .externsjs.barsection {
>> + display: inline-flex;
>> + flex: 1 1 auto;
>> + align-items: center;
>> + min-width: 0;
>> + z-index: 1;
>> + order: -1; }
>> + .externsjs.footerbar .externsjs.barsection button {
>> + will-change: transform, opacity;
>> + display: flex;
>> + position: relative;
>> + flex-shrink: 0;
>> + align-items: center;
>> + justify-content: center;
>> + width: 48px;
>> + height: 48px;
>> + outline: none;
>> + text-decoration: none;
>> + opacity: 1; }
>> + .externsjs.footerbar .externsjs.barsection button .fonticon {
>> + margin-left: 0px;
>> + margin-right: 0px; }
>> + .externsjs.footerbar .externsjs.bartitle {
>> + -moz-osx-font-smoothing: grayscale;
>> + -webkit-font-smoothing: antialiased;
>> + white-space: nowrap;
>> + flex: 1 1 auto;
>> + overflow: hidden;
>> + z-index: 1;
>> + line-height: 2rem;
>> + letter-spacing: 0.0125em;
>> + text-decoration: inherit;
>> + text-transform: inherit;
>> + text-overflow: ellipsis; }
>> +
>> +j|FooterBar {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
>> +
>> +.externsjs.formheading .externsjs.label.headingLabel {
>> + white-space: initial;
>> + flex: 1 1 auto; }
>> +
>> +j|FormHeading {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.FormHeadingView");
>> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.TextModel"); }
>> +
>> +j|FormItem {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.FormItemLayout");
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.FormItemView");
>> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.FormItemModel");
>> + IFormItemContentArea: ClassReference("org.apache.royale.externsjs.Group");
>> + IFormItemLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout"); }
>> +
>> +.fonticon {
>> + cursor: default; }
>> + .fonticon.size-18 {
>> + font-size: 18px; }
>> + .fonticon.size-24 {
>> + font-size: 24px; }
>> + .fonticon.size-36 {
>> + font-size: 36px; }
>> + .fonticon.size-48 {
>> + font-size: 48px; }
>> +
>> +.externsjs.imagebutton {
>> + border-style: none;
>> + padding: 0px; }
>> +
>> +j|ImageButton {
>> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.ImageModel"); }
>> +
>> +.externsjs.item, .externsjs.navigationlink, .externsjs.tabbarbutton {
>> + text-decoration: none;
>> + letter-spacing: 0;
>> + line-height: normal !important;
>> + overflow: hidden;
>> + cursor: auto;
>> + flex-shrink: 0;
>> + position: relative;
>> + list-style: none; }
>> + .externsjs.item.selectable, .externsjs.item.hoverable, .externsjs.navigationlink.selectable, .externsjs.navigationlink.hoverable, .externsjs.tabbarbutton.selectable, .externsjs.tabbarbutton.hoverable {
>> + cursor: pointer; }
>> + .externsjs.item .fonticon, .externsjs.navigationlink .fonticon, .externsjs.tabbarbutton .fonticon {
>> + cursor: inherit; }
>> +
>> +j|ListItemRenderer {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.BasicLayout");
>> + IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ItemRendererMouseController"); }
>> +
>> +.externsjs.label {
>> + -webkit-font-smoothing: antialiased;
>> + cursor: default;
>> + white-space: nowrap; }
>> + .externsjs.label.multiline {
>> + white-space: pre-wrap;
>> + word-wrap: break-word; }
>> + .externsjs.label.truncate {
>> + overflow: hidden;
>> + text-overflow: ellipsis; }
>> +
>> +j|Label {
>> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.TextModel"); }
>> +
>> +.viewport {
>> + overflow: visible; }
>> + .viewport.clipped {
>> + overflow: hidden; }
>> + .viewport.scroll {
>> + overflow: auto; }
>> +
>> +.layout.basic {
>> + position: relative; }
>> + .layout.basic > * {
>> + position: absolute !important; }
>> +
>> +.layout {
>> + display: flex; }
>> + .layout.horizontal {
>> + flex-direction: row;
>> + flex-wrap: nowrap;
>> + align-items: flex-start; }
>> + .layout.horizontal > * {
>> + flex: 0 1 auto; }
>> + .layout.horizontal.flow {
>> + flex-wrap: wrap;
>> + max-width: 100%; }
>> + .layout.horizontal.centered {
>> + justify-content: center;
>> + align-items: center;
>> + align-content: center; }
>> + .layout.horizontal.centered > * {
>> + flex: 0 0 auto !important; }
>> + .layout.horizontal.tile {
>> + flex-wrap: wrap; }
>> + .layout.horizontal.formitem {
>> + width: 100%;
>> + align-items: flex-start; }
>> + .layout.horizontal.gap-1x3px > *:first-child {
>> + margin-left: 0px; }
>> + .layout.horizontal.gap-1x3px > * {
>> + margin-left: 3px; }
>> + .layout.horizontal.gap-2x3px > *:first-child {
>> + margin-left: 0px; }
>> + .layout.horizontal.gap-2x3px > * {
>> + margin-left: 6px; }
>> + .layout.horizontal.gap-3x3px > *:first-child {
>> + margin-left: 0px; }
>> + .layout.horizontal.gap-3x3px > * {
>> + margin-left: 9px; }
>> + .layout.horizontal.gap-4x3px > *:first-child {
>> + margin-left: 0px; }
>> + .layout.horizontal.gap-4x3px > * {
>> + margin-left: 12px; }
>> + .layout.horizontal.gap-5x3px > *:first-child {
>> + margin-left: 0px; }
>> + .layout.horizontal.gap-5x3px > * {
>> + margin-left: 15px; }
>> + .layout.horizontal.gap-6x3px > *:first-child {
>> + margin-left: 0px; }
>> + .layout.horizontal.gap-6x3px > * {
>> + margin-left: 18px; }
>> + .layout.horizontal.gap-7x3px > *:first-child {
>> + margin-left: 0px; }
>> + .layout.horizontal.gap-7x3px > * {
>> + margin-left: 21px; }
>> + .layout.horizontal.gap-8x3px > *:first-child {
>> + margin-left: 0px; }
>> + .layout.horizontal.gap-8x3px > * {
>> + margin-left: 24px; }
>> + .layout.horizontal.gap-9x3px > *:first-child {
>> + margin-left: 0px; }
>> + .layout.horizontal.gap-9x3px > * {
>> + margin-left: 27px; }
>> + .layout.horizontal.gap-10x3px > *:first-child {
>> + margin-left: 0px; }
>> + .layout.horizontal.gap-10x3px > * {
>> + margin-left: 30px; }
>> + .layout.horizontal.itemsReverse.gap-1x3px > *:last-child {
>> + margin-left: 0px; }
>> + .layout.horizontal.itemsReverse.gap-1x3px > * {
>> + margin-left: 3px; }
>> + .layout.horizontal.itemsReverse.gap-2x3px > *:last-child {
>> + margin-left: 0px; }
>> + .layout.horizontal.itemsReverse.gap-2x3px > * {
>> + margin-left: 6px; }
>> + .layout.horizontal.itemsReverse.gap-3x3px > *:last-child {
>> + margin-left: 0px; }
>> + .layout.horizontal.itemsReverse.gap-3x3px > * {
>> + margin-left: 9px; }
>> + .layout.horizontal.itemsReverse.gap-4x3px > *:last-child {
>> + margin-left: 0px; }
>> + .layout.horizontal.itemsReverse.gap-4x3px > * {
>> + margin-left: 12px; }
>> + .layout.horizontal.itemsReverse.gap-5x3px > *:last-child {
>> + margin-left: 0px; }
>> + .layout.horizontal.itemsReverse.gap-5x3px > * {
>> + margin-left: 15px; }
>> + .layout.horizontal.itemsReverse.gap-6x3px > *:last-child {
>> + margin-left: 0px; }
>> + .layout.horizontal.itemsReverse.gap-6x3px > * {
>> + margin-left: 18px; }
>> + .layout.horizontal.itemsReverse.gap-7x3px > *:last-child {
>> + margin-left: 0px; }
>> + .layout.horizontal.itemsReverse.gap-7x3px > * {
>> + margin-left: 21px; }
>> + .layout.horizontal.itemsReverse.gap-8x3px > *:last-child {
>> + margin-left: 0px; }
>> + .layout.horizontal.itemsReverse.gap-8x3px > * {
>> + margin-left: 24px; }
>> + .layout.horizontal.itemsReverse.gap-9x3px > *:last-child {
>> + margin-left: 0px; }
>> + .layout.horizontal.itemsReverse.gap-9x3px > * {
>> + margin-left: 27px; }
>> + .layout.horizontal.itemsReverse.gap-10x3px > *:last-child {
>> + margin-left: 0px; }
>> + .layout.horizontal.itemsReverse.gap-10x3px > * {
>> + margin-left: 30px; }
>> + .layout.horizontal.sameWidths > * {
>> + flex: 1 0 0; }
>> + .layout.horizontal.pixelWidths > * {
>> + flex: none; }
>> + .layout.horizontal.proportionalWidths > * {
>> + flex: 1 0; }
>> + .layout.horizontal.percentWidths > * {
>> + flex: 1 0 auto; }
>> + .layout.horizontal.naturalWidths > * {
>> + flex: none; }
>> + .layout.vertical {
>> + flex-direction: column;
>> + flex-wrap: nowrap;
>> + align-items: flex-start; }
>> + .layout.vertical > * {
>> + flex: 0 1 auto; }
>> + .layout.vertical.flow {
>> + flex-wrap: wrap; }
>> + .layout.vertical.centered {
>> + justify-content: center;
>> + align-items: center;
>> + align-content: center;
>> + flex-direction: column;
>> + height: 100%; }
>> + .layout.vertical.centered > * {
>> + flex: 0 0 auto !important; }
>> + .layout.vertical.tile {
>> + flex-wrap: wrap; }
>> + .layout.vertical.form {
>> + width: 100%; }
>> + .layout.vertical.gap-1x3px > *:first-child {
>> + margin-top: 0px; }
>> + .layout.vertical.gap-1x3px > * {
>> + margin-top: 3px; }
>> + .layout.vertical.gap-2x3px > *:first-child {
>> + margin-top: 0px; }
>> + .layout.vertical.gap-2x3px > * {
>> + margin-top: 6px; }
>> + .layout.vertical.gap-3x3px > *:first-child {
>> + margin-top: 0px; }
>> + .layout.vertical.gap-3x3px > * {
>> + margin-top: 9px; }
>> + .layout.vertical.gap-4x3px > *:first-child {
>> + margin-top: 0px; }
>> + .layout.vertical.gap-4x3px > * {
>> + margin-top: 12px; }
>> + .layout.vertical.gap-5x3px > *:first-child {
>> + margin-top: 0px; }
>> + .layout.vertical.gap-5x3px > * {
>> + margin-top: 15px; }
>> + .layout.vertical.gap-6x3px > *:first-child {
>> + margin-top: 0px; }
>> + .layout.vertical.gap-6x3px > * {
>> + margin-top: 18px; }
>> + .layout.vertical.gap-7x3px > *:first-child {
>> + margin-top: 0px; }
>> + .layout.vertical.gap-7x3px > * {
>> + margin-top: 21px; }
>> + .layout.vertical.gap-8x3px > *:first-child {
>> + margin-top: 0px; }
>> + .layout.vertical.gap-8x3px > * {
>> + margin-top: 24px; }
>> + .layout.vertical.gap-9x3px > *:first-child {
>> + margin-top: 0px; }
>> + .layout.vertical.gap-9x3px > * {
>> + margin-top: 27px; }
>> + .layout.vertical.gap-10x3px > *:first-child {
>> + margin-top: 0px; }
>> + .layout.vertical.gap-10x3px > * {
>> + margin-top: 30px; }
>> + .layout.vertical.itemsReverse.gap-1x3px > *:-child {
>> + margin-top: 0px; }
>> + .layout.vertical.itemsReverse.gap-1x3px > * {
>> + margin-top: 3px; }
>> + .layout.vertical.itemsReverse.gap-2x3px > *:-child {
>> + margin-top: 0px; }
>> + .layout.vertical.itemsReverse.gap-2x3px > * {
>> + margin-top: 6px; }
>> + .layout.vertical.itemsReverse.gap-3x3px > *:-child {
>> + margin-top: 0px; }
>> + .layout.vertical.itemsReverse.gap-3x3px > * {
>> + margin-top: 9px; }
>> + .layout.vertical.itemsReverse.gap-4x3px > *:-child {
>> + margin-top: 0px; }
>> + .layout.vertical.itemsReverse.gap-4x3px > * {
>> + margin-top: 12px; }
>> + .layout.vertical.itemsReverse.gap-5x3px > *:-child {
>> + margin-top: 0px; }
>> + .layout.vertical.itemsReverse.gap-5x3px > * {
>> + margin-top: 15px; }
>> + .layout.vertical.itemsReverse.gap-6x3px > *:-child {
>> + margin-top: 0px; }
>> + .layout.vertical.itemsReverse.gap-6x3px > * {
>> + margin-top: 18px; }
>> + .layout.vertical.itemsReverse.gap-7x3px > *:-child {
>> + margin-top: 0px; }
>> + .layout.vertical.itemsReverse.gap-7x3px > * {
>> + margin-top: 21px; }
>> + .layout.vertical.itemsReverse.gap-8x3px > *:-child {
>> + margin-top: 0px; }
>> + .layout.vertical.itemsReverse.gap-8x3px > * {
>> + margin-top: 24px; }
>> + .layout.vertical.itemsReverse.gap-9x3px > *:-child {
>> + margin-top: 0px; }
>> + .layout.vertical.itemsReverse.gap-9x3px > * {
>> + margin-top: 27px; }
>> + .layout.vertical.itemsReverse.gap-10x3px > *:-child {
>> + margin-top: 0px; }
>> + .layout.vertical.itemsReverse.gap-10x3px > * {
>> + margin-top: 30px; }
>> + .layout.grid {
>> + flex-flow: row wrap;
>> + width: 100%; }
>> + .layout.grid > * {
>> + flex: 1 1 auto;
>> + max-width: 100%;
>> + width: 100%; }
>> + @media (min-width: 0px) {
>> + .layout.grid .phone-col-1-1 {
>> + width: 100%; }
>> + .layout.grid .phone-col-1-2 {
>> + width: 50%; }
>> + .layout.grid .phone-col-2-2 {
>> + width: 100%; }
>> + .layout.grid .phone-col-1-3 {
>> + width: 33.3333333333%; }
>> + .layout.grid .phone-col-2-3 {
>> + width: 66.6666666667%; }
>> + .layout.grid .phone-col-3-3 {
>> + width: 100%; }
>> + .layout.grid .phone-col-1-4 {
>> + width: 25%; }
>> + .layout.grid .phone-col-2-4 {
>> + width: 50%; }
>> + .layout.grid .phone-col-3-4 {
>> + width: 75%; }
>> + .layout.grid .phone-col-4-4 {
>> + width: 100%; }
>> + .layout.grid .phone-col-1-5 {
>> + width: 20%; }
>> + .layout.grid .phone-col-2-5 {
>> + width: 40%; }
>> + .layout.grid .phone-col-3-5 {
>> + width: 60%; }
>> + .layout.grid .phone-col-4-5 {
>> + width: 80%; }
>> + .layout.grid .phone-col-5-5 {
>> + width: 100%; }
>> + .layout.grid .phone-col-1-6 {
>> + width: 16.6666666667%; }
>> + .layout.grid .phone-col-2-6 {
>> + width: 33.3333333333%; }
>> + .layout.grid .phone-col-3-6 {
>> + width: 50%; }
>> + .layout.grid .phone-col-4-6 {
>> + width: 66.6666666667%; }
>> + .layout.grid .phone-col-5-6 {
>> + width: 83.3333333333%; }
>> + .layout.grid .phone-col-6-6 {
>> + width: 100%; }
>> + .layout.grid .phone-col-1-7 {
>> + width: 14.2857142857%; }
>> + .layout.grid .phone-col-2-7 {
>> + width: 28.5714285714%; }
>> + .layout.grid .phone-col-3-7 {
>> + width: 42.8571428571%; }
>> + .layout.grid .phone-col-4-7 {
>> + width: 57.1428571429%; }
>> + .layout.grid .phone-col-5-7 {
>> + width: 71.4285714286%; }
>> + .layout.grid .phone-col-6-7 {
>> + width: 85.7142857143%; }
>> + .layout.grid .phone-col-7-7 {
>> + width: 100%; }
>> + .layout.grid .phone-col-1-8 {
>> + width: 12.5%; }
>> + .layout.grid .phone-col-2-8 {
>> + width: 25%; }
>> + .layout.grid .phone-col-3-8 {
>> + width: 37.5%; }
>> + .layout.grid .phone-col-4-8 {
>> + width: 50%; }
>> + .layout.grid .phone-col-5-8 {
>> + width: 62.5%; }
>> + .layout.grid .phone-col-6-8 {
>> + width: 75%; }
>> + .layout.grid .phone-col-7-8 {
>> + width: 87.5%; }
>> + .layout.grid .phone-col-8-8 {
>> + width: 100%; }
>> + .layout.grid .phone-col-1-9 {
>> + width: 11.1111111111%; }
>> + .layout.grid .phone-col-2-9 {
>> + width: 22.2222222222%; }
>> + .layout.grid .phone-col-3-9 {
>> + width: 33.3333333333%; }
>> + .layout.grid .phone-col-4-9 {
>> + width: 44.4444444444%; }
>> + .layout.grid .phone-col-5-9 {
>> + width: 55.5555555556%; }
>> + .layout.grid .phone-col-6-9 {
>> + width: 66.6666666667%; }
>> + .layout.grid .phone-col-7-9 {
>> + width: 77.7777777778%; }
>> + .layout.grid .phone-col-8-9 {
>> + width: 88.8888888889%; }
>> + .layout.grid .phone-col-9-9 {
>> + width: 100%; }
>> + .layout.grid .phone-col-1-10 {
>> + width: 10%; }
>> + .layout.grid .phone-col-2-10 {
>> + width: 20%; }
>> + .layout.grid .phone-col-3-10 {
>> + width: 30%; }
>> + .layout.grid .phone-col-4-10 {
>> + width: 40%; }
>> + .layout.grid .phone-col-5-10 {
>> + width: 50%; }
>> + .layout.grid .phone-col-6-10 {
>> + width: 60%; }
>> + .layout.grid .phone-col-7-10 {
>> + width: 70%; }
>> + .layout.grid .phone-col-8-10 {
>> + width: 80%; }
>> + .layout.grid .phone-col-9-10 {
>> + width: 90%; }
>> + .layout.grid .phone-col-10-10 {
>> + width: 100%; }
>> + .layout.grid .phone-col-1-11 {
>> + width: 9.0909090909%; }
>> + .layout.grid .phone-col-2-11 {
>> + width: 18.1818181818%; }
>> + .layout.grid .phone-col-3-11 {
>> + width: 27.2727272727%; }
>> + .layout.grid .phone-col-4-11 {
>> + width: 36.3636363636%; }
>> + .layout.grid .phone-col-5-11 {
>> + width: 45.4545454545%; }
>> + .layout.grid .phone-col-6-11 {
>> + width: 54.5454545455%; }
>> + .layout.grid .phone-col-7-11 {
>> + width: 63.6363636364%; }
>> + .layout.grid .phone-col-8-11 {
>> + width: 72.7272727273%; }
>> + .layout.grid .phone-col-9-11 {
>> + width: 81.8181818182%; }
>> + .layout.grid .phone-col-10-11 {
>> + width: 90.9090909091%; }
>> + .layout.grid .phone-col-11-11 {
>> + width: 100%; }
>> + .layout.grid .phone-col-1-12 {
>> + width: 8.3333333333%; }
>> + .layout.grid .phone-col-2-12 {
>> + width: 16.6666666667%; }
>> + .layout.grid .phone-col-3-12 {
>> + width: 25%; }
>> + .layout.grid .phone-col-4-12 {
>> + width: 33.3333333333%; }
>> + .layout.grid .phone-col-5-12 {
>> + width: 41.6666666667%; }
>> + .layout.grid .phone-col-6-12 {
>> + width: 50%; }
>> + .layout.grid .phone-col-7-12 {
>> + width: 58.3333333333%; }
>> + .layout.grid .phone-col-8-12 {
>> + width: 66.6666666667%; }
>> + .layout.grid .phone-col-9-12 {
>> + width: 75%; }
>> + .layout.grid .phone-col-10-12 {
>> + width: 83.3333333333%; }
>> + .layout.grid .phone-col-11-12 {
>> + width: 91.6666666667%; }
>> + .layout.grid .phone-col-12-12 {
>> + width: 100%; } }
>> + @media (min-width: 768px) {
>> + .layout.grid .tablet-col-1-1 {
>> + width: 100%; }
>> + .layout.grid .tablet-col-1-2 {
>> + width: 50%; }
>> + .layout.grid .tablet-col-2-2 {
>> + width: 100%; }
>> + .layout.grid .tablet-col-1-3 {
>> + width: 33.3333333333%; }
>> + .layout.grid .tablet-col-2-3 {
>> + width: 66.6666666667%; }
>> + .layout.grid .tablet-col-3-3 {
>> + width: 100%; }
>> + .layout.grid .tablet-col-1-4 {
>> + width: 25%; }
>> + .layout.grid .tablet-col-2-4 {
>> + width: 50%; }
>> + .layout.grid .tablet-col-3-4 {
>> + width: 75%; }
>> + .layout.grid .tablet-col-4-4 {
>> + width: 100%; }
>> + .layout.grid .tablet-col-1-5 {
>> + width: 20%; }
>> + .layout.grid .tablet-col-2-5 {
>> + width: 40%; }
>> + .layout.grid .tablet-col-3-5 {
>> + width: 60%; }
>> + .layout.grid .tablet-col-4-5 {
>> + width: 80%; }
>> + .layout.grid .tablet-col-5-5 {
>> + width: 100%; }
>> + .layout.grid .tablet-col-1-6 {
>> + width: 16.6666666667%; }
>> + .layout.grid .tablet-col-2-6 {
>> + width: 33.3333333333%; }
>> + .layout.grid .tablet-col-3-6 {
>> + width: 50%; }
>> + .layout.grid .tablet-col-4-6 {
>> + width: 66.6666666667%; }
>> + .layout.grid .tablet-col-5-6 {
>> + width: 83.3333333333%; }
>> + .layout.grid .tablet-col-6-6 {
>> + width: 100%; }
>> + .layout.grid .tablet-col-1-7 {
>> + width: 14.2857142857%; }
>> + .layout.grid .tablet-col-2-7 {
>> + width: 28.5714285714%; }
>> + .layout.grid .tablet-col-3-7 {
>> + width: 42.8571428571%; }
>> + .layout.grid .tablet-col-4-7 {
>> + width: 57.1428571429%; }
>> + .layout.grid .tablet-col-5-7 {
>> + width: 71.4285714286%; }
>> + .layout.grid .tablet-col-6-7 {
>> + width: 85.7142857143%; }
>> + .layout.grid .tablet-col-7-7 {
>> + width: 100%; }
>> + .layout.grid .tablet-col-1-8 {
>> + width: 12.5%; }
>> + .layout.grid .tablet-col-2-8 {
>> + width: 25%; }
>> + .layout.grid .tablet-col-3-8 {
>> + width: 37.5%; }
>> + .layout.grid .tablet-col-4-8 {
>> + width: 50%; }
>> + .layout.grid .tablet-col-5-8 {
>> + width: 62.5%; }
>> + .layout.grid .tablet-col-6-8 {
>> + width: 75%; }
>> + .layout.grid .tablet-col-7-8 {
>> + width: 87.5%; }
>> + .layout.grid .tablet-col-8-8 {
>> + width: 100%; }
>> + .layout.grid .tablet-col-1-9 {
>> + width: 11.1111111111%; }
>> + .layout.grid .tablet-col-2-9 {
>> + width: 22.2222222222%; }
>> + .layout.grid .tablet-col-3-9 {
>> + width: 33.3333333333%; }
>> + .layout.grid .tablet-col-4-9 {
>> + width: 44.4444444444%; }
>> + .layout.grid .tablet-col-5-9 {
>> + width: 55.5555555556%; }
>> + .layout.grid .tablet-col-6-9 {
>> + width: 66.6666666667%; }
>> + .layout.grid .tablet-col-7-9 {
>> + width: 77.7777777778%; }
>> + .layout.grid .tablet-col-8-9 {
>> + width: 88.8888888889%; }
>> + .layout.grid .tablet-col-9-9 {
>> + width: 100%; }
>> + .layout.grid .tablet-col-1-10 {
>> + width: 10%; }
>> + .layout.grid .tablet-col-2-10 {
>> + width: 20%; }
>> + .layout.grid .tablet-col-3-10 {
>> + width: 30%; }
>> + .layout.grid .tablet-col-4-10 {
>> + width: 40%; }
>> + .layout.grid .tablet-col-5-10 {
>> + width: 50%; }
>> + .layout.grid .tablet-col-6-10 {
>> + width: 60%; }
>> + .layout.grid .tablet-col-7-10 {
>> + width: 70%; }
>> + .layout.grid .tablet-col-8-10 {
>> + width: 80%; }
>> + .layout.grid .tablet-col-9-10 {
>> + width: 90%; }
>> + .layout.grid .tablet-col-10-10 {
>> + width: 100%; }
>> + .layout.grid .tablet-col-1-11 {
>> + width: 9.0909090909%; }
>> + .layout.grid .tablet-col-2-11 {
>> + width: 18.1818181818%; }
>> + .layout.grid .tablet-col-3-11 {
>> + width: 27.2727272727%; }
>> + .layout.grid .tablet-col-4-11 {
>> + width: 36.3636363636%; }
>> + .layout.grid .tablet-col-5-11 {
>> + width: 45.4545454545%; }
>> + .layout.grid .tablet-col-6-11 {
>> + width: 54.5454545455%; }
>> + .layout.grid .tablet-col-7-11 {
>> + width: 63.6363636364%; }
>> + .layout.grid .tablet-col-8-11 {
>> + width: 72.7272727273%; }
>> + .layout.grid .tablet-col-9-11 {
>> + width: 81.8181818182%; }
>> + .layout.grid .tablet-col-10-11 {
>> + width: 90.9090909091%; }
>> + .layout.grid .tablet-col-11-11 {
>> + width: 100%; }
>> + .layout.grid .tablet-col-1-12 {
>> + width: 8.3333333333%; }
>> + .layout.grid .tablet-col-2-12 {
>> + width: 16.6666666667%; }
>> + .layout.grid .tablet-col-3-12 {
>> + width: 25%; }
>> + .layout.grid .tablet-col-4-12 {
>> + width: 33.3333333333%; }
>> + .layout.grid .tablet-col-5-12 {
>> + width: 41.6666666667%; }
>> + .layout.grid .tablet-col-6-12 {
>> + width: 50%; }
>> + .layout.grid .tablet-col-7-12 {
>> + width: 58.3333333333%; }
>> + .layout.grid .tablet-col-8-12 {
>> + width: 66.6666666667%; }
>> + .layout.grid .tablet-col-9-12 {
>> + width: 75%; }
>> + .layout.grid .tablet-col-10-12 {
>> + width: 83.3333333333%; }
>> + .layout.grid .tablet-col-11-12 {
>> + width: 91.6666666667%; }
>> + .layout.grid .tablet-col-12-12 {
>> + width: 100%; } }
>> + @media (min-width: 992px) {
>> + .layout.grid .desktop-col-1-1 {
>> + width: 100%; }
>> + .layout.grid .desktop-col-1-2 {
>> + width: 50%; }
>> + .layout.grid .desktop-col-2-2 {
>> + width: 100%; }
>> + .layout.grid .desktop-col-1-3 {
>> + width: 33.3333333333%; }
>> + .layout.grid .desktop-col-2-3 {
>> + width: 66.6666666667%; }
>> + .layout.grid .desktop-col-3-3 {
>> + width: 100%; }
>> + .layout.grid .desktop-col-1-4 {
>> + width: 25%; }
>> + .layout.grid .desktop-col-2-4 {
>> + width: 50%; }
>> + .layout.grid .desktop-col-3-4 {
>> + width: 75%; }
>> + .layout.grid .desktop-col-4-4 {
>> + width: 100%; }
>> + .layout.grid .desktop-col-1-5 {
>> + width: 20%; }
>> + .layout.grid .desktop-col-2-5 {
>> + width: 40%; }
>> + .layout.grid .desktop-col-3-5 {
>> + width: 60%; }
>> + .layout.grid .desktop-col-4-5 {
>> + width: 80%; }
>> + .layout.grid .desktop-col-5-5 {
>> + width: 100%; }
>> + .layout.grid .desktop-col-1-6 {
>> + width: 16.6666666667%; }
>> + .layout.grid .desktop-col-2-6 {
>> + width: 33.3333333333%; }
>> + .layout.grid .desktop-col-3-6 {
>> + width: 50%; }
>> + .layout.grid .desktop-col-4-6 {
>> + width: 66.6666666667%; }
>> + .layout.grid .desktop-col-5-6 {
>> + width: 83.3333333333%; }
>> + .layout.grid .desktop-col-6-6 {
>> + width: 100%; }
>> + .layout.grid .desktop-col-1-7 {
>> + width: 14.2857142857%; }
>> + .layout.grid .desktop-col-2-7 {
>> + width: 28.5714285714%; }
>> + .layout.grid .desktop-col-3-7 {
>> + width: 42.8571428571%; }
>> + .layout.grid .desktop-col-4-7 {
>> + width: 57.1428571429%; }
>> + .layout.grid .desktop-col-5-7 {
>> + width: 71.4285714286%; }
>> + .layout.grid .desktop-col-6-7 {
>> + width: 85.7142857143%; }
>> + .layout.grid .desktop-col-7-7 {
>> + width: 100%; }
>> + .layout.grid .desktop-col-1-8 {
>> + width: 12.5%; }
>> + .layout.grid .desktop-col-2-8 {
>> + width: 25%; }
>> + .layout.grid .desktop-col-3-8 {
>> + width: 37.5%; }
>> + .layout.grid .desktop-col-4-8 {
>> + width: 50%; }
>> + .layout.grid .desktop-col-5-8 {
>> + width: 62.5%; }
>> + .layout.grid .desktop-col-6-8 {
>> + width: 75%; }
>> + .layout.grid .desktop-col-7-8 {
>> + width: 87.5%; }
>> + .layout.grid .desktop-col-8-8 {
>> + width: 100%; }
>> + .layout.grid .desktop-col-1-9 {
>> + width: 11.1111111111%; }
>> + .layout.grid .desktop-col-2-9 {
>> + width: 22.2222222222%; }
>> + .layout.grid .desktop-col-3-9 {
>> + width: 33.3333333333%; }
>> + .layout.grid .desktop-col-4-9 {
>> + width: 44.4444444444%; }
>> + .layout.grid .desktop-col-5-9 {
>> + width: 55.5555555556%; }
>> + .layout.grid .desktop-col-6-9 {
>> + width: 66.6666666667%; }
>> + .layout.grid .desktop-col-7-9 {
>> + width: 77.7777777778%; }
>> + .layout.grid .desktop-col-8-9 {
>> + width: 88.8888888889%; }
>> + .layout.grid .desktop-col-9-9 {
>> + width: 100%; }
>> + .layout.grid .desktop-col-1-10 {
>> + width: 10%; }
>> + .layout.grid .desktop-col-2-10 {
>> + width: 20%; }
>> + .layout.grid .desktop-col-3-10 {
>> + width: 30%; }
>> + .layout.grid .desktop-col-4-10 {
>> + width: 40%; }
>> + .layout.grid .desktop-col-5-10 {
>> + width: 50%; }
>> + .layout.grid .desktop-col-6-10 {
>> + width: 60%; }
>> + .layout.grid .desktop-col-7-10 {
>> + width: 70%; }
>> + .layout.grid .desktop-col-8-10 {
>> + width: 80%; }
>> + .layout.grid .desktop-col-9-10 {
>> + width: 90%; }
>> + .layout.grid .desktop-col-10-10 {
>> + width: 100%; }
>> + .layout.grid .desktop-col-1-11 {
>> + width: 9.0909090909%; }
>> + .layout.grid .desktop-col-2-11 {
>> + width: 18.1818181818%; }
>> + .layout.grid .desktop-col-3-11 {
>> + width: 27.2727272727%; }
>> + .layout.grid .desktop-col-4-11 {
>> + width: 36.3636363636%; }
>> + .layout.grid .desktop-col-5-11 {
>> + width: 45.4545454545%; }
>> + .layout.grid .desktop-col-6-11 {
>> + width: 54.5454545455%; }
>> + .layout.grid .desktop-col-7-11 {
>> + width: 63.6363636364%; }
>> + .layout.grid .desktop-col-8-11 {
>> + width: 72.7272727273%; }
>> + .layout.grid .desktop-col-9-11 {
>> + width: 81.8181818182%; }
>> + .layout.grid .desktop-col-10-11 {
>> + width: 90.9090909091%; }
>> + .layout.grid .desktop-col-11-11 {
>> + width: 100%; }
>> + .layout.grid .desktop-col-1-12 {
>> + width: 8.3333333333%; }
>> + .layout.grid .desktop-col-2-12 {
>> + width: 16.6666666667%; }
>> + .layout.grid .desktop-col-3-12 {
>> + width: 25%; }
>> + .layout.grid .desktop-col-4-12 {
>> + width: 33.3333333333%; }
>> + .layout.grid .desktop-col-5-12 {
>> + width: 41.6666666667%; }
>> + .layout.grid .desktop-col-6-12 {
>> + width: 50%; }
>> + .layout.grid .desktop-col-7-12 {
>> + width: 58.3333333333%; }
>> + .layout.grid .desktop-col-8-12 {
>> + width: 66.6666666667%; }
>> + .layout.grid .desktop-col-9-12 {
>> + width: 75%; }
>> + .layout.grid .desktop-col-10-12 {
>> + width: 83.3333333333%; }
>> + .layout.grid .desktop-col-11-12 {
>> + width: 91.6666666667%; }
>> + .layout.grid .desktop-col-12-12 {
>> + width: 100%; } }
>> + @media (min-width: 1600px) {
>> + .layout.grid .widescreen-col-1-1 {
>> + width: 100%; }
>> + .layout.grid .widescreen-col-1-2 {
>> + width: 50%; }
>> + .layout.grid .widescreen-col-2-2 {
>> + width: 100%; }
>> + .layout.grid .widescreen-col-1-3 {
>> + width: 33.3333333333%; }
>> + .layout.grid .widescreen-col-2-3 {
>> + width: 66.6666666667%; }
>> + .layout.grid .widescreen-col-3-3 {
>> + width: 100%; }
>> + .layout.grid .widescreen-col-1-4 {
>> + width: 25%; }
>> + .layout.grid .widescreen-col-2-4 {
>> + width: 50%; }
>> + .layout.grid .widescreen-col-3-4 {
>> + width: 75%; }
>> + .layout.grid .widescreen-col-4-4 {
>> + width: 100%; }
>> + .layout.grid .widescreen-col-1-5 {
>> + width: 20%; }
>> + .layout.grid .widescreen-col-2-5 {
>> + width: 40%; }
>> + .layout.grid .widescreen-col-3-5 {
>> + width: 60%; }
>> + .layout.grid .widescreen-col-4-5 {
>> + width: 80%; }
>> + .layout.grid .widescreen-col-5-5 {
>> + width: 100%; }
>> + .layout.grid .widescreen-col-1-6 {
>> + width: 16.6666666667%; }
>> + .layout.grid .widescreen-col-2-6 {
>> + width: 33.3333333333%; }
>> + .layout.grid .widescreen-col-3-6 {
>> + width: 50%; }
>> + .layout.grid .widescreen-col-4-6 {
>> + width: 66.6666666667%; }
>> + .layout.grid .widescreen-col-5-6 {
>> + width: 83.3333333333%; }
>> + .layout.grid .widescreen-col-6-6 {
>> + width: 100%; }
>> + .layout.grid .widescreen-col-1-7 {
>> + width: 14.2857142857%; }
>> + .layout.grid .widescreen-col-2-7 {
>> + width: 28.5714285714%; }
>> + .layout.grid .widescreen-col-3-7 {
>> + width: 42.8571428571%; }
>> + .layout.grid .widescreen-col-4-7 {
>> + width: 57.1428571429%; }
>> + .layout.grid .widescreen-col-5-7 {
>> + width: 71.4285714286%; }
>> + .layout.grid .widescreen-col-6-7 {
>> + width: 85.7142857143%; }
>> + .layout.grid .widescreen-col-7-7 {
>> + width: 100%; }
>> + .layout.grid .widescreen-col-1-8 {
>> + width: 12.5%; }
>> + .layout.grid .widescreen-col-2-8 {
>> + width: 25%; }
>> + .layout.grid .widescreen-col-3-8 {
>> + width: 37.5%; }
>> + .layout.grid .widescreen-col-4-8 {
>> + width: 50%; }
>> + .layout.grid .widescreen-col-5-8 {
>> + width: 62.5%; }
>> + .layout.grid .widescreen-col-6-8 {
>> + width: 75%; }
>> + .layout.grid .widescreen-col-7-8 {
>> + width: 87.5%; }
>> + .layout.grid .widescreen-col-8-8 {
>> + width: 100%; }
>> + .layout.grid .widescreen-col-1-9 {
>> + width: 11.1111111111%; }
>> + .layout.grid .widescreen-col-2-9 {
>> + width: 22.2222222222%; }
>> + .layout.grid .widescreen-col-3-9 {
>> + width: 33.3333333333%; }
>> + .layout.grid .widescreen-col-4-9 {
>> + width: 44.4444444444%; }
>> + .layout.grid .widescreen-col-5-9 {
>> + width: 55.5555555556%; }
>> + .layout.grid .widescreen-col-6-9 {
>> + width: 66.6666666667%; }
>> + .layout.grid .widescreen-col-7-9 {
>> + width: 77.7777777778%; }
>> + .layout.grid .widescreen-col-8-9 {
>> + width: 88.8888888889%; }
>> + .layout.grid .widescreen-col-9-9 {
>> + width: 100%; }
>> + .layout.grid .widescreen-col-1-10 {
>> + width: 10%; }
>> + .layout.grid .widescreen-col-2-10 {
>> + width: 20%; }
>> + .layout.grid .widescreen-col-3-10 {
>> + width: 30%; }
>> + .layout.grid .widescreen-col-4-10 {
>> + width: 40%; }
>> + .layout.grid .widescreen-col-5-10 {
>> + width: 50%; }
>> + .layout.grid .widescreen-col-6-10 {
>> + width: 60%; }
>> + .layout.grid .widescreen-col-7-10 {
>> + width: 70%; }
>> + .layout.grid .widescreen-col-8-10 {
>> + width: 80%; }
>> + .layout.grid .widescreen-col-9-10 {
>> + width: 90%; }
>> + .layout.grid .widescreen-col-10-10 {
>> + width: 100%; }
>> + .layout.grid .widescreen-col-1-11 {
>> + width: 9.0909090909%; }
>> + .layout.grid .widescreen-col-2-11 {
>> + width: 18.1818181818%; }
>> + .layout.grid .widescreen-col-3-11 {
>> + width: 27.2727272727%; }
>> + .layout.grid .widescreen-col-4-11 {
>> + width: 36.3636363636%; }
>> + .layout.grid .widescreen-col-5-11 {
>> + width: 45.4545454545%; }
>> + .layout.grid .widescreen-col-6-11 {
>> + width: 54.5454545455%; }
>> + .layout.grid .widescreen-col-7-11 {
>> + width: 63.6363636364%; }
>> + .layout.grid .widescreen-col-8-11 {
>> + width: 72.7272727273%; }
>> + .layout.grid .widescreen-col-9-11 {
>> + width: 81.8181818182%; }
>> + .layout.grid .widescreen-col-10-11 {
>> + width: 90.9090909091%; }
>> + .layout.grid .widescreen-col-11-11 {
>> + width: 100%; }
>> + .layout.grid .widescreen-col-1-12 {
>> + width: 8.3333333333%; }
>> + .layout.grid .widescreen-col-2-12 {
>> + width: 16.6666666667%; }
>> + .layout.grid .widescreen-col-3-12 {
>> + width: 25%; }
>> + .layout.grid .widescreen-col-4-12 {
>> + width: 33.3333333333%; }
>> + .layout.grid .widescreen-col-5-12 {
>> + width: 41.6666666667%; }
>> + .layout.grid .widescreen-col-6-12 {
>> + width: 50%; }
>> + .layout.grid .widescreen-col-7-12 {
>> + width: 58.3333333333%; }
>> + .layout.grid .widescreen-col-8-12 {
>> + width: 66.6666666667%; }
>> + .layout.grid .widescreen-col-9-12 {
>> + width: 75%; }
>> + .layout.grid .widescreen-col-10-12 {
>> + width: 83.3333333333%; }
>> + .layout.grid .widescreen-col-11-12 {
>> + width: 91.6666666667%; }
>> + .layout.grid .widescreen-col-12-12 {
>> + width: 100%; } }
>> + .layout.grid.gap > * {
>> + margin: 5px; }
>> + @media (min-width: 0px) {
>> + .layout.grid.gap .phone-col-1-1 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .phone-col-1-2 {
>> + width: calc(50% - 10px); }
>> + .layout.grid.gap .phone-col-2-2 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .phone-col-1-3 {
>> + width: calc(33.3333333333% - 10px); }
>> + .layout.grid.gap .phone-col-2-3 {
>> + width: calc(66.6666666667% - 10px); }
>> + .layout.grid.gap .phone-col-3-3 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .phone-col-1-4 {
>> + width: calc(25% - 10px); }
>> + .layout.grid.gap .phone-col-2-4 {
>> + width: calc(50% - 10px); }
>> + .layout.grid.gap .phone-col-3-4 {
>> + width: calc(75% - 10px); }
>> + .layout.grid.gap .phone-col-4-4 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .phone-col-1-5 {
>> + width: calc(20% - 10px); }
>> + .layout.grid.gap .phone-col-2-5 {
>> + width: calc(40% - 10px); }
>> + .layout.grid.gap .phone-col-3-5 {
>> + width: calc(60% - 10px); }
>> + .layout.grid.gap .phone-col-4-5 {
>> + width: calc(80% - 10px); }
>> + .layout.grid.gap .phone-col-5-5 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .phone-col-1-6 {
>> + width: calc(16.6666666667% - 10px); }
>> + .layout.grid.gap .phone-col-2-6 {
>> + width: calc(33.3333333333% - 10px); }
>> + .layout.grid.gap .phone-col-3-6 {
>> + width: calc(50% - 10px); }
>> + .layout.grid.gap .phone-col-4-6 {
>> + width: calc(66.6666666667% - 10px); }
>> + .layout.grid.gap .phone-col-5-6 {
>> + width: calc(83.3333333333% - 10px); }
>> + .layout.grid.gap .phone-col-6-6 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .phone-col-1-7 {
>> + width: calc(14.2857142857% - 10px); }
>> + .layout.grid.gap .phone-col-2-7 {
>> + width: calc(28.5714285714% - 10px); }
>> + .layout.grid.gap .phone-col-3-7 {
>> + width: calc(42.8571428571% - 10px); }
>> + .layout.grid.gap .phone-col-4-7 {
>> + width: calc(57.1428571429% - 10px); }
>> + .layout.grid.gap .phone-col-5-7 {
>> + width: calc(71.4285714286% - 10px); }
>> + .layout.grid.gap .phone-col-6-7 {
>> + width: calc(85.7142857143% - 10px); }
>> + .layout.grid.gap .phone-col-7-7 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .phone-col-1-8 {
>> + width: calc(12.5% - 10px); }
>> + .layout.grid.gap .phone-col-2-8 {
>> + width: calc(25% - 10px); }
>> + .layout.grid.gap .phone-col-3-8 {
>> + width: calc(37.5% - 10px); }
>> + .layout.grid.gap .phone-col-4-8 {
>> + width: calc(50% - 10px); }
>> + .layout.grid.gap .phone-col-5-8 {
>> + width: calc(62.5% - 10px); }
>> + .layout.grid.gap .phone-col-6-8 {
>> + width: calc(75% - 10px); }
>> + .layout.grid.gap .phone-col-7-8 {
>> + width: calc(87.5% - 10px); }
>> + .layout.grid.gap .phone-col-8-8 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .phone-col-1-9 {
>> + width: calc(11.1111111111% - 10px); }
>> + .layout.grid.gap .phone-col-2-9 {
>> + width: calc(22.2222222222% - 10px); }
>> + .layout.grid.gap .phone-col-3-9 {
>> + width: calc(33.3333333333% - 10px); }
>> + .layout.grid.gap .phone-col-4-9 {
>> + width: calc(44.4444444444% - 10px); }
>> + .layout.grid.gap .phone-col-5-9 {
>> + width: calc(55.5555555556% - 10px); }
>> + .layout.grid.gap .phone-col-6-9 {
>> + width: calc(66.6666666667% - 10px); }
>> + .layout.grid.gap .phone-col-7-9 {
>> + width: calc(77.7777777778% - 10px); }
>> + .layout.grid.gap .phone-col-8-9 {
>> + width: calc(88.8888888889% - 10px); }
>> + .layout.grid.gap .phone-col-9-9 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .phone-col-1-10 {
>> + width: calc(10% - 10px); }
>> + .layout.grid.gap .phone-col-2-10 {
>> + width: calc(20% - 10px); }
>> + .layout.grid.gap .phone-col-3-10 {
>> + width: calc(30% - 10px); }
>> + .layout.grid.gap .phone-col-4-10 {
>> + width: calc(40% - 10px); }
>> + .layout.grid.gap .phone-col-5-10 {
>> + width: calc(50% - 10px); }
>> + .layout.grid.gap .phone-col-6-10 {
>> + width: calc(60% - 10px); }
>> + .layout.grid.gap .phone-col-7-10 {
>> + width: calc(70% - 10px); }
>> + .layout.grid.gap .phone-col-8-10 {
>> + width: calc(80% - 10px); }
>> + .layout.grid.gap .phone-col-9-10 {
>> + width: calc(90% - 10px); }
>> + .layout.grid.gap .phone-col-10-10 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .phone-col-1-11 {
>> + width: calc(9.0909090909% - 10px); }
>> + .layout.grid.gap .phone-col-2-11 {
>> + width: calc(18.1818181818% - 10px); }
>> + .layout.grid.gap .phone-col-3-11 {
>> + width: calc(27.2727272727% - 10px); }
>> + .layout.grid.gap .phone-col-4-11 {
>> + width: calc(36.3636363636% - 10px); }
>> + .layout.grid.gap .phone-col-5-11 {
>> + width: calc(45.4545454545% - 10px); }
>> + .layout.grid.gap .phone-col-6-11 {
>> + width: calc(54.5454545455% - 10px); }
>> + .layout.grid.gap .phone-col-7-11 {
>> + width: calc(63.6363636364% - 10px); }
>> + .layout.grid.gap .phone-col-8-11 {
>> + width: calc(72.7272727273% - 10px); }
>> + .layout.grid.gap .phone-col-9-11 {
>> + width: calc(81.8181818182% - 10px); }
>> + .layout.grid.gap .phone-col-10-11 {
>> + width: calc(90.9090909091% - 10px); }
>> + .layout.grid.gap .phone-col-11-11 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .phone-col-1-12 {
>> + width: calc(8.3333333333% - 10px); }
>> + .layout.grid.gap .phone-col-2-12 {
>> + width: calc(16.6666666667% - 10px); }
>> + .layout.grid.gap .phone-col-3-12 {
>> + width: calc(25% - 10px); }
>> + .layout.grid.gap .phone-col-4-12 {
>> + width: calc(33.3333333333% - 10px); }
>> + .layout.grid.gap .phone-col-5-12 {
>> + width: calc(41.6666666667% - 10px); }
>> + .layout.grid.gap .phone-col-6-12 {
>> + width: calc(50% - 10px); }
>> + .layout.grid.gap .phone-col-7-12 {
>> + width: calc(58.3333333333% - 10px); }
>> + .layout.grid.gap .phone-col-8-12 {
>> + width: calc(66.6666666667% - 10px); }
>> + .layout.grid.gap .phone-col-9-12 {
>> + width: calc(75% - 10px); }
>> + .layout.grid.gap .phone-col-10-12 {
>> + width: calc(83.3333333333% - 10px); }
>> + .layout.grid.gap .phone-col-11-12 {
>> + width: calc(91.6666666667% - 10px); }
>> + .layout.grid.gap .phone-col-12-12 {
>> + width: calc(100% - 10px); } }
>> + @media (min-width: 768px) {
>> + .layout.grid.gap .tablet-col-1-1 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .tablet-col-1-2 {
>> + width: calc(50% - 10px); }
>> + .layout.grid.gap .tablet-col-2-2 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .tablet-col-1-3 {
>> + width: calc(33.3333333333% - 10px); }
>> + .layout.grid.gap .tablet-col-2-3 {
>> + width: calc(66.6666666667% - 10px); }
>> + .layout.grid.gap .tablet-col-3-3 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .tablet-col-1-4 {
>> + width: calc(25% - 10px); }
>> + .layout.grid.gap .tablet-col-2-4 {
>> + width: calc(50% - 10px); }
>> + .layout.grid.gap .tablet-col-3-4 {
>> + width: calc(75% - 10px); }
>> + .layout.grid.gap .tablet-col-4-4 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .tablet-col-1-5 {
>> + width: calc(20% - 10px); }
>> + .layout.grid.gap .tablet-col-2-5 {
>> + width: calc(40% - 10px); }
>> + .layout.grid.gap .tablet-col-3-5 {
>> + width: calc(60% - 10px); }
>> + .layout.grid.gap .tablet-col-4-5 {
>> + width: calc(80% - 10px); }
>> + .layout.grid.gap .tablet-col-5-5 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .tablet-col-1-6 {
>> + width: calc(16.6666666667% - 10px); }
>> + .layout.grid.gap .tablet-col-2-6 {
>> + width: calc(33.3333333333% - 10px); }
>> + .layout.grid.gap .tablet-col-3-6 {
>> + width: calc(50% - 10px); }
>> + .layout.grid.gap .tablet-col-4-6 {
>> + width: calc(66.6666666667% - 10px); }
>> + .layout.grid.gap .tablet-col-5-6 {
>> + width: calc(83.3333333333% - 10px); }
>> + .layout.grid.gap .tablet-col-6-6 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .tablet-col-1-7 {
>> + width: calc(14.2857142857% - 10px); }
>> + .layout.grid.gap .tablet-col-2-7 {
>> + width: calc(28.5714285714% - 10px); }
>> + .layout.grid.gap .tablet-col-3-7 {
>> + width: calc(42.8571428571% - 10px); }
>> + .layout.grid.gap .tablet-col-4-7 {
>> + width: calc(57.1428571429% - 10px); }
>> + .layout.grid.gap .tablet-col-5-7 {
>> + width: calc(71.4285714286% - 10px); }
>> + .layout.grid.gap .tablet-col-6-7 {
>> + width: calc(85.7142857143% - 10px); }
>> + .layout.grid.gap .tablet-col-7-7 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .tablet-col-1-8 {
>> + width: calc(12.5% - 10px); }
>> + .layout.grid.gap .tablet-col-2-8 {
>> + width: calc(25% - 10px); }
>> + .layout.grid.gap .tablet-col-3-8 {
>> + width: calc(37.5% - 10px); }
>> + .layout.grid.gap .tablet-col-4-8 {
>> + width: calc(50% - 10px); }
>> + .layout.grid.gap .tablet-col-5-8 {
>> + width: calc(62.5% - 10px); }
>> + .layout.grid.gap .tablet-col-6-8 {
>> + width: calc(75% - 10px); }
>> + .layout.grid.gap .tablet-col-7-8 {
>> + width: calc(87.5% - 10px); }
>> + .layout.grid.gap .tablet-col-8-8 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .tablet-col-1-9 {
>> + width: calc(11.1111111111% - 10px); }
>> + .layout.grid.gap .tablet-col-2-9 {
>> + width: calc(22.2222222222% - 10px); }
>> + .layout.grid.gap .tablet-col-3-9 {
>> + width: calc(33.3333333333% - 10px); }
>> + .layout.grid.gap .tablet-col-4-9 {
>> + width: calc(44.4444444444% - 10px); }
>> + .layout.grid.gap .tablet-col-5-9 {
>> + width: calc(55.5555555556% - 10px); }
>> + .layout.grid.gap .tablet-col-6-9 {
>> + width: calc(66.6666666667% - 10px); }
>> + .layout.grid.gap .tablet-col-7-9 {
>> + width: calc(77.7777777778% - 10px); }
>> + .layout.grid.gap .tablet-col-8-9 {
>> + width: calc(88.8888888889% - 10px); }
>> + .layout.grid.gap .tablet-col-9-9 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .tablet-col-1-10 {
>> + width: calc(10% - 10px); }
>> + .layout.grid.gap .tablet-col-2-10 {
>> + width: calc(20% - 10px); }
>> + .layout.grid.gap .tablet-col-3-10 {
>> + width: calc(30% - 10px); }
>> + .layout.grid.gap .tablet-col-4-10 {
>> + width: calc(40% - 10px); }
>> + .layout.grid.gap .tablet-col-5-10 {
>> + width: calc(50% - 10px); }
>> + .layout.grid.gap .tablet-col-6-10 {
>> + width: calc(60% - 10px); }
>> + .layout.grid.gap .tablet-col-7-10 {
>> + width: calc(70% - 10px); }
>> + .layout.grid.gap .tablet-col-8-10 {
>> + width: calc(80% - 10px); }
>> + .layout.grid.gap .tablet-col-9-10 {
>> + width: calc(90% - 10px); }
>> + .layout.grid.gap .tablet-col-10-10 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .tablet-col-1-11 {
>> + width: calc(9.0909090909% - 10px); }
>> + .layout.grid.gap .tablet-col-2-11 {
>> + width: calc(18.1818181818% - 10px); }
>> + .layout.grid.gap .tablet-col-3-11 {
>> + width: calc(27.2727272727% - 10px); }
>> + .layout.grid.gap .tablet-col-4-11 {
>> + width: calc(36.3636363636% - 10px); }
>> + .layout.grid.gap .tablet-col-5-11 {
>> + width: calc(45.4545454545% - 10px); }
>> + .layout.grid.gap .tablet-col-6-11 {
>> + width: calc(54.5454545455% - 10px); }
>> + .layout.grid.gap .tablet-col-7-11 {
>> + width: calc(63.6363636364% - 10px); }
>> + .layout.grid.gap .tablet-col-8-11 {
>> + width: calc(72.7272727273% - 10px); }
>> + .layout.grid.gap .tablet-col-9-11 {
>> + width: calc(81.8181818182% - 10px); }
>> + .layout.grid.gap .tablet-col-10-11 {
>> + width: calc(90.9090909091% - 10px); }
>> + .layout.grid.gap .tablet-col-11-11 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .tablet-col-1-12 {
>> + width: calc(8.3333333333% - 10px); }
>> + .layout.grid.gap .tablet-col-2-12 {
>> + width: calc(16.6666666667% - 10px); }
>> + .layout.grid.gap .tablet-col-3-12 {
>> + width: calc(25% - 10px); }
>> + .layout.grid.gap .tablet-col-4-12 {
>> + width: calc(33.3333333333% - 10px); }
>> + .layout.grid.gap .tablet-col-5-12 {
>> + width: calc(41.6666666667% - 10px); }
>> + .layout.grid.gap .tablet-col-6-12 {
>> + width: calc(50% - 10px); }
>> + .layout.grid.gap .tablet-col-7-12 {
>> + width: calc(58.3333333333% - 10px); }
>> + .layout.grid.gap .tablet-col-8-12 {
>> + width: calc(66.6666666667% - 10px); }
>> + .layout.grid.gap .tablet-col-9-12 {
>> + width: calc(75% - 10px); }
>> + .layout.grid.gap .tablet-col-10-12 {
>> + width: calc(83.3333333333% - 10px); }
>> + .layout.grid.gap .tablet-col-11-12 {
>> + width: calc(91.6666666667% - 10px); }
>> + .layout.grid.gap .tablet-col-12-12 {
>> + width: calc(100% - 10px); } }
>> + @media (min-width: 992px) {
>> + .layout.grid.gap .desktop-col-1-1 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .desktop-col-1-2 {
>> + width: calc(50% - 10px); }
>> + .layout.grid.gap .desktop-col-2-2 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .desktop-col-1-3 {
>> + width: calc(33.3333333333% - 10px); }
>> + .layout.grid.gap .desktop-col-2-3 {
>> + width: calc(66.6666666667% - 10px); }
>> + .layout.grid.gap .desktop-col-3-3 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .desktop-col-1-4 {
>> + width: calc(25% - 10px); }
>> + .layout.grid.gap .desktop-col-2-4 {
>> + width: calc(50% - 10px); }
>> + .layout.grid.gap .desktop-col-3-4 {
>> + width: calc(75% - 10px); }
>> + .layout.grid.gap .desktop-col-4-4 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .desktop-col-1-5 {
>> + width: calc(20% - 10px); }
>> + .layout.grid.gap .desktop-col-2-5 {
>> + width: calc(40% - 10px); }
>> + .layout.grid.gap .desktop-col-3-5 {
>> + width: calc(60% - 10px); }
>> + .layout.grid.gap .desktop-col-4-5 {
>> + width: calc(80% - 10px); }
>> + .layout.grid.gap .desktop-col-5-5 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .desktop-col-1-6 {
>> + width: calc(16.6666666667% - 10px); }
>> + .layout.grid.gap .desktop-col-2-6 {
>> + width: calc(33.3333333333% - 10px); }
>> + .layout.grid.gap .desktop-col-3-6 {
>> + width: calc(50% - 10px); }
>> + .layout.grid.gap .desktop-col-4-6 {
>> + width: calc(66.6666666667% - 10px); }
>> + .layout.grid.gap .desktop-col-5-6 {
>> + width: calc(83.3333333333% - 10px); }
>> + .layout.grid.gap .desktop-col-6-6 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .desktop-col-1-7 {
>> + width: calc(14.2857142857% - 10px); }
>> + .layout.grid.gap .desktop-col-2-7 {
>> + width: calc(28.5714285714% - 10px); }
>> + .layout.grid.gap .desktop-col-3-7 {
>> + width: calc(42.8571428571% - 10px); }
>> + .layout.grid.gap .desktop-col-4-7 {
>> + width: calc(57.1428571429% - 10px); }
>> + .layout.grid.gap .desktop-col-5-7 {
>> + width: calc(71.4285714286% - 10px); }
>> + .layout.grid.gap .desktop-col-6-7 {
>> + width: calc(85.7142857143% - 10px); }
>> + .layout.grid.gap .desktop-col-7-7 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .desktop-col-1-8 {
>> + width: calc(12.5% - 10px); }
>> + .layout.grid.gap .desktop-col-2-8 {
>> + width: calc(25% - 10px); }
>> + .layout.grid.gap .desktop-col-3-8 {
>> + width: calc(37.5% - 10px); }
>> + .layout.grid.gap .desktop-col-4-8 {
>> + width: calc(50% - 10px); }
>> + .layout.grid.gap .desktop-col-5-8 {
>> + width: calc(62.5% - 10px); }
>> + .layout.grid.gap .desktop-col-6-8 {
>> + width: calc(75% - 10px); }
>> + .layout.grid.gap .desktop-col-7-8 {
>> + width: calc(87.5% - 10px); }
>> + .layout.grid.gap .desktop-col-8-8 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .desktop-col-1-9 {
>> + width: calc(11.1111111111% - 10px); }
>> + .layout.grid.gap .desktop-col-2-9 {
>> + width: calc(22.2222222222% - 10px); }
>> + .layout.grid.gap .desktop-col-3-9 {
>> + width: calc(33.3333333333% - 10px); }
>> + .layout.grid.gap .desktop-col-4-9 {
>> + width: calc(44.4444444444% - 10px); }
>> + .layout.grid.gap .desktop-col-5-9 {
>> + width: calc(55.5555555556% - 10px); }
>> + .layout.grid.gap .desktop-col-6-9 {
>> + width: calc(66.6666666667% - 10px); }
>> + .layout.grid.gap .desktop-col-7-9 {
>> + width: calc(77.7777777778% - 10px); }
>> + .layout.grid.gap .desktop-col-8-9 {
>> + width: calc(88.8888888889% - 10px); }
>> + .layout.grid.gap .desktop-col-9-9 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .desktop-col-1-10 {
>> + width: calc(10% - 10px); }
>> + .layout.grid.gap .desktop-col-2-10 {
>> + width: calc(20% - 10px); }
>> + .layout.grid.gap .desktop-col-3-10 {
>> + width: calc(30% - 10px); }
>> + .layout.grid.gap .desktop-col-4-10 {
>> + width: calc(40% - 10px); }
>> + .layout.grid.gap .desktop-col-5-10 {
>> + width: calc(50% - 10px); }
>> + .layout.grid.gap .desktop-col-6-10 {
>> + width: calc(60% - 10px); }
>> + .layout.grid.gap .desktop-col-7-10 {
>> + width: calc(70% - 10px); }
>> + .layout.grid.gap .desktop-col-8-10 {
>> + width: calc(80% - 10px); }
>> + .layout.grid.gap .desktop-col-9-10 {
>> + width: calc(90% - 10px); }
>> + .layout.grid.gap .desktop-col-10-10 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .desktop-col-1-11 {
>> + width: calc(9.0909090909% - 10px); }
>> + .layout.grid.gap .desktop-col-2-11 {
>> + width: calc(18.1818181818% - 10px); }
>> + .layout.grid.gap .desktop-col-3-11 {
>> + width: calc(27.2727272727% - 10px); }
>> + .layout.grid.gap .desktop-col-4-11 {
>> + width: calc(36.3636363636% - 10px); }
>> + .layout.grid.gap .desktop-col-5-11 {
>> + width: calc(45.4545454545% - 10px); }
>> + .layout.grid.gap .desktop-col-6-11 {
>> + width: calc(54.5454545455% - 10px); }
>> + .layout.grid.gap .desktop-col-7-11 {
>> + width: calc(63.6363636364% - 10px); }
>> + .layout.grid.gap .desktop-col-8-11 {
>> + width: calc(72.7272727273% - 10px); }
>> + .layout.grid.gap .desktop-col-9-11 {
>> + width: calc(81.8181818182% - 10px); }
>> + .layout.grid.gap .desktop-col-10-11 {
>> + width: calc(90.9090909091% - 10px); }
>> + .layout.grid.gap .desktop-col-11-11 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .desktop-col-1-12 {
>> + width: calc(8.3333333333% - 10px); }
>> + .layout.grid.gap .desktop-col-2-12 {
>> + width: calc(16.6666666667% - 10px); }
>> + .layout.grid.gap .desktop-col-3-12 {
>> + width: calc(25% - 10px); }
>> + .layout.grid.gap .desktop-col-4-12 {
>> + width: calc(33.3333333333% - 10px); }
>> + .layout.grid.gap .desktop-col-5-12 {
>> + width: calc(41.6666666667% - 10px); }
>> + .layout.grid.gap .desktop-col-6-12 {
>> + width: calc(50% - 10px); }
>> + .layout.grid.gap .desktop-col-7-12 {
>> + width: calc(58.3333333333% - 10px); }
>> + .layout.grid.gap .desktop-col-8-12 {
>> + width: calc(66.6666666667% - 10px); }
>> + .layout.grid.gap .desktop-col-9-12 {
>> + width: calc(75% - 10px); }
>> + .layout.grid.gap .desktop-col-10-12 {
>> + width: calc(83.3333333333% - 10px); }
>> + .layout.grid.gap .desktop-col-11-12 {
>> + width: calc(91.6666666667% - 10px); }
>> + .layout.grid.gap .desktop-col-12-12 {
>> + width: calc(100% - 10px); } }
>> + @media (min-width: 1600px) {
>> + .layout.grid.gap .widescreen-col-1-1 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .widescreen-col-1-2 {
>> + width: calc(50% - 10px); }
>> + .layout.grid.gap .widescreen-col-2-2 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .widescreen-col-1-3 {
>> + width: calc(33.3333333333% - 10px); }
>> + .layout.grid.gap .widescreen-col-2-3 {
>> + width: calc(66.6666666667% - 10px); }
>> + .layout.grid.gap .widescreen-col-3-3 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .widescreen-col-1-4 {
>> + width: calc(25% - 10px); }
>> + .layout.grid.gap .widescreen-col-2-4 {
>> + width: calc(50% - 10px); }
>> + .layout.grid.gap .widescreen-col-3-4 {
>> + width: calc(75% - 10px); }
>> + .layout.grid.gap .widescreen-col-4-4 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .widescreen-col-1-5 {
>> + width: calc(20% - 10px); }
>> + .layout.grid.gap .widescreen-col-2-5 {
>> + width: calc(40% - 10px); }
>> + .layout.grid.gap .widescreen-col-3-5 {
>> + width: calc(60% - 10px); }
>> + .layout.grid.gap .widescreen-col-4-5 {
>> + width: calc(80% - 10px); }
>> + .layout.grid.gap .widescreen-col-5-5 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .widescreen-col-1-6 {
>> + width: calc(16.6666666667% - 10px); }
>> + .layout.grid.gap .widescreen-col-2-6 {
>> + width: calc(33.3333333333% - 10px); }
>> + .layout.grid.gap .widescreen-col-3-6 {
>> + width: calc(50% - 10px); }
>> + .layout.grid.gap .widescreen-col-4-6 {
>> + width: calc(66.6666666667% - 10px); }
>> + .layout.grid.gap .widescreen-col-5-6 {
>> + width: calc(83.3333333333% - 10px); }
>> + .layout.grid.gap .widescreen-col-6-6 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .widescreen-col-1-7 {
>> + width: calc(14.2857142857% - 10px); }
>> + .layout.grid.gap .widescreen-col-2-7 {
>> + width: calc(28.5714285714% - 10px); }
>> + .layout.grid.gap .widescreen-col-3-7 {
>> + width: calc(42.8571428571% - 10px); }
>> + .layout.grid.gap .widescreen-col-4-7 {
>> + width: calc(57.1428571429% - 10px); }
>> + .layout.grid.gap .widescreen-col-5-7 {
>> + width: calc(71.4285714286% - 10px); }
>> + .layout.grid.gap .widescreen-col-6-7 {
>> + width: calc(85.7142857143% - 10px); }
>> + .layout.grid.gap .widescreen-col-7-7 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .widescreen-col-1-8 {
>> + width: calc(12.5% - 10px); }
>> + .layout.grid.gap .widescreen-col-2-8 {
>> + width: calc(25% - 10px); }
>> + .layout.grid.gap .widescreen-col-3-8 {
>> + width: calc(37.5% - 10px); }
>> + .layout.grid.gap .widescreen-col-4-8 {
>> + width: calc(50% - 10px); }
>> + .layout.grid.gap .widescreen-col-5-8 {
>> + width: calc(62.5% - 10px); }
>> + .layout.grid.gap .widescreen-col-6-8 {
>> + width: calc(75% - 10px); }
>> + .layout.grid.gap .widescreen-col-7-8 {
>> + width: calc(87.5% - 10px); }
>> + .layout.grid.gap .widescreen-col-8-8 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .widescreen-col-1-9 {
>> + width: calc(11.1111111111% - 10px); }
>> + .layout.grid.gap .widescreen-col-2-9 {
>> + width: calc(22.2222222222% - 10px); }
>> + .layout.grid.gap .widescreen-col-3-9 {
>> + width: calc(33.3333333333% - 10px); }
>> + .layout.grid.gap .widescreen-col-4-9 {
>> + width: calc(44.4444444444% - 10px); }
>> + .layout.grid.gap .widescreen-col-5-9 {
>> + width: calc(55.5555555556% - 10px); }
>> + .layout.grid.gap .widescreen-col-6-9 {
>> + width: calc(66.6666666667% - 10px); }
>> + .layout.grid.gap .widescreen-col-7-9 {
>> + width: calc(77.7777777778% - 10px); }
>> + .layout.grid.gap .widescreen-col-8-9 {
>> + width: calc(88.8888888889% - 10px); }
>> + .layout.grid.gap .widescreen-col-9-9 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .widescreen-col-1-10 {
>> + width: calc(10% - 10px); }
>> + .layout.grid.gap .widescreen-col-2-10 {
>> + width: calc(20% - 10px); }
>> + .layout.grid.gap .widescreen-col-3-10 {
>> + width: calc(30% - 10px); }
>> + .layout.grid.gap .widescreen-col-4-10 {
>> + width: calc(40% - 10px); }
>> + .layout.grid.gap .widescreen-col-5-10 {
>> + width: calc(50% - 10px); }
>> + .layout.grid.gap .widescreen-col-6-10 {
>> + width: calc(60% - 10px); }
>> + .layout.grid.gap .widescreen-col-7-10 {
>> + width: calc(70% - 10px); }
>> + .layout.grid.gap .widescreen-col-8-10 {
>> + width: calc(80% - 10px); }
>> + .layout.grid.gap .widescreen-col-9-10 {
>> + width: calc(90% - 10px); }
>> + .layout.grid.gap .widescreen-col-10-10 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .widescreen-col-1-11 {
>> + width: calc(9.0909090909% - 10px); }
>> + .layout.grid.gap .widescreen-col-2-11 {
>> + width: calc(18.1818181818% - 10px); }
>> + .layout.grid.gap .widescreen-col-3-11 {
>> + width: calc(27.2727272727% - 10px); }
>> + .layout.grid.gap .widescreen-col-4-11 {
>> + width: calc(36.3636363636% - 10px); }
>> + .layout.grid.gap .widescreen-col-5-11 {
>> + width: calc(45.4545454545% - 10px); }
>> + .layout.grid.gap .widescreen-col-6-11 {
>> + width: calc(54.5454545455% - 10px); }
>> + .layout.grid.gap .widescreen-col-7-11 {
>> + width: calc(63.6363636364% - 10px); }
>> + .layout.grid.gap .widescreen-col-8-11 {
>> + width: calc(72.7272727273% - 10px); }
>> + .layout.grid.gap .widescreen-col-9-11 {
>> + width: calc(81.8181818182% - 10px); }
>> + .layout.grid.gap .widescreen-col-10-11 {
>> + width: calc(90.9090909091% - 10px); }
>> + .layout.grid.gap .widescreen-col-11-11 {
>> + width: calc(100% - 10px); }
>> + .layout.grid.gap .widescreen-col-1-12 {
>> + width: calc(8.3333333333% - 10px); }
>> + .layout.grid.gap .widescreen-col-2-12 {
>> + width: calc(16.6666666667% - 10px); }
>> + .layout.grid.gap .widescreen-col-3-12 {
>> + width: calc(25% - 10px); }
>> + .layout.grid.gap .widescreen-col-4-12 {
>> + width: calc(33.3333333333% - 10px); }
>> + .layout.grid.gap .widescreen-col-5-12 {
>> + width: calc(41.6666666667% - 10px); }
>> + .layout.grid.gap .widescreen-col-6-12 {
>> + width: calc(50% - 10px); }
>> + .layout.grid.gap .widescreen-col-7-12 {
>> + width: calc(58.3333333333% - 10px); }
>> + .layout.grid.gap .widescreen-col-8-12 {
>> + width: calc(66.6666666667% - 10px); }
>> + .layout.grid.gap .widescreen-col-9-12 {
>> + width: calc(75% - 10px); }
>> + .layout.grid.gap .widescreen-col-10-12 {
>> + width: calc(83.3333333333% - 10px); }
>> + .layout.grid.gap .widescreen-col-11-12 {
>> + width: calc(91.6666666667% - 10px); }
>> + .layout.grid.gap .widescreen-col-12-12 {
>> + width: calc(100% - 10px); } }
>> + .layout.horizontal.itemsSpaceBetween, .layout.vertical.itemsSpaceBetween, .layout.grid.itemsSpaceBetween {
>> + justify-content: space-between; }
>> + .layout.horizontal.itemsSpaceAround, .layout.vertical.itemsSpaceAround, .layout.grid.itemsSpaceAround {
>> + justify-content: space-around; }
>> + .layout.horizontal.itemsSameHeight > * > *, .layout.vertical.itemsSameHeight > * > *, .layout.grid.itemsSameHeight > * > * {
>> + min-height: 100%; }
>> + .layout.horizontal.itemsExpand, .layout.vertical.itemsExpand, .layout.grid.itemsExpand {
>> + width: 100%; }
>> + .layout.horizontal.itemsExpand > *, .layout.vertical.itemsExpand > *, .layout.grid.itemsExpand > * {
>> + flex: 1 0 auto; }
>> + .layout.horizontal.itemsCentered, .layout.grid.itemsCentered {
>> + align-items: center; }
>> + .layout.horizontal.itemsTop, .layout.grid.itemsTop {
>> + align-items: flex-start; }
>> + .layout.horizontal.itemsBottom, .layout.grid.itemsBottom {
>> + align-items: flex-end; }
>> + .layout.horizontal.itemsLeft, .layout.grid.itemsLeft {
>> + justify-content: flex-start; }
>> + .layout.horizontal.itemsCenter, .layout.grid.itemsCenter {
>> + justify-content: center; }
>> + .layout.horizontal.itemsRight, .layout.grid.itemsRight {
>> + justify-content: flex-end; }
>> + .layout.horizontal.itemsReverse, .layout.grid.itemsReverse {
>> + flex-direction: row-reverse; }
>> + .layout.vertical.itemsCentered {
>> + justify-content: center; }
>> + .layout.vertical.itemsTop {
>> + justify-content: flex-start; }
>> + .layout.vertical.itemsBottom {
>> + justify-content: flex-end; }
>> + .layout.vertical.itemsLeft {
>> + align-items: flex-start; }
>> + .layout.vertical.itemsCenter {
>> + align-items: center; }
>> + .layout.vertical.itemsRight {
>> + align-items: flex-end; }
>> + .layout.vertical.itemsReverse {
>> + flex-direction: column-reverse; }
>> + .layout.table table {
>> + display: table; }
>> +
>> +@media (max-width: 767px) {
>> + .visible-phone {
>> + display: flex !important; }
>> +
>> + .hidden-phone {
>> + display: none !important; } }
>> +@media (min-width: 768px) and (max-width: 991px) {
>> + .visible-tablet {
>> + display: flex !important; }
>> +
>> + .hidden-tablet {
>> + display: none !important; } }
>> +@media (min-width: 992px) and (max-width: 1599px) {
>> + .visible-desktop {
>> + display: flex !important; }
>> +
>> + .hidden-desktop {
>> + display: none !important; } }
>> +@media (min-width: 1600px) {
>> + .visible-widescreen {
>> + display: flex !important; }
>> +
>> + .hidden-widescreen {
>> + display: none !important; } }
>> +.visible-phone, .visible-tablet, .visible-desktop, .visible-widescreen {
>> + display: none !important; }
>> +
>> +.hidden-phone, .hidden-tablet, .hidden-desktop, .hidden-widescreen {
>> + display: flex !important; }
>> +
>> +.externsjs.list, .externsjs.navigation {
>> + align-items: stretch;
>> + align-content: flex-start;
>> + -webkit-overflow-scrolling: touch; }
>> + .externsjs.list > *, .externsjs.navigation > * {
>> + flex: 0 0 auto; }
>> + .externsjs.list.no-chrome, .externsjs.navigation.no-chrome {
>> + background: transparent;
>> + border: none; }
>> + .externsjs.list.horizontalScroll, .externsjs.navigation.horizontalScroll {
>> + align-items: baseline !important; }
>> + .externsjs.list.horizontalScroll .externsjs.item, .externsjs.navigation.horizontalScroll .externsjs.item {
>> + overflow: initial; }
>> +
>> +j|List {
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.ListView");
>> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.ListSingleSelectionMouseController");
>> + IBeadKeyController: ClassReference("org.apache.royale.externsjs.beads.controllers.ListKeyDownController");
>> + IItemRendererClassFactory: ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
>> + IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.ListItemRenderer");
>> + IItemRendererInitializer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ListItemRendererInitializer");
>> + ISelectableItemRenderer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ClassSelectorListSelectableItemRendererBead");
>> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport");
>> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.ArrayListSelectionModel");
>> + IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.SelectionDataItemRendererFactoryForCollectionView"); }
>> +
>> +@media -royale-swf {
>> + j|List {
>> + IContentView: ClassReference("org.apache.royale.externsjs.supportClasses.list.DataGroup"); } }
>> +j|VirtualList {
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.VirtualListView");
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.VirtualListVerticalLayout");
>> + IDataProviderItemRendererMapper: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.VirtualDataItemRendererFactoryForCollectionView");
>> + IBeadKeyController: ClassReference("org.apache.royale.externsjs.beads.controllers.VirtualListKeyDownController"); }
>> +
>> +j|Navigation {
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.ListView");
>> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.ListSingleSelectionMouseController");
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout");
>> + IItemRendererClassFactory: ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
>> + IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.NavigationLinkItemRenderer");
>> + IItemRendererInitializer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.NavigationItemRendererInitializer");
>> + ISelectableItemRenderer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ClassSelectorListHoverOnlySelectableItemRendererBead");
>> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport");
>> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.ArrayListSelectionModel");
>> + IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.SelectionDataItemRendererFactoryForCollectionView"); }
>> +
>> +j|NavigationLinkItemRenderer {
>> + IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ItemRendererMouseController"); }
>> +
>> +j|CollapsibleNavigationSectionRenderer {
>> + IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ItemRendererMouseController"); }
>> +
>> +.externsjs.numericstepper {
>> + display: flex;
>> + flex-flow: column wrap; }
>> + .externsjs.numericstepper .externsjs.spinner {
>> + display: none;
>> + order: -1; }
>> + .externsjs.numericstepper .externsjs.textinput {
>> + display: inline-flex;
>> + order: 0;
>> + z-index: 1; }
>> + .externsjs.numericstepper .externsjs.button::after {
>> + content: " ";
>> + position: absolute; }
>> + .externsjs.numericstepper .externsjs.button.up {
>> + order: 1; }
>> + .externsjs.numericstepper .externsjs.button.down {
>> + order: 2; }
>> +
>> +@media (max-width: 992px) {
>> + .externsjs.numericstepper {
>> + flex-flow: row nowrap; }
>> + .externsjs.numericstepper .externsjs.textinput {
>> + order: 1; }
>> + .externsjs.numericstepper .externsjs.button.up {
>> + order: 2; }
>> + .externsjs.numericstepper .externsjs.button.down {
>> + order: 0; } }
>> +j|NumericStepper {
>> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.RangeModel");
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.NumericStepperView");
>> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.NumericStepperController"); }
>> +
>> +j|Spinner {
>> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.RangeModel");
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.SpinnerView");
>> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.SpinnerMouseController"); }
>> +
>> +.externsjs.popup {
>> + display: inline-flex; }
>> +
>> +.popup-content {
>> + position: fixed;
>> + pointer-events: none;
>> + bottom: 0;
>> + left: 0;
>> + width: 100%;
>> + height: 100%;
>> + overflow: hidden;
>> + contain: strict;
>> + z-index: 40; }
>> + .popup-content::before {
>> + position: absolute;
>> + display: block;
>> + top: 0;
>> + left: 0;
>> + width: 100%;
>> + height: 100%;
>> + content: ""; }
>> + .popup-content .externsjs.popupcontent {
>> + display: inline-flex;
>> + position: relative;
>> + transform: translate(-50%, 100%);
>> + transition: none;
>> + will-change: transform, opacity;
>> + bottom: auto;
>> + top: calc(100% - 10px);
>> + left: 50%;
>> + touch-action: none;
>> + opacity: 0; }
>> + .popup-content.open {
>> + pointer-events: auto; }
>> + .popup-content.open::before {
>> + opacity: 1; }
>> + .popup-content.open .externsjs.popupcontent {
>> + transform: translate(-50%, -100%);
>> + transition: transform 0.4s 0ms, opacity 0.4s 0ms;
>> + opacity: 1; }
>> +
>> +@media (max-width: 768px) {
>> + .popup-content .externsjs.popupcontent {
>> + width: calc(100% - 20px); } }
>> +@media (min-width: 992px) {
>> + .popup-content .externsjs.popupcontent {
>> + transform: translate(-50%, -60%); }
>> + .popup-content.open .externsjs.popupcontent {
>> + top: 50%;
>> + left: 50%;
>> + margin-right: -50%;
>> + transform: translate(-50%, -50%); } }
>> +j|PopUp {
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.PopUpView");
>> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.PopUpModel");
>> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.PopUpMouseController");
>> + IPopUpContent: ClassReference("org.apache.royale.core.StyledUIBase"); }
>> +
>> +.externsjs.radiobutton {
>> + display: inline-flex;
>> + position: relative;
>> + margin: 0;
>> + padding: 0;
>> + height: auto; }
>> + .externsjs.radiobutton input {
>> + -webkit-appearance: none;
>> + -moz-appearance: none;
>> + -o-appearance: none;
>> + -ms-appearance: none;
>> + appearance: none;
>> + display: inline-flex;
>> + margin: 0;
>> + padding: 0;
>> + width: 22px;
>> + height: 22px;
>> + line-height: 22px;
>> + opacity: 0; }
>> + .externsjs.radiobutton input + span::before {
>> + content: " ";
>> + position: absolute;
>> + left: 0px;
>> + top: 0px;
>> + width: 22px;
>> + height: 22px; }
>> + .externsjs.radiobutton input + span::after {
>> + content: " ";
>> + position: absolute;
>> + left: 0px;
>> + top: 0px;
>> + width: 22px;
>> + height: 22px;
>> + opacity: 0; }
>> + .externsjs.radiobutton input:checked + span::after, .externsjs.radiobutton input:checked:active + span::after {
>> + opacity: 1; }
>> + .externsjs.radiobutton input:focus + span::before, .externsjs.radiobutton input:checked:focus + span::before, .externsjs.radiobutton input:checked:active:focus + span::before {
>> + outline: none; }
>> + .externsjs.radiobutton input[disabled] + span {
>> + cursor: unset; }
>> + .externsjs.radiobutton span {
>> + cursor: pointer;
>> + margin: 0;
>> + width: inherit; }
>> +
>> +@media -royale-swf {
>> + j|RadioButton {
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.RadioButtonView"); } }
>> +.externsjs.section {
>> + display: none;
>> + flex-flow: column nowrap;
>> + height: 100%; }
>> + .externsjs.section > * {
>> + flex: 0 0 auto; }
>> + .externsjs.section.is-selected {
>> + display: flex; }
>> +
>> +j|SectionContent {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
>> +
>> +j|ScrollableSectionContent {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout");
>> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport"); }
>> +
>> +.externsjs.slider {
>> + position: relative;
>> + height: 27px;
>> + display: flex;
>> + flex-direction: row;
>> + background: none; }
>> + .externsjs.slider input {
>> + -webkit-appearance: none;
>> + -moz-appearance: none;
>> + -o-appearance: none;
>> + -ms-appearance: none;
>> + appearance: none;
>> + outline: 0;
>> + cursor: pointer;
>> + user-select: none;
>> + align-self: center;
>> + z-index: 1;
>> + margin: 0 20px;
>> + padding: 0;
>> + width: calc(100% - 40px);
>> + height: 36px;
>> + background: transparent; }
>> + .externsjs.slider input::-webkit-slider-runnable-track {
>> + background: transparent; }
>> + .externsjs.slider input::-moz-range-track {
>> + background: transparent;
>> + border: none; }
>> + .externsjs.slider input::-ms-track {
>> + width: 100%;
>> + height: 6px;
>> + background: none;
>> + border: none;
>> + color: transparent; }
>> + .externsjs.slider input::-ms-fill-lower {
>> + padding: 0; }
>> + .externsjs.slider input::-ms-fill-upper {
>> + padding: 0; }
>> + .externsjs.slider input::-webkit-slider-thumb, .externsjs.slider input::-moz-range-thumb {
>> + -webkit-appearance: none;
>> + -moz-appearance: none;
>> + -o-appearance: none;
>> + -ms-appearance: none;
>> + appearance: none; }
>> + .externsjs.slider input:focus {
>> + outline: none; }
>> + .externsjs.slider input[disabled] {
>> + cursor: unset; }
>> + .externsjs.slider input::-ms-tooltip {
>> + display: none; }
>> +
>> +.slider-track-container {
>> + position: absolute;
>> + display: flex;
>> + overflow: hidden;
>> + transform: translate(0, -3px);
>> + margin: 0 29px;
>> + padding: 0;
>> + left: 0;
>> + width: calc(100% - 58px);
>> + height: 6px;
>> + background: transparent;
>> + border: 0; }
>> +
>> +.slider-track-fill {
>> + position: relative;
>> + flex: 0;
>> + padding: 0; }
>> +
>> +.slider-track {
>> + position: relative;
>> + flex: 0;
>> + padding: 0; }
>> +
>> +j|HSlider {
>> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.SliderRangeModel");
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.SliderView");
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout");
>> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.SliderMouseController"); }
>> +
>> +@media -royale-swf {
>> + j|HSlider {
>> + IThumbView: ClassReference("org.apache.royale.externsjs.beads.views.SliderThumbView");
>> + ITrackView: ClassReference("org.apache.royale.externsjs.beads.views.SliderTrackView"); } }
>> +.vslider {
>> + min-width: 27px;
>> + min-height: 150px;
>> + position: relative;
>> + display: inline-block; }
>> + .vslider .transform-container {
>> + height: 100%;
>> + display: inline-block;
>> + position: absolute;
>> + margin-left: calc(50% - 27px/2); }
>> + .vslider .sizer {
>> + height: 100%;
>> + visibility: hidden; }
>> + .vslider .externsjs.slider {
>> + transform: "translate(-50%, -50%) rotate(270deg) translate(-50%, 50%)";
>> + left: 0;
>> + right: 0;
>> + top: 0;
>> + position: absolute; }
>> + .vslider .externsjs.slider input {
>> + margin-left: 0;
>> + margin-right: 0;
>> + width: 100%; }
>> + .vslider .slider-track-container {
>> + margin: 0;
>> + width: 100%;
>> + padding-left: 5px;
>> + padding-right: 5px; }
>> +
>> +.externsjs.tablecell .vslider .transform-container {
>> + margin-left: calc(50% - 27px/2*2); }
>> +
>> +.externsjs.snackbar {
>> + bottom: 0;
>> + position: fixed;
>> + width: 100%;
>> + z-index: 40;
>> + justify-content: center; }
>> +
>> +.externsjs.snackbar-content {
>> + max-width: 568px;
>> + min-width: 288px;
>> + padding: 0.68em 1.12em;
>> + position: relative; }
>> +
>> +.externsjs.snackbar-message {
>> + float: left;
>> + margin: 10px; }
>> +
>> +.externsjs.snackbar-action {
>> + cursor: pointer;
>> + float: right;
>> + padding: 10px; }
>> +
>> +@media (max-width: 992px) {
>> + .externsjs.snackbar-content {
>> + max-width: 100%;
>> + width: 100%; } }
>> +j|Snackbar {
>> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.SnackbarModel");
>> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.SnackbarController");
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.SnackbarView"); }
>> +
>> +.externsjs.tabbar {
>> + -webkit-overflow-scrolling: touch;
>> + -ms-overflow-style: -ms-autohiding-scrollbar !important;
>> + scrollbar-width: none;
>> + transform: none;
>> + will-change: transform; }
>> + .externsjs.tabbar::-webkit-scrollbar {
>> + display: none !important;
>> + width: 0 !important;
>> + height: 0 !important;
>> + background-color: transparent; }
>> + .externsjs.tabbar::-webkit-scrollbar-thumb {
>> + display: none !important; }
>> +
>> +j|TabBar {
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.TabBarView");
>> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.ListSingleSelectionMouseController");
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
>> + IItemRendererClassFactory: ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
>> + IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.TabBarButtonItemRenderer");
>> + IItemRendererInitializer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.TabBarItemRendererInitializer");
>> + ISelectableItemRenderer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ClassSelectorListSelectableItemRendererBead");
>> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.Viewport");
>> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.ArrayListSelectionModel");
>> + IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.SelectionDataItemRendererFactoryForCollectionView"); }
>> +
>> +.externsjs.tabbarbutton {
>> + margin: 0;
>> + flex: 1 0 auto !important;
>> + position: relative;
>> + white-space: nowrap;
>> + z-index: 1;
>> + overflow: initial; }
>> + .externsjs.tabbarbutton > .content {
>> + display: flex;
>> + align-items: center;
>> + height: inherit; }
>> + .externsjs.tabbarbutton ._internal_ {
>> + position: absolute; }
>> + .externsjs.tabbarbutton .indicator {
>> + display: flex;
>> + position: absolute;
>> + top: 0;
>> + left: 0;
>> + width: 100%;
>> + height: 100%;
>> + pointer-events: none;
>> + z-index: 1; }
>> + .externsjs.tabbarbutton .indicator > .indicator-content {
>> + opacity: 0;
>> + align-self: flex-end; }
>> + .externsjs.tabbarbutton.indicator-opposite-side .indicator > .indicator-content {
>> + align-self: flex-start; }
>> + .externsjs.tabbarbutton.selected .indicator > .indicator-content {
>> + opacity: 1; }
>> +
>> +.externsjs.tabbar.layout.horizontal ._internal_ {
>> + bottom: 0; }
>> +.externsjs.tabbar.layout.horizontal .indicator > .indicator-content {
>> + width: 100%; }
>> +.externsjs.tabbar.layout.horizontal .indicator-opposite-side ._internal_ {
>> + bottom: initial;
>> + top: 0; }
>> +.externsjs.tabbar.layout.horizontal .indicator-opposite-side .indicator > .indicator-content {
>> + bottom: initial; }
>> +.externsjs.tabbar.layout.vertical ._internal_ {
>> + right: 0; }
>> +.externsjs.tabbar.layout.vertical .indicator > .indicator-content {
>> + position: absolute;
>> + height: 100%;
>> + right: 0; }
>> +.externsjs.tabbar.layout.vertical .indicator-opposite-side ._internal_ {
>> + right: initial;
>> + left: 0; }
>> +.externsjs.tabbar.layout.vertical .indicator-opposite-side .indicator > .indicator-content {
>> + right: initial; }
>> +
>> +j|TabBarButtonItemRenderer {
>> + IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ItemRendererMouseController");
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout"); }
>> +
>> +j|TabBarContent {
>> + IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout");
>> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
>> +
>> +.externsjs.simpletable {
>> + position: relative;
>> + white-space: nowrap;
>> + border-spacing: 0px;
>> + overflow: hidden; }
>> + .externsjs.simpletable .externsjs.tableheadercell {
>> + position: relative;
>> + vertical-align: bottom;
>> + text-overflow: ellipsis;
>> + letter-spacing: 0;
>> + text-align: left; }
>> + .externsjs.simpletable .externsjs.tbody .externsjs.tablerow {
>> + position: relative;
>> + transition-duration: 0.28s;
>> + transition-property: background-color; }
>> + .externsjs.simpletable .externsjs.tablecell {
>> + position: relative; }
>> +
>> +j|SimpleTable {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
>> +
>> +.externsjs.table table {
>> + width: 100%;
>> + border-spacing: 0px; }
>> +.externsjs.table .externsjs.tableheadercell {
>> + position: relative;
>> + vertical-align: bottom;
>> + text-overflow: ellipsis;
>> + letter-spacing: 0;
>> + text-align: left; }
>> +.externsjs.table .externsjs.tbody .externsjs.tablerow {
>> + position: relative;
>> + transition-duration: 0.28s;
>> + transition-property: background-color; }
>> +.externsjs.table .externsjs.tablecell {
>> + position: relative;
>> + height: 100%; }
>> +.externsjs.table.fixedHeader {
>> + overflow-y: auto; }
>> + .externsjs.table.fixedHeader .externsjs.tableheadercell {
>> + position: sticky;
>> + top: 0;
>> + z-index: 1; }
>> +
>> +j|Table {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.TableLayout");
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.TableView");
>> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.TableModel");
>> + IItemRendererClassFactory: ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
>> + IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.TableItemRenderer");
>> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.TableCellSelectionMouseController");
>> + IBeadKeyController: ClassReference("org.apache.royale.externsjs.beads.controllers.TableKeyDownController");
>> + IItemRendererInitializer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.TableItemRendererInitializer");
>> + ISelectableItemRenderer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ClassSelectorListSelectableItemRendererBead");
>> + IDataProviderItemRendererMapper: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.TableItemRendererFactoryForCollectionView");
>> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport");
>> + IContentView: ClassReference("org.apache.royale.externsjs.supportClasses.table.TBodyContentArea"); }
>> +
>> +.externsjs.tableitem {
>> + cursor: pointer;
>> + text-decoration: none;
>> + letter-spacing: 0;
>> + line-height: normal !important;
>> + overflow: hidden;
>> + cursor: auto; }
>> + .externsjs.tableitem.selectable {
>> + cursor: pointer; }
>> +
>> +.empty-cell {
>> + pointer-events: none; }
>> +
>> +j|TableItemRenderer {
>> + IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ItemRendererMouseController");
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
>> +
>> +j|TBody {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
>> +
>> +j|THead {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
>> +
>> +j|TFoot {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
>> +
>> +j|TableCell {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
>> +
>> +j|TableRow {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
>> +
>> +.alignTextLeft {
>> + text-align: left; }
>> +
>> +.alignTextRight {
>> + text-align: right; }
>> +
>> +.alignTextCenter {
>> + text-align: center; }
>> +
>> +.externsjs.textinput {
>> + position: relative;
>> + display: inline-flex;
>> + overflow: hidden; }
>> + .externsjs.textinput::before {
>> + top: calc(50% - 100%);
>> + left: calc(50% - 100%);
>> + width: 200%;
>> + height: 200%;
>> + z-index: 1; }
>> + .externsjs.textinput::before, .externsjs.textinput::after {
>> + position: absolute;
>> + pointer-events: none;
>> + content: ""; }
>> + .externsjs.textinput input {
>> + -webkit-appearance: none;
>> + -moz-appearance: none;
>> + -o-appearance: none;
>> + -ms-appearance: none;
>> + appearance: none;
>> + width: 100%;
>> + height: auto;
>> + max-width: 100%;
>> + flex: 1 0 auto;
>> + outline: none;
>> + text-align: left;
>> + line-height: normal !important; }
>> + .externsjs.textinput input[disabled] {
>> + cursor: unset; }
>> + .externsjs.textinput.icon i.fonticon {
>> + cursor: default;
>> + pointer-events: none;
>> + top: 50%;
>> + right: initial;
>> + position: absolute;
>> + text-align: center;
>> + margin-top: -6px; }
>> + .externsjs.textinput.icon i.fonticon.material-icons {
>> + margin-top: -0.5em; }
>> + .externsjs.textinput.icon.right i.fonticon {
>> + left: initial; }
>> + .externsjs.textinput.truncate input {
>> + overflow: hidden;
>> + text-overflow: ellipsis; }
>> +
>> +j|TextInput {
>> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.TextModel"); }
>> +
>> +@media -royale-swf {
>> + j|TextInput {
>> + IBeadView: ClassReference("org.apache.royale.html.beads.TextInputWithBorderView");
>> + IBeadController: ClassReference("org.apache.royale.html.beads.controllers.EditableTextKeyboardController");
>> + IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
>> + IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead"); } }
>> +.externsjs.textarea {
>> + position: relative;
>> + display: inline-flex; }
>> + .externsjs.textarea textarea {
>> + -webkit-appearance: none;
>> + -moz-appearance: none;
>> + -o-appearance: none;
>> + -ms-appearance: none;
>> + appearance: none;
>> + resize: none;
>> + max-width: 100%;
>> + flex: 1 0 auto;
>> + outline: none;
>> + text-align: left;
>> + line-height: normal !important; }
>> + .externsjs.textarea textarea[disabled] {
>> + cursor: unset; }
>> +
>> +j|TextArea {
>> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.TextModel"); }
>> +
>> +.externsjs.titlebar {
>> + background-color: transparent;
>> + padding: 0px;
>> + min-height: 34px; }
>> +
>> +j|TitleBar {
>> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.TitleBarModel");
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.TitleBarView"); }
>> +
>> +.externsjs.togglebutton {
>> + cursor: pointer;
>> + user-select: none;
>> + display: inline-flex;
>> + position: relative;
>> + align-items: center;
>> + justify-content: center;
>> + vertical-align: middle;
>> + overflow: hidden;
>> + outline: none;
>> + white-space: nowrap;
>> + line-height: normal !important;
>> + text-align: center;
>> + text-decoration: none; }
>> + .externsjs.togglebutton[disabled] {
>> + cursor: default; }
>> + .externsjs.togglebutton .fonticon {
>> + cursor: inherit; }
>> +
>> +.externsjs.tooltip {
>> + padding: 6px;
>> + position: absolute;
>> + pointer-events: none;
>> + z-index: 80;
>> + border-radius: 0.25em; }
>> + .externsjs.tooltip.error {
>> + margin-top: -31px !important; }
>> + .externsjs.tooltip.error::before {
>> + content: "";
>> + position: absolute;
>> + height: 0;
>> + width: 0; }
>> + .externsjs.tooltip.error.left-top::before {
>> + top: 100%;
>> + margin-top: 0px; }
>> + .externsjs.tooltip.error.middle-top::before {
>> + bottom: 0;
>> + left: 50%;
>> + border-bottom: 0; }
>> + .externsjs.tooltip.error.left-middle::before {
>> + top: 50%;
>> + right: 0;
>> + border-right: 0; }
>> + .externsjs.tooltip.error.right-middle::before {
>> + top: 50%;
>> + left: 0;
>> + border-left: 0; }
>> + .externsjs.tooltip.error.middle-bottom::before {
>> + top: 0;
>> + left: 50%;
>> + border-top: 0; }
>> +
>> +.externsjs.topappbar {
>> + display: inline-flex;
>> + flex: 1 1 auto; }
>> + .externsjs.topappbar .topBarAppHeader {
>> + display: flex;
>> + flex-direction: column;
>> + justify-content: space-between;
>> + width: 100%;
>> + z-index: 20;
>> + position: fixed; }
>> + .externsjs.topappbar .topBarAppHeader.fixed {
>> + transition: box-shadow 200ms linear; }
>> + .externsjs.topappbar .externsjs.barrow {
>> + display: flex;
>> + position: relative;
>> + width: 100%;
>> + height: 64px; }
>> + .externsjs.topappbar .externsjs.barsection {
>> + display: inline-flex;
>> + flex: 1 1 auto;
>> + align-items: center;
>> + min-width: 0;
>> + z-index: 1;
>> + order: -1; }
>> + .externsjs.topappbar .externsjs.barsection button {
>> + will-change: transform, opacity;
>> + display: flex;
>> + position: relative;
>> + flex-shrink: 0;
>> + align-items: center;
>> + justify-content: center;
>> + width: 48px;
>> + height: 48px;
>> + outline: none;
>> + text-decoration: none;
>> + opacity: 1; }
>> + .externsjs.topappbar .externsjs.barsection button .fonticon {
>> + margin-left: 0px;
>> + margin-right: 0px; }
>> + .externsjs.topappbar .externsjs.bartitle {
>> + -moz-osx-font-smoothing: grayscale;
>> + -webkit-font-smoothing: antialiased;
>> + white-space: nowrap;
>> + flex: 1 1 auto;
>> + overflow: hidden;
>> + z-index: 1;
>> + line-height: 2rem;
>> + letter-spacing: 0.0125em;
>> + text-decoration: inherit;
>> + text-transform: inherit;
>> + text-overflow: ellipsis; }
>> +
>> +j|TopAppBar {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
>> +
>> +j|BarRow {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
>> +
>> +j|BarTitle {
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
>> +
>> +.externsjs.barrow {
>> + display: flex;
>> + position: relative;
>> + width: 100%; }
>> +
>> +.externsjs.barsection {
>> + display: inline-flex;
>> + flex: 1 1 auto;
>> + align-items: center;
>> + min-width: 0;
>> + z-index: 1;
>> + justify-content: flex-start;
>> + order: -1; }
>> +
>> +.externsjs.wizard.main {
>> + align-items: center;
>> + width: 100%;
>> + height: 100%; }
>> +.externsjs.precontent {
>> + position: relative;
>> + width: 100%;
>> + flex: 1 0; }
>> +.externsjs.next, .externsjs.previous {
>> + z-index: 1;
>> + height: 100%;
>> + align-items: center;
>> + justify-content: center;
>> + cursor: pointer;
>> + flex: 0 0 0%; }
>> + .externsjs.next .externsjs.button, .externsjs.previous .externsjs.button {
>> + position: relative;
>> + flex-direction: column; }
>> +.externsjs.wizardcontent {
>> + height: 100%;
>> + flex-grow: 100;
>> + position: inherit; }
>> +.externsjs.wizardpage {
>> + position: absolute;
>> + top: 0px;
>> + bottom: 0px;
>> + width: 100%;
>> + display: none; }
>> + .externsjs.wizardpage > * {
>> + margin: auto; }
>> + .externsjs.wizardpage.is-selected {
>> + z-index: 1;
>> + display: block; }
>> + .externsjs.wizardpage.is-selected.transitions {
>> + opacity: 1;
>> + transform: translateX(0%); }
>> + .externsjs.wizardpage.transitions {
>> + opacity: 0;
>> + transition: transform 0.6s ease-out, opacity 0.6s ease-out;
>> + transform: translateX(100%);
>> + display: block; }
>> + .externsjs.wizardpage.transitions.slideLeft {
>> + transform: translateX(-100%); }
>> + .externsjs.wizardpage.transitions.slideRight {
>> + transform: translateX(100%); }
>> +
>> +j|Wizard {
>> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.WizardView");
>> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.WizardController");
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
>> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.WizardModel");
>> + IWizardContentArea: ClassReference("org.apache.royale.externsjs.WizardContent"); }
>> +
>> +j|WizardContent {
>> + IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
>> +
>> +j|WizardPage {
>> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.NoViewport"); }
>> +
>> +.externsjs.main {
>> + width: 100%;
>> + height: 100%; }
>> +
>> +.has-topappbar {
>> + padding-top: 66px !important; }
>> +
>> +.has-footerbar {
>> + padding-bottom: 66px !important; }
>> +
>> +j|ApplicationMainContent {
>> + IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
>> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout");
>> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
>> +
>> +/*# sourceMappingURL=defaults.css.map */
>> diff --git a/frameworks/projects/ExternsJS/src/main/resources/externsjs-as-manifest.xml b/frameworks/projects/ExternsJS/src/main/resources/externsjs-as-manifest.xml
>> new file mode 100644
>> index 0000000..2141c30
>> --- /dev/null
>> +++ b/frameworks/projects/ExternsJS/src/main/resources/externsjs-as-manifest.xml
>> @@ -0,0 +1,25 @@
>> +<?xml version="1.0"?>
>> +<!--
>> +
>> + Licensed to the Apache Software Foundation (ASF) under one or more
>> + contributor license agreements. See the NOTICE file distributed with
>> + this work for additional information regarding copyright ownership.
>> + The ASF licenses this file to You 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
>> +
>> + Unless required by applicable law or agreed to in writing, software
>> + distributed under the License is distributed on an "AS IS" BASIS,
>> + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
>> + See the License for the specific language governing permissions and
>> + limitations under the License.
>> +
>> +-->
>> +
>> +
>> +<componentPackage>
>> +
>> +
>> +</componentPackage>
>> diff --git a/frameworks/projects/ExternsJS/src/main/resources/externsjs-manifest.xml b/frameworks/projects/ExternsJS/src/main/resources/externsjs-manifest.xml
>> new file mode 100644
>> index 0000000..04f2f97
>> --- /dev/null
>> +++ b/frameworks/projects/ExternsJS/src/main/resources/externsjs-manifest.xml
>> @@ -0,0 +1,27 @@
>> +<?xml version="1.0"?>
>> +<!--
>> +
>> + Licensed to the Apache Software Foundation (ASF) under one or more
>> + contributor license agreements. See the NOTICE file distributed with
>> + this work for additional information regarding copyright ownership.
>> + The ASF licenses this file to You 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
>> +
>> + Unless required by applicable law or agreed to in writing, software
>> + distributed under the License is distributed on an "AS IS" BASIS,
>> + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
>> + See the License for the specific language governing permissions and
>> + limitations under the License.
>> +
>> +-->
>> +
>> +
>> +<componentPackage>
>> +
>> +
>> +
>> +
>> +</componentPackage>
>> diff --git a/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/New Text Document.html b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/New Text Document.html
>> new file mode 100644
>> index 0000000..ae9a4d3
>> --- /dev/null
>> +++ b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/New Text Document.html
>> @@ -0,0 +1,56 @@
>> +<!--
>> + * 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
>> + *
>> + * Unless required by applicable law or agreed to in writing, software
>> + * distributed under the License is distributed on an 'AS IS' BASIS,
>> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
>> + * See the License for the specific language governing permissions and
>> + * limitations under the License.
>> + -->
>> + <!DOCTYPE html>
>> +<html>
>> +<body>
>> +<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
>> +<script src="inspire-tree.min.js"></script>
>> +<script src="inspire-tree-dom.min.js"></script>
>> +<script>
>> + var objtree = new InspireTree(
>> + {
>> + selection: {
>> + mode: 'checkbox'
>> + },
>> + data: [{
>> + text: 'A node'
>> + }]
>> + });
>> +
>> + new InspireTreeDOM(objtree, {target: demo});
>> +</script>
>> +
>> +<h1>My First JavaScript</h1>
>> +
>> +<button type="button"
>> +onclick="document.getElementById('demo').innerHTML = Date()">
>> +Click me to display Date and Time.</button>
>> +
>> +<div id="demo"></div>
>> +</body>
>> +</html>
>> + background-image: url('../assets/inspiretree/alinakazi.jpg');
>> + background-repeat:no-repeat;
>> + background-position:right;
>> +
>> +
>> +
>> + #mainContent > main > section > div > div > div > div > ol > li:nth-child(1) > div.wholerow > img
>> +
>> +
>> +
>> + <div class="wholerow">
>> + <img src="assets/inspiretree/alinakazi.jpg" width="10" height="10">
>> +
>> +</div>
>> \ No newline at end of file
>> diff --git a/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-custom.css b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-custom.css
>> new file mode 100644
>> index 0000000..d1fcc64
>> --- /dev/null
>> +++ b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-custom.css
>> @@ -0,0 +1,435 @@
>> +/**
>> + * 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
>> + *
>> + * Unless required by applicable law or agreed to in writing, software
>> + * distributed under the License is distributed on an 'AS IS' BASIS,
>> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
>> + * See the License for the specific language governing permissions and
>> + * limitations under the License.
>> + */
>> +.inspire-tree {
>> + -webkit-user-select: none;
>> + -moz-user-select: none;
>> + -ms-user-select: none;
>> + user-select: none; }
>> + .inspire-tree .btn {
>> + background-color: rgba(255, 255, 255, 0.4);
>> + border: 1px solid rgba(0, 0, 0, 0.2);
>> + border-radius: 3px;
>> + display: inline-block;
>> + height: 20px;
>> + transition: all 150ms linear;
>> + width: 20px; }
>> + .inspire-tree .btn:hover {
>> + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); }
>> + .inspire-tree .btn + .btn {
>> + margin-left: 5px; }
>> + .inspire-tree .btn.icon {
>> + position: relative; }
>> + .inspire-tree .btn.icon::before {
>> + display: block;
>> + height: 14px;
>> + left: 50%;
>> + position: absolute;
>> + top: 50%;
>> + -webkit-transform: translate(-50%, -50%);
>> + transform: translate(-50%, -50%);
>> + width: 14px; }
>> + .inspire-tree .btn-group {
>> + display: inline-block;
>> + height: 35px;
>> + line-height: 35px; }
>> + .inspire-tree:focus {
>> + outline: none; }
>> + .inspire-tree ol {
>> + list-style: none;
>> + margin: 0;
>> + padding: 0; }
>> + .inspire-tree ol ol {
>> + padding-left: 20px; }
>> + .inspire-tree li > .title-wrap {
>> + min-height: 35px;
>> + position: relative;
>> + z-index: 2; }
>> + .inspire-tree .toggle {
>> + height: 35px;
>> + left: 0;
>> + position: absolute;
>> + top: 0;
>> + width: 35px;
>> + z-index: 2; }
>> + .inspire-tree .toggle::before {
>> + display: block;
>> + left: 50%;
>> + position: absolute;
>> + top: 50%;
>> + -webkit-transform: translate(-50%, -50%);
>> + transform: translate(-50%, -50%); }
>> + .inspire-tree input[type="checkbox"] {
>> + background: transparent;
>> + left: 50px !important;
>> + height: 24px;
>> + position: absolute;
>> + vertical-align: middle;
>> + width: 24px;
>> + z-index: 2;
>> + -moz-appearance: none;
>> + -ms-appearance: none;
>> + -o-appearance: none;
>> + -webkit-appearance: none;
>> + cursor: pointer; }
>> + .inspire-tree input[type="checkbox"]::before {
>> + background: white;
>> + border-radius: 3px;
>> + border: 1px solid #d9d9d9;
>> + content: " ";
>> + height: 22px;
>> + left: 0px;
>> + position: absolute;
>> + top: 0px;
>> + width: 22px; }
>> + .inspire-tree input[type="checkbox"]::after {
>> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%232196F3' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
>> + border-radius: 3px;
>> + border: 1px solid transparent;
>> + content: " ";
>> + height: 22px;
>> + left: 0px;
>> + opacity: 0;
>> + position: absolute;
>> + top: 0px;
>> + transform: scale(0);
>> + transition: all 0.3s ease;
>> + width: 22px; }
>> + .inspire-tree input[type="checkbox"]:checked::after {
>> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%232196F3' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
>> + opacity: 1;
>> + transform: scale(1); }
>> + .inspire-tree input[type="checkbox"]:checked:active::after {
>> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%232196F3' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
>> + opacity: 1;
>> + transform: scale(1); }
>> + .inspire-tree input[type="checkbox"]:checked:active:focus::before {
>> + background: #9ACFFA;
>> + border-radius: 3px;
>> + border: 1px solid #2196F3;
>> + outline: none; }
>> + .inspire-tree input[type="checkbox"]:checked:focus::before {
>> + background: #9ACFFA;
>> + border-radius: 3px;
>> + border: 1px solid #2196F3;
>> + outline: none; }
>> + .inspire-tree input[type="checkbox"]:indeterminate::after {
>> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Crect stroke-width='0' stroke='%23FFFFFF' height='12' width='12' y='5' x='5' fill='%232196F3' /%3E%3C/svg%3E") no-repeat center center;
>> + opacity: 1;
>> + transform: scale(1); }
>> + .inspire-tree input[type="checkbox"]:indeterminate:active::after {
>> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Crect stroke-width='0' stroke='%23FFFFFF' height='12' width='12' y='5' x='5' fill='%232196F3' /%3E%3C/svg%3E") no-repeat center center;
>> + opacity: 1;
>> + transform: scale(1); }
>> + .inspire-tree input[type="checkbox"]:indeterminate:active:focus::before {
>> + background: #9ACFFA;
>> + border-radius: 3px;
>> + border: 1px solid #2196F3;
>> + outline: none; }
>> + .inspire-tree input[type="checkbox"]:indeterminate:focus::before {
>> + background: #9ACFFA;
>> + border-radius: 3px;
>> + border: 1px solid #2196F3;
>> + outline: none; }
>> + .inspire-tree input[type="checkbox"]:focus::before {
>> + background: #9ACFFA;
>> + border-radius: 3px;
>> + border: 1px solid #2196F3;
>> + outline: none; }
>> + .inspire-tree input[type="checkbox"][disabled] {
>> + color: silver;
>> + cursor: unset; }
>> + .inspire-tree input[type="checkbox"][disabled]::before {
>> + background: #f3f3f3;
>> + border-radius: 3px;
>> + border: 1px solid #d9d9d9; }
>> + .inspire-tree input[type="checkbox"][disabled]::after {
>> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center; }
>> + .inspire-tree input[type="checkbox"]:checked[disabled]::after {
>> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center; }
>> + .inspire-tree input[type="checkbox"]:indeterminate[disabled]::after {
>> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Crect stroke-width='0' stroke='%23FFFFFF' height='12' width='12' y='5' x='5' fill='%23cccccc' /%3E%3C/svg%3E") no-repeat center center; }
>> + .inspire-tree.rejected input[type="checkbox"]:indeterminate::after {
>> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cline stroke-width='4' stroke='%232196F3' stroke-linecap='undefined' stroke-linejoin='undefined' y2='10.9375' x2='17' y1='11.0625' x1='5' fill='none' /%3E%3C/svg%3E") no-repeat center center;
>> + opacity: 1;
>> + transform: scale(1); }
>> + .inspire-tree.rejected input[type="checkbox"]:indeterminate:active::after {
>> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cline stroke-width='4' stroke='%232196F3' stroke-linecap='undefined' stroke-linejoin='undefined' y2='10.9375' x2='17' y1='11.0625' x1='5' fill='none' /%3E%3C/svg%3E") no-repeat center center;
>> + opacity: 1;
>> + transform: scale(1); }
>> + .inspire-tree.rejected input[type="checkbox"]:indeterminate[disabled]::after {
>> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cline stroke-width='4' stroke='%23cccccc' stroke-linecap='undefined' stroke-linejoin='undefined' y2='10.9375' x2='17' y1='11.0625' x1='5' fill='none' /%3E%3C/svg%3E") no-repeat center center; }
>> + .inspire-tree .title {
>> + cursor: default;
>> + display: block;
>> + height: 35px;
>> + line-height: 35px;
>> + overflow: hidden;
>> + padding-left: 42px;
>> + position: relative;
>> + text-overflow: ellipsis;
>> + vertical-align: middle;
>> + white-space: nowrap;
>> + z-index: 1; }
>> + .inspire-tree .title.load-more {
>> + color: #476cb8;
>> + cursor: pointer; }
>> + .inspire-tree .title.load-more:hover {
>> + text-decoration: underline; }
>> + .inspire-tree .title::before {
>> + left: 30px;
>> + position: absolute;
>> + top: 45%;
>> + -webkit-transform: translateY(-50%);
>> + transform: translateY(-50%);
>> + vertical-align: top; }
>> + .inspire-tree .title:focus {
>> + outline: none; }
>> + .inspire-tree.drag-and-drop li:not(.drop-target) {
>> + opacity: 0.5; }
>> + .inspire-tree .editable form {
>> + display: inline-block;
>> + height: 35px;
>> + line-height: 35px;
>> + padding-top: 2px; }
>> + .inspire-tree .editable form input {
>> + height: 20px; }
>> + .inspire-tree .editable > .btn-group {
>> + display: none;
>> + padding-top: 2px;
>> + position: absolute;
>> + right: 10px;
>> + z-index: 3; }
>> + .inspire-tree .editable:hover > .btn-group {
>> + display: block; }
>> + .inspire-tree input + .btn-group {
>> + margin-left: 10px; }
>> + .inspire-tree > .btn.icon {
>> + margin-left: 2px; }
>> +
>> +.itree-menu {
>> + background: #ddd;
>> + border: 1px solid #c4c4c4;
>> + border-radius: 3px;
>> + font-family: sans-serif;
>> + list-style: none;
>> + margin: 0;
>> + min-width: 150px;
>> + padding: 0;
>> + position: absolute;
>> + z-index: 10; }
>> + .itree-menu a {
>> + display: block;
>> + padding: 3px 8px; }
>> + .itree-menu a:hover {
>> + background: rgba(218, 250, 255, 0.5);
>> + color: rgba(164, 234, 245, 0.5); }
>> +
>> +.inspire-tree, .inspire-tree * {
>> + box-sizing: border-box; }
>> +
>> +.inspire-tree .collapsed > ol, .inspire-tree .hidden {
>> + display: none; }
>> +
>> +.drag-targeting.drag-targeting-insert.inspire-tree,
>> +.drag-targeting.drag-targeting-insert > .title-wrap > .title {
>> + border: 1px solid #2dadc5; }
>> +
>> +.drag-targeting.drag-targeting-above > .title-wrap > .title {
>> + border-top: 3px solid #2dadc5; }
>> +.drag-targeting.drag-targeting-below > .title-wrap > .title {
>> + border-bottom: 3px solid #2dadc5; }
>> +
>> +.inspire-tree .editable form input, .inspire-tree .editable form .btn {
>> + vertical-align: top; }
>> +
>> +.inspire-tree > ol > .folder:first-child:not(:only-child) {
>> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC");
>> + background-position: 11px 13px;
>> + background-repeat: no-repeat; }
>> +.inspire-tree.editable-add > ol > .folder:last-child:not(:only-child) {
>> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC");
>> + background-repeat: repeat-y; }
>> +.inspire-tree.editable-add > ol > .leaf:last-child {
>> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAYCAYAAAAh8HdUAAAAN0lEQVQ4T2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGLo0dBDDz0SMu5o2oMFFgBXbEeI0XwYIwAAAABJRU5ErkJgggAA"); }
>> +.inspire-tree li.expanded:not(:last-child) > ol {
>> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC");
>> + background-position: 11px 0;
>> + background-repeat: repeat-y; }
>> +.inspire-tree li.expanded.folder:not(.loading) > .title-wrap {
>> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC");
>> + background-position: 31px 13px;
>> + background-repeat: no-repeat; }
>> +.inspire-tree .leaf:not(:last-child):not(.detached) {
>> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAYCAYAAAAh8HdUAAAAN0lEQVQ4T2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGLo0dBDDz0SMu5o2oMFFgBXbEeI0XwYIwAAAABJRU5ErkJgggAA");
>> + background-position: 11px 0;
>> + background-repeat: no-repeat; }
>> +.inspire-tree .leaf:last-child {
>> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAKklEQVQoU2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGJoAGUZM32Z0U8tAAAAAElFTkSuQmCC");
>> + background-position: 11px 0;
>> + background-repeat: no-repeat; }
>> +.inspire-tree .leaf.detached:last-child {
>> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC");
>> + background-position: 11px 0;
>> + background-repeat: no-repeat; }
>> +
>> +.inspire-tree .folder:last-child:not(:only-child), .inspire-tree li .folder:last-child {
>> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC");
>> + background-position: 11px 0;
>> + background-repeat: no-repeat; }
>> +
>> +.inspire-tree > ol .expanded:not(:last-child):not(:first-child), .inspire-tree li:not(:last-child) {
>> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC");
>> + background-position: 11px 0;
>> + background-repeat: no-repeat; }
>> +
>> +.inspire-tree .icon::before {
>> + background-position: 0 0;
>> + background-repeat: no-repeat;
>> + content: "";
>> + display: inline-block;
>> + height: 14px;
>> + width: 14px; }
>> +.inspire-tree .icon-check::before {
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M27%204l-15%2015-7-7-5%205%2012%2012%2020-20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
>> +.inspire-tree .icon-check:hover::before {
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%230ccc0a%22%20d%3D%22M27%204l-15%2015-7-7-5%205%2012%2012%2020-20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
>> +.inspire-tree .icon-collapse::before {
>> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%232196F3' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
>> + content: " ";
>> + height: 22px;
>> + left: 50%;
>> + top: 50%;
>> + width: 14px; }
>> +.inspire-tree .icon-cross::before {
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M31.708%2025.708c-0-0-0-0-0-0l-9.708-9.708%209.708-9.708c0-0%200-0%200-0%200.105-0.105%200.18-0.227%200.229-0.357%200.133-0.356%200.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.28 [...]
>> +.inspire-tree .icon-cross:hover::before {
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23c00%22%20d%3D%22M31.708%2025.708c-0-0-0-0-0-0l-9.708-9.708%209.708-9.708c0-0%200-0%200-0%200.105-0.105%200.18-0.227%200.229-0.357%200.133-0.356%200.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0 [...]
>> +.inspire-tree .icon-expand::before {
>> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%232196F3' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
>> + content: " ";
>> + height: 22px;
>> + left: 25%;
>> + top: 25%;
>> + width: 14px;
>> + -webkit-transform: rotate(-90deg);
>> + -ms-transform: rotate(-90deg);
>> + transform: rotate(-90deg); }
>> +.inspire-tree .icon-file-empty::before {
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23a5a5a5%22%20d%3D%22M28.681%207.159c-0.694-0.947-1.662-2.053-2.724-3.116s-2.169-2.030-3.116-2.724c-1.612-1.182-2.393-1.319-2.841-1.319h-15.5c-1.378%200-2.5%201.121-2.5%202.5v27c0%201.378%201.122%202 [...]
>> +.inspire-tree .icon-folder::before {
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M14%204l4%204h14v22h-32v-26z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
>> +.inspire-tree .icon-folder-open::before {
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M26%2030l6-16h-26l-6%2016zM4%2012l-4%2018v-26h9l4%204h13v4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E%0A"); }
>> +.inspire-tree .icon-minus::before {
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M0%2013v6c0%200.552%200.448%201%201%201h30c0.552%200%201-0.448%201-1v-6c0-0.552-0.448-1-1-1h-30c-0.552%200-1%200.448-1%201z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
>> +.inspire-tree .icon-minus:hover::before {
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23c00%22%20d%3D%22M0%2013v6c0%200.552%200.448%201%201%201h30c0.552%200%201-0.448%201-1v-6c0-0.552-0.448-1-1-1h-30c-0.552%200-1%200.448-1%201z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
>> +.inspire-tree .icon-more::before {
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M12%209.984c1.078%200%202.016%200.938%202.016%202.016s-0.938%202.016-2.016%202.016-2.016-0.938-2.016-2.016%200.938-2.016%202.016-2.016zM18%209.984c1.078%200%202.016%200.938%202.0 [...]
>> +.inspire-tree .icon-pencil::before {
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M27%200c2.761%200%205%202.239%205%205%200%201.126-0.372%202.164-1%203l-2%202-7-7%202-2c0.836-0.628%201.874-1%203-1zM2%2023l-2%209%209-2%2018.5-18.5-7-7-18.5%2018.5zM22.362%2011.3 [...]
>> +.inspire-tree .icon-pencil:hover::before {
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%230ccc0a%22%20d%3D%22M27%200c2.761%200%205%202.239%205%205%200%201.126-0.372%202.164-1%203l-2%202-7-7%202-2c0.836-0.628%201.874-1%203-1zM2%2023l-2%209%209-2%2018.5-18.5-7-7-18.5%2018.5zM22.362%2011.3 [...]
>> +.inspire-tree .icon-plus::before {
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M31%2012h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552%200-1%200.448-1%201v11h-11c-0.552%200-1%200.448-1%201v6c0%200.552%200.448%201%201%201h11v11c0%200.552%200.448%201%201%201h6c0.552%2 [...]
>> +.inspire-tree .icon-plus:hover::before {
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%230ccc0a%22%20d%3D%22M31%2012h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552%200-1%200.448-1%201v11h-11c-0.552%200-1%200.448-1%201v6c0%200.552%200.448%201%201%201h11v11c0%200.552%200.448%201%201%201h6c0.552%2 [...]
>> +.inspire-tree .selected > .title-wrap .icon-folder::before {
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%233CADF1%22%20d%3D%22M14%204l4%204h14v22h-32v-26z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
>> +.inspire-tree .selected > .title-wrap .icon-folder-open::before {
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%233CADF1%22%20d%3D%22M26%2030l6-16h-26l-6%2016zM4%2012l-4%2018v-26h9l4%204h13v4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E%0A"); }
>> +.inspire-tree .selected > .title-wrap .icon-file-empty::before {
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%233CADF1%22%20d%3D%22M28.681%207.159c-0.694-0.947-1.662-2.053-2.724-3.116s-2.169-2.030-3.116-2.724c-1.612-1.182-2.393-1.319-2.841-1.319h-15.5c-1.378%200-2.5%201.121-2.5%202.5v27c0%201.378%201.122%202 [...]
>> +.inspire-tree .loading > .title-wrap input {
>> + display: none; }
>> +.inspire-tree .loading > .title-wrap .title::before {
>> + background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2714px%27%20height%3D%2714px%27%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22xMidYMid%22%20class%3D%22uil-ring%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22none%22%20class%3D%22bk%22%3E%3C%2Frect%3E%3Cdefs%3E%3Cfilter%20id%3D%22uil-ring-shadow%22%20x%3D%22-100%25%22%20y%3D%22-100%25%22%20width%3D%22300%25%22% [...]
>> + content: "";
>> + height: 14px;
>> + width: 14px; }
>> +.inspire-tree > ol {
>> + position: relative; }
>> +.inspire-tree .wholerow {
>> + height: 35px;
>> + left: 0;
>> + margin-top: -35px;
>> + position: absolute;
>> + width: 100%;
>> + z-index: 1; }
>> +.inspire-tree .focused > .wholerow {
>> + border: 1px dotted black; }
>> +
>> +.inspire-tree .wholerow:hover,
>> +.inspire-tree .title-wrap:hover + .wholerow {
>> + background-color: rgba(218, 250, 255, 0.5); }
>> +
>> +.inspire-tree .selected > .wholerow,
>> +.inspire-tree .selected > .wholerow:hover,
>> +.inspire-tree .selected > .title-wrap:hover + .wholerow {
>> + background-color: rgba(164, 234, 245, 0.5); }
>> +
>> +.inspire-tree .matched > .wholerow,
>> +.inspire-tree .matched > .wholerow:hover,
>> +.inspire-tree .matched > .title-wrap:hover + .wholerow {
>> + background-color: rgba(247, 255, 170, 0.5); }
>> +
>> +/* Custom */
>> +.inspire-tree {
>> + overflow: auto; }
>> + .inspire-tree .title {
>> + padding-left: 85px; }
>> + .inspire-tree .icon::before {
>> + height: 16px;
>> + width: 16px; }
>> + .inspire-tree.withoutcheckbox .title {
>> + padding-left: 55px !important; }
>> +
>> +.editrevert.inspire-tree .icon-folder-open::after,
>> +.editrevert.inspire-tree .icon-folder::after {
>> + background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201536%201536%22%3E%3Cpath%20d%3D%22M1511%20928q0%205-1%207q-64%20268-268%20434.5T764%201536q-146%200-282.5-55T238%201324l-129%20129q-19%2019-45%2019t-45-19t-19-45V960q0-26%2019-45t45-19h448q26%200%2045%2019t19%2045t-19%204 [...]
>> + background-repeat: no-repeat;
>> + content: " ";
>> + cursor: pointer;
>> + height: 16px;
>> + position: absolute;
>> + right: 3px;
>> + top: 22%;
>> + width: 16px;
>> + z-index: 3; }
>> +
>> +.editrevert.inspire-tree .title {
>> + padding-right: 20px; }
>> +
>> +.inspire-tree.noneicon .title {
>> + padding-left: 58px; }
>> +.inspire-tree.noneicon input[type="checkbox"] {
>> + left: 25px !important; }
>> +.inspire-tree.noneicon .icon-folder::before {
>> + background-image: url(); }
>> +.inspire-tree.noneicon .icon-folder-open::before {
>> + background-image: url(); }
>> +.inspire-tree.noneicon .icon-file-empty::before {
>> + background-image: url(); }
>> +.inspire-tree.noneicon .selected > .title-wrap .icon-folder::before {
>> + background-image: url(); }
>> +.inspire-tree.noneicon .selected > .title-wrap .icon-folder-open::before {
>> + background-image: url(); }
>> +.inspire-tree.noneicon .selected > .title-wrap .icon-file-empty::before {
>> + background-image: url(); }
>> +.inspire-tree.noneicon.withoutcheckbox .title {
>> + padding-left: 35px !important; }
>> +.inspire-tree.readonly input[type="checkbox"] {
>> + z-index: -1; }
>> +
>> +/*# sourceMappingURL=inspire-tree-custom.css.map */
>> diff --git a/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-custom.sass b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-custom.sass
>> new file mode 100644
>> index 0000000..3097e48
>> --- /dev/null
>> +++ b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-custom.sass
>> @@ -0,0 +1,541 @@
>> +/**
>> + * 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
>> + *
>> + * Unless required by applicable law or agreed to in writing, software
>> + * distributed under the License is distributed on an 'AS IS' BASIS,
>> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
>> + * See the License for the specific language governing permissions and
>> + * limitations under the License.
>> + */
>> +// primary color $blue: #3CADF1
>> +$blue: #3CADF1
>> +$blue-withoutHash: 3CADF1 // color for parent and child icons when selected in case of default
>> +
>> +
>> +
>> +
>> +$Basic-theme-Original: rgba($blue, 1)
>> +$Basic-theme-Original-withoutHashForSVG: 3CADF1
>> +$color1: #2196F3 //blue rgb(33, 150, 243)
>> +$color1-withoutHashForSVG: 2196F3 //blue rgb(33, 150, 243) //for checbox and left arrow "expanded and collapse"
>> +
>> +$color2: #BBDEFA //light blue rgb(187, 222, 250)
>> +$color3: #333333 //dark grey rgb(51, 51, 51)
>> +$color4: #9E9E9E // light grey rgb(158, 158, 158)
>> +$color5: #EDECED //lightest blue rgb(237, 236, 237)
>> +$color-checkboxBackground: #9ACFFA
>> +
>> +
>> +
>> +
>> +.inspire-tree
>> + -webkit-user-select: none
>> + -moz-user-select: none
>> + -ms-user-select: none
>> + user-select: none
>> + .btn
>> + background-color: rgba(255, 255, 255, 0.4)
>> + border: 1px solid rgba(0, 0, 0, 0.2)
>> + border-radius: 3px
>> + display: inline-block
>> + height: 20px
>> + transition: all 150ms linear
>> + width: 20px
>> + &:hover
>> + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1)
>> + & + .btn
>> + margin-left: 5px
>> + &.icon
>> + position: relative
>> + &::before
>> + display: block
>> + height: 14px
>> + left: 50%
>> + position: absolute
>> + top: 50%
>> + -webkit-transform: translate(-50%, -50%)
>> + transform: translate(-50%, -50%)
>> + width: 14px
>> + .btn-group
>> + display: inline-block
>> + height: 35px
>> + line-height: 35px
>> + &:focus
>> + outline: none
>> + ol
>> + list-style: none
>> + margin: 0
>> + padding: 0
>> + ol
>> + padding-left: 20px
>> + li
>> + & > .title-wrap
>> + min-height: 35px
>> + position: relative
>> + z-index: 2
>> + .toggle
>> + height: 35px
>> + left: 0
>> + position: absolute
>> + top: 0
>> + width: 35px
>> + z-index: 2
>> + &::before
>> + display: block
>> + left: 50%
>> + position: absolute
>> + top: 50%
>> + -webkit-transform: translate(-50%, -50%)
>> + transform: translate(-50%, -50%)
>> + input[type="checkbox"]
>> + background: transparent
>> + left: 50px !important
>> + height: 24px
>> + position: absolute
>> + vertical-align: middle
>> + width: 24px
>> + z-index: 2
>> + -moz-appearance: none
>> + -ms-appearance: none
>> + -o-appearance: none
>> + -webkit-appearance: none
>> + cursor: pointer
>> + input[type="checkbox"]::before
>> + background: white
>> + border-radius: 3px
>> + border: 1px solid #d9d9d9
>> + content: " "
>> + height: 22px
>> + left: 0px
>> + position: absolute
>> + top: 0px
>> + width: 22px
>> + input[type="checkbox"]::after
>> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23"+$color1-withoutHashForSVG+"' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center
>> + border-radius: 3px
>> + border: 1px solid transparent
>> + content: " "
>> + height: 22px
>> + left: 0px
>> + opacity: 0
>> + position: absolute
>> + top: 0px
>> + transform: scale(0)
>> + transition: all 0.3s ease
>> + width: 22px
>> + input[type="checkbox"]:checked
>> + &::after
>> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23"+$color1-withoutHashForSVG+"' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center
>> + opacity: 1
>> + transform: scale(1)
>> + &:active
>> + &::after
>> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23"+$color1-withoutHashForSVG+"' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center
>> + opacity: 1
>> + transform: scale(1)
>> + &:focus
>> + &::before
>> + background: $color-checkboxBackground
>> + border-radius: 3px
>> + border: 1px solid $color1
>> + outline: none
>> + &:focus
>> + &::before
>> + background: $color-checkboxBackground
>> + border-radius: 3px
>> + border: 1px solid $color1
>> + outline: none
>> + input[type="checkbox"]:indeterminate
>> + &::after
>> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Crect stroke-width='0' stroke='%23FFFFFF' height='12' width='12' y='5' x='5' fill='%23"+$color1-withoutHashForSVG+"' /%3E%3C/svg%3E") no-repeat center center
>> + opacity: 1
>> + transform: scale(1)
>> + &:active
>> + &::after
>> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Crect stroke-width='0' stroke='%23FFFFFF' height='12' width='12' y='5' x='5' fill='%23"+$color1-withoutHashForSVG+"' /%3E%3C/svg%3E") no-repeat center center
>> + opacity: 1
>> + transform: scale(1)
>> + &:focus
>> + &::before
>> + background: $color-checkboxBackground
>> + border-radius: 3px
>> + border: 1px solid $color1
>> + outline: none
>> + &:focus
>> + &::before
>> + background: $color-checkboxBackground
>> + border-radius: 3px
>> + border: 1px solid $color1
>> + outline: none
>> + input[type="checkbox"]:focus
>> + &::before
>> + background: $color-checkboxBackground
>> + border-radius: 3px
>> + border: 1px solid $color1
>> + outline: none
>> + input[type="checkbox"][disabled]
>> + color: silver
>> + cursor: unset
>> + input[type="checkbox"][disabled]::before
>> + background: #f3f3f3
>> + border-radius: 3px
>> + border: 1px solid #d9d9d9
>> + input[type="checkbox"][disabled]::after
>> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center
>> + input[type="checkbox"]:checked[disabled]::after
>> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center
>> + input[type="checkbox"]:indeterminate[disabled]::after
>> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Crect stroke-width='0' stroke='%23FFFFFF' height='12' width='12' y='5' x='5' fill='%23cccccc' /%3E%3C/svg%3E") no-repeat center center
>> + &.rejected
>> + input[type="checkbox"]:indeterminate
>> + &::after
>> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cline stroke-width='4' stroke='%23"+$color1-withoutHashForSVG+"' stroke-linecap='undefined' stroke-linejoin='undefined' y2='10.9375' x2='17' y1='11.0625' x1='5' fill='none' /%3E%3C/svg%3E") no-repeat center center
>> + opacity: 1
>> + transform: scale(1)
>> + &:active
>> + &::after
>> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cline stroke-width='4' stroke='%23"+$color1-withoutHashForSVG+"' stroke-linecap='undefined' stroke-linejoin='undefined' y2='10.9375' x2='17' y1='11.0625' x1='5' fill='none' /%3E%3C/svg%3E") no-repeat center center
>> + opacity: 1
>> + transform: scale(1)
>> + input[type="checkbox"]:indeterminate[disabled]::after
>> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cline stroke-width='4' stroke='%23cccccc' stroke-linecap='undefined' stroke-linejoin='undefined' y2='10.9375' x2='17' y1='11.0625' x1='5' fill='none' /%3E%3C/svg%3E") no-repeat center center
>> + .title
>> + cursor: default
>> + display: block
>> + height: 35px
>> + line-height: 35px
>> + overflow: hidden
>> + padding-left: 42px
>> + position: relative
>> + text-overflow: ellipsis
>> + vertical-align: middle
>> + white-space: nowrap
>> + z-index: 1
>> + &.load-more
>> + color: #476cb8
>> + cursor: pointer
>> + &:hover
>> + text-decoration: underline
>> + &::before
>> + left: 30px
>> + position: absolute
>> + top: 45%
>> + -webkit-transform: translateY(-50%)
>> + transform: translateY(-50%)
>> + vertical-align: top
>> + &:focus
>> + outline: none
>> + &.drag-and-drop
>> + li
>> + &:not(.drop-target)
>> + opacity: .5
>> + .editable
>> + form
>> + display: inline-block
>> + height: 35px
>> + line-height: 35px
>> + padding-top: 2px
>> + input
>> + height: 20px
>> + & > .btn-group
>> + display: none
>> + padding-top: 2px
>> + position: absolute
>> + right: 10px
>> + z-index: 3
>> + &:hover
>> + & > .btn-group
>> + display: block
>> + input
>> + & + .btn-group
>> + margin-left: 10px
>> + & > .btn
>> + &.icon
>> + margin-left: 2px
>> +.itree-menu
>> + background: #ddd
>> + border: 1px solid #c4c4c4
>> + border-radius: 3px
>> + font-family: sans-serif
>> + list-style: none
>> + margin: 0
>> + min-width: 150px
>> + padding: 0
>> + position: absolute
>> + z-index: 10
>> + a
>> + display: block
>> + padding: 3px 8px
>> + &:hover
>> + background: rgba(218, 250, 255, 0.5)
>> + color: rgba(164, 234, 245, 0.5)
>> +.inspire-tree, .inspire-tree *
>> + box-sizing: border-box
>> +.inspire-tree .collapsed > ol, .inspire-tree .hidden
>> + display: none
>> +.drag-targeting.drag-targeting-insert.inspire-tree,
>> +.drag-targeting.drag-targeting-insert > .title-wrap > .title
>> + border: 1px solid #2dadc5
>> +.drag-targeting
>> + &.drag-targeting-above
>> + & > .title-wrap
>> + & > .title
>> + border-top: 3px solid #2dadc5
>> + &.drag-targeting-below
>> + & > .title-wrap
>> + & > .title
>> + border-bottom: 3px solid #2dadc5
>> +.inspire-tree .editable form input, .inspire-tree .editable form .btn
>> + vertical-align: top
>> +.inspire-tree
>> + & > ol
>> + & > .folder
>> + &:first-child
>> + &:not(:only-child)
>> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC")
>> + background-position: 11px 13px
>> + background-repeat: no-repeat
>> + &.editable-add
>> + & > ol
>> + & > .folder
>> + &:last-child
>> + &:not(:only-child)
>> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC")
>> + background-repeat: repeat-y
>> + & > .leaf
>> + &:last-child
>> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAYCAYAAAAh8HdUAAAAN0lEQVQ4T2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGLo0dBDDz0SMu5o2oMFFgBXbEeI0XwYIwAAAABJRU5ErkJgggAA")
>> + li
>> + &.expanded
>> + &:not(:last-child)
>> + & > ol
>> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC")
>> + background-position: 11px 0
>> + background-repeat: repeat-y
>> + &.folder
>> + &:not(.loading)
>> + & > .title-wrap
>> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC")
>> + background-position: 31px 13px
>> + background-repeat: no-repeat
>> + .leaf
>> + &:not(:last-child):not(.detached)
>> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAYCAYAAAAh8HdUAAAAN0lEQVQ4T2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGLo0dBDDz0SMu5o2oMFFgBXbEeI0XwYIwAAAABJRU5ErkJgggAA")
>> + background-position: 11px 0
>> + background-repeat: no-repeat
>> + &:last-child
>> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAKklEQVQoU2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGJoAGUZM32Z0U8tAAAAAElFTkSuQmCC")
>> + background-position: 11px 0
>> + background-repeat: no-repeat
>> + &.detached
>> + &:last-child
>> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC")
>> + background-position: 11px 0
>> + background-repeat: no-repeat
>> +.inspire-tree .folder:last-child:not(:only-child), .inspire-tree li .folder:last-child
>> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC")
>> + background-position: 11px 0
>> + background-repeat: no-repeat
>> +.inspire-tree > ol .expanded:not(:last-child):not(:first-child), .inspire-tree li:not(:last-child)
>> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC")
>> + background-position: 11px 0
>> + background-repeat: no-repeat
>> +.inspire-tree
>> + .icon
>> + &::before
>> + background-position: 0 0
>> + background-repeat: no-repeat
>> + content: ''
>> + display: inline-block
>> + height: 14px
>> + width: 14px
>> + .icon-check
>> + &::before
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M27%204l-15%2015-7-7-5%205%2012%2012%2020-20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")
>> + &:hover
>> + &::before
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%230ccc0a%22%20d%3D%22M27%204l-15%2015-7-7-5%205%2012%2012%2020-20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")
>> + .icon-collapse
>> + &::before
>> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23"+$color1-withoutHashForSVG+"' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 [...]
>> + content: " "
>> + height: 22px
>> + left: 50%
>> + top: 50%
>> + width: 14px
>> + .icon-cross
>> + &::before
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M31.708%2025.708c-0-0-0-0-0-0l-9.708-9.708%209.708-9.708c0-0%200-0%200-0%200.105-0.105%200.18-0.227%200.229-0.357%200.133-0.356%200.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.2 [...]
>> + &:hover
>> + &::before
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23c00%22%20d%3D%22M31.708%2025.708c-0-0-0-0-0-0l-9.708-9.708%209.708-9.708c0-0%200-0%200-0%200.105-0.105%200.18-0.227%200.229-0.357%200.133-0.356%200.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286 [...]
>> + .icon-expand
>> + &::before
>> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23"+$color1-withoutHashForSVG+"' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 [...]
>> + content: " "
>> + height: 22px
>> + left: 25%
>> + top: 25%
>> + width: 14px
>> + -webkit-transform: rotate(-90deg)
>> + -ms-transform: rotate(-90deg)
>> + transform: rotate(-90deg)
>> + .icon-file-empty
>> + &::before
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23a5a5a5%22%20d%3D%22M28.681%207.159c-0.694-0.947-1.662-2.053-2.724-3.116s-2.169-2.030-3.116-2.724c-1.612-1.182-2.393-1.319-2.841-1.319h-15.5c-1.378%200-2.5%201.121-2.5%202.5v27c0%201.378%201.122%20 [...]
>> + .icon-folder
>> + &::before
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M14%204l4%204h14v22h-32v-26z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")
>> + .icon-folder-open
>> + &::before
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M26%2030l6-16h-26l-6%2016zM4%2012l-4%2018v-26h9l4%204h13v4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E%0A")
>> + .icon-minus
>> + &::before
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M0%2013v6c0%200.552%200.448%201%201%201h30c0.552%200%201-0.448%201-1v-6c0-0.552-0.448-1-1-1h-30c-0.552%200-1%200.448-1%201z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")
>> + &:hover
>> + &::before
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23c00%22%20d%3D%22M0%2013v6c0%200.552%200.448%201%201%201h30c0.552%200%201-0.448%201-1v-6c0-0.552-0.448-1-1-1h-30c-0.552%200-1%200.448-1%201z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")
>> + .icon-more
>> + &::before
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M12%209.984c1.078%200%202.016%200.938%202.016%202.016s-0.938%202.016-2.016%202.016-2.016-0.938-2.016-2.016%200.938-2.016%202.016-2.016zM18%209.984c1.078%200%202.016%200.938%202. [...]
>> + .icon-pencil
>> + &::before
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M27%200c2.761%200%205%202.239%205%205%200%201.126-0.372%202.164-1%203l-2%202-7-7%202-2c0.836-0.628%201.874-1%203-1zM2%2023l-2%209%209-2%2018.5-18.5-7-7-18.5%2018.5zM22.362%2011. [...]
>> + &:hover
>> + &::before
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%230ccc0a%22%20d%3D%22M27%200c2.761%200%205%202.239%205%205%200%201.126-0.372%202.164-1%203l-2%202-7-7%202-2c0.836-0.628%201.874-1%203-1zM2%2023l-2%209%209-2%2018.5-18.5-7-7-18.5%2018.5zM22.362%2011 [...]
>> + .icon-plus
>> + &::before
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M31%2012h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552%200-1%200.448-1%201v11h-11c-0.552%200-1%200.448-1%201v6c0%200.552%200.448%201%201%201h11v11c0%200.552%200.448%201%201%201h6c0.552% [...]
>> + &:hover
>> + &::before
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%230ccc0a%22%20d%3D%22M31%2012h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552%200-1%200.448-1%201v11h-11c-0.552%200-1%200.448-1%201v6c0%200.552%200.448%201%201%201h11v11c0%200.552%200.448%201%201%201h6c0.552 [...]
>> + .selected
>> + & > .title-wrap
>> + .icon-folder
>> + &::before
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23"+$Basic-theme-Original-withoutHashForSVG+"%22%20d%3D%22M14%204l4%204h14v22h-32v-26z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")
>> + .icon-folder-open
>> + &::before
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23"+$Basic-theme-Original-withoutHashForSVG+"%22%20d%3D%22M26%2030l6-16h-26l-6%2016zM4%2012l-4%2018v-26h9l4%204h13v4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E%0A")
>> + .icon-file-empty
>> + &::before
>> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23"+$Basic-theme-Original-withoutHashForSVG+"%22%20d%3D%22M28.681%207.159c-0.694-0.947-1.662-2.053-2.724-3.116s-2.169-2.030-3.116-2.724c-1.612-1.182-2.393-1.319-2.841-1.319h-15.5c-1.378%200-2.5%20 [...]
>> + .loading
>> + & > .title-wrap
>> + input
>> + display: none
>> + .title
>> + &::before
>> + background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2714px%27%20height%3D%2714px%27%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22xMidYMid%22%20class%3D%22uil-ring%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22none%22%20class%3D%22bk%22%3E%3C%2Frect%3E%3Cdefs%3E%3Cfilter%20id%3D%22uil-ring-shadow%22%20x%3D%22-100%25%22%20y%3D%22-100%25%22%20width%3D%22300%25% [...]
>> + content: ''
>> + height: 14px
>> + width: 14px
>> + & > ol
>> + position: relative
>> + .wholerow
>> + height: 35px
>> + left: 0
>> + margin-top: -35px
>> + position: absolute
>> + width: 100%
>> + z-index: 1
>> + .focused
>> + & > .wholerow
>> + border: 1px dotted black
>> +.inspire-tree .wholerow:hover,
>> +.inspire-tree .title-wrap:hover + .wholerow
>> + background-color: rgba(218, 250, 255, 0.5)
>> +.inspire-tree .selected > .wholerow,
>> +.inspire-tree .selected > .wholerow:hover,
>> +.inspire-tree .selected > .title-wrap:hover + .wholerow
>> + background-color: rgba(164, 234, 245, 0.5)
>> +.inspire-tree .matched > .wholerow,
>> +.inspire-tree .matched > .wholerow:hover,
>> +.inspire-tree .matched > .title-wrap:hover + .wholerow
>> + background-color: rgba(247, 255, 170, 0.5)
>> +
>> +/* Custom */
>> +.inspire-tree
>> + overflow: auto
>> + .title
>> + padding-left: 85px
>> + .icon
>> + &::before
>> + height: 16px
>> + width: 16px
>> + &.withoutcheckbox
>> + .title
>> + padding-left: 55px !important
>> +
>> +.editrevert.inspire-tree .icon-folder-open::after,
>> +.editrevert.inspire-tree .icon-folder::after
>> + background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201536%201536%22%3E%3Cpath%20d%3D%22M1511%20928q0%205-1%207q-64%20268-268%20434.5T764%201536q-146%200-282.5-55T238%201324l-129%20129q-19%2019-45%2019t-45-19t-19-45V960q0-26%2019-45t45-19h448q26%200%2045%2019t19%2045t-19%2045 [...]
>> + background-repeat: no-repeat
>> + content: " "
>> + cursor: pointer
>> + height: 16px
>> + position: absolute
>> + right: 3px
>> + top: 22%
>> + width: 16px
>> + z-index: 3
>> +.editrevert
>> + &.inspire-tree
>> + .title
>> + padding-right: 20px
>> +.inspire-tree
>> + &.noneicon
>> + .title
>> + padding-left: 58px
>> + input[type="checkbox"]
>> + left: 25px !important
>> + .icon-folder
>> + &::before
>> + background-image: url()
>> + .icon-folder-open
>> + &::before
>> + background-image: url()
>> + .icon-file-empty
>> + &::before
>> + background-image: url()
>> + .selected
>> + & > .title-wrap
>> + .icon-folder
>> + &::before
>> + background-image: url()
>> + .icon-folder-open
>> + &::before
>> + background-image: url()
>> + .icon-file-empty
>> + &::before
>> + background-image: url()
>> + &.withoutcheckbox
>> + .title
>> + padding-left: 35px !important
>> + &.readonly
>> + input[type="checkbox"]
>> + z-index: -1
>> +
>> +//.inspire-tree
>> +// &.noneiconWithoutCheckBox
>> +// .title
>> +// padding-left: 35px !important
>> +// &.withiconWithoutCheckBox
>> +// .title
>> +// padding-left: 55px !important
>> +
>> +//.inspire-tree
>> +// &.noneicon
>> +// &.withoutcheckbox
>> +// .title
>> +// padding-left: 35px !important
>> +
>> +//.inspire-tree
>> +// &.withoutcheckbox
>> +// .title
>> +// padding-left: 55px !important
>> diff --git a/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dark.css b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dark.css
>> new file mode 100644
>> index 0000000..fa2dba9
>> --- /dev/null
>> +++ b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dark.css
>> @@ -0,0 +1,325 @@
>> +/**
>> + * 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
>> + *
>> + * Unless required by applicable law or agreed to in writing, software
>> + * distributed under the License is distributed on an 'AS IS' BASIS,
>> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
>> + * See the License for the specific language governing permissions and
>> + * limitations under the License.
>> + */
>> +.inspire-tree .btn {
>> + background-color: white;
>> + border: 1px solid rgba(0, 0, 0, 0.2);
>> + border-radius: 3px;
>> + display: inline-block;
>> + height: 20px;
>> + transition: all 150ms linear;
>> + width: 20px; }
>> + .inspire-tree .btn:hover {
>> + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); }
>> + .inspire-tree .btn + .btn {
>> + margin-left: 5px; }
>> + .inspire-tree .btn.icon {
>> + position: relative; }
>> + .inspire-tree .btn.icon::before {
>> + display: block;
>> + height: 14px;
>> + left: 50%;
>> + position: absolute;
>> + top: 50%;
>> + -webkit-transform: translate(-50%, -50%);
>> + transform: translate(-50%, -50%);
>> + width: 14px; }
>> +
>> +.inspire-tree .btn-group {
>> + display: inline-block;
>> + height: 25px;
>> + line-height: 25px; }
>> +
>> +/* ~~@@@~~~~~ Context Menu ~~~~~@@@~~ */
>> +.itree-menu {
>> + background: #ddd;
>> + border: 1px solid #c4c4c4;
>> + border-radius: 3px;
>> + font-family: sans-serif;
>> + list-style: none;
>> + margin: 0;
>> + min-width: 150px;
>> + padding: 0;
>> + position: absolute;
>> + z-index: 10; }
>> + .itree-menu a {
>> + display: block;
>> + padding: 3px 8px; }
>> + .itree-menu a:hover {
>> + background: rgba(100, 100, 100, 0.5);
>> + color: rgba(74, 110, 116, 0.5); }
>> +
>> +.inspire-tree {
>> + -webkit-user-select: none;
>> + -moz-user-select: none;
>> + -ms-user-select: none;
>> + user-select: none;
>> + /* ~~@@@~~~~~ Lists ~~~~~@@@~~ */
>> + /* ~~@@@~~~~~ Node Content ~~~~~@@@~~ */ }
>> + .inspire-tree:focus {
>> + outline: none; }
>> + .inspire-tree, .inspire-tree * {
>> + box-sizing: border-box; }
>> + .inspire-tree ol {
>> + list-style: none;
>> + margin: 0;
>> + padding: 0; }
>> + .inspire-tree ol ol {
>> + padding-left: 20px; }
>> + .inspire-tree .collapsed > ol, .inspire-tree .hidden {
>> + display: none; }
>> + .inspire-tree li > .title-wrap {
>> + min-height: 25px;
>> + position: relative;
>> + z-index: 2; }
>> + .inspire-tree .toggle {
>> + height: 25px;
>> + left: 0;
>> + position: absolute;
>> + top: 0;
>> + width: 25px;
>> + z-index: 2; }
>> + .inspire-tree .toggle::before {
>> + display: block;
>> + left: 50%;
>> + position: absolute;
>> + top: 50%;
>> + -webkit-transform: translate(-50%, -50%);
>> + transform: translate(-50%, -50%); }
>> + .inspire-tree [type="checkbox"] {
>> + left: 18px;
>> + position: absolute;
>> + top: 4px;
>> + vertical-align: middle;
>> + width: 20px;
>> + z-index: 2; }
>> + .inspire-tree .title {
>> + cursor: default;
>> + display: block;
>> + height: 25px;
>> + line-height: 25px;
>> + overflow: hidden;
>> + padding-left: 42px;
>> + position: relative;
>> + text-overflow: ellipsis;
>> + vertical-align: middle;
>> + white-space: nowrap;
>> + z-index: 1; }
>> + .inspire-tree .title.load-more {
>> + color: #476cb8;
>> + cursor: pointer; }
>> + .inspire-tree .title.load-more:hover {
>> + text-decoration: underline; }
>> + .inspire-tree .title::before {
>> + left: 24px;
>> + position: absolute;
>> + top: 50%;
>> + -webkit-transform: translateY(-50%);
>> + transform: translateY(-50%);
>> + vertical-align: top; }
>> + .inspire-tree .title:focus {
>> + outline: none; }
>> +
>> +.inspire-tree.drag-and-drop li:not(.drop-target) {
>> + opacity: .5; }
>> +
>> +.drag-targeting.drag-targeting-insert.inspire-tree,
>> +.drag-targeting.drag-targeting-insert > .title-wrap > .title {
>> + border: 1px solid #2dadc5; }
>> +
>> +.drag-targeting.drag-targeting-above > .title-wrap > .title {
>> + border-top: 3px solid #2dadc5; }
>> +
>> +.drag-targeting.drag-targeting-below > .title-wrap > .title {
>> + border-bottom: 3px solid #2dadc5; }
>> +
>> +.inspire-tree .editable form {
>> + display: inline-block;
>> + height: 25px;
>> + line-height: 25px;
>> + padding-top: 2px; }
>> + .inspire-tree .editable form input {
>> + height: 20px; }
>> + .inspire-tree .editable form input, .inspire-tree .editable form .btn {
>> + vertical-align: top; }
>> +
>> +.inspire-tree .editable > .btn-group {
>> + display: none;
>> + padding-top: 2px;
>> + position: absolute;
>> + right: 10px;
>> + z-index: 3; }
>> +
>> +.inspire-tree .editable:hover > .btn-group {
>> + display: block; }
>> +
>> +.inspire-tree input + .btn-group {
>> + margin-left: 10px; }
>> +
>> +.inspire-tree > .btn.icon {
>> + margin-left: 2px; }
>> +
>> +.inspire-tree > ol > .folder:first-child:not(:only-child) {
>> + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC");
>> + background-position: 11px 13px;
>> + background-repeat: no-repeat; }
>> +
>> +.inspire-tree .folder:last-child:not(:only-child), .inspire-tree li .folder:last-child {
>> + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC");
>> + background-position: 11px 0;
>> + background-repeat: no-repeat; }
>> +
>> +.inspire-tree.editable-add > ol > .folder:last-child:not(:only-child) {
>> + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC");
>> + background-repeat: repeat-y; }
>> +
>> +.inspire-tree > ol .expanded:not(:last-child):not(:first-child), .inspire-tree li:not(:last-child) {
>> + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC");
>> + background-position: 11px 0;
>> + background-repeat: no-repeat; }
>> +
>> +.inspire-tree li.expanded:not(:last-child) > ol {
>> + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC");
>> + background-position: 11px 0;
>> + background-repeat: repeat-y; }
>> +
>> +.inspire-tree li.expanded.folder:not(.loading) > .title-wrap {
>> + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC");
>> + background-position: 31px 13px;
>> + background-repeat: no-repeat; }
>> +
>> +.inspire-tree .leaf:not(:last-child):not(.detached) {
>> + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAYCAYAAAAh8HdUAAAAN0lEQVQ4T2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGLo0dBDDz0SMu5o2oMFFgBXbEeI0XwYIwAAAABJRU5ErkJgggAA");
>> + background-position: 11px 0;
>> + background-repeat: no-repeat; }
>> +
>> +.inspire-tree .leaf:last-child {
>> + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAKklEQVQoU2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGJoAGUZM32Z0U8tAAAAAElFTkSuQmCC");
>> + background-position: 11px 0;
>> + background-repeat: no-repeat; }
>> +
>> +.inspire-tree .leaf.detached:last-child {
>> + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC");
>> + background-position: 11px 0;
>> + background-repeat: no-repeat; }
>> +
>> +.inspire-tree.editable-add > ol > .leaf:last-child {
>> + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAYCAYAAAAh8HdUAAAAN0lEQVQ4T2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGLo0dBDDz0SMu5o2oMFFgBXbEeI0XwYIwAAAABJRU5ErkJgggAA"); }
>> +
>> +.inspire-tree .icon::before {
>> + background-position: 0 0;
>> + background-repeat: no-repeat;
>> + content: '';
>> + display: inline-block;
>> + height: 14px;
>> + width: 14px; }
>> +
>> +.inspire-tree .icon-check::before {
>> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M27%204l-15%2015-7-7-5%205%2012%2012%2020-20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
>> +
>> +.inspire-tree .icon-check:hover::before {
>> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%230ccc0a%22%20d%3D%22M27%204l-15%2015-7-7-5%205%2012%2012%2020-20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
>> +
>> +.inspire-tree .icon-collapse::before {
>> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23aaa%22%20d%3D%22M4%201h16q1.242%200%202.121%200.879t0.879%202.121v16q0%201.242-0.879%202.121t-2.121%200.879h-16q-1.242%200-2.121-0.879t-0.879-2.121v-16q0-1.242%200.879-2.121t2.121- [...]
>> + background-color: black;
>> + border-radius: 3px;
>> + margin-left: -1px; }
>> +
>> +.inspire-tree .icon-cross::before {
>> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M31.708%2025.708c-0-0-0-0-0-0l-9.708-9.708%209.708-9.708c0-0%200-0%200-0%200.105-0.105%200.18-0.227%200.229-0.357%200.133-0.356%200.057-0.771-0.229-1.057l-4.586- [...]
>> +
>> +.inspire-tree .icon-cross:hover::before {
>> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23c00%22%20d%3D%22M31.708%2025.708c-0-0-0-0-0-0l-9.708-9.708%209.708-9.708c0-0%200-0%200-0%200.105-0.105%200.18-0.227%200.229-0.357%200.133-0.356%200.057-0.771-0.229-1.057l-4.586-4.5 [...]
>> +
>> +.inspire-tree .icon-expand::before {
>> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23aaa%22%20d%3D%22M4%201h16q1.242%200%202.121%200.879t0.879%202.121v16q0%201.242-0.879%202.121t-2.121%200.879h-16q-1.242%200-2.121-0.879t-0.879-2.121v-16q0-1.242%200.879-2.121t2.121- [...]
>> + background-color: black;
>> + border-radius: 3px;
>> + margin-left: -1px; }
>> +
>> +.inspire-tree .icon-file-empty::before {
>> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23a5a5a5%22%20d%3D%22M28.681%207.159c-0.694-0.947-1.662-2.053-2.724-3.116s-2.169-2.030-3.116-2.724c-1.612-1.182-2.393-1.319-2.841-1.319h-15.5c-1.378%200-2.5%201.121-2.5%202.5v27c0%20 [...]
>> +
>> +.inspire-tree .icon-folder::before {
>> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M14%204l4%204h14v22h-32v-26z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
>> +
>> +.inspire-tree .icon-folder-open::before {
>> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M26%2030l6-16h-26l-6%2016zM4%2012l-4%2018v-26h9l4%204h13v4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E%0A"); }
>> +
>> +.inspire-tree .icon-minus::before {
>> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M0%2013v6c0%200.552%200.448%201%201%201h30c0.552%200%201-0.448%201-1v-6c0-0.552-0.448-1-1-1h-30c-0.552%200-1%200.448-1%201z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
>> +
>> +.inspire-tree .icon-minus:hover::before {
>> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23c00%22%20d%3D%22M0%2013v6c0%200.552%200.448%201%201%201h30c0.552%200%201-0.448%201-1v-6c0-0.552-0.448-1-1-1h-30c-0.552%200-1%200.448-1%201z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
>> +
>> +.inspire-tree .icon-more::before {
>> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M12%209.984c1.078%200%202.016%200.938%202.016%202.016s-0.938%202.016-2.016%202.016-2.016-0.938-2.016-2.016%200.938-2.016%202.016-2.016zM18%209.984c1.078%200%202. [...]
>> +
>> +.inspire-tree .icon-pencil::before {
>> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M27%200c2.761%200%205%202.239%205%205%200%201.126-0.372%202.164-1%203l-2%202-7-7%202-2c0.836-0.628%201.874-1%203-1zM2%2023l-2%209%209-2%2018.5-18.5-7-7-18.5%2018 [...]
>> +
>> +.inspire-tree .icon-pencil:hover::before {
>> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%230ccc0a%22%20d%3D%22M27%200c2.761%200%205%202.239%205%205%200%201.126-0.372%202.164-1%203l-2%202-7-7%202-2c0.836-0.628%201.874-1%203-1zM2%2023l-2%209%209-2%2018.5-18.5-7-7-18.5%2018 [...]
>> +
>> +.inspire-tree .icon-plus::before {
>> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M31%2012h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552%200-1%200.448-1%201v11h-11c-0.552%200-1%200.448-1%201v6c0%200.552%200.448%201%201%201h11v11c0%200.552%200.448%201% [...]
>> +
>> +.inspire-tree .icon-plus:hover::before {
>> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%230ccc0a%22%20d%3D%22M31%2012h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552%200-1%200.448-1%201v11h-11c-0.552%200-1%200.448-1%201v6c0%200.552%200.448%201%201%201h11v11c0%200.552%200.448%201% [...]
>> +
>> +.inspire-tree .selected > .title-wrap .icon-folder::before {
>> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%2366a0a9%22%20d%3D%22M14%204l4%204h14v22h-32v-26z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
>> +
>> +.inspire-tree .selected > .title-wrap .icon-folder-open::before {
>> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%2366a0a9%22%20d%3D%22M26%2030l6-16h-26l-6%2016zM4%2012l-4%2018v-26h9l4%204h13v4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E%0A"); }
>> +
>> +.inspire-tree .selected > .title-wrap .icon-file-empty::before {
>> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%2366a0a9%22%20d%3D%22M28.681%207.159c-0.694-0.947-1.662-2.053-2.724-3.116s-2.169-2.030-3.116-2.724c-1.612-1.182-2.393-1.319-2.841-1.319h-15.5c-1.378%200-2.5%201.121-2.5%202.5v27c0%20 [...]
>> +
>> +.inspire-tree .loading > .title-wrap input {
>> + display: none; }
>> +
>> +.inspire-tree .loading > .title-wrap .title::before {
>> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2714px%27%20height%3D%2714px%27%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22xMidYMid%22%20class%3D%22uil-ring%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22none%22%20class%3D%22bk%22%3E%3C%2Frect%3E%3Cdefs%3E%3Cfilter%20id%3D%22uil-ring-shadow%22%20x%3D%22-100%25%22%20y%3D%22-100%25%22%20widt [...]
>> + content: '';
>> + height: 14px;
>> + width: 14px; }
>> +
>> +.inspire-tree > ol {
>> + position: relative; }
>> +
>> +.inspire-tree .wholerow {
>> + height: 25px;
>> + left: 0;
>> + margin-top: -25px;
>> + position: absolute;
>> + width: 100%;
>> + z-index: 1; }
>> +
>> +.inspire-tree .focused > .wholerow {
>> + border: 1px dotted white; }
>> +
>> +.inspire-tree .wholerow:hover,
>> +.inspire-tree .title-wrap:hover + .wholerow {
>> + background-color: rgba(100, 100, 100, 0.5); }
>> +
>> +.inspire-tree .selected > .wholerow,
>> +.inspire-tree .selected > .wholerow:hover,
>> +.inspire-tree .selected > .title-wrap:hover + .wholerow {
>> + background-color: rgba(74, 110, 116, 0.5); }
>> +
>> +.inspire-tree .matched > .wholerow,
>> +.inspire-tree .matched > .wholerow:hover,
>> +.inspire-tree .matched > .title-wrap:hover + .wholerow {
>> + background-color: rgba(247, 255, 170, 0.5); }
>> diff --git a/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dark.min.css b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dark.min.css
>> new file mode 100644
>> index 0000000..165af06
>> --- /dev/null
>> +++ b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dark.min.css
>> @@ -0,0 +1,14 @@
>> +/**
>> + * 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
>> + *
>> + * Unless required by applicable law or agreed to in writing, software
>> + * distributed under the License is distributed on an 'AS IS' BASIS,
>> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
>> + * See the License for the specific language governing permissions and
>> + * limitations under the License.
>> + */
>> +.inspire-tree .btn{background-color:#fff;border:1px solid rgba(0,0,0,.2);border-radius:3px;display:inline-block;height:20px;transition:all .15s linear;width:20px}.inspire-tree .btn:hover{box-shadow:0 2px 3px rgba(0,0,0,.1)}.inspire-tree .btn+.btn{margin-left:5px}.inspire-tree .btn.icon{position:relative}.inspire-tree .btn.icon:before{display:block;height:14px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:14px}.inspire-tree .btn-group{display:inline-block;height: [...]
>> \ No newline at end of file
>> diff --git a/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dom-royale.js b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dom-royale.js
>> new file mode 100644
>> index 0000000..37d8e22
>> --- /dev/null
>> +++ b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dom-royale.js
>> @@ -0,0 +1,3766 @@
>> +/**
>> + * 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
>> + *
>> + * Unless required by applicable law or agreed to in writing, software
>> + * distributed under the License is distributed on an 'AS IS' BASIS,
>> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
>> + * See the License for the specific language governing permissions and
>> + * limitations under the License.
>> + */
>> + /* Inspire Tree DOM
>> + * @version 4.0.6
>> + * https://github.com/helion3/inspire-tree-dom
>> + * @copyright Copyright 2015 Helion3, and other contributors
>> + * @license Licensed under MIT
>> + * see https://github.com/helion3/inspire-tree-dom/blob/master/LICENSE
>> + */
>> +(function (global, factory) {
>> + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('lodash'), require('inspire-tree')) :
>> + typeof define === 'function' && define.amd ? define(['lodash', 'inspire-tree'], factory) :
>> + (global.InspireTreeDOM = factory(global._,global.InspireTree));
>> +}(this, (function (_,InspireTree) { 'use strict';
>> +
>> + InspireTree = InspireTree && InspireTree.hasOwnProperty('default') ? InspireTree['default'] : InspireTree;
>> +
>> + var NO_OP = '$NO_OP';
>> + var ERROR_MSG = 'a runtime error occured! Use Inferno in development environment to find the error.';
>> + var isBrowser = !!(typeof window !== 'undefined' && window.document);
>> + var isArray = Array.isArray;
>> + function isStringOrNumber(o) {
>> + var type = typeof o;
>> + return type === 'string' || type === 'number';
>> + }
>> + function isNullOrUndef(o) {
>> + return isUndefined(o) || isNull(o);
>> + }
>> + function isInvalid(o) {
>> + return isNull(o) || o === false || isTrue(o) || isUndefined(o);
>> + }
>> + function isFunction(o) {
>> + return typeof o === 'function';
>> + }
>> + function isString(o) {
>> + return typeof o === 'string';
>> + }
>> + function isNumber(o) {
>> + return typeof o === 'number';
>> + }
>> + function isNull(o) {
>> + return o === null;
>> + }
>> + function isTrue(o) {
>> + return o === true;
>> + }
>> + function isUndefined(o) {
>> + return o === void 0;
>> + }
>> + function throwError(message) {
>> + if (!message) {
>> + message = ERROR_MSG;
>> + }
>> + throw new Error(("Inferno Error: " + message));
>> + }
>> + function combineFrom(first, second) {
>> + var out = {};
>> + if (first) {
>> + for (var key in first) {
>> + out[key] = first[key];
>> + }
>> + }
>> + if (second) {
>> + for (var key$1 in second) {
>> + out[key$1] = second[key$1];
>> + }
>> + }
>> + return out;
>> + }
>> +
>> + var keyPrefix = '$';
>> + function getVNode(childFlags, children, className, flags, key, props, ref, type) {
>> + return {
>> + childFlags: childFlags,
>> + children: children,
>> + className: className,
>> + dom: null,
>> + flags: flags,
>> + key: key === void 0 ? null : key,
>> + parentVNode: null,
>> + props: props === void 0 ? null : props,
>> + ref: ref === void 0 ? null : ref,
>> + type: type
>> + };
>> + }
>> + function createVNode(flags, type, className, children, childFlags, props, key, ref) {
>> + var childFlag = childFlags === void 0 ? 1 /* HasInvalidChildren */ : childFlags;
>> + var vNode = getVNode(childFlag, children, className, flags, key, props, ref, type);
>> + if (childFlag === 0 /* UnknownChildren */) {
>> + normalizeChildren(vNode, vNode.children);
>> + }
>> + return vNode;
>> + }
>> + function createComponentVNode(flags, type, props, key, ref) {
>> + if ((flags & 2 /* ComponentUnknown */) > 0) {
>> + flags = type.prototype && isFunction(type.prototype.render) ? 4 /* ComponentClass */ : 8 /* ComponentFunction */;
>> + }
>> + // set default props
>> + var defaultProps = type.defaultProps;
>> + if (!isNullOrUndef(defaultProps)) {
>> + if (!props) {
>> + props = {}; // Props can be referenced and modified at application level so always create new object
>> + }
>> + for (var prop in defaultProps) {
>> + if (isUndefined(props[prop])) {
>> + props[prop] = defaultProps[prop];
>> + }
>> + }
>> + }
>> + if ((flags & 8 /* ComponentFunction */) > 0) {
>> + var defaultHooks = type.defaultHooks;
>> + if (!isNullOrUndef(defaultHooks)) {
>> + if (!ref) {
>> + // As ref cannot be referenced from application level, we can use the same refs object
>> + ref = defaultHooks;
>> + }
>> + else {
>> + for (var prop$1 in defaultHooks) {
>> + if (isUndefined(ref[prop$1])) {
>> + ref[prop$1] = defaultHooks[prop$1];
>> + }
>> + }
>> + }
>> + }
>> + }
>> + var vNode = getVNode(1 /* HasInvalidChildren */, null, null, flags, key, props, ref, type);
>> + var optsVNode = options.createVNode;
>> + if (isFunction(optsVNode)) {
>> + optsVNode(vNode);
>> + }
>> + return vNode;
>> + }
>> + function createTextVNode(text, key) {
>> + return getVNode(1 /* HasInvalidChildren */, isNullOrUndef(text) ? '' : text, null, 16 /* Text */, key, null, null, null);
>> + }
>> + function normalizeProps(vNode) {
>> + var props = vNode.props;
>> + if (props) {
>> + var flags = vNode.flags;
>> + if (flags & 481 /* Element */) {
>> + if (props.children !== void 0 && isNullOrUndef(vNode.children)) {
>> + normalizeChildren(vNode, props.children);
>> + }
>> + if (props.className !== void 0) {
>> + vNode.className = props.className || null;
>> + props.className = undefined;
>> + }
>> + }
>> + if (props.key !== void 0) {
>> + vNode.key = props.key;
>> + props.key = undefined;
>> + }
>> + if (props.ref !== void 0) {
>> + if (flags & 8 /* ComponentFunction */) {
>> + vNode.ref = combineFrom(vNode.ref, props.ref);
>> + }
>> + else {
>> + vNode.ref = props.ref;
>> + }
>> + props.ref = undefined;
>> + }
>> + }
>> + return vNode;
>> + }
>> + function directClone(vNodeToClone) {
>> + var newVNode;
>> + var flags = vNodeToClone.flags;
>> + if (flags & 14 /* Component */) {
>> + var props;
>> + var propsToClone = vNodeToClone.props;
>> + if (!isNull(propsToClone)) {
>> + props = {};
>> + for (var key in propsToClone) {
>> + props[key] = propsToClone[key];
>> + }
>> + }
>> + newVNode = createComponentVNode(flags, vNodeToClone.type, props, vNodeToClone.key, vNodeToClone.ref);
>> + }
>> + else if (flags & 481 /* Element */) {
>> + newVNode = createVNode(flags, vNodeToClone.type, vNodeToClone.className, vNodeToClone.children, vNodeToClone.childFlags, vNodeToClone.props, vNodeToClone.key, vNodeToClone.ref);
>> + }
>> + else if (flags & 16 /* Text */) {
>> + newVNode = createTextVNode(vNodeToClone.children, vNodeToClone.key);
>> + }
>> + else if (flags & 1024 /* Portal */) {
>> + newVNode = vNodeToClone;
>> + }
>> + return newVNode;
>> + }
>> + function createVoidVNode() {
>> + return createTextVNode('', null);
>> + }
>> + function _normalizeVNodes(nodes, result, index, currentKey) {
>> + for (var len = nodes.length; index < len; index++) {
>> + var n = nodes[index];
>> + if (!isInvalid(n)) {
>> + var newKey = currentKey + keyPrefix + index;
>> + if (isArray(n)) {
>> + _normalizeVNodes(n, result, 0, newKey);
>> + }
>> + else {
>> + if (isStringOrNumber(n)) {
>> + n = createTextVNode(n, newKey);
>> + }
>> + else {
>> + var oldKey = n.key;
>> + var isPrefixedKey = isString(oldKey) && oldKey[0] === keyPrefix;
>> + if (!isNull(n.dom) || isPrefixedKey) {
>> + n = directClone(n);
>> + }
>> + if (isNull(oldKey) || isPrefixedKey) {
>> + n.key = newKey;
>> + }
>> + else {
>> + n.key = currentKey + oldKey;
>> + }
>> + }
>> + result.push(n);
>> + }
>> + }
>> + }
>> + }
>> + function normalizeChildren(vNode, children) {
>> + var newChildren;
>> + var newChildFlags = 1 /* HasInvalidChildren */;
>> + // Don't change children to match strict equal (===) true in patching
>> + if (isInvalid(children)) {
>> + newChildren = children;
>> + }
>> + else if (isString(children)) {
>> + newChildFlags = 2 /* HasVNodeChildren */;
>> + newChildren = createTextVNode(children);
>> + }
>> + else if (isNumber(children)) {
>> + newChildFlags = 2 /* HasVNodeChildren */;
>> + newChildren = createTextVNode(children + '');
>> + }
>> + else if (isArray(children)) {
>> + var len = children.length;
>> + if (len === 0) {
>> + newChildren = null;
>> + newChildFlags = 1 /* HasInvalidChildren */;
>> + }
>> + else {
>> + // we assign $ which basically means we've flagged this array for future note
>> + // if it comes back again, we need to clone it, as people are using it
>> + // in an immutable way
>> + // tslint:disable-next-line
>> + if (Object.isFrozen(children) || children['$'] === true) {
>> + children = children.slice();
>> + }
>> + newChildFlags = 8 /* HasKeyedChildren */;
>> + for (var i = 0; i < len; i++) {
>> + var n = children[i];
>> + if (isInvalid(n) || isArray(n)) {
>> + newChildren = newChildren || children.slice(0, i);
>> + _normalizeVNodes(children, newChildren, i, '');
>> + break;
>> + }
>> + else if (isStringOrNumber(n)) {
>> + newChildren = newChildren || children.slice(0, i);
>> + newChildren.push(createTextVNode(n, keyPrefix + i));
>> + }
>> + else {
>> + var key = n.key;
>> + var isNullDom = isNull(n.dom);
>> + var isNullKey = isNull(key);
>> + var isPrefixed = !isNullKey && key[0] === keyPrefix;
>> + if (!isNullDom || isNullKey || isPrefixed) {
>> + newChildren = newChildren || children.slice(0, i);
>> + if (!isNullDom || isPrefixed) {
>> + n = directClone(n);
>> + }
>> + if (isNullKey || isPrefixed) {
>> + n.key = keyPrefix + i;
>> + }
>> + newChildren.push(n);
>> + }
>> + else if (newChildren) {
>> + newChildren.push(n);
>> + }
>> + }
>> + }
>> + newChildren = newChildren || children;
>> + newChildren.$ = true;
>> + }
>> + }
>> + else {
>> + newChildren = children;
>> + if (!isNull(children.dom)) {
>> + newChildren = directClone(children);
>> + }
>> + newChildFlags = 2 /* HasVNodeChildren */;
>> + }
>> + vNode.children = newChildren;
>> + vNode.childFlags = newChildFlags;
>> + return vNode;
>> + }
>> + var options = {
>> + afterRender: null,
>> + beforeRender: null,
>> + createVNode: null,
>> + renderComplete: null
>> + };
>> +
>> + var xlinkNS = 'http://www.w3.org/1999/xlink';
>> + var xmlNS = 'http://www.w3.org/XML/1998/namespace';
>> + var svgNS = 'http://www.w3.org/2000/svg';
>> + var namespaces = {
>> + 'xlink:actuate': xlinkNS,
>> + 'xlink:arcrole': xlinkNS,
>> + 'xlink:href': xlinkNS,
>> + 'xlink:role': xlinkNS,
>> + 'xlink:show': xlinkNS,
>> + 'xlink:title': xlinkNS,
>> + 'xlink:type': xlinkNS,
>> + 'xml:base': xmlNS,
>> + 'xml:lang': xmlNS,
>> + 'xml:space': xmlNS
>> + };
>> +
>> + // We need EMPTY_OBJ defined in one place.
>> + // Its used for comparison so we cant inline it into shared
>> + var EMPTY_OBJ = {};
>> + var LIFECYCLE = [];
>> + function appendChild(parentDom, dom) {
>> + parentDom.appendChild(dom);
>> + }
>> + function insertOrAppend(parentDom, newNode, nextNode) {
>> + if (isNullOrUndef(nextNode)) {
>> + appendChild(parentDom, newNode);
>> + }
>> + else {
>> + parentDom.insertBefore(newNode, nextNode);
>> + }
>> + }
>> + function documentCreateElement(tag, isSVG) {
>> + if (isSVG === true) {
>> + return document.createElementNS(svgNS, tag);
>> + }
>> + return document.createElement(tag);
>> + }
>> + function replaceChild(parentDom, newDom, lastDom) {
>> + parentDom.replaceChild(newDom, lastDom);
>> + }
>> + function removeChild(parentDom, dom) {
>> + parentDom.removeChild(dom);
>> + }
>> + function callAll(arrayFn) {
>> + var listener;
>> + while ((listener = arrayFn.shift()) !== undefined) {
>> + listener();
>> + }
>> + }
>> +
>> + var attachedEventCounts = {};
>> + var attachedEvents = {};
>> + function handleEvent(name, nextEvent, dom) {
>> + var eventsLeft = attachedEventCounts[name];
>> + var eventsObject = dom.$EV;
>> + if (nextEvent) {
>> + if (!eventsLeft) {
>> + attachedEvents[name] = attachEventToDocument(name);
>> + attachedEventCounts[name] = 0;
>> + }
>> + if (!eventsObject) {
>> + eventsObject = dom.$EV = {};
>> + }
>> + if (!eventsObject[name]) {
>> + attachedEventCounts[name]++;
>> + }
>> + eventsObject[name] = nextEvent;
>> + }
>> + else if (eventsObject && eventsObject[name]) {
>> + attachedEventCounts[name]--;
>> + if (eventsLeft === 1) {
>> + document.removeEventListener(normalizeEventName(name), attachedEvents[name]);
>> + attachedEvents[name] = null;
>> + }
>> + eventsObject[name] = nextEvent;
>> + }
>> + }
>> + function dispatchEvents(event, target, isClick, name, eventData) {
>> + var dom = target;
>> + while (!isNull(dom)) {
>> + // Html Nodes can be nested fe: span inside button in that scenario browser does not handle disabled attribute on parent,
>> + // because the event listener is on document.body
>> + // Don't process clicks on disabled elements
>> + if (isClick && dom.disabled) {
>> + return;
>> + }
>> + var eventsObject = dom.$EV;
>> + if (eventsObject) {
>> + var currentEvent = eventsObject[name];
>> + if (currentEvent) {
>> + // linkEvent object
>> + eventData.dom = dom;
>> + if (currentEvent.event) {
>> + currentEvent.event(currentEvent.data, event);
>> + }
>> + else {
>> + currentEvent(event);
>> + }
>> + if (event.cancelBubble) {
>> + return;
>> + }
>> + }
>> + }
>> + dom = dom.parentNode;
>> + }
>> + }
>> + function normalizeEventName(name) {
>> + return name.substr(2).toLowerCase();
>> + }
>> + function stopPropagation() {
>> + this.cancelBubble = true;
>> + if (!this.immediatePropagationStopped) {
>> + this.stopImmediatePropagation();
>> + }
>> + }
>> + function attachEventToDocument(name) {
>> + var docEvent = function (event) {
>> + var type = event.type;
>> + var isClick = type === 'click' || type === 'dblclick';
>> + if (isClick && event.button !== 0) {
>> + // Firefox incorrectly triggers click event for mid/right mouse buttons.
>> + // This bug has been active for 12 years.
>> + // https://bugzilla.mozilla.org/show_bug.cgi?id=184051
>> + event.stopPropagation();
>> + return false;
>> + }
>> + event.stopPropagation = stopPropagation;
>> + // Event data needs to be object to save reference to currentTarget getter
>> + var eventData = {
>> + dom: document
>> + };
>> + Object.defineProperty(event, 'currentTarget', {
>> + configurable: true,
>> + get: function get() {
>> + return eventData.dom;
>> + }
>> + });
>> + dispatchEvents(event, event.target, isClick, name, eventData);
>> + return;
>> + };
>> + document.addEventListener(normalizeEventName(name), docEvent);
>> + return docEvent;
>> + }
>> +
>> + function isSameInnerHTML(dom, innerHTML) {
>> + var tempdom = document.createElement('i');
>> + tempdom.innerHTML = innerHTML;
>> + return tempdom.innerHTML === dom.innerHTML;
>> + }
>> + function isSamePropsInnerHTML(dom, props) {
>> + return Boolean(props && props.dangerouslySetInnerHTML && props.dangerouslySetInnerHTML.__html && isSameInnerHTML(dom, props.dangerouslySetInnerHTML.__html));
>> + }
>> +
>> + function triggerEventListener(props, methodName, e) {
>> + if (props[methodName]) {
>> + var listener = props[methodName];
>> + if (listener.event) {
>> + listener.event(listener.data, e);
>> + }
>> + else {
>> + listener(e);
>> + }
>> + }
>> + else {
>> + var nativeListenerName = methodName.toLowerCase();
>> + if (props[nativeListenerName]) {
>> + props[nativeListenerName](e);
>> + }
>> + }
>> + }
>> + function createWrappedFunction(methodName, applyValue) {
>> + var fnMethod = function (e) {
>> + e.stopPropagation();
>> + var vNode = this.$V;
>> + // If vNode is gone by the time event fires, no-op
>> + if (!vNode) {
>> + return;
>> + }
>> + var props = vNode.props || EMPTY_OBJ;
>> + var dom = vNode.dom;
>> + if (isString(methodName)) {
>> + triggerEventListener(props, methodName, e);
>> + }
>> + else {
>> + for (var i = 0; i < methodName.length; i++) {
>> + triggerEventListener(props, methodName[i], e);
>> + }
>> + }
>> + if (isFunction(applyValue)) {
>> + var newVNode = this.$V;
>> + var newProps = newVNode.props || EMPTY_OBJ;
>> + applyValue(newProps, dom, false, newVNode);
>> + }
>> + };
>> + Object.defineProperty(fnMethod, 'wrapped', {
>> + configurable: false,
>> + enumerable: false,
>> + value: true,
>> + writable: false
>> + });
>> + return fnMethod;
>> + }
>> +
>> + function isCheckedType(type) {
>> + return type === 'checkbox' || type === 'radio';
>> + }
>> + var onTextInputChange = createWrappedFunction('onInput', applyValueInput);
>> + var wrappedOnChange = createWrappedFunction(['onClick', 'onChange'], applyValueInput);
>> + /* tslint:disable-next-line:no-empty */
>> + function emptywrapper(event) {
>> + event.stopPropagation();
>> + }
>> + emptywrapper.wrapped = true;
>> + function inputEvents(dom, nextPropsOrEmpty) {
>> + if (isCheckedType(nextPropsOrEmpty.type)) {
>> + dom.onchange = wrappedOnChange;
>> + dom.onclick = emptywrapper;
>> + }
>> + else {
>> + dom.oninput = onTextInputChange;
>> + }
>> + }
>> + function applyValueInput(nextPropsOrEmpty, dom) {
>> + var type = nextPropsOrEmpty.type;
>> + var value = nextPropsOrEmpty.value;
>> + var checked = nextPropsOrEmpty.checked;
>> + var multiple = nextPropsOrEmpty.multiple;
>> + var defaultValue = nextPropsOrEmpty.defaultValue;
>> + var hasValue = !isNullOrUndef(value);
>> + if (type && type !== dom.type) {
>> + dom.setAttribute('type', type);
>> + }
>> + if (!isNullOrUndef(multiple) && multiple !== dom.multiple) {
>> + dom.multiple = multiple;
>> + }
>> + if (!isNullOrUndef(defaultValue) && !hasValue) {
>> + dom.defaultValue = defaultValue + '';
>> + }
>> + if (isCheckedType(type)) {
>> + if (hasValue) {
>> + dom.value = value;
>> + }
>> + if (!isNullOrUndef(checked)) {
>> + dom.checked = checked;
>> + }
>> + }
>> + else {
>> + if (hasValue && dom.value !== value) {
>> + dom.defaultValue = value;
>> + dom.value = value;
>> + }
>> + else if (!isNullOrUndef(checked)) {
>> + dom.checked = checked;
>> + }
>> + }
>> + }
>> +
>> + function updateChildOptionGroup(vNode, value) {
>> + var type = vNode.type;
>> + if (type === 'optgroup') {
>> + var children = vNode.children;
>> + var childFlags = vNode.childFlags;
>> + if (childFlags & 12 /* MultipleChildren */) {
>> + for (var i = 0, len = children.length; i < len; i++) {
>> + updateChildOption(children[i], value);
>> + }
>> + }
>> + else if (childFlags === 2 /* HasVNodeChildren */) {
>> + updateChildOption(children, value);
>> + }
>> + }
>> + else {
>> + updateChildOption(vNode, value);
>> + }
>> + }
>> + function updateChildOption(vNode, value) {
>> + var props = vNode.props || EMPTY_OBJ;
>> + var dom = vNode.dom;
>> + // we do this as multiple may have changed
>> + dom.value = props.value;
>> + if ((isArray(value) && value.indexOf(props.value) !== -1) || props.value === value) {
>> + dom.selected = true;
>> + }
>> + else if (!isNullOrUndef(value) || !isNullOrUndef(props.selected)) {
>> + dom.selected = props.selected || false;
>> + }
>> + }
>> + var onSelectChange = createWrappedFunction('onChange', applyValueSelect);
>> + function selectEvents(dom) {
>> + dom.onchange = onSelectChange;
>> + }
>> + function applyValueSelect(nextPropsOrEmpty, dom, mounting, vNode) {
>> + var multiplePropInBoolean = Boolean(nextPropsOrEmpty.multiple);
>> + if (!isNullOrUndef(nextPropsOrEmpty.multiple) && multiplePropInBoolean !== dom.multiple) {
>> + dom.multiple = multiplePropInBoolean;
>> + }
>> + var childFlags = vNode.childFlags;
>> + if ((childFlags & 1 /* HasInvalidChildren */) === 0) {
>> + var children = vNode.children;
>> + var value = nextPropsOrEmpty.value;
>> + if (mounting && isNullOrUndef(value)) {
>> + value = nextPropsOrEmpty.defaultValue;
>> + }
>> + if (childFlags & 12 /* MultipleChildren */) {
>> + for (var i = 0, len = children.length; i < len; i++) {
>> + updateChildOptionGroup(children[i], value);
>> + }
>> + }
>> + else if (childFlags === 2 /* HasVNodeChildren */) {
>> + updateChildOptionGroup(children, value);
>> + }
>> + }
>> + }
>> +
>> + var onTextareaInputChange = createWrappedFunction('onInput', applyValueTextArea);
>> + var wrappedOnChange$1 = createWrappedFunction('onChange');
>> + function textAreaEvents(dom, nextPropsOrEmpty) {
>> + dom.oninput = onTextareaInputChange;
>> + if (nextPropsOrEmpty.onChange) {
>> + dom.onchange = wrappedOnChange$1;
>> + }
>> + }
>> + function applyValueTextArea(nextPropsOrEmpty, dom, mounting) {
>> + var value = nextPropsOrEmpty.value;
>> + var domValue = dom.value;
>> + if (isNullOrUndef(value)) {
>> + if (mounting) {
>> + var defaultValue = nextPropsOrEmpty.defaultValue;
>> + if (!isNullOrUndef(defaultValue) && defaultValue !== domValue) {
>> + dom.defaultValue = defaultValue;
>> + dom.value = defaultValue;
>> + }
>> + }
>> + }
>> + else if (domValue !== value) {
>> + /* There is value so keep it controlled */
>> + dom.defaultValue = value;
>> + dom.value = value;
>> + }
>> + }
>> +
>> + /**
>> + * There is currently no support for switching same input between controlled and nonControlled
>> + * If that ever becomes a real issue, then re design controlled elements
>> + * Currently user must choose either controlled or non-controlled and stick with that
>> + */
>> + function processElement(flags, vNode, dom, nextPropsOrEmpty, mounting, isControlled) {
>> + if (flags & 64 /* InputElement */) {
>> + applyValueInput(nextPropsOrEmpty, dom);
>> + }
>> + else if (flags & 256 /* SelectElement */) {
>> + applyValueSelect(nextPropsOrEmpty, dom, mounting, vNode);
>> + }
>> + else if (flags & 128 /* TextareaElement */) {
>> + applyValueTextArea(nextPropsOrEmpty, dom, mounting);
>> + }
>> + if (isControlled) {
>> + dom.$V = vNode;
>> + }
>> + }
>> + function addFormElementEventHandlers(flags, dom, nextPropsOrEmpty) {
>> + if (flags & 64 /* InputElement */) {
>> + inputEvents(dom, nextPropsOrEmpty);
>> + }
>> + else if (flags & 256 /* SelectElement */) {
>> + selectEvents(dom);
>> + }
>> + else if (flags & 128 /* TextareaElement */) {
>> + textAreaEvents(dom, nextPropsOrEmpty);
>> + }
>> + }
>> + function isControlledFormElement(nextPropsOrEmpty) {
>> + return nextPropsOrEmpty.type && isCheckedType(nextPropsOrEmpty.type) ? !isNullOrUndef(nextPropsOrEmpty.checked) : !isNullOrUndef(nextPropsOrEmpty.value);
>> + }
>> +
>> + function remove(vNode, parentDom) {
>> + unmount(vNode);
>> + if (parentDom && vNode.dom) {
>> + removeChild(parentDom, vNode.dom);
>> + // Let carbage collector free memory
>> + vNode.dom = null;
>> + }
>> + }
>> + function unmount(vNode) {
>> + var flags = vNode.flags;
>> + if (flags & 481 /* Element */) {
>> + var ref = vNode.ref;
>> + var props = vNode.props;
>> + if (isFunction(ref)) {
>> + ref(null);
>> + }
>> + var children = vNode.children;
>> + var childFlags = vNode.childFlags;
>> + if (childFlags & 12 /* MultipleChildren */) {
>> + unmountAllChildren(children);
>> + }
>> + else if (childFlags === 2 /* HasVNodeChildren */) {
>> + unmount(children);
>> + }
>> + if (!isNull(props)) {
>> + for (var name in props) {
>> + switch (name) {
>> + case 'onClick':
>> + case 'onDblClick':
>> + case 'onFocusIn':
>> + case 'onFocusOut':
>> + case 'onKeyDown':
>> + case 'onKeyPress':
>> + case 'onKeyUp':
>> + case 'onMouseDown':
>> + case 'onMouseMove':
>> + case 'onMouseUp':
>> + case 'onSubmit':
>> + case 'onTouchEnd':
>> + case 'onTouchMove':
>> + case 'onTouchStart':
>> + handleEvent(name, null, vNode.dom);
>> + break;
>> + default:
>> + break;
>> + }
>> + }
>> + }
>> + }
>> + else {
>> + var children$1 = vNode.children;
>> + // Safe guard for crashed VNode
>> + if (children$1) {
>> + if (flags & 14 /* Component */) {
>> + var ref$1 = vNode.ref;
>> + if (flags & 4 /* ComponentClass */) {
>> + if (isFunction(children$1.componentWillUnmount)) {
>> + children$1.componentWillUnmount();
>> + }
>> + if (isFunction(ref$1)) {
>> + ref$1(null);
>> + }
>> + children$1.$UN = true;
>> + if (children$1.$LI) {
>> + unmount(children$1.$LI);
>> + }
>> + }
>> + else {
>> + if (!isNullOrUndef(ref$1) && isFunction(ref$1.onComponentWillUnmount)) {
>> + ref$1.onComponentWillUnmount(vNode.dom, vNode.props || EMPTY_OBJ);
>> + }
>> + unmount(children$1);
>> + }
>> + }
>> + else if (flags & 1024 /* Portal */) {
>> + remove(children$1, vNode.type);
>> + }
>> + }
>> + }
>> + }
>> + function unmountAllChildren(children) {
>> + for (var i = 0, len = children.length; i < len; i++) {
>> + unmount(children[i]);
>> + }
>> + }
>> + function removeAllChildren(dom, children) {
>> + unmountAllChildren(children);
>> + dom.textContent = '';
>> + }
>> +
>> + function createLinkEvent(linkEvent, nextValue) {
>> + return function (e) {
>> + linkEvent(nextValue.data, e);
>> + };
>> + }
>> + function patchEvent(name, lastValue, nextValue, dom) {
>> + var nameLowerCase = name.toLowerCase();
>> + if (!isFunction(nextValue) && !isNullOrUndef(nextValue)) {
>> + var linkEvent = nextValue.event;
>> + if (linkEvent && isFunction(linkEvent)) {
>> + dom[nameLowerCase] = createLinkEvent(linkEvent, nextValue);
>> + }
>> + }
>> + else {
>> + var domEvent = dom[nameLowerCase];
>> + // if the function is wrapped, that means it's been controlled by a wrapper
>> + if (!domEvent || !domEvent.wrapped) {
>> + dom[nameLowerCase] = nextValue;
>> + }
>> + }
>> + }
>> + function getNumberStyleValue(style, value) {
>> + switch (style) {
>> + case 'animationIterationCount':
>> + case 'borderImageOutset':
>> + case 'borderImageSlice':
>> + case 'borderImageWidth':
>> + case 'boxFlex':
>> + case 'boxFlexGroup':
>> + case 'boxOrdinalGroup':
>> + case 'columnCount':
>> + case 'fillOpacity':
>> + case 'flex':
>> + case 'flexGrow':
>> + case 'flexNegative':
>> + case 'flexOrder':
>> + case 'flexPositive':
>> + case 'flexShrink':
>> + case 'floodOpacity':
>> + case 'fontWeight':
>> + case 'gridColumn':
>> + case 'gridRow':
>> + case 'lineClamp':
>> + case 'lineHeight':
>> + case 'opacity':
>> + case 'order':
>> + case 'orphans':
>> + case 'stopOpacity':
>> + case 'strokeDasharray':
>> + case 'strokeDashoffset':
>> + case 'strokeMiterlimit':
>> + case 'strokeOpacity':
>> + case 'strokeWidth':
>> + case 'tabSize':
>> + case 'widows':
>> + case 'zIndex':
>> + case 'zoom':
>> + return value;
>> + default:
>> + return value + 'px';
>> + }
>> + }
>> + // We are assuming here that we come from patchProp routine
>> + // -nextAttrValue cannot be null or undefined
>> + function patchStyle(lastAttrValue, nextAttrValue, dom) {
>> + var domStyle = dom.style;
>> + var style;
>> + var value;
>> + if (isString(nextAttrValue)) {
>> + domStyle.cssText = nextAttrValue;
>> + return;
>> + }
>> + if (!isNullOrUndef(lastAttrValue) && !isString(lastAttrValue)) {
>> + for (style in nextAttrValue) {
>> + // do not add a hasOwnProperty check here, it affects performance
>> + value = nextAttrValue[style];
>> + if (value !== lastAttrValue[style]) {
>> + domStyle[style] = isNumber(value) ? getNumberStyleValue(style, value) : value;
>> + }
>> + }
>> + for (style in lastAttrValue) {
>> + if (isNullOrUndef(nextAttrValue[style])) {
>> + domStyle[style] = '';
>> + }
>> + }
>> + }
>> + else {
>> + for (style in nextAttrValue) {
>> + value = nextAttrValue[style];
>> + domStyle[style] = isNumber(value) ? getNumberStyleValue(style, value) : value;
>> + }
>> + }
>> + }
>> + function patchProp(prop, lastValue, nextValue, dom, isSVG, hasControlledValue, lastVNode) {
>> + switch (prop) {
>> + case 'onClick':
>> + case 'onDblClick':
>> + case 'onFocusIn':
>> + case 'onFocusOut':
>> + case 'onKeyDown':
>> + case 'onKeyPress':
>> + case 'onKeyUp':
>> + case 'onMouseDown':
>> + case 'onMouseMove':
>> + case 'onMouseUp':
>> + case 'onSubmit':
>> + case 'onTouchEnd':
>> + case 'onTouchMove':
>> + case 'onTouchStart':
>> + handleEvent(prop, nextValue, dom);
>> + break;
>> + case 'children':
>> + case 'childrenType':
>> + case 'className':
>> + case 'defaultValue':
>> + case 'key':
>> + case 'multiple':
>> + case 'ref':
>> + break;
>> + case 'autoFocus':
>> + dom.autofocus = !!nextValue;
>> + break;
>> + case 'allowfullscreen':
>> + case 'autoplay':
>> + case 'capture':
>> + case 'checked':
>> + case 'controls':
>> + case 'default':
>> + case 'disabled':
>> + case 'hidden':
>> + case 'indeterminate':
>> + case 'loop':
>> + case 'muted':
>> + case 'novalidate':
>> + case 'open':
>> + case 'readOnly':
>> + case 'required':
>> + case 'reversed':
>> + case 'scoped':
>> + case 'seamless':
>> + case 'selected':
>> + dom[prop] = !!nextValue;
>> + break;
>> + case 'defaultChecked':
>> + case 'value':
>> + case 'volume':
>> + if (hasControlledValue && prop === 'value') {
>> + return;
>> + }
>> + var value = isNullOrUndef(nextValue) ? '' : nextValue;
>> + if (dom[prop] !== value) {
>> + dom[prop] = value;
>> + }
>> + break;
>> + case 'dangerouslySetInnerHTML':
>> + var lastHtml = (lastValue && lastValue.__html) || '';
>> + var nextHtml = (nextValue && nextValue.__html) || '';
>> + if (lastHtml !== nextHtml) {
>> + if (!isNullOrUndef(nextHtml) && !isSameInnerHTML(dom, nextHtml)) {
>> + if (!isNull(lastVNode)) {
>> + if (lastVNode.childFlags & 12 /* MultipleChildren */) {
>> + unmountAllChildren(lastVNode.children);
>> + }
>> + else if (lastVNode.childFlags === 2 /* HasVNodeChildren */) {
>> + unmount(lastVNode.children);
>> + }
>> + lastVNode.children = null;
>> + lastVNode.childFlags = 1 /* HasInvalidChildren */;
>> + }
>> + dom.innerHTML = nextHtml;
>> + }
>> + }
>> + break;
>> + default:
>> + if (prop[0] === 'o' && prop[1] === 'n') {
>> + patchEvent(prop, lastValue, nextValue, dom);
>> + }
>> + else if (isNullOrUndef(nextValue)) {
>> + dom.removeAttribute(prop);
>> + }
>> + else if (prop === 'style') {
>> + patchStyle(lastValue, nextValue, dom);
>> + }
>> + else if (isSVG && namespaces[prop]) {
>> + // We optimize for isSVG being false
>> + // If we end up in this path we can read property again
>> + dom.setAttributeNS(namespaces[prop], prop, nextValue);
>> + }
>> + else {
>> + dom.setAttribute(prop, nextValue);
>> + }
>> + break;
>> + }
>> + }
>> + function mountProps(vNode, flags, props, dom, isSVG) {
>> + var hasControlledValue = false;
>> + var isFormElement = (flags & 448 /* FormElement */) > 0;
>> + if (isFormElement) {
>> + hasControlledValue = isControlledFormElement(props);
>> + if (hasControlledValue) {
>> + addFormElementEventHandlers(flags, dom, props);
>> + }
>> + }
>> + for (var prop in props) {
>> + // do not add a hasOwnProperty check here, it affects performance
>> + patchProp(prop, null, props[prop], dom, isSVG, hasControlledValue, null);
>> + }
>> + if (isFormElement) {
>> + processElement(flags, vNode, dom, props, true, hasControlledValue);
>> + }
>> + }
>> +
>> + function createClassComponentInstance(vNode, Component, props, context) {
>> + var instance = new Component(props, context);
>> + vNode.children = instance;
>> + instance.$V = vNode;
>> + instance.$BS = false;
>> + instance.context = context;
>> + if (instance.props === EMPTY_OBJ) {
>> + instance.props = props;
>> + }
>> + instance.$UN = false;
>> + if (isFunction(instance.componentWillMount)) {
>> + instance.$BR = true;
>> + instance.componentWillMount();
>> + if (instance.$PSS) {
>> + var state = instance.state;
>> + var pending = instance.$PS;
>> + if (isNull(state)) {
>> + instance.state = pending;
>> + }
>> + else {
>> + for (var key in pending) {
>> + state[key] = pending[key];
>> + }
>> + }
>> + instance.$PSS = false;
>> + instance.$PS = null;
>> + }
>> + instance.$BR = false;
>> + }
>> + if (isFunction(options.beforeRender)) {
>> + options.beforeRender(instance);
>> + }
>> + var input = handleComponentInput(instance.render(props, instance.state, context), vNode);
>> + var childContext;
>> + if (isFunction(instance.getChildContext)) {
>> + childContext = instance.getChildContext();
>> + }
>> + if (isNullOrUndef(childContext)) {
>> + instance.$CX = context;
>> + }
>> + else {
>> + instance.$CX = combineFrom(context, childContext);
>> + }
>> + if (isFunction(options.afterRender)) {
>> + options.afterRender(instance);
>> + }
>> + instance.$LI = input;
>> + return instance;
>> + }
>> + function handleComponentInput(input, componentVNode) {
>> + if (isInvalid(input)) {
>> + input = createVoidVNode();
>> + }
>> + else if (isStringOrNumber(input)) {
>> + input = createTextVNode(input, null);
>> + }
>> + else {
>> + if (input.dom) {
>> + input = directClone(input);
>> + }
>> + if (input.flags & 14 /* Component */) {
>> + // if we have an input that is also a component, we run into a tricky situation
>> + // where the root vNode needs to always have the correct DOM entry
>> + // we can optimise this in the future, but this gets us out of a lot of issues
>> + input.parentVNode = componentVNode;
>> + }
>> + }
>> + return input;
>> + }
>> +
>> + function mount(vNode, parentDom, context, isSVG) {
>> + var flags = vNode.flags;
>> + if (flags & 481 /* Element */) {
>> + return mountElement(vNode, parentDom, context, isSVG);
>> + }
>> + if (flags & 14 /* Component */) {
>> + return mountComponent(vNode, parentDom, context, isSVG, (flags & 4 /* ComponentClass */) > 0);
>> + }
>> + if (flags & 512 /* Void */ || flags & 16 /* Text */) {
>> + return mountText(vNode, parentDom);
>> + }
>> + if (flags & 1024 /* Portal */) {
>> + mount(vNode.children, vNode.type, context, false);
>> + return (vNode.dom = mountText(createVoidVNode(), parentDom));
>> + }
>> + }
>> + function mountText(vNode, parentDom) {
>> + var dom = (vNode.dom = document.createTextNode(vNode.children));
>> + if (!isNull(parentDom)) {
>> + appendChild(parentDom, dom);
>> + }
>> + return dom;
>> + }
>> + function mountElement(vNode, parentDom, context, isSVG) {
>> + var flags = vNode.flags;
>> + var children = vNode.children;
>> + var props = vNode.props;
>> + var className = vNode.className;
>> + var ref = vNode.ref;
>> + var childFlags = vNode.childFlags;
>> + isSVG = isSVG || (flags & 32 /* SvgElement */) > 0;
>> + var dom = documentCreateElement(vNode.type, isSVG);
>> + vNode.dom = dom;
>> + if (!isNullOrUndef(className) && className !== '') {
>> + if (isSVG) {
>> + dom.setAttribute('class', className);
>> + }
>> + else {
>> + dom.className = className;
>> + }
>> + }
>> + if (!isNull(parentDom)) {
>> + appendChild(parentDom, dom);
>> + }
>> + if ((childFlags & 1 /* HasInvalidChildren */) === 0) {
>> + var childrenIsSVG = isSVG === true && vNode.type !== 'foreignObject';
>> + if (childFlags === 2 /* HasVNodeChildren */) {
>> + mount(children, dom, context, childrenIsSVG);
>> + }
>> + else if (childFlags & 12 /* MultipleChildren */) {
>> + mountArrayChildren(children, dom, context, childrenIsSVG);
>> + }
>> + }
>> + if (!isNull(props)) {
>> + mountProps(vNode, flags, props, dom, isSVG);
>> + }
>> + if (isFunction(ref)) {
>> + mountRef(dom, ref);
>> + }
>> + return dom;
>> + }
>> + function mountArrayChildren(children, dom, context, isSVG) {
>> + for (var i = 0, len = children.length; i < len; i++) {
>> + var child = children[i];
>> + if (!isNull(child.dom)) {
>> + children[i] = child = directClone(child);
>> + }
>> + mount(child, dom, context, isSVG);
>> + }
>> + }
>> + function mountComponent(vNode, parentDom, context, isSVG, isClass) {
>> + var dom;
>> + var type = vNode.type;
>> + var props = vNode.props || EMPTY_OBJ;
>> + var ref = vNode.ref;
>> + if (isClass) {
>> + var instance = createClassComponentInstance(vNode, type, props, context);
>> + vNode.dom = dom = mount(instance.$LI, null, instance.$CX, isSVG);
>> + mountClassComponentCallbacks(vNode, ref, instance);
>> + instance.$UPD = false;
>> + }
>> + else {
>> + var input = handleComponentInput(type(props, context), vNode);
>> + vNode.children = input;
>> + vNode.dom = dom = mount(input, null, context, isSVG);
>> + mountFunctionalComponentCallbacks(props, ref, dom);
>> + }
>> + if (!isNull(parentDom)) {
>> + appendChild(parentDom, dom);
>> + }
>> + return dom;
>> + }
>> + function createClassMountCallback(instance) {
>> + return function () {
>> + instance.componentDidMount();
>> + };
>> + }
>> + function mountClassComponentCallbacks(vNode, ref, instance) {
>> + if (isFunction(ref)) {
>> + ref(instance);
>> + }
>> + if (isFunction(instance.componentDidMount)) {
>> + LIFECYCLE.push(createClassMountCallback(instance));
>> + }
>> + }
>> + function createOnMountCallback(ref, dom, props) {
>> + return function () { return ref.onComponentDidMount(dom, props); };
>> + }
>> + function mountFunctionalComponentCallbacks(props, ref, dom) {
>> + if (!isNullOrUndef(ref)) {
>> + if (isFunction(ref.onComponentWillMount)) {
>> + ref.onComponentWillMount(props);
>> + }
>> + if (isFunction(ref.onComponentDidMount)) {
>> + LIFECYCLE.push(createOnMountCallback(ref, dom, props));
>> + }
>> + }
>> + }
>> + function mountRef(dom, value) {
>> + LIFECYCLE.push(function () { return value(dom); });
>> + }
>> +
>> + function hydrateComponent(vNode, dom, context, isSVG, isClass) {
>> + var type = vNode.type;
>> + var ref = vNode.ref;
>> + var props = vNode.props || EMPTY_OBJ;
>> + if (isClass) {
>> + var instance = createClassComponentInstance(vNode, type, props, context);
>> + var input = instance.$LI;
>> + hydrateVNode(input, dom, instance.$CX, isSVG);
>> + vNode.dom = input.dom;
>> + mountClassComponentCallbacks(vNode, ref, instance);
>> + instance.$UPD = false; // Mount finished allow going sync
>> + }
>> + else {
>> + var input$1 = handleComponentInput(type(props, context), vNode);
>> + hydrateVNode(input$1, dom, context, isSVG);
>> + vNode.children = input$1;
>> + vNode.dom = input$1.dom;
>> + mountFunctionalComponentCallbacks(props, ref, dom);
>> + }
>> + }
>> + function hydrateElement(vNode, dom, context, isSVG) {
>> + var children = vNode.children;
>> + var props = vNode.props;
>> + var className = vNode.className;
>> + var flags = vNode.flags;
>> + var ref = vNode.ref;
>> + isSVG = isSVG || (flags & 32 /* SvgElement */) > 0;
>> + if (dom.nodeType !== 1 || dom.tagName.toLowerCase() !== vNode.type) {
>> + var newDom = mountElement(vNode, null, context, isSVG);
>> + vNode.dom = newDom;
>> + replaceChild(dom.parentNode, newDom, dom);
>> + }
>> + else {
>> + vNode.dom = dom;
>> + var childNode = dom.firstChild;
>> + var childFlags = vNode.childFlags;
>> + if ((childFlags & 1 /* HasInvalidChildren */) === 0) {
>> + var nextSibling = null;
>> + while (childNode) {
>> + nextSibling = childNode.nextSibling;
>> + if (childNode.nodeType === 8) {
>> + if (childNode.data === '!') {
>> + dom.replaceChild(document.createTextNode(''), childNode);
>> + }
>> + else {
>> + dom.removeChild(childNode);
>> + }
>> + }
>> + childNode = nextSibling;
>> + }
>> + childNode = dom.firstChild;
>> + if (childFlags === 2 /* HasVNodeChildren */) {
>> + if (isNull(childNode)) {
>> + mount(children, dom, context, isSVG);
>> + }
>> + else {
>> + nextSibling = childNode.nextSibling;
>> + hydrateVNode(children, childNode, context, isSVG);
>> + childNode = nextSibling;
>> + }
>> + }
>> + else if (childFlags & 12 /* MultipleChildren */) {
>> + for (var i = 0, len = children.length; i < len; i++) {
>> + var child = children[i];
>> + if (isNull(childNode)) {
>> + mount(child, dom, context, isSVG);
>> + }
>> + else {
>> + nextSibling = childNode.nextSibling;
>> + hydrateVNode(child, childNode, context, isSVG);
>> + childNode = nextSibling;
>> + }
>> + }
>> + }
>> + // clear any other DOM nodes, there should be only a single entry for the root
>> + while (childNode) {
>> + nextSibling = childNode.nextSibling;
>> + dom.removeChild(childNode);
>> + childNode = nextSibling;
>> + }
>> + }
>> + else if (!isNull(dom.firstChild) && !isSamePropsInnerHTML(dom, props)) {
>> + dom.textContent = ''; // dom has content, but VNode has no children remove everything from DOM
>> + if (flags & 448 /* FormElement */) {
>> + // If element is form element, we need to clear defaultValue also
>> + dom.defaultValue = '';
>> + }
>> + }
>> + if (!isNull(props)) {
>> + mountProps(vNode, flags, props, dom, isSVG);
>> + }
>> + if (isNullOrUndef(className)) {
>> + if (dom.className !== '') {
>> + dom.removeAttribute('class');
>> + }
>> + }
>> + else if (isSVG) {
>> + dom.setAttribute('class', className);
>> + }
>> + else {
>> + dom.className = className;
>> + }
>> + if (isFunction(ref)) {
>> + mountRef(dom, ref);
>> + }
>> + }
>> + }
>> + function hydrateText(vNode, dom) {
>> + if (dom.nodeType !== 3) {
>> + var newDom = mountText(vNode, null);
>> + vNode.dom = newDom;
>> + replaceChild(dom.parentNode, newDom, dom);
>> + }
>> + else {
>> + var text = vNode.children;
>> + if (dom.nodeValue !== text) {
>> + dom.nodeValue = text;
>> + }
>> + vNode.dom = dom;
>> + }
>> + }
>> + function hydrateVNode(vNode, dom, context, isSVG) {
>> + var flags = vNode.flags;
>> + if (flags & 14 /* Component */) {
>> + hydrateComponent(vNode, dom, context, isSVG, (flags & 4 /* ComponentClass */) > 0);
>> + }
>> + else if (flags & 481 /* Element */) {
>> + hydrateElement(vNode, dom, context, isSVG);
>> + }
>> + else if (flags & 16 /* Text */) {
>> + hydrateText(vNode, dom);
>> + }
>> + else if (flags & 512 /* Void */) {
>> + vNode.dom = dom;
>> + }
>> + else {
>> + throwError();
>> + }
>> + }
>> + function hydrate(input, parentDom, callback) {
>> + var dom = parentDom.firstChild;
>> + if (!isNull(dom)) {
>> + if (!isInvalid(input)) {
>> + hydrateVNode(input, dom, EMPTY_OBJ, false);
>> + }
>> + dom = parentDom.firstChild;
>> + // clear any other DOM nodes, there should be only a single entry for the root
>> + while ((dom = dom.nextSibling)) {
>> + parentDom.removeChild(dom);
>> + }
>> + }
>> + if (LIFECYCLE.length > 0) {
>> + callAll(LIFECYCLE);
>> + }
>> + parentDom.$V = input;
>> + if (isFunction(callback)) {
>> + callback();
>> + }
>> + }
>> +
>> + function replaceWithNewNode(lastNode, nextNode, parentDom, context, isSVG) {
>> + unmount(lastNode);
>> + replaceChild(parentDom, mount(nextNode, null, context, isSVG), lastNode.dom);
>> + }
>> + function patch(lastVNode, nextVNode, parentDom, context, isSVG) {
>> + if (lastVNode !== nextVNode) {
>> + var nextFlags = nextVNode.flags | 0;
>> + if (lastVNode.flags !== nextFlags || nextFlags & 2048 /* ReCreate */) {
>> + replaceWithNewNode(lastVNode, nextVNode, parentDom, context, isSVG);
>> + }
>> + else if (nextFlags & 481 /* Element */) {
>> + patchElement(lastVNode, nextVNode, parentDom, context, isSVG);
>> + }
>> + else if (nextFlags & 14 /* Component */) {
>> + patchComponent(lastVNode, nextVNode, parentDom, context, isSVG, (nextFlags & 4 /* ComponentClass */) > 0);
>> + }
>> + else if (nextFlags & 16 /* Text */) {
>> + patchText(lastVNode, nextVNode, parentDom);
>> + }
>> + else if (nextFlags & 512 /* Void */) {
>> + nextVNode.dom = lastVNode.dom;
>> + }
>> + else {
>> + // Portal
>> + patchPortal(lastVNode, nextVNode, context);
>> + }
>> + }
>> + }
>> + function patchPortal(lastVNode, nextVNode, context) {
>> + var lastContainer = lastVNode.type;
>> + var nextContainer = nextVNode.type;
>> + var nextChildren = nextVNode.children;
>> + patchChildren(lastVNode.childFlags, nextVNode.childFlags, lastVNode.children, nextChildren, lastContainer, context, false);
>> + nextVNode.dom = lastVNode.dom;
>> + if (lastContainer !== nextContainer && !isInvalid(nextChildren)) {
>> + var node = nextChildren.dom;
>> + lastContainer.removeChild(node);
>> + nextContainer.appendChild(node);
>> + }
>> + }
>> + function patchElement(lastVNode, nextVNode, parentDom, context, isSVG) {
>> + var nextTag = nextVNode.type;
>> + if (lastVNode.type !== nextTag) {
>> + replaceWithNewNode(lastVNode, nextVNode, parentDom, context, isSVG);
>> + }
>> + else {
>> + var dom = lastVNode.dom;
>> + var nextFlags = nextVNode.flags;
>> + var lastProps = lastVNode.props;
>> + var nextProps = nextVNode.props;
>> + var isFormElement = false;
>> + var hasControlledValue = false;
>> + var nextPropsOrEmpty;
>> + nextVNode.dom = dom;
>> + isSVG = isSVG || (nextFlags & 32 /* SvgElement */) > 0;
>> + // inlined patchProps -- starts --
>> + if (lastProps !== nextProps) {
>> + var lastPropsOrEmpty = lastProps || EMPTY_OBJ;
>> + nextPropsOrEmpty = nextProps || EMPTY_OBJ;
>> + if (nextPropsOrEmpty !== EMPTY_OBJ) {
>> + isFormElement = (nextFlags & 448 /* FormElement */) > 0;
>> + if (isFormElement) {
>> + hasControlledValue = isControlledFormElement(nextPropsOrEmpty);
>> + }
>> + for (var prop in nextPropsOrEmpty) {
>> + var lastValue = lastPropsOrEmpty[prop];
>> + var nextValue = nextPropsOrEmpty[prop];
>> + if (lastValue !== nextValue) {
>> + patchProp(prop, lastValue, nextValue, dom, isSVG, hasControlledValue, lastVNode);
>> + }
>> + }
>> + }
>> + if (lastPropsOrEmpty !== EMPTY_OBJ) {
>> + for (var prop$1 in lastPropsOrEmpty) {
>> + // do not add a hasOwnProperty check here, it affects performance
>> + if (!nextPropsOrEmpty.hasOwnProperty(prop$1) && !isNullOrUndef(lastPropsOrEmpty[prop$1])) {
>> + patchProp(prop$1, lastPropsOrEmpty[prop$1], null, dom, isSVG, hasControlledValue, lastVNode);
>> + }
>> + }
>> + }
>> + }
>> + var lastChildren = lastVNode.children;
>> + var nextChildren = nextVNode.children;
>> + var nextRef = nextVNode.ref;
>> + var lastClassName = lastVNode.className;
>> + var nextClassName = nextVNode.className;
>> + if (lastChildren !== nextChildren) {
>> + patchChildren(lastVNode.childFlags, nextVNode.childFlags, lastChildren, nextChildren, dom, context, isSVG && nextTag !== 'foreignObject');
>> + }
>> + if (isFormElement) {
>> + processElement(nextFlags, nextVNode, dom, nextPropsOrEmpty, false, hasControlledValue);
>> + }
>> + // inlined patchProps -- ends --
>> + if (lastClassName !== nextClassName) {
>> + if (isNullOrUndef(nextClassName)) {
>> + dom.removeAttribute('class');
>> + }
>> + else if (isSVG) {
>> + dom.setAttribute('class', nextClassName);
>> + }
>> + else {
>> + dom.className = nextClassName;
>> + }
>> + }
>> + if (isFunction(nextRef) && lastVNode.ref !== nextRef) {
>> + mountRef(dom, nextRef);
>> + }
>> + }
>> + }
>> + function patchChildren(lastChildFlags, nextChildFlags, lastChildren, nextChildren, parentDOM, context, isSVG) {
>> + switch (lastChildFlags) {
>> + case 2 /* HasVNodeChildren */:
>> + switch (nextChildFlags) {
>> + case 2 /* HasVNodeChildren */:
>> + patch(lastChildren, nextChildren, parentDOM, context, isSVG);
>> + break;
>> + case 1 /* HasInvalidChildren */:
>> + remove(lastChildren, parentDOM);
>> + break;
>> + default:
>> + remove(lastChildren, parentDOM);
>> + mountArrayChildren(nextChildren, parentDOM, context, isSVG);
>> + break;
>> + }
>> + break;
>> + case 1 /* HasInvalidChildren */:
>> + switch (nextChildFlags) {
>> + case 2 /* HasVNodeChildren */:
>> + mount(nextChildren, parentDOM, context, isSVG);
>> + break;
>> + case 1 /* HasInvalidChildren */:
>> + break;
>> + default:
>> + mountArrayChildren(nextChildren, parentDOM, context, isSVG);
>> + break;
>> + }
>> + break;
>> + default:
>> + if (nextChildFlags & 12 /* MultipleChildren */) {
>> + var lastLength = lastChildren.length;
>> + var nextLength = nextChildren.length;
>> + // Fast path's for both algorithms
>> + if (lastLength === 0) {
>> + if (nextLength > 0) {
>> + mountArrayChildren(nextChildren, parentDOM, context, isSVG);
>> + }
>> + }
>> + else if (nextLength === 0) {
>> + removeAllChildren(parentDOM, lastChildren);
>> + }
>> + else if (nextChildFlags === 8 /* HasKeyedChildren */ && lastChildFlags === 8 /* HasKeyedChildren */) {
>> + patchKeyedChildren(lastChildren, nextChildren, parentDOM, context, isSVG, lastLength, nextLength);
>> + }
>> + else {
>> + patchNonKeyedChildren(lastChildren, nextChildren, parentDOM, context, isSVG, lastLength, nextLength);
>> + }
>> + }
>> + else if (nextChildFlags === 1 /* HasInvalidChildren */) {
>> + removeAllChildren(parentDOM, lastChildren);
>> + }
>> + else {
>> + removeAllChildren(parentDOM, lastChildren);
>> + mount(nextChildren, parentDOM, context, isSVG);
>> + }
>> + break;
>> + }
>> + }
>> + function updateClassComponent(instance, nextState, nextVNode, nextProps, parentDom, context, isSVG, force, fromSetState) {
>> + var lastState = instance.state;
>> + var lastProps = instance.props;
>> + nextVNode.children = instance;
>> + var renderOutput;
>> + if (instance.$UN) {
>> + return;
>> + }
>> + if (lastProps !== nextProps || nextProps === EMPTY_OBJ) {
>> + if (!fromSetState && isFunction(instance.componentWillReceiveProps)) {
>> + instance.$BR = true;
>> + instance.componentWillReceiveProps(nextProps, context);
>> + // If instance component was removed during its own update do nothing...
>> + if (instance.$UN) {
>> + return;
>> + }
>> + instance.$BR = false;
>> + }
>> + if (instance.$PSS) {
>> + nextState = combineFrom(nextState, instance.$PS);
>> + instance.$PSS = false;
>> + instance.$PS = null;
>> + }
>> + }
>> + /* Update if scu is not defined, or it returns truthy value or force */
>> + var hasSCU = Boolean(instance.shouldComponentUpdate);
>> + if (force || !hasSCU || (hasSCU && instance.shouldComponentUpdate(nextProps, nextState, context))) {
>> + if (isFunction(instance.componentWillUpdate)) {
>> + instance.$BS = true;
>> + instance.componentWillUpdate(nextProps, nextState, context);
>> + instance.$BS = false;
>> + }
>> + instance.props = nextProps;
>> + instance.state = nextState;
>> + instance.context = context;
>> + if (isFunction(options.beforeRender)) {
>> + options.beforeRender(instance);
>> + }
>> + renderOutput = instance.render(nextProps, nextState, context);
>> + if (isFunction(options.afterRender)) {
>> + options.afterRender(instance);
>> + }
>> + var didUpdate = renderOutput !== NO_OP;
>> + var childContext;
>> + if (isFunction(instance.getChildContext)) {
>> + childContext = instance.getChildContext();
>> + }
>> + if (isNullOrUndef(childContext)) {
>> + childContext = context;
>> + }
>> + else {
>> + childContext = combineFrom(context, childContext);
>> + }
>> + instance.$CX = childContext;
>> + if (didUpdate) {
>> + var lastInput = instance.$LI;
>> + var nextInput = (instance.$LI = handleComponentInput(renderOutput, nextVNode));
>> + patch(lastInput, nextInput, parentDom, childContext, isSVG);
>> + if (isFunction(instance.componentDidUpdate)) {
>> + instance.componentDidUpdate(lastProps, lastState);
>> + }
>> + }
>> + }
>> + else {
>> + instance.props = nextProps;
>> + instance.state = nextState;
>> + instance.context = context;
>> + }
>> + nextVNode.dom = instance.$LI.dom;
>> + }
>> + function patchComponent(lastVNode, nextVNode, parentDom, context, isSVG, isClass) {
>> + var nextType = nextVNode.type;
>> + var lastKey = lastVNode.key;
>> + var nextKey = nextVNode.key;
>> + if (lastVNode.type !== nextType || lastKey !== nextKey) {
>> + replaceWithNewNode(lastVNode, nextVNode, parentDom, context, isSVG);
>> + }
>> + else {
>> + var nextProps = nextVNode.props || EMPTY_OBJ;
>> + if (isClass) {
>> + var instance = lastVNode.children;
>> + instance.$UPD = true;
>> + instance.$V = nextVNode;
>> + updateClassComponent(instance, instance.state, nextVNode, nextProps, parentDom, context, isSVG, false, false);
>> + instance.$UPD = false;
>> + }
>> + else {
>> + var shouldUpdate = true;
>> + var lastProps = lastVNode.props;
>> + var nextHooks = nextVNode.ref;
>> + var nextHooksDefined = !isNullOrUndef(nextHooks);
>> + var lastInput = lastVNode.children;
>> + nextVNode.dom = lastVNode.dom;
>> + nextVNode.children = lastInput;
>> + if (nextHooksDefined && isFunction(nextHooks.onComponentShouldUpdate)) {
>> + shouldUpdate = nextHooks.onComponentShouldUpdate(lastProps, nextProps);
>> + }
>> + if (shouldUpdate !== false) {
>> + if (nextHooksDefined && isFunction(nextHooks.onComponentWillUpdate)) {
>> + nextHooks.onComponentWillUpdate(lastProps, nextProps);
>> + }
>> + var nextInput = nextType(nextProps, context);
>> + if (nextInput !== NO_OP) {
>> + nextInput = handleComponentInput(nextInput, nextVNode);
>> + patch(lastInput, nextInput, parentDom, context, isSVG);
>> + nextVNode.children = nextInput;
>> + nextVNode.dom = nextInput.dom;
>> + if (nextHooksDefined && isFunction(nextHooks.onComponentDidUpdate)) {
>> + nextHooks.onComponentDidUpdate(lastProps, nextProps);
>> + }
>> + }
>> + }
>> + else if (lastInput.flags & 14 /* Component */) {
>> + lastInput.parentVNode = nextVNode;
>> + }
>> + }
>> + }
>> + }
>> + function patchText(lastVNode, nextVNode, parentDom) {
>> + var nextText = nextVNode.children;
>> + var textNode = parentDom.firstChild;
>> + var dom;
>> + // Guard against external change on DOM node.
>> + if (isNull(textNode)) {
>> + parentDom.textContent = nextText;
>> + dom = parentDom.firstChild;
>> + }
>> + else {
>> + dom = lastVNode.dom;
>> + if (nextText !== lastVNode.children) {
>> + dom.nodeValue = nextText;
>> + }
>> + }
>> + nextVNode.dom = dom;
>> + }
>> + function patchNonKeyedChildren(lastChildren, nextChildren, dom, context, isSVG, lastChildrenLength, nextChildrenLength) {
>> + var commonLength = lastChildrenLength > nextChildrenLength ? nextChildrenLength : lastChildrenLength;
>> + var i = 0;
>> + var nextChild;
>> + var lastChild;
>> + for (; i < commonLength; i++) {
>> + nextChild = nextChildren[i];
>> + lastChild = lastChildren[i];
>> + if (nextChild.dom) {
>> + nextChild = nextChildren[i] = directClone(nextChild);
>> + }
>> + patch(lastChild, nextChild, dom, context, isSVG);
>> + lastChildren[i] = nextChild;
>> + }
>> + if (lastChildrenLength < nextChildrenLength) {
>> + for (i = commonLength; i < nextChildrenLength; i++) {
>> + nextChild = nextChildren[i];
>> + if (nextChild.dom) {
>> + nextChild = nextChildren[i] = directClone(nextChild);
>> + }
>> + mount(nextChild, dom, context, isSVG);
>> + }
>> + }
>> + else if (lastChildrenLength > nextChildrenLength) {
>> + for (i = commonLength; i < lastChildrenLength; i++) {
>> + remove(lastChildren[i], dom);
>> + }
>> + }
>> + }
>> + function patchKeyedChildren(a, b, dom, context, isSVG, aLength, bLength) {
>> + var aEnd = aLength - 1;
>> + var bEnd = bLength - 1;
>> + var i;
>> + var j = 0;
>> + var aNode = a[j];
>> + var bNode = b[j];
>> + var nextPos;
>> + // Step 1
>> + // tslint:disable-next-line
>> + outer: {
>> + // Sync nodes with the same key at the beginning.
>> + while (aNode.key === bNode.key) {
>> + if (bNode.dom) {
>> + b[j] = bNode = directClone(bNode);
>> + }
>> + patch(aNode, bNode, dom, context, isSVG);
>> + a[j] = bNode;
>> + j++;
>> + if (j > aEnd || j > bEnd) {
>> + break outer;
>> + }
>> + aNode = a[j];
>> + bNode = b[j];
>> + }
>> + aNode = a[aEnd];
>> + bNode = b[bEnd];
>> + // Sync nodes with the same key at the end.
>> + while (aNode.key === bNode.key) {
>> + if (bNode.dom) {
>> + b[bEnd] = bNode = directClone(bNode);
>> + }
>> + patch(aNode, bNode, dom, context, isSVG);
>> + a[aEnd] = bNode;
>> + aEnd--;
>> + bEnd--;
>> + if (j > aEnd || j > bEnd) {
>> + break outer;
>> + }
>> + aNode = a[aEnd];
>> + bNode = b[bEnd];
>> + }
>> + }
>> + if (j > aEnd) {
>> + if (j <= bEnd) {
>> + nextPos = bEnd + 1;
>> + var nextNode = nextPos < bLength ? b[nextPos].dom : null;
>> + while (j <= bEnd) {
>> + bNode = b[j];
>> + if (bNode.dom) {
>> + b[j] = bNode = directClone(bNode);
>> + }
>> + j++;
>> + insertOrAppend(dom, mount(bNode, null, context, isSVG), nextNode);
>> + }
>> + }
>> + }
>> + else if (j > bEnd) {
>> + while (j <= aEnd) {
>> + remove(a[j++], dom);
>> + }
>> + }
>> + else {
>> + var aStart = j;
>> + var bStart = j;
>> + var aLeft = aEnd - j + 1;
>> + var bLeft = bEnd - j + 1;
>> + var sources = [];
>> + for (i = 0; i < bLeft; i++) {
>> + sources.push(0);
>> + }
>> + // Keep track if its possible to remove whole DOM using textContent = '';
>> + var canRemoveWholeContent = aLeft === aLength;
>> + var moved = false;
>> + var pos = 0;
>> + var patched = 0;
>> + // When sizes are small, just loop them through
>> + if (bLength < 4 || (aLeft | bLeft) < 32) {
>> + for (i = aStart; i <= aEnd; i++) {
>> + aNode = a[i];
>> + if (patched < bLeft) {
>> + for (j = bStart; j <= bEnd; j++) {
>> + bNode = b[j];
>> + if (aNode.key === bNode.key) {
>> + sources[j - bStart] = i + 1;
>> + if (canRemoveWholeContent) {
>> + canRemoveWholeContent = false;
>> + while (i > aStart) {
>> + remove(a[aStart++], dom);
>> + }
>> + }
>> + if (pos > j) {
>> + moved = true;
>> + }
>> + else {
>> + pos = j;
>> + }
>> + if (bNode.dom) {
>> + b[j] = bNode = directClone(bNode);
>> + }
>> + patch(aNode, bNode, dom, context, isSVG);
>> + patched++;
>> + break;
>> + }
>> + }
>> + if (!canRemoveWholeContent && j > bEnd) {
>> + remove(aNode, dom);
>> + }
>> + }
>> + else if (!canRemoveWholeContent) {
>> + remove(aNode, dom);
>> + }
>> + }
>> + }
>> + else {
>> + var keyIndex = {};
>> + // Map keys by their index
>> + for (i = bStart; i <= bEnd; i++) {
>> + keyIndex[b[i].key] = i;
>> + }
>> + // Try to patch same keys
>> + for (i = aStart; i <= aEnd; i++) {
>> + aNode = a[i];
>> + if (patched < bLeft) {
>> + j = keyIndex[aNode.key];
>> + if (j !== void 0) {
>> + if (canRemoveWholeContent) {
>> + canRemoveWholeContent = false;
>> + while (i > aStart) {
>> + remove(a[aStart++], dom);
>> + }
>> + }
>> + bNode = b[j];
>> + sources[j - bStart] = i + 1;
>> + if (pos > j) {
>> + moved = true;
>> + }
>> + else {
>> + pos = j;
>> + }
>> + if (bNode.dom) {
>> + b[j] = bNode = directClone(bNode);
>> + }
>> + patch(aNode, bNode, dom, context, isSVG);
>> + patched++;
>> + }
>> + else if (!canRemoveWholeContent) {
>> + remove(aNode, dom);
>> + }
>> + }
>> + else if (!canRemoveWholeContent) {
>> + remove(aNode, dom);
>> + }
>> + }
>> + }
>> + // fast-path: if nothing patched remove all old and add all new
>> + if (canRemoveWholeContent) {
>> + removeAllChildren(dom, a);
>> + mountArrayChildren(b, dom, context, isSVG);
>> + }
>> + else {
>> + if (moved) {
>> + var seq = lis_algorithm(sources);
>> + j = seq.length - 1;
>> + for (i = bLeft - 1; i >= 0; i--) {
>> + if (sources[i] === 0) {
>> + pos = i + bStart;
>> + bNode = b[pos];
>> + if (bNode.dom) {
>> + b[pos] = bNode = directClone(bNode);
>> + }
>> + nextPos = pos + 1;
>> + insertOrAppend(dom, mount(bNode, null, context, isSVG), nextPos < bLength ? b[nextPos].dom : null);
>> + }
>> + else if (j < 0 || i !== seq[j]) {
>> + pos = i + bStart;
>> + bNode = b[pos];
>> + nextPos = pos + 1;
>> + insertOrAppend(dom, bNode.dom, nextPos < bLength ? b[nextPos].dom : null);
>> + }
>> + else {
>> + j--;
>> + }
>> + }
>> + }
>> + else if (patched !== bLeft) {
>> + // when patched count doesn't match b length we need to insert those new ones
>> + // loop backwards so we can use insertBefore
>> + for (i = bLeft - 1; i >= 0; i--) {
>> + if (sources[i] === 0) {
>> + pos = i + bStart;
>> + bNode = b[pos];
>> + if (bNode.dom) {
>> + b[pos] = bNode = directClone(bNode);
>> + }
>> + nextPos = pos + 1;
>> + insertOrAppend(dom, mount(bNode, null, context, isSVG), nextPos < bLength ? b[nextPos].dom : null);
>> + }
>> + }
>> + }
>> + }
>> + }
>> + }
>> + // https://en.wikipedia.org/wiki/Longest_increasing_subsequence
>> + function lis_algorithm(arr) {
>> + var p = arr.slice();
>> + var result = [0];
>> + var i;
>> + var j;
>> + var u;
>> + var v;
>> + var c;
>> + var len = arr.length;
>> + for (i = 0; i < len; i++) {
>> + var arrI = arr[i];
>> + if (arrI !== 0) {
>> + j = result[result.length - 1];
>> + if (arr[j] < arrI) {
>> + p[i] = j;
>> + result.push(i);
>> + continue;
>> + }
>> + u = 0;
>> + v = result.length - 1;
>> + while (u < v) {
>> + c = ((u + v) / 2) | 0;
>> + if (arr[result[c]] < arrI) {
>> + u = c + 1;
>> + }
>> + else {
>> + v = c;
>> + }
>> + }
>> + if (arrI < arr[result[u]]) {
>> + if (u > 0) {
>> + p[i] = result[u - 1];
>> + }
>> + result[u] = i;
>> + }
>> + }
>> + }
>> + u = result.length;
>> + v = result[u - 1];
>> + while (u-- > 0) {
>> + result[u] = v;
>> + v = p[v];
>> + }
>> + return result;
>> + }
>> +
>> + var documentBody = isBrowser ? document.body : null;
>> + function render(input, parentDom, callback) {
>> + if (input === NO_OP) {
>> + return;
>> + }
>> + var rootInput = parentDom.$V;
>> + if (isNullOrUndef(rootInput)) {
>> + if (!isInvalid(input)) {
>> + if (input.dom) {
>> + input = directClone(input);
>> + }
>> + if (isNull(parentDom.firstChild)) {
>> + mount(input, parentDom, EMPTY_OBJ, false);
>> + parentDom.$V = input;
>> + }
>> + else {
>> + hydrate(input, parentDom);
>> + }
>> + rootInput = input;
>> + }
>> + }
>> + else {
>> + if (isNullOrUndef(input)) {
>> + remove(rootInput, parentDom);
>> + parentDom.$V = null;
>> + }
>> + else {
>> + if (input.dom) {
>> + input = directClone(input);
>> + }
>> + patch(rootInput, input, parentDom, EMPTY_OBJ, false);
>> + rootInput = parentDom.$V = input;
>> + }
>> + }
>> + if (LIFECYCLE.length > 0) {
>> + callAll(LIFECYCLE);
>> + }
>> + if (isFunction(callback)) {
>> + callback();
>> + }
>> + if (isFunction(options.renderComplete)) {
>> + options.renderComplete(rootInput);
>> + }
>> + if (rootInput && rootInput.flags & 14 /* Component */) {
>> + return rootInput.children;
>> + }
>> + }
>> +
>> + var resolvedPromise = typeof Promise === 'undefined' ? null : Promise.resolve();
>> + // raf.bind(window) is needed to work around bug in IE10-IE11 strict mode (TypeError: Invalid calling object)
>> + var fallbackMethod = typeof requestAnimationFrame === 'undefined' ? setTimeout : requestAnimationFrame.bind(window);
>> + function nextTick(fn) {
>> + if (resolvedPromise) {
>> + return resolvedPromise.then(fn);
>> + }
>> + return fallbackMethod(fn);
>> + }
>> + function queueStateChanges(component, newState, callback, force) {
>> + if (isFunction(newState)) {
>> + newState = newState(component.state, component.props, component.context);
>> + }
>> + var pending = component.$PS;
>> + if (isNullOrUndef(pending)) {
>> + component.$PS = newState;
>> + }
>> + else {
>> + for (var stateKey in newState) {
>> + pending[stateKey] = newState[stateKey];
>> + }
>> + }
>> + if (!component.$PSS && !component.$BR) {
>> + if (!component.$UPD) {
>> + component.$PSS = true;
>> + component.$UPD = true;
>> + applyState(component, force, callback);
>> + component.$UPD = false;
>> + }
>> + else {
>> + // Async
>> + var queue = component.$QU;
>> + if (isNull(queue)) {
>> + queue = component.$QU = [];
>> + nextTick(promiseCallback(component, queue));
>> + }
>> + if (isFunction(callback)) {
>> + queue.push(callback);
>> + }
>> + }
>> + }
>> + else {
>> + component.$PSS = true;
>> + if (component.$BR && isFunction(callback)) {
>> + LIFECYCLE.push(callback.bind(component));
>> + }
>> + }
>> + }
>> + function promiseCallback(component, queue) {
>> + return function () {
>> + component.$QU = null;
>> + component.$UPD = true;
>> + applyState(component, false, function () {
>> + for (var i = 0, len = queue.length; i < len; i++) {
>> + queue[i].call(component);
>> + }
>> + });
>> + component.$UPD = false;
>> + };
>> + }
>> + function applyState(component, force, callback) {
>> + if (component.$UN) {
>> + return;
>> + }
>> + if (force || !component.$BR) {
>> + component.$PSS = false;
>> + var pendingState = component.$PS;
>> + var prevState = component.state;
>> + var nextState = combineFrom(prevState, pendingState);
>> + var props = component.props;
>> + var context = component.context;
>> + component.$PS = null;
>> + var vNode = component.$V;
>> + var lastInput = component.$LI;
>> + var parentDom = lastInput.dom && lastInput.dom.parentNode;
>> + updateClassComponent(component, nextState, vNode, props, parentDom, context, (vNode.flags & 32 /* SvgElement */) > 0, force, true);
>> + if (component.$UN) {
>> + return;
>> + }
>> + if ((component.$LI.flags & 1024 /* Portal */) === 0) {
>> + var dom = component.$LI.dom;
>> + while (!isNull((vNode = vNode.parentVNode))) {
>> + if ((vNode.flags & 14 /* Component */) > 0) {
>> + vNode.dom = dom;
>> + }
>> + }
>> + }
>> + if (LIFECYCLE.length > 0) {
>> + callAll(LIFECYCLE);
>> + }
>> + }
>> + else {
>> + component.state = component.$PS;
>> + component.$PS = null;
>> + }
>> + if (isFunction(callback)) {
>> + callback.call(component);
>> + }
>> + }
>> + var Component = function Component(props, context) {
>> + this.state = null;
>> + // Internal properties
>> + this.$BR = false; // BLOCK RENDER
>> + this.$BS = true; // BLOCK STATE
>> + this.$PSS = false; // PENDING SET STATE
>> + this.$PS = null; // PENDING STATE (PARTIAL or FULL)
>> + this.$LI = null; // LAST INPUT
>> + this.$V = null; // VNODE
>> + this.$UN = false; // UNMOUNTED
>> + this.$CX = null; // CHILDCONTEXT
>> + this.$UPD = true; // UPDATING
>> + this.$QU = null; // QUEUE
>> + /** @type {object} */
>> + this.props = props || EMPTY_OBJ;
>> + /** @type {object} */
>> + this.context = context || EMPTY_OBJ; // context should not be mutable
>> + };
>> + Component.prototype.forceUpdate = function forceUpdate (callback) {
>> + if (this.$UN) {
>> + return;
>> + }
>> + // Do not allow double render during force update
>> + queueStateChanges(this, {}, callback, true);
>> + };
>> + Component.prototype.setState = function setState (newState, callback) {
>> + if (this.$UN) {
>> + return;
>> + }
>> + if (!this.$BS) {
>> + queueStateChanges(this, newState, callback, false);
>> + }
>> + else {
>> + return;
>> + }
>> + };
>> + // tslint:disable-next-line:no-empty
>> + Component.prototype.render = function render (nextProps, nextState, nextContext) { };
>> +
>> +
>> +
>> + var JSX = /*#__PURE__*/Object.freeze({
>> +
>> + });
>> +
>> + var ENTER = 12;
>> + var LEFT_ARROW = 37;
>> + var UP_ARROW = 38;
>> + var RIGHT_ARROW = 39;
>> + var DOWN_ARROW = 40;
>> +
>> + /**
>> + * Helper method to create an object for a new node.
>> + *
>> + * @private
>> + * @return {void}
>> + */
>> + function blankNode() {
>> + return {
>> + text: 'New Node',
>> + itree: {
>> + state: {
>> + editing: true,
>> + focused: true
>> + }
>> + }
>> + };
>> + }
>> +
>> + var classCallCheck = function (instance, Constructor) {
>> + if (!(instance instanceof Constructor)) {
>> + throw new TypeError("Cannot call a class as a function");
>> + }
>> + };
>> +
>> + var createClass = function () {
>> + function defineProperties(target, props) {
>> + for (var i = 0; i < props.length; i++) {
>> + var descriptor = props[i];
>> + descriptor.enumerable = descriptor.enumerable || false;
>> + descriptor.configurable = true;
>> + if ("value" in descriptor) descriptor.writable = true;
>> + Object.defineProperty(target, descriptor.key, descriptor);
>> + }
>> + }
>> +
>> + return function (Constructor, protoProps, staticProps) {
>> + if (protoProps) defineProperties(Constructor.prototype, protoProps);
>> + if (staticProps) defineProperties(Constructor, staticProps);
>> + return Constructor;
>> + };
>> + }();
>> +
>> + var _extends = Object.assign || function (target) {
>> + for (var i = 1; i < arguments.length; i++) {
>> + var source = arguments[i];
>> +
>> + for (var key in source) {
>> + if (Object.prototype.hasOwnProperty.call(source, key)) {
>> + target[key] = source[key];
>> + }
>> + }
>> + }
>> +
>> + return target;
>> + };
>> +
>> + var inherits = function (subClass, superClass) {
>> + if (typeof superClass !== "function" && superClass !== null) {
>> + throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
>> + }
>> +
>> + subClass.prototype = Object.create(superClass && superClass.prototype, {
>> + constructor: {
>> + value: subClass,
>> + enumerable: false,
>> + writable: true,
>> + configurable: true
>> + }
>> + });
>> + if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
>> + };
>> +
>> + var possibleConstructorReturn = function (self, call) {
>> + if (!self) {
>> + throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
>> + }
>> +
>> + return call && (typeof call === "object" || typeof call === "function") ? call : self;
>> + };
>> +
>> + var Checkbox = function (_Component) {
>> + inherits(Checkbox, _Component);
>> +
>> + function Checkbox() {
>> + classCallCheck(this, Checkbox);
>> + return possibleConstructorReturn(this, (Checkbox.__proto__ || Object.getPrototypeOf(Checkbox)).apply(this, arguments));
>> + }
>> +
>> + createClass(Checkbox, [{
>> + key: 'click',
>> + value: function click(event) {
>> + var _this2 = this;
>> +
>> + // Define our default handler
>> + var handler = function handler() {
>> + _this2.props.node.toggleCheck();
>> + };
>> +
>> + // Emit an event with our forwarded MouseEvent, node, and default handler
>> + this.props.dom._tree.emit('node.click', event, this.props.node, handler);
>> +
>> + // Unless default is prevented, auto call our default handler
>> + if (!event.treeDefaultPrevented) {
>> + handler();
>> + }
>> + }
>> + }, {
>> + key: 'render',
>> + value: function render$$1() {
>> + return createVNode(64, 'input', null, null, 1, {
>> + 'checked': this.props.checked,
>> + 'indeterminate': this.props.indeterminate,
>> + 'onClick': this.click.bind(this),
>> + 'type': 'checkbox'
>> + });
>> + }
>> + }]);
>> + return Checkbox;
>> + }(Component);
>> +
>> + /**
>> + * Utility method for parsing and merging custom class names.
>> + *
>> + * @private
>> + * @param {TreeNode} node Node object.
>> + * @param {string} type 'li' or 'a' attribute object type.
>> + * @return {Array} Processed class names
>> + */
>> + var classlist = (function (node) {
>> + var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'li';
>> +
>> + var nodeAttrs = node.itree[type].attributes;
>> + var classNames = [];
>> +
>> + // Append any custom class names
>> + var customClasses = nodeAttrs.class || nodeAttrs.className;
>> +
>> + // Support callbacks
>> + if (_.isFunction(customClasses)) {
>> + customClasses = customClasses(node);
>> + }
>> +
>> + // Convert custom classes into an array and concat
>> + if (!_.isEmpty(customClasses)) {
>> + if (_.isString(customClasses)) {
>> + // Support periods for backwards compat with hyperscript-formatted classes
>> + classNames = classNames.concat(customClasses.split(/[\s\.]+/));
>> + } else if (_.isArray(customClasses)) {
>> + classNames = classNames.concat(customClasses);
>> + }
>> + }
>> +
>> + return classNames;
>> + });
>> +
>> + var EditToolbar = function (_Component) {
>> + inherits(EditToolbar, _Component);
>> +
>> + function EditToolbar() {
>> + classCallCheck(this, EditToolbar);
>> + return possibleConstructorReturn(this, (EditToolbar.__proto__ || Object.getPrototypeOf(EditToolbar)).apply(this, arguments));
>> + }
>> +
>> + createClass(EditToolbar, [{
>> + key: 'shouldComponentUpdate',
>> + value: function shouldComponentUpdate() {
>> + return false;
>> + }
>> + }, {
>> + key: 'add',
>> + value: function add(event) {
>> + event.stopPropagation();
>> +
>> + this.props.node.addChild(blankNode());
>> + this.props.node.expand();
>> + }
>> + }, {
>> + key: 'edit',
>> + value: function edit(event) {
>> + event.stopPropagation();
>> +
>> + this.props.node.toggleEditing();
>> + }
>> + }, {
>> + key: 'remove',
>> + value: function remove(event) {
>> + event.stopPropagation();
>> +
>> + this.props.node.remove();
>> + }
>> + }, {
>> + key: 'render',
>> + value: function render$$1() {
>> + var buttons = [];
>> +
>> + if (this.props.dom._tree.config.editing.edit) {
>> + buttons.push(createVNode(1, 'a', 'btn icon icon-pencil', null, 1, {
>> + 'onclick': this.edit.bind(this),
>> + 'title': 'Edit this node'
>> + }));
>> + }
>> +
>> + if (this.props.dom._tree.config.editing.add) {
>> + buttons.push(createVNode(1, 'a', 'btn icon icon-plus', null, 1, {
>> + 'onclick': this.add.bind(this),
>> + 'title': 'Add a child node'
>> + }));
>> + }
>> +
>> + if (this.props.dom._tree.config.editing.remove) {
>> + buttons.push(createVNode(1, 'a', 'btn icon icon-minus', null, 1, {
>> + 'onclick': this.remove.bind(this),
>> + 'title': 'Remove this node'
>> + }));
>> + }
>> +
>> + return createVNode(1, 'span', 'btn-group', buttons, 0);
>> + }
>> + }]);
>> + return EditToolbar;
>> + }(Component);
>> +
>> + var EmptyList = function (_Component) {
>> + inherits(EmptyList, _Component);
>> +
>> + function EmptyList() {
>> + classCallCheck(this, EmptyList);
>> + return possibleConstructorReturn(this, (EmptyList.__proto__ || Object.getPrototypeOf(EmptyList)).apply(this, arguments));
>> + }
>> +
>> + createClass(EmptyList, [{
>> + key: 'render',
>> + value: function render$$1() {
>> + return createVNode(1, 'ol', null, createVNode(1, 'li', 'leaf', createVNode(1, 'span', 'title icon icon-file-empty empty', this.props.text, 0), 2), 2);
>> + }
>> + }]);
>> + return EmptyList;
>> + }(Component);
>> +
>> + /**
>> + * Compares all keys on the given state. Returns true if any difference exists.
>> + *
>> + * @private
>> + * @category DOM
>> + * @param {object} previousState Previous state.
>> + * @param {object} currentState Current state.
>> + * @return {boolean} Difference was found.
>> + */
>> + function stateComparator(previousState, currentState) {
>> + // Always treat dirty flag as a state difference
>> + var isDirty = currentState.dirty || false;
>> +
>> + if (!isDirty) {
>> + _.each(Object.keys(currentState), function (key) {
>> + if (key !== 'dirty' && currentState[key] !== previousState[key]) {
>> + isDirty = true;
>> + return false;
>> + }
>> + });
>> + }
>> +
>> + return isDirty;
>> + }
>> +
>> + var EditForm = function (_Component) {
>> + inherits(EditForm, _Component);
>> +
>> + function EditForm(props) {
>> + classCallCheck(this, EditForm);
>> +
>> + var _this = possibleConstructorReturn(this, (EditForm.__proto__ || Object.getPrototypeOf(EditForm)).call(this, props));
>> +
>> + _this.state = _this.getStateFromNodes(props.node);
>> + return _this;
>> + }
>> +
>> + createClass(EditForm, [{
>> + key: 'getStateFromNodes',
>> + value: function getStateFromNodes(node) {
>> + return {
>> + text: node.text
>> + };
>> + }
>> + }, {
>> + key: 'componentWillReceiveProps',
>> + value: function componentWillReceiveProps(data) {
>> + this.setState(this.getStateFromNodes(data.node));
>> + }
>> + }, {
>> + key: 'shouldComponentUpdate',
>> + value: function shouldComponentUpdate(nextProps, nextState) {
>> + return stateComparator(this.state, nextState);
>> + }
>> + }, {
>> + key: 'click',
>> + value: function click(event) {
>> + var _this2 = this;
>> +
>> + // Define our default handler
>> + var handler = function handler() {
>> + _this2.props.node.toggleCheck();
>> + };
>> +
>> + // Emit an event with our forwarded MouseEvent, node, and default handler
>> + this.props.dom._tree.emit('node.click', event, this.props.node, handler);
>> +
>> + // Unless default is prevented, auto call our default handler
>> + if (!event.treeDefaultPrevented) {
>> + handler();
>> + }
>> + }
>> + }, {
>> + key: 'keypress',
>> + value: function keypress(event) {
>> + if (event.which === ENTER) {
>> + return this.save();
>> + }
>> + }
>> + }, {
>> + key: 'input',
>> + value: function input(event) {
>> + this.setState({
>> + text: event.target.value
>> + });
>> + }
>> + }, {
>> + key: 'cancel',
>> + value: function cancel(event) {
>> + if (event) {
>> + event.stopPropagation();
>> + }
>> +
>> + this.props.node.toggleEditing();
>> + }
>> + }, {
>> + key: 'save',
>> + value: function save(event) {
>> + if (event) {
>> + event.stopPropagation();
>> + }
>> +
>> + // Cache current text
>> + var originalText = this.props.node.text;
>> + var newText = this.ref.value;
>> +
>> + // Update the text
>> + this.props.node.set('text', newText);
>> +
>> + // Disable editing and update
>> + this.props.node.state('editing', false);
>> + this.props.node.markDirty();
>> + this.props.dom._tree.applyChanges();
>> +
>> + if (originalText !== newText) {
>> + this.props.dom._tree.emit('node.edited', this.props.node, originalText, newText);
>> + }
>> + }
>> + }, {
>> + key: 'render',
>> + value: function render$$1() {
>> + var _this3 = this;
>> +
>> + return createVNode(1, 'form', null, [createVNode(64, 'input', null, null, 1, {
>> + 'onClick': function onClick(event) {
>> + return event.stopPropagation;
>> + },
>> + 'onInput': this.input.bind(this),
>> + 'onKeyPress': this.keypress.bind(this),
>> + 'value': this.state.text
>> + }, null, function (elem) {
>> + return _this3.ref = elem;
>> + }), createVNode(1, 'span', 'btn-group', [createVNode(1, 'button', 'btn icon icon-check', null, 1, {
>> + 'onClick': this.save.bind(this),
>> + 'title': 'Save',
>> + 'type': 'button'
>> + }), createVNode(1, 'button', 'btn icon icon-cross', null, 1, {
>> + 'onClick': this.cancel.bind(this),
>> + 'title': 'Cancel',
>> + 'type': 'button'
>> + })], 4)], 4, {
>> + 'onsubmit': function onsubmit(event) {
>> + return event.preventDefault;
>> + }
>> + });
>> + }
>> + }]);
>> + return EditForm;
>> + }(Component);
>> +
>> + var NodeAnchor = function (_Component) {
>> + inherits(NodeAnchor, _Component);
>> +
>> + function NodeAnchor() {
>> + classCallCheck(this, NodeAnchor);
>> + return possibleConstructorReturn(this, (NodeAnchor.__proto__ || Object.getPrototypeOf(NodeAnchor)).apply(this, arguments));
>> + }
>> +
>> + createClass(NodeAnchor, [{
>> + key: 'blur',
>> + value: function blur() {
>> + this.props.node.blur();
>> + }
>> + }, {
>> + key: 'click',
>> + value: function click(event) {
>> + var _this2 = this;
>> +
>> + var _props = this.props,
>> + node = _props.node,
>> + dom = _props.dom;
>> +
>> + // Define our default handler
>> +
>> + var handler = function handler() {
>> + event.preventDefault();
>> +
>> + if (_this2.props.editing) {
>> + return;
>> + }
>> +
>> + if (event.metaKey || event.ctrlKey || event.shiftKey) {
>> + dom._tree.disableDeselection();
>> + }
>> +
>> + if (event.shiftKey) {
>> + dom.clearSelection();
>> +
>> + var selected = dom._tree.lastSelectedNode();
>> + if (selected) {
>> + dom._tree.selectBetween.apply(dom._tree, dom._tree.boundingNodes(selected, node));
>> + }
>> + }
>> +
>> + if (node.selected()) {
>> + if (!dom._tree.config.selection.disableDirectDeselection) {
>> + node.deselect();
>> + }
>> + } else {
>> + node.select();
>> + }
>> +
>> + dom._tree.enableDeselection();
>> + };
>> +
>> + // Emit an event with our forwarded MouseEvent, node, and default handler
>> + dom._tree.emit('node.click', event, node, handler);
>> +
>> + // Unless default is prevented, auto call our default handler
>> + if (!event.treeDefaultPrevented) {
>> + handler();
>> + }
>> + }
>> + }, {
>> + key: 'contextMenu',
>> + value: function contextMenu(event) {
>> + var _props2 = this.props,
>> + node = _props2.node,
>> + dom = _props2.dom;
>> +
>> +
>> + dom._tree.emit('node.contextmenu', event, node);
>> + }
>> + }, {
>> + key: 'dblclick',
>> + value: function dblclick(event) {
>> + var _props3 = this.props,
>> + node = _props3.node,
>> + dom = _props3.dom;
>> +
>> + // Define our default handler
>> +
>> + var handler = function handler() {
>> + // Clear text selection which occurs on double click
>> + dom.clearSelection();
>> +
>> + node.toggleCollapse();
>> + };
>> +
>> + // Emit an event with our forwarded MouseEvent, node, and default handler
>> + dom._tree.emit('node.dblclick', event, node, handler);
>> +
>> + // Unless default is prevented, auto call our default handler
>> + if (!event.treeDefaultPrevented) {
>> + handler();
>> + }
>> + }
>> + }, {
>> + key: 'focus',
>> + value: function focus(event) {
>> + this.props.node.focus(event);
>> + }
>> + }, {
>> + key: 'mousedown',
>> + value: function mousedown() {
>> + if (this.props.dom.isDragDropEnabled) {
>> + this.props.dom.isMouseHeld = true;
>> + }
>> + }
>> + }, {
>> + key: 'render',
>> + value: function render$$1() {
>> + var node = this.props.node;
>> + var attributes = _.clone(node.itree.a.attributes) || {};
>> + attributes.tabindex = 1;
>> + attributes.unselectable = 'on';
>> +
>> + // Build and set classnames
>> + var classNames = classlist(node, 'a').concat(['title', 'icon']);
>> +
>> + // Royale - Allow icon + checkbox
>> + //if (!this.props.dom.config.showCheckboxes) {
>> + var folder = this.props.expanded ? 'icon-folder-open' : 'icon-folder';
>> + classNames.push(node.itree.icon || (this.props.hasOrWillHaveChildren ? folder : 'icon-file-empty'));
>> + //}
>> +
>> + attributes.class = attributes.className = classNames.join(' ');
>> +
>> + var content = node.text;
>> + if (node.editing()) {
>> + content = createComponentVNode(2, EditForm, {
>> + 'dom': this.props.dom,
>> + 'node': this.props.node
>> + });
>> + }
>> +
>> + return normalizeProps(createVNode(1, 'a', null, content, 0, _extends({
>> + 'data-uid': node.id,
>> + 'onBlur': this.blur.bind(this),
>> + 'onClick': this.click.bind(this),
>> + 'onContextMenu': this.contextMenu.bind(this),
>> + 'onDblClick': this.dblclick.bind(this),
>> + 'onFocus': this.focus.bind(this),
>> + 'onMouseDown': this.mousedown.bind(this)
>> + }, attributes)));
>> + }
>> + }]);
>> + return NodeAnchor;
>> + }(Component);
>> +
>> + var ToggleAnchor = function (_Component) {
>> + inherits(ToggleAnchor, _Component);
>> +
>> + function ToggleAnchor() {
>> + classCallCheck(this, ToggleAnchor);
>> + return possibleConstructorReturn(this, (ToggleAnchor.__proto__ || Object.getPrototypeOf(ToggleAnchor)).apply(this, arguments));
>> + }
>> +
>> + createClass(ToggleAnchor, [{
>> + key: 'className',
>> + value: function className() {
>> + return 'toggle icon ' + (this.props.collapsed ? 'icon-expand' : 'icon-collapse');
>> + }
>> + }, {
>> + key: 'render',
>> + value: function render$$1() {
>> + return createVNode(1, 'a', this.className(), null, 1, {
>> + 'onClick': this.props.node.toggleCollapse.bind(this.props.node)
>> + });
>> + }
>> + }]);
>> + return ToggleAnchor;
>> + }(Component);
>> +
>> + var ListItem = function (_Component) {
>> + inherits(ListItem, _Component);
>> +
>> + function ListItem(props) {
>> + classCallCheck(this, ListItem);
>> +
>> + var _this = possibleConstructorReturn(this, (ListItem.__proto__ || Object.getPrototypeOf(ListItem)).call(this, props));
>> +
>> + _this.state = _this.stateFromNode(props.node);
>> + return _this;
>> + }
>> +
>> + createClass(ListItem, [{
>> + key: 'stateFromNode',
>> + value: function stateFromNode(node) {
>> + return {
>> + dirty: node.itree.dirty
>> + };
>> + }
>> + }, {
>> + key: 'componentWillReceiveProps',
>> + value: function componentWillReceiveProps(data) {
>> + this.setState(this.stateFromNode(data.node));
>> + }
>> + }, {
>> + key: 'shouldComponentUpdate',
>> + value: function shouldComponentUpdate(nextProps, nextState) {
>> + return nextState.dirty;
>> + }
>> + }, {
>> + key: 'getAttributes',
>> + value: function getAttributes() {
>> + var node = this.props.node;
>> + var attributes = _.clone(node.itree.li.attributes) || {};
>> + attributes.class = attributes.className = this.getClassNames();
>> +
>> + // Force internal-use attributes
>> + attributes['data-uid'] = node.id;
>> +
>> + // Allow drag and drop?
>> + if (this.props.dom.config.dragAndDrop.enabled) {
>> + attributes.draggable = node.state('draggable');
>> + attributes.onDragEnd = this.onDragEnd.bind(this);
>> + attributes.onDragEnter = this.onDragEnter.bind(this);
>> + attributes.onDragLeave = this.onDragLeave.bind(this);
>> + attributes.onDragStart = this.onDragStart.bind(this);
>> +
>> + // Are we a valid drop target?
>> + if (node.state('drop-target')) {
>> + attributes.onDragOver = this.onDragOver.bind(this);
>> + attributes.onDrop = this.onDrop.bind(this);
>> + } else {
>> + // Setting to null forces removal of prior listeners
>> + attributes.onDragOver = null;
>> + attributes.onDrop = null;
>> + }
>> + }
>> +
>> + return attributes;
>> + }
>> + }, {
>> + key: 'getClassNames',
>> + value: function getClassNames() {
>> + var node = this.props.node;
>> + var state = node.itree.state;
>> +
>> + // Set state classnames
>> + var classNames = classlist(node);
>> +
>> + // https://jsperf.com/object-keys-vs-each
>> + _.each(Object.keys(state), function (key) {
>> + if (state[key]) {
>> + classNames.push(key);
>> + }
>> + });
>> +
>> + // Inverse and additional classes
>> + if (!node.hidden() && node.removed()) {
>> + classNames.push('hidden');
>> + }
>> +
>> + if (node.expanded()) {
>> + classNames.push('expanded');
>> + }
>> +
>> + classNames.push(node.hasOrWillHaveChildren() ? 'folder' : 'leaf');
>> +
>> + return classNames.join(' ');
>> + }
>> + }, {
>> + key: 'getTargetDirection',
>> + value: function getTargetDirection(event, elem) {
>> + var clientY = event.clientY;
>> + var targetRect = elem.getBoundingClientRect();
>> +
>> + var yThresholdForAbove = targetRect.top + targetRect.height / 3;
>> + var yThresholdForBelow = targetRect.bottom - targetRect.height / 3;
>> +
>> + var dir = 0;
>> +
>> + if (clientY <= yThresholdForAbove) {
>> + dir = -1;
>> + } else if (clientY >= yThresholdForBelow) {
>> + dir = 1;
>> + }
>> +
>> + return dir;
>> + }
>> + }, {
>> + key: 'onDragStart',
>> + value: function onDragStart(event) {
>> + event.stopPropagation();
>> +
>> + event.dataTransfer.effectAllowed = 'move';
>> + event.dataTransfer.dropEffect = 'move';
>> +
>> + var node = this.props.node;
>> +
>> + // Due to "protected" mode we can't access any DataTransfer data
>> + // during the dragover event, yet we still need to validate this node with the target
>> + this.props.dom._activeDragNode = node;
>> +
>> + event.dataTransfer.setData('treeId', node.tree().id);
>> + event.dataTransfer.setData('nodeId', node.id);
>> +
>> + // Disable self and children as drop targets
>> + node.state('drop-target', false);
>> +
>> + if (node.hasChildren()) {
>> + node.children.stateDeep('drop-target', false);
>> + }
>> +
>> + // If we should validate all nodes as potential drop targets on drag start
>> + if (this.props.dom.config.dragAndDrop.validateOn === 'dragstart') {
>> + var validator = this.props.dom.config.dragAndDrop.validate;
>> + var validateCallable = _.isFunction(validator);
>> +
>> + // Validate with a custom recursor because a return of "false"
>> + // should mean "do not descend" rather than "stop iterating"
>> + var recursor = function recursor(obj, iteratee) {
>> + if (InspireTree.isTreeNodes(obj)) {
>> + _.each(obj, function (n) {
>> + recursor(n, iteratee);
>> + });
>> + } else if (InspireTree.isTreeNode(obj)) {
>> + if (iteratee(obj) !== false && obj.hasChildren()) {
>> + recursor(obj.children, iteratee);
>> + }
>> + }
>> + };
>> +
>> + this.props.dom._tree.batch();
>> +
>> + recursor(this.props.dom._tree.model, function (n) {
>> + var valid = n.id !== node.id;
>> +
>> + // Ensure target node isn't a descendant
>> + if (valid) {
>> + valid = !n.hasAncestor(node);
>> + }
>> +
>> + // If still valid and user has additional validation...
>> + if (valid && validateCallable) {
>> + valid = validator(node, n);
>> + }
>> +
>> + // Set state
>> + n.state('drop-target', valid);
>> +
>> + return valid;
>> + });
>> +
>> + this.props.dom._tree.end();
>> + }
>> +
>> + this.props.dom._tree.emit('node.dragstart', event);
>> + }
>> + }, {
>> + key: 'onDragEnd',
>> + value: function onDragEnd(event) {
>> + event.preventDefault();
>> + event.stopPropagation();
>> +
>> + this.unhighlightTarget();
>> +
>> + this.props.dom._tree.emit('node.dragend', event);
>> + }
>> + }, {
>> + key: 'onDragEnter',
>> + value: function onDragEnter(event) {
>> + event.preventDefault();
>> + event.stopPropagation();
>> +
>> + // Nodes already within parents don't trigger enter/leave events on their ancestors
>> + this.props.node.recurseUp(this.unhighlightTarget);
>> +
>> + // Set drag target state
>> + this.props.node.state('drag-targeting', true);
>> +
>> + this.props.dom._tree.emit('node.dragenter', event);
>> + }
>> + }, {
>> + key: 'onDragLeave',
>> + value: function onDragLeave(event) {
>> + event.preventDefault();
>> + event.stopPropagation();
>> +
>> + this.unhighlightTarget();
>> +
>> + this.props.dom._tree.emit('node.dragleave', event);
>> + }
>> + }, {
>> + key: 'onDragOver',
>> + value: function onDragOver(event) {
>> + event.preventDefault();
>> + event.stopPropagation();
>> +
>> + var dragNode = this.props.dom._activeDragNode;
>> + var node = this.props.node;
>> +
>> + // Event.target doesn't always match the element we need to calculate
>> + var dir = this.getTargetDirection(event, node.itree.ref.querySelector('a'));
>> +
>> + if (this.props.dom.config.dragAndDrop.validateOn === 'dragover') {
>> + // Validate drop target
>> + var validator = this.props.dom.config.dragAndDrop.validate;
>> + var validateCallable = _.isFunction(validator);
>> +
>> + var valid = dragNode.id !== node.id;
>> +
>> + if (valid) {
>> + valid = !node.hasAncestor(dragNode);
>> + }
>> +
>> + if (valid && validateCallable) {
>> + valid = validator(dragNode, node, dir);
>> + }
>> +
>> + // Set state
>> + node.state('drop-target', valid);
>> + this.props.dom._tree.applyChanges();
>> +
>> + if (!valid) {
>> + return;
>> + }
>> + }
>> +
>> + // Set drag target states
>> + this.props.dom._tree.batch();
>> + node.state('drag-targeting', true);
>> + node.state('drag-targeting-above', dir === -1);
>> + node.state('drag-targeting-below', dir === 1);
>> + node.state('drag-targeting-insert', dir === 0);
>> + this.props.dom._tree.end();
>> +
>> + this.props.dom._tree.emit('node.dragover', event, dir);
>> + }
>> + }, {
>> + key: 'onDrop',
>> + value: function onDrop(event) {
>> + event.preventDefault();
>> + event.stopPropagation();
>> +
>> + // Always unhighlight target
>> + this.unhighlightTarget();
>> +
>> + // Get the data from our transfer
>> + var treeId = event.dataTransfer.getData('treeId');
>> + var nodeId = event.dataTransfer.getData('nodeId');
>> +
>> + // Find the drop target
>> + var targetNode = this.props.node;
>> +
>> + // Clear cache
>> + this.props.dom._activeDragNode = null;
>> +
>> + // Determine the insert direction (calc before removing source node, which modifies the DOM)
>> + var dir = this.getTargetDirection(event, event.target);
>> +
>> + var sourceTree = void 0;
>> + if (treeId === this.props.dom._tree.id) {
>> + sourceTree = this.props.dom._tree;
>> + } else if (treeId) {
>> + sourceTree = document.querySelector('[data-uid="' + treeId + '"]').inspireTree;
>> + }
>> +
>> + // Only source/handle node if it's a node that was dropped
>> + var newNode = void 0,
>> + newIndex = void 0;
>> + if (sourceTree) {
>> + var node = sourceTree.node(nodeId);
>> + node.state('drop-target', true);
>> +
>> + var exported = node.remove(true);
>> +
>> + // Get the index of the target node
>> + var targetIndex = targetNode.context().indexOf(targetNode);
>> +
>> + if (dir === 0) {
>> + // Add as a child
>> + newNode = targetNode.addChild(exported);
>> +
>> + // Cache the new index
>> + newIndex = targetNode.children.indexOf(newNode);
>> +
>> + // Auto-expand
>> + targetNode.expand();
>> + } else {
>> + // Determine the new index
>> + newIndex = dir === 1 ? ++targetIndex : targetIndex;
>> +
>> + // Insert and cache the node
>> + newNode = targetNode.context().insertAt(newIndex, exported);
>> + }
>> + }
>> +
>> + this.props.dom._tree.emit('node.drop', event, newNode, targetNode, newIndex);
>> + }
>> + }, {
>> + key: 'unhighlightTarget',
>> + value: function unhighlightTarget(node) {
>> + (node || this.props.node).states(['drag-targeting', 'drag-targeting-above', 'drag-targeting-below', 'drag-targeting-insert'], false);
>> + }
>> + }, {
>> + key: 'renderCheckbox',
>> + value: function renderCheckbox() {
>> + var node = this.props.node;
>> +
>> + if (this.props.dom.config.showCheckboxes) {
>> + return createComponentVNode(2, Checkbox, {
>> + 'checked': node.checked(),
>> + 'dom': this.props.dom,
>> + 'indeterminate': node.indeterminate(),
>> + 'node': node
>> + });
>> + }
>> + }
>> + }, {
>> + key: 'renderChildren',
>> + value: function renderChildren() {
>> + var _props = this.props,
>> + node = _props.node,
>> + dom = _props.dom;
>> +
>> +
>> + if (node.hasChildren()) {
>> + var nodes = node.children;
>> + var loading = dom.loading;
>> + var pagination = nodes.pagination();
>> +
>> + return createComponentVNode(2, List, {
>> + 'context': node,
>> + 'dom': dom,
>> + 'limit': pagination.limit,
>> + 'loading': loading,
>> + 'nodes': nodes,
>> + 'total': pagination.total
>> + });
>> + } else if (this.props.dom.isDynamic && node.children) {
>> + if (!node.hasLoadedChildren()) {
>> + return createComponentVNode(2, EmptyList, {
>> + 'text': 'Loading...'
>> + });
>> + } else {
>> + return createComponentVNode(2, EmptyList, {
>> + 'text': 'No Results'
>> + });
>> + }
>> + }
>> + }
>> + }, {
>> + key: 'renderEditToolbar',
>> + value: function renderEditToolbar() {
>> + // @todo fix this boolean
>> + if (this.props.dom._tree.config.editing.edit && !this.props.node.editing()) {
>> + return createComponentVNode(2, EditToolbar, {
>> + 'dom': this.props.dom,
>> + 'node': this.props.node
>> + });
>> + }
>> + }
>> + }, {
>> + key: 'renderToggle',
>> + value: function renderToggle() {
>> + var node = this.props.node;
>> + var hasVisibleChildren = !this.props.dom.isDynamic ? node.hasVisibleChildren() : Boolean(node.children);
>> +
>> + if (hasVisibleChildren) {
>> + return createComponentVNode(2, ToggleAnchor, {
>> + 'collapsed': node.collapsed(),
>> + 'node': node
>> + });
>> + }
>> + }
>> + }, {
>> + key: 'render',
>> + value: function render$$1() {
>> + var _this2 = this;
>> +
>> + var node = this.props.node;
>> +
>> + var li = normalizeProps(createVNode(1, 'li', null, [this.renderEditToolbar(), createVNode(1, 'div', 'title-wrap', [this.renderToggle(), this.renderCheckbox(), createComponentVNode(2, NodeAnchor, {
>> + 'dom': this.props.dom,
>> + 'editing': node.editing(),
>> + 'expanded': node.expanded(),
>> + 'hasOrWillHaveChildren': node.hasOrWillHaveChildren(),
>> + 'node': node,
>> + 'text': node.text
>> + })], 0), createVNode(1, 'div', 'wholerow'), this.renderChildren()], 0, _extends({}, this.getAttributes()), null, function (elem) {
>> + return _this2.node = _this2.props.node.itree.ref = elem;
>> + }));
>> +
>> + // Clear dirty bool only after everything has been generated (and states set)
>> + this.props.node.state('rendered', true);
>> + this.props.node.itree.dirty = false;
>> +
>> + return li;
>> + }
>> + }]);
>> + return ListItem;
>> + }(Component);
>> +
>> + var List = function (_Component) {
>> + inherits(List, _Component);
>> +
>> + function List() {
>> + classCallCheck(this, List);
>> + return possibleConstructorReturn(this, (List.__proto__ || Object.getPrototypeOf(List)).apply(this, arguments));
>> + }
>> +
>> + createClass(List, [{
>> + key: 'shouldComponentUpdate',
>> + value: function shouldComponentUpdate(nextProps) {
>> + return _.find(nextProps.nodes, 'itree.dirty') || stateComparator(this.props, nextProps);
>> + }
>> + }, {
>> + key: 'isDeferred',
>> + value: function isDeferred() {
>> + return this.props.dom.config.deferredRendering || this.props.dom._tree.config.deferredLoading;
>> + }
>> + }, {
>> + key: 'loadMore',
>> + value: function loadMore(event) {
>> + event.preventDefault();
>> + if (this.props.context) {
>> + this.props.context.loadMore(event);
>> + } else {
>> + this.props.dom._tree.loadMore(event);
>> + }
>> + }
>> + }, {
>> + key: 'renderLoadMoreNode',
>> + value: function renderLoadMoreNode() {
>> + return createVNode(1, 'li', 'leaf detached', createVNode(1, 'a', 'title icon icon-more load-more', createTextVNode('Load More'), 2, {
>> + 'onClick': this.loadMore.bind(this)
>> + }), 2);
>> + }
>> + }, {
>> + key: 'renderLoadingTextNode',
>> + value: function renderLoadingTextNode() {
>> + return createVNode(1, 'li', 'leaf', createVNode(1, 'span', 'title icon icon-more', createTextVNode('Loading...'), 2), 2);
>> + }
>> + }, {
>> + key: 'render',
>> + value: function render$$1() {
>> + var _this2 = this;
>> +
>> + var renderNodes = this.props.nodes;
>> + var pagination = renderNodes.pagination();
>> +
>> + // If rendering deferred, chunk the nodes client-side
>> + if (this.props.dom.config.deferredRendering) {
>> + // Filter non-hidden/removed nodes and limit by this context's pagination
>> + var count = 0;
>> + renderNodes = this.props.nodes.filter(function (n) {
>> + var matches = !(n.hidden() || n.removed());
>> +
>> + if (matches) {
>> + count++;
>> + }
>> +
>> + return count <= pagination.limit && matches;
>> + });
>> + }
>> +
>> + // Render nodes as list items
>> + var items = _.map(renderNodes, function (node) {
>> + return createComponentVNode(2, ListItem, {
>> + 'dom': _this2.props.dom,
>> + 'node': node
>> + }, node.id);
>> + });
>> +
>> + if (this.isDeferred() && pagination.limit < pagination.total) {
>> + if (!this.props.loading) {
>> + items.push(this.renderLoadMoreNode());
>> + } else {
>> + items.push(this.renderLoadingTextNode());
>> + }
>> + }
>> +
>> + return createVNode(1, 'ol', null, [items, this.props.children], 0);
>> + }
>> + }]);
>> + return List;
>> + }(Component);
>> +
>> + var Tree = function (_Component) {
>> + inherits(Tree, _Component);
>> +
>> + function Tree() {
>> + classCallCheck(this, Tree);
>> + return possibleConstructorReturn(this, (Tree.__proto__ || Object.getPrototypeOf(Tree)).apply(this, arguments));
>> + }
>> +
>> + createClass(Tree, [{
>> + key: 'add',
>> + value: function add() {
>> + this.props.dom._tree.focused().blur();
>> +
>> + this.props.dom._tree.addNode(blankNode());
>> + }
>> + }, {
>> + key: 'renderAddLink',
>> + value: function renderAddLink() {
>> + if (this.props.dom._tree.config.editing.add) {
>> + return createVNode(1, 'li', null, createVNode(1, 'a', 'btn icon icon-plus', null, 1, {
>> + 'onClick': this.add.bind(this),
>> + 'title': 'Add a new root node'
>> + }), 2);
>> + }
>> + }
>> + }, {
>> + key: 'render',
>> + value: function render$$1() {
>> + var _props = this.props,
>> + dom = _props.dom,
>> + nodes = _props.nodes;
>> +
>> + var loading = dom.loading;
>> + var pagination = nodes.pagination();
>> +
>> + return createComponentVNode(2, List, {
>> + 'dom': dom,
>> + 'limit': pagination.limit,
>> + 'loading': loading,
>> + 'nodes': nodes,
>> + 'total': pagination.total,
>> + children: this.renderAddLink()
>> + });
>> + }
>> + }]);
>> + return Tree;
>> + }(Component);
>> +
>> + /**
>> + * Default InspireTree rendering logic.
>> + *
>> + * @category DOM
>> + * @return {InspireDOM} Default renderer.
>> + */
>> +
>> + var InspireDOM = function () {
>> + function InspireDOM(tree, opts) {
>> + var _this = this;
>> +
>> + classCallCheck(this, InspireDOM);
>> +
>> + if (!(tree instanceof InspireTree)) {
>> + throw new TypeError('Tree argument is not an InspireTree instance.');
>> + }
>> +
>> + // Init properties
>> + this._tree = tree;
>> + this.batching = 0;
>> + this.dropTargets = [];
>> + this.$scrollLayer;
>> +
>> + if (!opts.target) {
>> + throw new TypeError('Invalid `target` property - must be a selector, HTMLElement, or jQuery element.');
>> + }
>> +
>> + // Let InspireTree know we're in control of a node's `rendered` state
>> + tree.usesNativeDOM = true;
>> +
>> + var dndDefaults = {
>> + enabled: false,
>> + validateOn: 'dragstart',
>> + validate: null
>> + };
>> +
>> + // Assign defaults
>> + this.config = _.defaultsDeep({}, opts, {
>> + autoLoadMore: true,
>> + deferredRendering: false,
>> + dragAndDrop: dndDefaults,
>> + nodeHeight: 25,
>> + showCheckboxes: false,
>> + tabindex: -1,
>> + target: false
>> + });
>> +
>> + if (opts.dragAndDrop === true) {
>> + this.config.dragAndDrop = dndDefaults;
>> + this.config.dragAndDrop.enabled = true;
>> + }
>> +
>> + // If user didn't specify showCheckboxes,
>> + // but is using checkbox selection mode,
>> + // enable it automatically.
>> + // Royale - commented
>> + //if (tree.config.selection.mode === 'checkbox' && !_.isBoolean(_.get(opts, 'showCheckboxes'))) {
>> + // this.config.showCheckboxes = true;
>> + //}
>> +
>> + // Cache because we use in loops
>> + this.isDynamic = _.isFunction(this._tree.config.data);
>> +
>> + // Connect to our target DOM element
>> + this.attach(this.config.target);
>> +
>> + var initialRender = true;
>> +
>> + // Apply changes
>> + tree.on('changes.applied', function () {
>> + _this.renderNodes();
>> +
>> + if (initialRender) {
>> + _this.scrollSelectedIntoView();
>> +
>> + initialRender = false;
>> + }
>> + });
>> +
>> + // Immediately render, just in case any already exists
>> + this.renderNodes();
>> + }
>> +
>> + /**
>> + * Attaches to the DOM element for rendering.
>> + *
>> + * @category DOM
>> + * @private
>> + * @param {HTMLElement} target Element, selector, or jQuery-like object.
>> + * @return {void}
>> + */
>> +
>> +
>> + createClass(InspireDOM, [{
>> + key: 'attach',
>> + value: function attach(target) {
>> + this.$target = this.getElement(target);
>> + this.$scrollLayer = this.getScrollableAncestor(this.$target);
>> +
>> + if (!this.$target) {
>> + throw new Error('No valid element to attach to.');
>> + }
>> +
>> + this.$target.setAttribute('data-uid', this._tree.id);
>> +
>> + // Set classnames
>> + var classNames = this.$target.className.split(' ');
>> + classNames.push('inspire-tree');
>> +
>> + if (this._tree.config.editable) {
>> + classNames.push('editable');
>> +
>> + _.each(_.pickBy(this._tree.config.editing, _.identity), function (v, key) {
>> + classNames.push('editable-' + key);
>> + });
>> + }
>> +
>> + this.$target.className = classNames.join(' ');
>> + this.$target.setAttribute('tabindex', this.config.tabindex || 0);
>> +
>> + // Handle keyboard interaction
>> + this.$target.addEventListener('keydown', this.keyboardListener.bind(this));
>> +
>> + // Drag and drop listeners
>> + if (this.config.dragAndDrop.enabled) {
>> + this.$target.addEventListener('dragenter', this.onDragEnter.bind(this), false);
>> + this.$target.addEventListener('dragleave', this.onDragLeave.bind(this), false);
>> + this.$target.addEventListener('dragover', this.onDragOver.bind(this), false);
>> + this.$target.addEventListener('drop', this.onDrop.bind(this), false);
>> +
>> + this.$target.classList.add('drag-and-drop');
>> + }
>> +
>> + // Sync browser focus to focus state
>> + this._tree.on('node.focused', function (node) {
>> + var elem = node.itree.ref.querySelector('.title');
>> + if (elem !== document.activeElement) {
>> + elem.focus();
>> + }
>> + });
>> +
>> + if (this.config.deferredRendering || this._tree.config.deferredLoading) {
>> + // Force valid pagination limit based on viewport
>> + var limit = this._tree.config.pagination.limit;
>> + this._tree.config.pagination.limit = limit > 0 ? limit : _.ceil(this.$scrollLayer.clientHeight / this.config.nodeHeight);
>> +
>> + // Listen for scrolls for automatic loading
>> + if (this.config.autoLoadMore) {
>> + this.$target.addEventListener('scroll', _.throttle(this.scrollListener.bind(this), 20));
>> + }
>> + }
>> +
>> + this.$target.inspireTree = this._tree;
>> + }
>> +
>> + /**
>> + * Clear page text selection, primarily after a click event which
>> + * natively selects a range of text.
>> + *
>> + * @category DOM
>> + * @private
>> + * @return {void}
>> + */
>> +
>> + }, {
>> + key: 'clearSelection',
>> + value: function clearSelection() {
>> + if (document.selection && document.selection.empty) {
>> + document.selection.empty();
>> + } else if (window.getSelection) {
>> + window.getSelection().removeAllRanges();
>> + }
>> + }
>> +
>> + /**
>> + * Get an HTMLElement through various means:
>> + * An element, jquery object, or a selector.
>> + *
>> + * @category DOM
>> + * @private
>> + * @param {mixed} target Element, jQuery selector, selector.
>> + * @return {HTMLElement} Matching element.
>> + */
>> +
>> + }, {
>> + key: 'getElement',
>> + value: function getElement(target) {
>> + var $element = void 0;
>> +
>> + if (target instanceof HTMLElement) {
>> + $element = target;
>> + } else if (_.isObject(target) && _.isObject(target[0])) {
>> + $element = target[0];
>> + } else if (_.isString(target)) {
>> + var match = document.querySelector(target);
>> + if (match) {
>> + $element = match;
>> + }
>> + }
>> +
>> + return $element;
>> + }
>> +
>> + /**
>> + * Helper method to find a scrollable ancestor element.
>> + *
>> + * @category DOM
>> + * @private
>> + * @param {HTMLElement} $element Starting element.
>> + * @return {HTMLElement} Scrollable element.
>> + */
>> +
>> + }, {
>> + key: 'getScrollableAncestor',
>> + value: function getScrollableAncestor($element) {
>> + if ($element instanceof Element) {
>> + var style = getComputedStyle($element);
>> + if (style.overflow !== 'auto' && $element.parentNode) {
>> + $element = this.getScrollableAncestor($element.parentNode);
>> + }
>> + }
>> +
>> + return $element;
>> + }
>> +
>> + /**
>> + * Get a tree instance based on an ID.
>> + *
>> + * @category DOM
>> + * @param {string} id Tree ID.
>> + * @return {InspireTree} Tree instance.
>> + */
>> +
>> + }, {
>> + key: 'keyboardListener',
>> +
>> +
>> + /**
>> + * Listen to keyboard event for navigation.
>> + *
>> + * @category DOM
>> + * @private
>> + * @param {Event} event Keyboard event.
>> + * @return {void}
>> + */
>> + value: function keyboardListener(event) {
>> + event.stopPropagation();
>> +
>> + // Ignore keys we won't care for.
>> + // For example, this avoids trampling cmd+reload
>> + if ([DOWN_ARROW, ENTER, LEFT_ARROW, RIGHT_ARROW, UP_ARROW].indexOf(event.which) < 0) {
>> + return;
>> + }
>> +
>> + // Navigation
>> + var focusedNodes = this._tree.focused();
>> + if (focusedNodes.length) {
>> + event.preventDefault();
>> +
>> + switch (event.which) {
>> + case DOWN_ARROW:
>> + this.moveFocusDownFrom(focusedNodes[0]);
>> + break;
>> + case ENTER:
>> + focusedNodes[0].toggleSelect();
>> + break;
>> + case LEFT_ARROW:
>> + focusedNodes[0].collapse();
>> + break;
>> + case RIGHT_ARROW:
>> + focusedNodes[0].expand();
>> + break;
>> + case UP_ARROW:
>> + this.moveFocusUpFrom(focusedNodes[0]);
>> + break;
>> + default:
>> + }
>> + }
>> + }
>> +
>> + /**
>> + * Move select down the visible tree from a starting node.
>> + *
>> + * @category DOM
>> + * @private
>> + * @param {object} startingNode Node object.
>> + * @return {void}
>> + */
>> +
>> + }, {
>> + key: 'moveFocusDownFrom',
>> + value: function moveFocusDownFrom(startingNode) {
>> + var next = startingNode.nextVisibleNode();
>> + if (next) {
>> + next.focus();
>> + }
>> + }
>> +
>> + /**
>> + * Move select up the visible tree from a starting node.
>> + *
>> + * @category DOM
>> + * @private
>> + * @param {object} startingNode Node object.
>> + * @return {void}
>> + */
>> +
>> + }, {
>> + key: 'moveFocusUpFrom',
>> + value: function moveFocusUpFrom(startingNode) {
>> + var prev = startingNode.previousVisibleNode();
>> + if (prev) {
>> + prev.focus();
>> + }
>> + }
>> +
>> + /**
>> + * Helper method for obtaining the data-uid from a DOM element.
>> + *
>> + * @category DOM
>> + * @private
>> + * @param {HTMLElement} element HTML Element.
>> + * @return {object} Node object
>> + */
>> +
>> + }, {
>> + key: 'nodeFromTitleDOMElement',
>> + value: function nodeFromTitleDOMElement(element) {
>> + var uid = element.parentNode.parentNode.getAttribute('data-uid');
>> + return this._tree.node(uid);
>> + }
>> +
>> + /**
>> + * Drag enter listener.
>> + *
>> + * @category DOM
>> + * @private
>> + * @param {DragEvent} event Drag enter.
>> + * @return {void}
>> + */
>> +
>> + }, {
>> + key: 'onDragEnter',
>> + value: function onDragEnter(event) {
>> + event.preventDefault();
>> +
>> + event.target.classList.add('drag-targeting', 'drag-targeting-insert');
>> + }
>> +
>> + /**
>> + * Drag leave listener.
>> + *
>> + * @category DOM
>> + * @private
>> + * @param {DragEvent} event Drag leave.
>> + * @return {void}
>> + */
>> +
>> + }, {
>> + key: 'onDragLeave',
>> + value: function onDragLeave(event) {
>> + event.preventDefault();
>> +
>> + this.unhighlightTarget(event.target);
>> + }
>> +
>> + /**
>> + * Drag over listener.
>> + *
>> + * @category DOM
>> + * @private
>> + * @param {DragEvent} event Drag over.
>> + * @return {void}
>> + */
>> +
>> + }, {
>> + key: 'onDragOver',
>> + value: function onDragOver(event) {
>> + event.preventDefault();
>> + }
>> +
>> + /**
>> + * Drop listener.
>> + *
>> + * @category DOM
>> + * @private
>> + * @param {DragEvent} event Dropped.
>> + * @return {void}
>> + */
>> +
>> + }, {
>> + key: 'onDrop',
>> + value: function onDrop(event) {
>> + event.preventDefault();
>> +
>> + this.unhighlightTarget(event.target);
>> +
>> + var treeId = event.dataTransfer.getData('treeId');
>> + var nodeId = event.dataTransfer.getData('nodeId');
>> +
>> + // Find the tree
>> + var tree = InspireDOM.getTreeById(treeId);
>> + var node = tree.node(nodeId);
>> +
>> + node.state('drop-target', true);
>> +
>> + // Remove the node from its previous context
>> + var exported = node.remove(true);
>> +
>> + // Add the node to this tree/level
>> + var newNode = this._tree.addNode(exported);
>> + var newIndex = this._tree.indexOf(newNode);
>> +
>> + this._tree.emit('node.drop', event, newNode, null, newIndex);
>> + }
>> +
>> + /**
>> + * Triggers rendering for the given node array.
>> + *
>> + * @category DOM
>> + * @private
>> + * @param {array} nodes Array of node objects.
>> + * @return {void}
>> + */
>> +
>> + }, {
>> + key: 'renderNodes',
>> + value: function renderNodes(nodes) {
>> + render(createComponentVNode(2, Tree, {
>> + 'dom': this,
>> + 'nodes': nodes || this._tree.nodes()
>> + }), this.$target);
>> + }
>> + }, {
>> + key: 'scrollListener',
>> +
>> +
>> + /**
>> + * Listens for scroll events, to automatically trigger
>> + * Load More links when they're scrolled into view.
>> + *
>> + * @category DOM
>> + * @private
>> + * @param {Event} event Scroll event.
>> + * @return {void}
>> + */
>> + value: function scrollListener(event) {
>> + var _this2 = this;
>> +
>> + if (!this.rendering && !this.loading) {
>> + // Get the bounding rect of the scroll layer
>> + var rect = this.$scrollLayer.getBoundingClientRect();
>> +
>> + // Find all load-more links
>> + var links = document.querySelectorAll('.load-more');
>> + _.each(links, function (link) {
>> + // Look for load-more links which overlap our "viewport"
>> + var r = link.getBoundingClientRect();
>> + var overlap = !(rect.right < r.left || rect.left > r.right || rect.bottom < r.top || rect.top > r.bottom);
>> +
>> + if (overlap) {
>> + // Auto-trigger Load More links
>> + var context = void 0;
>> +
>> + var $parent = link.parentNode.parentNode.parentNode;
>> + if ($parent.tagName === 'LI') {
>> + context = _this2._tree.node($parent.getAttribute('data-uid'));
>> + }
>> +
>> + _this2._tree.loadMore(context, event);
>> + }
>> + });
>> + }
>> + }
>> +
>> + /**
>> + * Scroll the first selected node into view.
>> + *
>> + * @category DOM
>> + * @private
>> + * @return {void}
>> + */
>> +
>> + }, {
>> + key: 'scrollSelectedIntoView',
>> + value: function scrollSelectedIntoView() {
>> + var $selected = this.$target.querySelector('.selected');
>> +
>> + if ($selected && this.$scrollLayer) {
>> + this.$scrollLayer.scrollTop = $selected.offsetTop;
>> + }
>> + }
>> +
>> + /**
>> + * Remove highlight class.
>> + *
>> + * @category DOM
>> + * @private
>> + * @param {HTMLElement} element Target element.
>> + * @return {void}
>> + */
>> +
>> + }, {
>> + key: 'unhighlightTarget',
>> + value: function unhighlightTarget(element) {
>> + if (element) {
>> + element.classList.remove('drag-targeting', 'drag-targeting-insert');
>> + }
>> + }
>> + }], [{
>> + key: 'getTreeById',
>> + value: function getTreeById(id) {
>> + var element = document.querySelector('[data-uid="' + id + '"]');
>> + if (element) {
>> + return element.inspireTree;
>> + }
>> + }
>> + }]);
>> + return InspireDOM;
>> + }();
>> +
>> + return InspireDOM;
>> +
>> +})));
>> diff --git a/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dom.js b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dom.js
>> new file mode 100644
>> index 0000000..7b3a60e
>> --- /dev/null
>> +++ b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dom.js
>> @@ -0,0 +1,3764 @@
>> +/**
>> + * 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
>> + *
>> + * Unless required by applicable law or agreed to in writing, software
>> + * distributed under the License is distributed on an 'AS IS' BASIS,
>> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
>> + * See the License for the specific language governing permissions and
>> + * limitations under the License.
>> + */
>> + /* Inspire Tree DOM
>> + * @version 4.0.6
>> + * https://github.com/helion3/inspire-tree-dom
>> + * @copyright Copyright 2015 Helion3, and other contributors
>> + * @license Licensed under MIT
>> + * see https://github.com/helion3/inspire-tree-dom/blob/master/LICENSE
>> + */
>> +(function (global, factory) {
>> + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('lodash'), require('inspire-tree')) :
>> + typeof define === 'function' && define.amd ? define(['lodash', 'inspire-tree'], factory) :
>> + (global.InspireTreeDOM = factory(global._,global.InspireTree));
>> +}(this, (function (_,InspireTree) { 'use strict';
>> +
>> + InspireTree = InspireTree && InspireTree.hasOwnProperty('default') ? InspireTree['default'] : InspireTree;
>> +
>> + var NO_OP = '$NO_OP';
>> + var ERROR_MSG = 'a runtime error occured! Use Inferno in development environment to find the error.';
>> + var isBrowser = !!(typeof window !== 'undefined' && window.document);
>> + var isArray = Array.isArray;
>> + function isStringOrNumber(o) {
>> + var type = typeof o;
>> + return type === 'string' || type === 'number';
>> + }
>> + function isNullOrUndef(o) {
>> + return isUndefined(o) || isNull(o);
>> + }
>> + function isInvalid(o) {
>> + return isNull(o) || o === false || isTrue(o) || isUndefined(o);
>> + }
>> + function isFunction(o) {
>> + return typeof o === 'function';
>> + }
>> + function isString(o) {
>> + return typeof o === 'string';
>> + }
>> + function isNumber(o) {
>> + return typeof o === 'number';
>> + }
>> + function isNull(o) {
>> + return o === null;
>> + }
>> + function isTrue(o) {
>> + return o === true;
>> + }
>> + function isUndefined(o) {
>> + return o === void 0;
>> + }
>> + function throwError(message) {
>> + if (!message) {
>> + message = ERROR_MSG;
>> + }
>> + throw new Error(("Inferno Error: " + message));
>> + }
>> + function combineFrom(first, second) {
>> + var out = {};
>> + if (first) {
>> + for (var key in first) {
>> + out[key] = first[key];
>> + }
>> + }
>> + if (second) {
>> + for (var key$1 in second) {
>> + out[key$1] = second[key$1];
>> + }
>> + }
>> + return out;
>> + }
>> +
>> + var keyPrefix = '$';
>> + function getVNode(childFlags, children, className, flags, key, props, ref, type) {
>> + return {
>> + childFlags: childFlags,
>> + children: children,
>> + className: className,
>> + dom: null,
>> + flags: flags,
>> + key: key === void 0 ? null : key,
>> + parentVNode: null,
>> + props: props === void 0 ? null : props,
>> + ref: ref === void 0 ? null : ref,
>> + type: type
>> + };
>> + }
>> + function createVNode(flags, type, className, children, childFlags, props, key, ref) {
>> + var childFlag = childFlags === void 0 ? 1 /* HasInvalidChildren */ : childFlags;
>> + var vNode = getVNode(childFlag, children, className, flags, key, props, ref, type);
>> + if (childFlag === 0 /* UnknownChildren */) {
>> + normalizeChildren(vNode, vNode.children);
>> + }
>> + return vNode;
>> + }
>> + function createComponentVNode(flags, type, props, key, ref) {
>> + if ((flags & 2 /* ComponentUnknown */) > 0) {
>> + flags = type.prototype && isFunction(type.prototype.render) ? 4 /* ComponentClass */ : 8 /* ComponentFunction */;
>> + }
>> + // set default props
>> + var defaultProps = type.defaultProps;
>> + if (!isNullOrUndef(defaultProps)) {
>> + if (!props) {
>> + props = {}; // Props can be referenced and modified at application level so always create new object
>> + }
>> + for (var prop in defaultProps) {
>> + if (isUndefined(props[prop])) {
>> + props[prop] = defaultProps[prop];
>> + }
>> + }
>> + }
>> + if ((flags & 8 /* ComponentFunction */) > 0) {
>> + var defaultHooks = type.defaultHooks;
>> + if (!isNullOrUndef(defaultHooks)) {
>> + if (!ref) {
>> + // As ref cannot be referenced from application level, we can use the same refs object
>> + ref = defaultHooks;
>> + }
>> + else {
>> + for (var prop$1 in defaultHooks) {
>> + if (isUndefined(ref[prop$1])) {
>> + ref[prop$1] = defaultHooks[prop$1];
>> + }
>> + }
>> + }
>> + }
>> + }
>> + var vNode = getVNode(1 /* HasInvalidChildren */, null, null, flags, key, props, ref, type);
>> + var optsVNode = options.createVNode;
>> + if (isFunction(optsVNode)) {
>> + optsVNode(vNode);
>> + }
>> + return vNode;
>> + }
>> + function createTextVNode(text, key) {
>> + return getVNode(1 /* HasInvalidChildren */, isNullOrUndef(text) ? '' : text, null, 16 /* Text */, key, null, null, null);
>> + }
>> + function normalizeProps(vNode) {
>> + var props = vNode.props;
>> + if (props) {
>> + var flags = vNode.flags;
>> + if (flags & 481 /* Element */) {
>> + if (props.children !== void 0 && isNullOrUndef(vNode.children)) {
>> + normalizeChildren(vNode, props.children);
>> + }
>> + if (props.className !== void 0) {
>> + vNode.className = props.className || null;
>> + props.className = undefined;
>> + }
>> + }
>> + if (props.key !== void 0) {
>> + vNode.key = props.key;
>> + props.key = undefined;
>> + }
>> + if (props.ref !== void 0) {
>> + if (flags & 8 /* ComponentFunction */) {
>> + vNode.ref = combineFrom(vNode.ref, props.ref);
>> + }
>> + else {
>> + vNode.ref = props.ref;
>> + }
>> + props.ref = undefined;
>> + }
>> + }
>> + return vNode;
>> + }
>> + function directClone(vNodeToClone) {
>> + var newVNode;
>> + var flags = vNodeToClone.flags;
>> + if (flags & 14 /* Component */) {
>> + var props;
>> + var propsToClone = vNodeToClone.props;
>> + if (!isNull(propsToClone)) {
>> + props = {};
>> + for (var key in propsToClone) {
>> + props[key] = propsToClone[key];
>> + }
>> + }
>> + newVNode = createComponentVNode(flags, vNodeToClone.type, props, vNodeToClone.key, vNodeToClone.ref);
>> + }
>> + else if (flags & 481 /* Element */) {
>> + newVNode = createVNode(flags, vNodeToClone.type, vNodeToClone.className, vNodeToClone.children, vNodeToClone.childFlags, vNodeToClone.props, vNodeToClone.key, vNodeToClone.ref);
>> + }
>> + else if (flags & 16 /* Text */) {
>> + newVNode = createTextVNode(vNodeToClone.children, vNodeToClone.key);
>> + }
>> + else if (flags & 1024 /* Portal */) {
>> + newVNode = vNodeToClone;
>> + }
>> + return newVNode;
>> + }
>> + function createVoidVNode() {
>> + return createTextVNode('', null);
>> + }
>> + function _normalizeVNodes(nodes, result, index, currentKey) {
>> + for (var len = nodes.length; index < len; index++) {
>> + var n = nodes[index];
>> + if (!isInvalid(n)) {
>> + var newKey = currentKey + keyPrefix + index;
>> + if (isArray(n)) {
>> + _normalizeVNodes(n, result, 0, newKey);
>> + }
>> + else {
>> + if (isStringOrNumber(n)) {
>> + n = createTextVNode(n, newKey);
>> + }
>> + else {
>> + var oldKey = n.key;
>> + var isPrefixedKey = isString(oldKey) && oldKey[0] === keyPrefix;
>> + if (!isNull(n.dom) || isPrefixedKey) {
>> + n = directClone(n);
>> + }
>> + if (isNull(oldKey) || isPrefixedKey) {
>> + n.key = newKey;
>> + }
>> + else {
>> + n.key = currentKey + oldKey;
>> + }
>> + }
>> + result.push(n);
>> + }
>> + }
>> + }
>> + }
>> + function normalizeChildren(vNode, children) {
>> + var newChildren;
>> + var newChildFlags = 1 /* HasInvalidChildren */;
>> + // Don't change children to match strict equal (===) true in patching
>> + if (isInvalid(children)) {
>> + newChildren = children;
>> + }
>> + else if (isString(children)) {
>> + newChildFlags = 2 /* HasVNodeChildren */;
>> + newChildren = createTextVNode(children);
>> + }
>> + else if (isNumber(children)) {
>> + newChildFlags = 2 /* HasVNodeChildren */;
>> + newChildren = createTextVNode(children + '');
>> + }
>> + else if (isArray(children)) {
>> + var len = children.length;
>> + if (len === 0) {
>> + newChildren = null;
>> + newChildFlags = 1 /* HasInvalidChildren */;
>> + }
>> + else {
>> + // we assign $ which basically means we've flagged this array for future note
>> + // if it comes back again, we need to clone it, as people are using it
>> + // in an immutable way
>> + // tslint:disable-next-line
>> + if (Object.isFrozen(children) || children['$'] === true) {
>> + children = children.slice();
>> + }
>> + newChildFlags = 8 /* HasKeyedChildren */;
>> + for (var i = 0; i < len; i++) {
>> + var n = children[i];
>> + if (isInvalid(n) || isArray(n)) {
>> + newChildren = newChildren || children.slice(0, i);
>> + _normalizeVNodes(children, newChildren, i, '');
>> + break;
>> + }
>> + else if (isStringOrNumber(n)) {
>> + newChildren = newChildren || children.slice(0, i);
>> + newChildren.push(createTextVNode(n, keyPrefix + i));
>> + }
>> + else {
>> + var key = n.key;
>> + var isNullDom = isNull(n.dom);
>> + var isNullKey = isNull(key);
>> + var isPrefixed = !isNullKey && key[0] === keyPrefix;
>> + if (!isNullDom || isNullKey || isPrefixed) {
>> + newChildren = newChildren || children.slice(0, i);
>> + if (!isNullDom || isPrefixed) {
>> + n = directClone(n);
>> + }
>> + if (isNullKey || isPrefixed) {
>> + n.key = keyPrefix + i;
>> + }
>> + newChildren.push(n);
>> + }
>> + else if (newChildren) {
>> + newChildren.push(n);
>> + }
>> + }
>> + }
>> + newChildren = newChildren || children;
>> + newChildren.$ = true;
>> + }
>> + }
>> + else {
>> + newChildren = children;
>> + if (!isNull(children.dom)) {
>> + newChildren = directClone(children);
>> + }
>> + newChildFlags = 2 /* HasVNodeChildren */;
>> + }
>> + vNode.children = newChildren;
>> + vNode.childFlags = newChildFlags;
>> + return vNode;
>> + }
>> + var options = {
>> + afterRender: null,
>> + beforeRender: null,
>> + createVNode: null,
>> + renderComplete: null
>> + };
>> +
>> + var xlinkNS = 'http://www.w3.org/1999/xlink';
>> + var xmlNS = 'http://www.w3.org/XML/1998/namespace';
>> + var svgNS = 'http://www.w3.org/2000/svg';
>> + var namespaces = {
>> + 'xlink:actuate': xlinkNS,
>> + 'xlink:arcrole': xlinkNS,
>> + 'xlink:href': xlinkNS,
>> + 'xlink:role': xlinkNS,
>> + 'xlink:show': xlinkNS,
>> + 'xlink:title': xlinkNS,
>> + 'xlink:type': xlinkNS,
>> + 'xml:base': xmlNS,
>> + 'xml:lang': xmlNS,
>> + 'xml:space': xmlNS
>> + };
>> +
>> + // We need EMPTY_OBJ defined in one place.
>> + // Its used for comparison so we cant inline it into shared
>> + var EMPTY_OBJ = {};
>> + var LIFECYCLE = [];
>> + function appendChild(parentDom, dom) {
>> + parentDom.appendChild(dom);
>> + }
>> + function insertOrAppend(parentDom, newNode, nextNode) {
>> + if (isNullOrUndef(nextNode)) {
>> + appendChild(parentDom, newNode);
>> + }
>> + else {
>> + parentDom.insertBefore(newNode, nextNode);
>> + }
>> + }
>> + function documentCreateElement(tag, isSVG) {
>> + if (isSVG === true) {
>> + return document.createElementNS(svgNS, tag);
>> + }
>> + return document.createElement(tag);
>> + }
>> + function replaceChild(parentDom, newDom, lastDom) {
>> + parentDom.replaceChild(newDom, lastDom);
>> + }
>> + function removeChild(parentDom, dom) {
>> + parentDom.removeChild(dom);
>> + }
>> + function callAll(arrayFn) {
>> + var listener;
>> + while ((listener = arrayFn.shift()) !== undefined) {
>> + listener();
>> + }
>> + }
>> +
>> + var attachedEventCounts = {};
>> + var attachedEvents = {};
>> + function handleEvent(name, nextEvent, dom) {
>> + var eventsLeft = attachedEventCounts[name];
>> + var eventsObject = dom.$EV;
>> + if (nextEvent) {
>> + if (!eventsLeft) {
>> + attachedEvents[name] = attachEventToDocument(name);
>> + attachedEventCounts[name] = 0;
>> + }
>> + if (!eventsObject) {
>> + eventsObject = dom.$EV = {};
>> + }
>> + if (!eventsObject[name]) {
>> + attachedEventCounts[name]++;
>> + }
>> + eventsObject[name] = nextEvent;
>> + }
>> + else if (eventsObject && eventsObject[name]) {
>> + attachedEventCounts[name]--;
>> + if (eventsLeft === 1) {
>> + document.removeEventListener(normalizeEventName(name), attachedEvents[name]);
>> + attachedEvents[name] = null;
>> + }
>> + eventsObject[name] = nextEvent;
>> + }
>> + }
>> + function dispatchEvents(event, target, isClick, name, eventData) {
>> + var dom = target;
>> + while (!isNull(dom)) {
>> + // Html Nodes can be nested fe: span inside button in that scenario browser does not handle disabled attribute on parent,
>> + // because the event listener is on document.body
>> + // Don't process clicks on disabled elements
>> + if (isClick && dom.disabled) {
>> + return;
>> + }
>> + var eventsObject = dom.$EV;
>> + if (eventsObject) {
>> + var currentEvent = eventsObject[name];
>> + if (currentEvent) {
>> + // linkEvent object
>> + eventData.dom = dom;
>> + if (currentEvent.event) {
>> + currentEvent.event(currentEvent.data, event);
>> + }
>> + else {
>> + currentEvent(event);
>> + }
>> + if (event.cancelBubble) {
>> + return;
>> + }
>> + }
>> + }
>> + dom = dom.parentNode;
>> + }
>> + }
>> + function normalizeEventName(name) {
>> + return name.substr(2).toLowerCase();
>> + }
>> + function stopPropagation() {
>> + this.cancelBubble = true;
>> + if (!this.immediatePropagationStopped) {
>> + this.stopImmediatePropagation();
>> + }
>> + }
>> + function attachEventToDocument(name) {
>> + var docEvent = function (event) {
>> + var type = event.type;
>> + var isClick = type === 'click' || type === 'dblclick';
>> + if (isClick && event.button !== 0) {
>> + // Firefox incorrectly triggers click event for mid/right mouse buttons.
>> + // This bug has been active for 12 years.
>> + // https://bugzilla.mozilla.org/show_bug.cgi?id=184051
>> + event.stopPropagation();
>> + return false;
>> + }
>> + event.stopPropagation = stopPropagation;
>> + // Event data needs to be object to save reference to currentTarget getter
>> + var eventData = {
>> + dom: document
>> + };
>> + Object.defineProperty(event, 'currentTarget', {
>> + configurable: true,
>> + get: function get() {
>> + return eventData.dom;
>> + }
>> + });
>> + dispatchEvents(event, event.target, isClick, name, eventData);
>> + return;
>> + };
>> + document.addEventListener(normalizeEventName(name), docEvent);
>> + return docEvent;
>> + }
>> +
>> + function isSameInnerHTML(dom, innerHTML) {
>> + var tempdom = document.createElement('i');
>> + tempdom.innerHTML = innerHTML;
>> + return tempdom.innerHTML === dom.innerHTML;
>> + }
>> + function isSamePropsInnerHTML(dom, props) {
>> + return Boolean(props && props.dangerouslySetInnerHTML && props.dangerouslySetInnerHTML.__html && isSameInnerHTML(dom, props.dangerouslySetInnerHTML.__html));
>> + }
>> +
>> + function triggerEventListener(props, methodName, e) {
>> + if (props[methodName]) {
>> + var listener = props[methodName];
>> + if (listener.event) {
>> + listener.event(listener.data, e);
>> + }
>> + else {
>> + listener(e);
>> + }
>> + }
>> + else {
>> + var nativeListenerName = methodName.toLowerCase();
>> + if (props[nativeListenerName]) {
>> + props[nativeListenerName](e);
>> + }
>> + }
>> + }
>> + function createWrappedFunction(methodName, applyValue) {
>> + var fnMethod = function (e) {
>> + e.stopPropagation();
>> + var vNode = this.$V;
>> + // If vNode is gone by the time event fires, no-op
>> + if (!vNode) {
>> + return;
>> + }
>> + var props = vNode.props || EMPTY_OBJ;
>> + var dom = vNode.dom;
>> + if (isString(methodName)) {
>> + triggerEventListener(props, methodName, e);
>> + }
>> + else {
>> + for (var i = 0; i < methodName.length; i++) {
>> + triggerEventListener(props, methodName[i], e);
>> + }
>> + }
>> + if (isFunction(applyValue)) {
>> + var newVNode = this.$V;
>> + var newProps = newVNode.props || EMPTY_OBJ;
>> + applyValue(newProps, dom, false, newVNode);
>> + }
>> + };
>> + Object.defineProperty(fnMethod, 'wrapped', {
>> + configurable: false,
>> + enumerable: false,
>> + value: true,
>> + writable: false
>> + });
>> + return fnMethod;
>> + }
>> +
>> + function isCheckedType(type) {
>> + return type === 'checkbox' || type === 'radio';
>> + }
>> + var onTextInputChange = createWrappedFunction('onInput', applyValueInput);
>> + var wrappedOnChange = createWrappedFunction(['onClick', 'onChange'], applyValueInput);
>> + /* tslint:disable-next-line:no-empty */
>> + function emptywrapper(event) {
>> + event.stopPropagation();
>> + }
>> + emptywrapper.wrapped = true;
>> + function inputEvents(dom, nextPropsOrEmpty) {
>> + if (isCheckedType(nextPropsOrEmpty.type)) {
>> + dom.onchange = wrappedOnChange;
>> + dom.onclick = emptywrapper;
>> + }
>> + else {
>> + dom.oninput = onTextInputChange;
>> + }
>> + }
>> + function applyValueInput(nextPropsOrEmpty, dom) {
>> + var type = nextPropsOrEmpty.type;
>> + var value = nextPropsOrEmpty.value;
>> + var checked = nextPropsOrEmpty.checked;
>> + var multiple = nextPropsOrEmpty.multiple;
>> + var defaultValue = nextPropsOrEmpty.defaultValue;
>> + var hasValue = !isNullOrUndef(value);
>> + if (type && type !== dom.type) {
>> + dom.setAttribute('type', type);
>> + }
>> + if (!isNullOrUndef(multiple) && multiple !== dom.multiple) {
>> + dom.multiple = multiple;
>> + }
>> + if (!isNullOrUndef(defaultValue) && !hasValue) {
>> + dom.defaultValue = defaultValue + '';
>> + }
>> + if (isCheckedType(type)) {
>> + if (hasValue) {
>> + dom.value = value;
>> + }
>> + if (!isNullOrUndef(checked)) {
>> + dom.checked = checked;
>> + }
>> + }
>> + else {
>> + if (hasValue && dom.value !== value) {
>> + dom.defaultValue = value;
>> + dom.value = value;
>> + }
>> + else if (!isNullOrUndef(checked)) {
>> + dom.checked = checked;
>> + }
>> + }
>> + }
>> +
>> + function updateChildOptionGroup(vNode, value) {
>> + var type = vNode.type;
>> + if (type === 'optgroup') {
>> + var children = vNode.children;
>> + var childFlags = vNode.childFlags;
>> + if (childFlags & 12 /* MultipleChildren */) {
>> + for (var i = 0, len = children.length; i < len; i++) {
>> + updateChildOption(children[i], value);
>> + }
>> + }
>> + else if (childFlags === 2 /* HasVNodeChildren */) {
>> + updateChildOption(children, value);
>> + }
>> + }
>> + else {
>> + updateChildOption(vNode, value);
>> + }
>> + }
>> + function updateChildOption(vNode, value) {
>> + var props = vNode.props || EMPTY_OBJ;
>> + var dom = vNode.dom;
>> + // we do this as multiple may have changed
>> + dom.value = props.value;
>> + if ((isArray(value) && value.indexOf(props.value) !== -1) || props.value === value) {
>> + dom.selected = true;
>> + }
>> + else if (!isNullOrUndef(value) || !isNullOrUndef(props.selected)) {
>> + dom.selected = props.selected || false;
>> + }
>> + }
>> + var onSelectChange = createWrappedFunction('onChange', applyValueSelect);
>> + function selectEvents(dom) {
>> + dom.onchange = onSelectChange;
>> + }
>> + function applyValueSelect(nextPropsOrEmpty, dom, mounting, vNode) {
>> + var multiplePropInBoolean = Boolean(nextPropsOrEmpty.multiple);
>> + if (!isNullOrUndef(nextPropsOrEmpty.multiple) && multiplePropInBoolean !== dom.multiple) {
>> + dom.multiple = multiplePropInBoolean;
>> + }
>> + var childFlags = vNode.childFlags;
>> + if ((childFlags & 1 /* HasInvalidChildren */) === 0) {
>> + var children = vNode.children;
>> + var value = nextPropsOrEmpty.value;
>> + if (mounting && isNullOrUndef(value)) {
>> + value = nextPropsOrEmpty.defaultValue;
>> + }
>> + if (childFlags & 12 /* MultipleChildren */) {
>> + for (var i = 0, len = children.length; i < len; i++) {
>> + updateChildOptionGroup(children[i], value);
>> + }
>> + }
>> + else if (childFlags === 2 /* HasVNodeChildren */) {
>> + updateChildOptionGroup(children, value);
>> + }
>> + }
>> + }
>> +
>> + var onTextareaInputChange = createWrappedFunction('onInput', applyValueTextArea);
>> + var wrappedOnChange$1 = createWrappedFunction('onChange');
>> + function textAreaEvents(dom, nextPropsOrEmpty) {
>> + dom.oninput = onTextareaInputChange;
>> + if (nextPropsOrEmpty.onChange) {
>> + dom.onchange = wrappedOnChange$1;
>> + }
>> + }
>> + function applyValueTextArea(nextPropsOrEmpty, dom, mounting) {
>> + var value = nextPropsOrEmpty.value;
>> + var domValue = dom.value;
>> + if (isNullOrUndef(value)) {
>> + if (mounting) {
>> + var defaultValue = nextPropsOrEmpty.defaultValue;
>> + if (!isNullOrUndef(defaultValue) && defaultValue !== domValue) {
>> + dom.defaultValue = defaultValue;
>> + dom.value = defaultValue;
>> + }
>> + }
>> + }
>> + else if (domValue !== value) {
>> + /* There is value so keep it controlled */
>> + dom.defaultValue = value;
>> + dom.value = value;
>> + }
>> + }
>> +
>> + /**
>> + * There is currently no support for switching same input between controlled and nonControlled
>> + * If that ever becomes a real issue, then re design controlled elements
>> + * Currently user must choose either controlled or non-controlled and stick with that
>> + */
>> + function processElement(flags, vNode, dom, nextPropsOrEmpty, mounting, isControlled) {
>> + if (flags & 64 /* InputElement */) {
>> + applyValueInput(nextPropsOrEmpty, dom);
>> + }
>> + else if (flags & 256 /* SelectElement */) {
>> + applyValueSelect(nextPropsOrEmpty, dom, mounting, vNode);
>> + }
>> + else if (flags & 128 /* TextareaElement */) {
>> + applyValueTextArea(nextPropsOrEmpty, dom, mounting);
>> + }
>> + if (isControlled) {
>> + dom.$V = vNode;
>> + }
>> + }
>> + function addFormElementEventHandlers(flags, dom, nextPropsOrEmpty) {
>> + if (flags & 64 /* InputElement */) {
>> + inputEvents(dom, nextPropsOrEmpty);
>> + }
>> + else if (flags & 256 /* SelectElement */) {
>> + selectEvents(dom);
>> + }
>> + else if (flags & 128 /* TextareaElement */) {
>> + textAreaEvents(dom, nextPropsOrEmpty);
>> + }
>> + }
>> + function isControlledFormElement(nextPropsOrEmpty) {
>> + return nextPropsOrEmpty.type && isCheckedType(nextPropsOrEmpty.type) ? !isNullOrUndef(nextPropsOrEmpty.checked) : !isNullOrUndef(nextPropsOrEmpty.value);
>> + }
>> +
>> + function remove(vNode, parentDom) {
>> + unmount(vNode);
>> + if (parentDom && vNode.dom) {
>> + removeChild(parentDom, vNode.dom);
>> + // Let carbage collector free memory
>> + vNode.dom = null;
>> + }
>> + }
>> + function unmount(vNode) {
>> + var flags = vNode.flags;
>> + if (flags & 481 /* Element */) {
>> + var ref = vNode.ref;
>> + var props = vNode.props;
>> + if (isFunction(ref)) {
>> + ref(null);
>> + }
>> + var children = vNode.children;
>> + var childFlags = vNode.childFlags;
>> + if (childFlags & 12 /* MultipleChildren */) {
>> + unmountAllChildren(children);
>> + }
>> + else if (childFlags === 2 /* HasVNodeChildren */) {
>> + unmount(children);
>> + }
>> + if (!isNull(props)) {
>> + for (var name in props) {
>> + switch (name) {
>> + case 'onClick':
>> + case 'onDblClick':
>> + case 'onFocusIn':
>> + case 'onFocusOut':
>> + case 'onKeyDown':
>> + case 'onKeyPress':
>> + case 'onKeyUp':
>> + case 'onMouseDown':
>> + case 'onMouseMove':
>> + case 'onMouseUp':
>> + case 'onSubmit':
>> + case 'onTouchEnd':
>> + case 'onTouchMove':
>> + case 'onTouchStart':
>> + handleEvent(name, null, vNode.dom);
>> + break;
>> + default:
>> + break;
>> + }
>> + }
>> + }
>> + }
>> + else {
>> + var children$1 = vNode.children;
>> + // Safe guard for crashed VNode
>> + if (children$1) {
>> + if (flags & 14 /* Component */) {
>> + var ref$1 = vNode.ref;
>> + if (flags & 4 /* ComponentClass */) {
>> + if (isFunction(children$1.componentWillUnmount)) {
>> + children$1.componentWillUnmount();
>> + }
>> + if (isFunction(ref$1)) {
>> + ref$1(null);
>> + }
>> + children$1.$UN = true;
>> + if (children$1.$LI) {
>> + unmount(children$1.$LI);
>> + }
>> + }
>> + else {
>> + if (!isNullOrUndef(ref$1) && isFunction(ref$1.onComponentWillUnmount)) {
>> + ref$1.onComponentWillUnmount(vNode.dom, vNode.props || EMPTY_OBJ);
>> + }
>> + unmount(children$1);
>> + }
>> + }
>> + else if (flags & 1024 /* Portal */) {
>> + remove(children$1, vNode.type);
>> + }
>> + }
>> + }
>> + }
>> + function unmountAllChildren(children) {
>> + for (var i = 0, len = children.length; i < len; i++) {
>> + unmount(children[i]);
>> + }
>> + }
>> + function removeAllChildren(dom, children) {
>> + unmountAllChildren(children);
>> + dom.textContent = '';
>> + }
>> +
>> + function createLinkEvent(linkEvent, nextValue) {
>> + return function (e) {
>> + linkEvent(nextValue.data, e);
>> + };
>> + }
>> + function patchEvent(name, lastValue, nextValue, dom) {
>> + var nameLowerCase = name.toLowerCase();
>> + if (!isFunction(nextValue) && !isNullOrUndef(nextValue)) {
>> + var linkEvent = nextValue.event;
>> + if (linkEvent && isFunction(linkEvent)) {
>> + dom[nameLowerCase] = createLinkEvent(linkEvent, nextValue);
>> + }
>> + }
>> + else {
>> + var domEvent = dom[nameLowerCase];
>> + // if the function is wrapped, that means it's been controlled by a wrapper
>> + if (!domEvent || !domEvent.wrapped) {
>> + dom[nameLowerCase] = nextValue;
>> + }
>> + }
>> + }
>> + function getNumberStyleValue(style, value) {
>> + switch (style) {
>> + case 'animationIterationCount':
>> + case 'borderImageOutset':
>> + case 'borderImageSlice':
>> + case 'borderImageWidth':
>> ... 23678 lines suppressed ...
>
Re: [royale-asjs] branch develop updated: ExternsJS library in frameworks added. In ExternsJS project inspiretree external JS library added.
Posted by Harbs <ha...@gmail.com>.
That’s a lot of code.
Where did all this code come from? In particular inspire-tree.js jumped out at me. Where’s that from? inspire tree seems to be MIT licensed:
https://github.com/helion3/inspire-tree/blob/master/LICENSE
You can’t just add an apache header to that and put it in our repo.
> On Nov 23, 2021, at 9:14 PM, alinakazi@apache.org wrote:
>
> This is an automated email from the ASF dual-hosted git repository.
>
> alinakazi pushed a commit to branch develop
> in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
>
>
> The following commit(s) were added to refs/heads/develop by this push:
> new b7b21fc ExternsJS library in frameworks added. In ExternsJS project inspiretree external JS library added.
> b7b21fc is described below
>
> commit b7b21fc0dafd309741acaa29acc745643a4b0d60
> Author: alinakazi <al...@gmail.com>
> AuthorDate: Wed Nov 24 00:14:10 2021 +0500
>
> ExternsJS library in frameworks added. In ExternsJS project inspiretree external JS library added.
> ---
> frameworks/projects/ExternsJS/asconfig.json | 33 +
> frameworks/projects/ExternsJS/build.xml | 182 +
> frameworks/projects/ExternsJS/pom.xml | 276 +
> .../src/main/config/compile-swf-config.xml | 112 +
> .../ExternsJS/src/main/resources/defaults.css | 3255 +++++++++
> .../src/main/resources/externsjs-as-manifest.xml | 25 +
> .../src/main/resources/externsjs-manifest.xml | 27 +
> .../externsjs/inspiretree/New Text Document.html | 56 +
> .../externsjs/inspiretree/inspire-tree-custom.css | 435 ++
> .../externsjs/inspiretree/inspire-tree-custom.sass | 541 ++
> .../externsjs/inspiretree/inspire-tree-dark.css | 325 +
> .../inspiretree/inspire-tree-dark.min.css | 14 +
> .../inspiretree/inspire-tree-dom-royale.js | 3766 +++++++++++
> .../externsjs/inspiretree/inspire-tree-dom.js | 3764 +++++++++++
> .../externsjs/inspiretree/inspire-tree-dom.min.js | 21 +
> .../inspiretree/inspire-tree-light-jewel-blue.css | 619 ++
> .../externsjs/inspiretree/inspire-tree-light.css | 347 +
> .../inspiretree/inspire-tree-light.min.css | 14 +
> .../externsjs/inspiretree/inspire-tree-royale.js | 7126 ++++++++++++++++++++
> .../externsjs/inspiretree/inspire-tree.js | 7088 +++++++++++++++++++
> .../externsjs/inspiretree/inspire-tree.min.js | 29 +
> .../inspiretree/jewel-blue/collapsed_blue.svg | 14 +
> .../jewel-blue/expand_less_black_24dp.svg | 14 +
> .../jewel-blue/expand_more_black_24dp.svg | 14 +
> .../inspiretree/jewel-blue/expanded_blue.svg | 21 +
> .../ExternsJS/src/main/royale/ExternsJSClasses.as | 53 +
> .../royale/externsjs/inspiretree/IInspireTree.as | 33 +
> .../royale/externsjs/inspiretree/InspireTree.as | 897 +++
> .../inspiretree/InspireTreeBasicControl.as | 277 +
> .../royale/externsjs/inspiretree/InspireTreeDOM.as | 74 +
> .../royale/externsjs/inspiretree/TreeEvent.as | 112 +
> .../royale/externsjs/inspiretree/TreeNode.as | 650 ++
> .../royale/externsjs/inspiretree/TreeNodes.as | 620 ++
> .../royale/externsjs/inspiretree/UtilsTree.as | 28 +
> .../beads/InspireTreeCheckBoxModeBead.as | 339 +
> .../inspiretree/beads/InspireTreeEventsBead.as | 215 +
> .../inspiretree/beads/InspireTreeIconBead.as | 576 ++
> .../inspiretree/beads/InspireTreePaginateBead.as | 162 +
> .../beads/InspireTreeReadOnlyCheckBead.as | 160 +
> .../beads/InspireTreeReadOnlyCheckBead_V0.as | 152 +
> .../beads/InspireTreeRevertCheckBead.as | 185 +
> .../inspiretree/beads/models/InspireTreeModel.as | 290 +
> .../royale/externsjs/inspiretree/vos/ConfigDOM.as | 64 +
> .../royale/externsjs/inspiretree/vos/ConfigTree.as | 30 +
> .../externsjs/inspiretree/vos/DragAndDropConfig.as | 33 +
> .../externsjs/inspiretree/vos/ItemTreeNode.as | 146 +
> .../externsjs/inspiretree/vos/OptionsTree.as | 101 +
> 47 files changed, 33315 insertions(+)
>
> diff --git a/frameworks/projects/ExternsJS/asconfig.json b/frameworks/projects/ExternsJS/asconfig.json
> new file mode 100644
> index 0000000..3b1f1b3
> --- /dev/null
> +++ b/frameworks/projects/ExternsJS/asconfig.json
> @@ -0,0 +1,33 @@
> +/*
> + * Licensed to the Apache Software Foundation (ASF) under one or more
> + * contributor license agreements. See the NOTICE file distributed with
> + * this work for additional information regarding copyright ownership.
> + * The ASF licenses this file to You 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
> + *
> + * Unless required by applicable law or agreed to in writing, software
> + * distributed under the License is distributed on an "AS IS" BASIS,
> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
> + * See the License for the specific language governing permissions and
> + * limitations under the License.
> + */
> + {
> + "config": "royale",
> + "type": "lib",
> + "compilerOptions": {
> + "debug": true,
> + "targets": [
> + "JSRoyale", "SWF"
> + ],
> + "include-classes": [
> + "src/main/royale/ExternsJSClasses.as"
> + ],
> + "source-path": [
> + "src/main/royale"
> + ],
> + "output": "target/ExternsJS.swc"
> + }
> +}
> diff --git a/frameworks/projects/ExternsJS/build.xml b/frameworks/projects/ExternsJS/build.xml
> new file mode 100644
> index 0000000..697b257
> --- /dev/null
> +++ b/frameworks/projects/ExternsJS/build.xml
> @@ -0,0 +1,182 @@
> +<?xml version="1.0"?>
> +<!--
> +
> + Licensed to the Apache Software Foundation (ASF) under one or more
> + contributor license agreements. See the NOTICE file distributed with
> + this work for additional information regarding copyright ownership.
> + The ASF licenses this file to You 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
> +
> + Unless required by applicable law or agreed to in writing, software
> + distributed under the License is distributed on an "AS IS" BASIS,
> + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
> + See the License for the specific language governing permissions and
> + limitations under the License.
> +
> +-->
> +
> +
> +<project name="ExternsJS" default="main" basedir=".">
> + <property name="ROYALE_HOME" location="../../.."/>
> +
> + <property file="${ROYALE_HOME}/env.properties"/>
> + <property environment="env"/>
> + <property file="${ROYALE_HOME}/local.properties"/>
> + <property file="${ROYALE_HOME}/build.properties"/>
> + <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
> + <condition property="AIR_HOME" value="${env.AIR_HOME}">
> + <isset property="env.AIR_HOME" />
> + </condition>
> + <property name="AIR_HOME" value="${ROYALE_HOME}"/>
> + <condition property="PLAYERGLOBAL_HOME" value="${env.PLAYERGLOBAL_HOME}">
> + <isset property="env.PLAYERGLOBAL_HOME" />
> + </condition>
> + <property name="PLAYERGLOBAL_HOME" value="${ROYALE_HOME}/frameworks/libs/player"/>
> +
> + <property name="target.name" value="${ant.project.name}.swc" />
> +
> + <tstamp>
> + <format property="royale.swc-date" pattern="MM/dd/yy HH:mm Z"/>
> + </tstamp>
> + <echo>swc-date is ${royale.swc-date}</echo>
> +
> + <target name="main" depends="clean,check-compiler,compile,compile-js,copy-swc,test" description="Full build of ${ant.project.name}.swc">
> + </target>
> +
> + <target name="compile-js">
> + <ant dir="${ROYALE_HOME}/frameworks/js/projects/${ant.project.name}JS/" inheritAll="false" >
> + <property name="ROYALE_SWF_COMPILER_HOME" value="${ROYALE_SWF_COMPILER_HOME}"/>
> + <property name="ROYALE_COMPILER_HOME" value="${ROYALE_COMPILER_HOME}"/>
> + <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
> + </ant>
> + </target>
> +
> + <target name="copy-swc" if="AIR_HOME">
> + <copy file="${basedir}/target/${target.name}" tofile="${ROYALE_HOME}/frameworks/libs/${target.name}" />
> + </target>
> +
> + <target name="check-for-tests" >
> + <condition property="skip-tests" >
> + <not>
> + <available file="${basedir}/src/test/royale/build.xml" />
> + </not>
> + </condition>
> + <!-- exclude from js-only build -->
> + <condition property="skip-swf-tests">
> + <or>
> + <isset property="skip-tests" />
> + <not>
> + <!-- env.AIR_HOME is how we determine if it's a SWF distritbution -->
> + <isset property="env.AIR_HOME" />
> + </not>
> + </or>
> + </condition>
> + </target>
> +
> + <target name="test" depends="check-for-tests,check-compiler" unless="skip-tests">
> + <antcall target="test-swf" />
> + </target>
> +
> + <target name="test-swf" unless="skip-swf-tests">
> + <ant dir="src/test/royale" />
> + </target>
> +
> + <target name="clean">
> + <delete failonerror="false">
> + <fileset dir="${ROYALE_HOME}/frameworks/libs">
> + <include name="${target.name}"/>
> + </fileset>
> + </delete>
> + <delete failonerror="false" includeemptydirs="true">
> + <fileset dir="${basedir}/target">
> + <include name="**/**"/>
> + </fileset>
> + </delete>
> + <antcall target="clean-tests" />
> + </target>
> +
> + <target name="clean-tests" depends="check-for-tests" unless="skip-tests">
> + <ant dir="src/test/royale" target="clean"/>
> + </target>
> +
> + <target name="compile" description="Compiles .as files into .swc" if="AIR_HOME">
> + <!-- use antcall so that resultproperty can be used in other projects and
> + they don't collide when being run one after the other -->
> + <antcall target="compile-swf" />
> + </target>
> +
> + <target name="compile-swf">
> + <echo message="Compiling libs/${ant.project.name}.swc"/>
> + <echo message="ROYALE_HOME: ${ROYALE_HOME}"/>
> + <echo message="ROYALE_SWF_COMPILER_HOME: ${ROYALE_SWF_COMPILER_HOME}"/>
> + <echo message="ROYALE_COMPILER_HOME: ${ROYALE_COMPILER_HOME}"/>
> +
> + <java jar="${ROYALE_COMPILER_HOME}/lib/compc.jar" fork="true" resultproperty="compcoutput">
> + <jvmarg value="-Xmx384m" />
> + <jvmarg value="-Dsun.io.useCanonCaches=false" />
> + <jvmarg value="-Droyalelib=${ROYALE_HOME}/frameworks" />
> + <arg value="+royalelib=${ROYALE_HOME}/frameworks" />
> + <arg value="+playerglobal.version=${playerglobal.version}" />
> + <arg value="+env.AIR_HOME=${AIR_HOME}" />
> + <arg value="-compiler.strict-xml=true" />
> + <arg value="-compiler.targets=SWF,JSRoyale" />
> + <arg line="-metadata.date="${royale.swc-date}"" />
> + <arg line="-metadata.dateFormat="MM/dd/yy HH:mm Z"" />
> + <arg line="-swf-debugfile-alias="/org/apache/royale/${release.version}"" />
> + <arg value="-output=${basedir}/target/${target.name}" />
> + <arg value="-load-config=${basedir}/src/main/config/compile-swf-config.xml" />
> + <arg value="-js-load-config=${ROYALE_HOME}/frameworks/js-config.xml" />
> + <arg value="-js-load-config+=${basedir}/../../js/projects/${ant.project.name}JS/src/main/config/compile-js-config.xml" />
> + </java>
> + <fail>
> + <condition>
> + <not>
> + <or>
> + <equals arg1="${compcoutput}" arg2="0" />
> + <equals arg1="${compcoutput}" arg2="2" />
> + </or>
> + </not>
> + </condition>
> + </fail>
> + </target>
> +
> + <target name="check-compiler" depends="check-compiler-home,check-transpiler-home">
> + <path id="lib.path">
> + <fileset dir="${ROYALE_COMPILER_HOME}/lib" includes="compiler-royaleTasks.jar"/>
> + </path>
> + <taskdef resource="flexTasks.tasks" classpathref="lib.path"/>
> + </target>
> +
> + <target name="check-compiler-home"
> + description="Set ROYALE_SWF_COMPILER_HOME to point at the compiler.">
> +
> + <available file="${ROYALE_HOME}/lib/compiler-mxmlc.jar"
> + type="file"
> + property="ROYALE_SWF_COMPILER_HOME"
> + value="${ROYALE_HOME}"/>
> +
> + <fail message="ROYALE_SWF_COMPILER_HOME must be set to a folder with a lib sub-folder containing compiler-mxmlc.jar such as the compiler folder in royale-compiler repo or the root of a Royale SDK"
> + unless="ROYALE_SWF_COMPILER_HOME"/>
> + </target>
> +
> + <target name="check-transpiler-home"
> + description="Set ROYALE_COMPILER_HOME to point at the cross-compiler.">
> +
> + <available file="${ROYALE_HOME}/js/lib/jsc.jar"
> + type="file"
> + property="ROYALE_COMPILER_HOME"
> + value="${ROYALE_HOME}/js"/>
> +
> + <available file="${env.ROYALE_COMPILER_HOME}/lib/jsc.jar"
> + type="file"
> + property="ROYALE_COMPILER_HOME"
> + value="${env.ROYALE_COMPILER_HOME}"/>
> +
> + <fail message="ROYALE_COMPILER_HOME must be set to a folder with a lib sub-folder containing jsc.jar such as the compiler-jx folder in royale-compiler repo or the js folder of a Royale SDK"
> + unless="ROYALE_COMPILER_HOME"/>
> + </target>
> +
> +</project>
> diff --git a/frameworks/projects/ExternsJS/pom.xml b/frameworks/projects/ExternsJS/pom.xml
> new file mode 100644
> index 0000000..8f97429
> --- /dev/null
> +++ b/frameworks/projects/ExternsJS/pom.xml
> @@ -0,0 +1,276 @@
> +<?xml version="1.0" encoding="UTF-8"?>
> +<!--
> +
> + Licensed to the Apache Software Foundation (ASF) under one or more
> + contributor license agreements. See the NOTICE file distributed with
> + this work for additional information regarding copyright ownership.
> + The ASF licenses this file to You 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
> +
> + Unless required by applicable law or agreed to in writing, software
> + distributed under the License is distributed on an "AS IS" BASIS,
> + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
> + See the License for the specific language governing permissions and
> + limitations under the License.
> +
> +--><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
> + <modelVersion>4.0.0</modelVersion>
> +
> + <parent>
> + <groupId>org.apache.royale.framework</groupId>
> + <artifactId>projects</artifactId>
> + <version>0.9.9-SNAPSHOT</version>
> + </parent>
> +
> + <artifactId>ExternsJS</artifactId>
> + <version>0.9.9-SNAPSHOT</version>
> + <packaging>swc</packaging>
> +
> + <name>Apache Royale: Framework: Libs: ExternsJS</name>
> +
> + <build>
> + <sourceDirectory>src/main/royale</sourceDirectory>
> + <plugins>
> + <plugin>
> + <groupId>org.apache.royale.compiler</groupId>
> + <artifactId>royale-maven-plugin</artifactId>
> + <version>${project.royale.compiler.version}</version>
> + <extensions>true</extensions>
> + <configuration>
> + <namespaces>
> + <namespace>
> + <uri>library://ns.apache.org/royale/externsjs</uri>
> + <manifest>${project.basedir}/src/main/resources/externsjs-manifest.xml</manifest>
> + </namespace>
> + <namespace>
> + <type>as</type>
> + <uri>library://ns.apache.org/royale/externsjs</uri>
> + <manifest>${project.basedir}/src/main/resources/externsjs-as-manifest.xml</manifest>
> + </namespace>
> + </namespaces>
> + <includeClasses>
> + <includeClass>ExternsJSClasses</includeClass>
> + </includeClasses>
> + <includeFiles>
> + <include-file>
> + <name>defaults.css</name>
> + <path>../src/main/resources/defaults.css</path>
> + </include-file>
> + </includeFiles>
> + <includeLookupOnly>true</includeLookupOnly>
> + <allowSubclassOverrides>true</allowSubclassOverrides>
> + <skipExtern>true</skipExtern>
> + <skipAS>${royale.skipAS}</skipAS>
> + <!-- <additionalCompilerOptions>
> + -source-map=true;
> + -source-map-source-root=/frameworks/projects/ExternsJS/src/main/royale/
> + </additionalCompilerOptions> -->
> + </configuration>
> + </plugin>
> + <plugin>
> + <groupId>nl.geodienstencentrum.maven</groupId>
> + <artifactId>sass-maven-plugin</artifactId>
> + <configuration>
> + <resources>
> + <resource>
> + <source>
> + <directory>${basedir}/src/main/resources/externsjs/inspiretree</directory>
> + <includes>
> + <include>**/*.sass</include>
> + </includes>
> + </source>
> + <destination>${basedir}/src/main/resources/externsjs/inspiretree</destination>
> + </resource>
> + </resources>
> + </configuration>
> + <executions>
> + <execution>
> + <id>generate-css-using-sass</id>
> + <goals>
> + <goal>update-stylesheets</goal>
> + </goals>
> + <phase>generate-resources</phase>
> + </execution>
> + </executions>
> + </plugin>
> + <plugin>
> + <groupId>com.google.code.maven-replacer-plugin</groupId>
> + <artifactId>replacer</artifactId>
> + <version>1.5.3</version>
> + <executions>
> + <execution>
> + <phase>generate-resources</phase>
> + <goals>
> + <goal>replace</goal>
> + </goals>
> + </execution>
> + </executions>
> + <configuration>
> + <includes>
> + <include>${basedir}/src/main/resources/**/*.css</include>
> + </includes>
> + <regex>false</regex>
> + <replacements>
> + <replacement>
> + <token>@@ZERO_WIDTH_SPACE</token>
> + <value>\200b</value>
> + </replacement>
> + <replacement>
> + <token>@@NON_BREAKING_SPACE</token>
> + <value>\0a</value>
> + </replacement>
> + </replacements>
> + </configuration>
> + </plugin>
> + </plugins>
> + </build>
> +
> + <dependencies>
> + <dependency>
> + <groupId>org.apache.royale.framework</groupId>
> + <artifactId>Core</artifactId>
> + <version>0.9.9-SNAPSHOT</version>
> + <type>swc</type>
> + <classifier>js</classifier>
> + </dependency>
> + <dependency>
> + <groupId>org.apache.royale.framework</groupId>
> + <artifactId>Binding</artifactId>
> + <version>0.9.9-SNAPSHOT</version>
> + <type>swc</type>
> + <classifier>js</classifier>
> + </dependency>
> + <dependency>
> + <groupId>org.apache.royale.framework</groupId>
> + <artifactId>Graphics</artifactId>
> + <version>0.9.9-SNAPSHOT</version>
> + <type>swc</type>
> + <classifier>js</classifier>
> + </dependency>
> + <dependency>
> + <groupId>org.apache.royale.framework</groupId>
> + <artifactId>Collections</artifactId>
> + <version>0.9.9-SNAPSHOT</version>
> + <type>swc</type>
> + <classifier>js</classifier>
> + </dependency>
> + <dependency>
> + <groupId>org.apache.royale.framework</groupId>
> + <artifactId>HTML</artifactId>
> + <version>0.9.9-SNAPSHOT</version>
> + <type>swc</type>
> + <classifier>js</classifier>
> + </dependency>
> + <dependency>
> + <groupId>org.apache.royale.framework</groupId>
> + <artifactId>Basic</artifactId>
> + <version>0.9.9-SNAPSHOT</version>
> + <type>swc</type>
> + <classifier>js</classifier>
> + </dependency>
> + <dependency>
> + <groupId>org.apache.royale.framework</groupId>
> + <artifactId>Formatters</artifactId>
> + <version>0.9.9-SNAPSHOT</version>
> + <type>swc</type>
> + <classifier>js</classifier>
> + </dependency>
> + </dependencies>
> +
> + <profiles>
> + <profile>
> + <id>platform-windows</id>
> + <activation>
> + <os>
> + <family>windows</family>
> + </os>
> + </activation>
> + <build>
> + <plugins>
> + <plugin>
> + <groupId>nl.geodienstencentrum.maven</groupId>
> + <artifactId>sass-maven-plugin</artifactId>
> + <executions>
> + <execution>
> + <id>generate-css-using-sass</id>
> + <goals>
> + <goal>update-stylesheets</goal>
> + </goals>
> + <phase>generate-resources</phase>
> + <configuration>
> + <sassOptions>
> + <!-- on windows it is typical to have autoCRLF=true,
> + so we don't want to overwrite
> + the CRLF newlines with unix newlines (which is true by default)
> + locally, because that will change git status of the css file
> + on windows
> + -->
> + <unix_newlines>false</unix_newlines>
> + </sassOptions>
> + </configuration>
> + </execution>
> + </executions>
> + </plugin>
> + </plugins>
> + </build>
> + </profile>
> + <profile>
> + <id>option-with-swf</id>
> + <dependencies>
> + <dependency>
> + <groupId>org.apache.royale.framework</groupId>
> + <artifactId>Core</artifactId>
> + <version>0.9.9-SNAPSHOT</version>
> + <type>swc</type>
> + <classifier>swf</classifier>
> + </dependency>
> + <dependency>
> + <groupId>org.apache.royale.framework</groupId>
> + <artifactId>Binding</artifactId>
> + <version>0.9.9-SNAPSHOT</version>
> + <type>swc</type>
> + <classifier>swf</classifier>
> + </dependency>
> + <dependency>
> + <groupId>org.apache.royale.framework</groupId>
> + <artifactId>Graphics</artifactId>
> + <version>0.9.9-SNAPSHOT</version>
> + <type>swc</type>
> + <classifier>swf</classifier>
> + </dependency>
> + <dependency>
> + <groupId>org.apache.royale.framework</groupId>
> + <artifactId>Collections</artifactId>
> + <version>0.9.9-SNAPSHOT</version>
> + <type>swc</type>
> + <classifier>swf</classifier>
> + </dependency>
> + <dependency>
> + <groupId>org.apache.royale.framework</groupId>
> + <artifactId>HTML</artifactId>
> + <version>0.9.9-SNAPSHOT</version>
> + <type>swc</type>
> + <classifier>swf</classifier>
> + </dependency>
> + <dependency>
> + <groupId>org.apache.royale.framework</groupId>
> + <artifactId>Basic</artifactId>
> + <version>0.9.9-SNAPSHOT</version>
> + <type>swc</type>
> + <classifier>swf</classifier>
> + </dependency>
> + <dependency>
> + <groupId>org.apache.royale.framework</groupId>
> + <artifactId>Formatters</artifactId>
> + <version>0.9.9-SNAPSHOT</version>
> + <type>swc</type>
> + <classifier>swf</classifier>
> + </dependency>
> + </dependencies>
> + </profile>
> + </profiles>
> +
> +<properties /></project>
> diff --git a/frameworks/projects/ExternsJS/src/main/config/compile-swf-config.xml b/frameworks/projects/ExternsJS/src/main/config/compile-swf-config.xml
> new file mode 100644
> index 0000000..8981130
> --- /dev/null
> +++ b/frameworks/projects/ExternsJS/src/main/config/compile-swf-config.xml
> @@ -0,0 +1,112 @@
> +<!--
> +
> + Licensed to the Apache Software Foundation (ASF) under one or more
> + contributor license agreements. See the NOTICE file distributed with
> + this work for additional information regarding copyright ownership.
> + The ASF licenses this file to You 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
> +
> + Unless required by applicable law or agreed to in writing, software
> + distributed under the License is distributed on an "AS IS" BASIS,
> + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
> + See the License for the specific language governing permissions and
> + limitations under the License.
> +
> +-->
> +<royale-config>
> +
> + <compiler>
> + <accessible>false</accessible>
> +
> + <!-- build both SWF and JS. -->
> + <targets>
> + <target>JSRoyale</target>
> + </targets>
> + <strict-xml>true</strict-xml>
> +
> + <external-library-path>
> + <path-element>${env.AIR_HOME}/frameworks/libs/air/airglobal.swc</path-element>
> + <path-element>../../../../../libs/Binding.swc</path-element>
> + <path-element>../../../../../libs/Core.swc</path-element>
> + <path-element>../../../../../libs/Graphics.swc</path-element>
> + <path-element>../../../../../libs/Basic.swc</path-element>
> + <path-element>../../../../../libs/Collections.swc</path-element>
> + <path-element>../../../../../libs/HTML.swc</path-element>
> + <path-element>../../../../../libs/Formatters.swc</path-element>
> + </external-library-path>
> +
> + <allow-subclass-overrides>true</allow-subclass-overrides>
> + <mxml>
> + <children-as-data>true</children-as-data>
> + <imports>
> + <implicit-import>org.apache.royale.events.*</implicit-import>
> + <implicit-import>org.apache.royale.geom.*</implicit-import>
> + <implicit-import>org.apache.royale.core.ClassFactory</implicit-import>
> + <implicit-import>org.apache.royale.core.IFactory</implicit-import>
> + </imports>
> + </mxml>
> + <binding-value-change-event>org.apache.royale.events.ValueChangeEvent</binding-value-change-event>
> + <binding-value-change-event-kind>org.apache.royale.events.ValueChangeEvent</binding-value-change-event-kind>
> + <binding-value-change-event-type>valueChange</binding-value-change-event-type>
> +
> + <define>
> + <name>COMPILE::SWF</name>
> + <value>true</value>
> + </define>
> + <define>
> + <name>COMPILE::JS</name>
> + <value>false</value>
> + </define>
> +
> + <keep-as3-metadata>
> + <name>Bindable</name>
> + <name>Managed</name>
> + <name>ChangeEvent</name>
> + <name>NonCommittingChangeEvent</name>
> + <name>Transient</name>
> + </keep-as3-metadata>
> +
> + <locale/>
> +
> + <library-path/>
> +
> + <namespaces>
> + <namespace>
> + <uri>library://ns.apache.org/royale/externsjs</uri>
> + <manifest>../resources/externsjs-manifest.xml</manifest>
> + </namespace>
> + <namespace>
> + <uri>library://ns.apache.org/royale/externsjs</uri>
> + <manifest>../resources/externsjs-as-manifest.xml</manifest>
> + </namespace>
> + </namespaces>
> +
> + <source-path>
> + <path-element>../royale</path-element>
> + </source-path>
> +
> + <warn-no-constructor>false</warn-no-constructor>
> + </compiler>
> +
> + <include-file>
> + <name>defaults.css</name>
> + <path>../resources/defaults.css</path>
> + </include-file>
> +
> + <include-lookup-only>true</include-lookup-only>
> +
> + <include-classes>
> + <class>ExternsJSClasses</class>
> + </include-classes>
> +
> + <include-namespaces>
> + <uri>library://ns.apache.org/royale/externsjs</uri>
> + </include-namespaces>
> +
> + <target-player>${playerglobal.version}</target-player>
> +
> +
> +</royale-config>
> diff --git a/frameworks/projects/ExternsJS/src/main/resources/defaults.css b/frameworks/projects/ExternsJS/src/main/resources/defaults.css
> new file mode 100644
> index 0000000..c8dab5d
> --- /dev/null
> +++ b/frameworks/projects/ExternsJS/src/main/resources/defaults.css
> @@ -0,0 +1,3255 @@
> +/**
> + * Licensed to the Apache Software Foundation (ASF) under one or more
> + * contributor license agreements. See the NOTICE file distributed with
> + * this work for additional information regarding copyright ownership.
> + * The ASF licenses this file to You 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
> + *
> + * Unless required by applicable law or agreed to in writing, software
> + * distributed under the License is distributed on an "AS IS" BASIS,
> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
> + * See the License for the specific language governing permissions and
> + * limitations under the License.
> + */
> +@namespace j "library://ns.apache.org/royale/externsjs";
> +@namespace "http://www.w3.org/1999/xhtml";
> +*, :after, :before {
> + box-sizing: border-box; }
> +
> +html, body {
> + height: 100%; }
> +
> +::-moz-focus-inner, ::-moz-focus-outer {
> + border: 0; }
> +
> +input:focus, textarea:focus, select:focus, div:focus, label:focus, nav:focus, li:focus, a:focus {
> + outline: none; }
> +
> +select::-ms-expand {
> + display: none; }
> +
> +button::-moz-focus-inner {
> + padding: 0; }
> +
> +button, input, textarea {
> + font-size: 100%; }
> +
> +.cursor-pointer {
> + cursor: pointer !important; }
> +
> +j|View {
> + IBeadView: ClassReference("org.apache.royale.html.beads.GroupView");
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.ViewLayout"); }
> +
> +.responsive-view {
> + display: inline-flex;
> + width: 100%;
> + height: 100%; }
> +
> +j|Group {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.BasicLayout");
> + IBeadView: ClassReference("org.apache.royale.html.beads.GroupView"); }
> +
> +.externsjs.group {
> + overflow: visible; }
> +
> +j|HGroup {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout"); }
> +
> +j|VGroup {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout"); }
> +
> +j|Grid {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.GridLayout"); }
> +
> +j|ScrollableGrid {
> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport"); }
> +
> +j|GridCell {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.GridCellLayout"); }
> +
> +j|Container {
> + IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.BasicLayout");
> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
> +
> +j|HContainer {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout"); }
> +
> +j|VContainer {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout"); }
> +
> +j|Image {
> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.ImageModel");
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.ImageView"); }
> +
> +j|BinaryImage {
> + IBeadModel: ClassReference("org.apache.royale.html.beads.models.BinaryImageModel");
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.ImageView");
> + IBinaryImageLoader: ClassReference("org.apache.royale.html.beads.BinaryImageLoader"); }
> +
> +j|DataContainer {
> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.DataProviderModel");
> + IBeadView: ClassReference("org.apache.royale.html.beads.DataContainerView");
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout");
> + IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForCollectionView");
> + IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
> + IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.StringItemRenderer");
> + IItemRendererInitializer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DataContainerItemRendererInitializer");
> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
> +
> +j|Validator {
> + ILocalizedValuesImpl: ClassReference("org.apache.royale.core.SimpleLocalizedValuesImpl"); }
> +
> +j|Form {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.FormLayout"); }
> +
> +@media -royale-swf {
> + j|Container {
> + IContentView: ClassReference("org.apache.royale.html.supportClasses.ContainerContentArea"); } }
> +hr {
> + border: 0;
> + height: 1px; }
> +
> +.responsiveSizeMonitor {
> + background: rgba(0, 0, 0, 0.8);
> + color: white;
> + padding: 10px;
> + position: fixed;
> + bottom: 0;
> + right: 0;
> + width: 250px; }
> + .responsiveSizeMonitor strong {
> + color: yellow; }
> +
> +.externsjs.alert {
> + position: fixed;
> + top: 50%;
> + left: 50%;
> + min-width: 350px;
> + min-height: 200px; }
> + .externsjs.alert .externsjs.titlebar {
> + height: 50px; }
> + .externsjs.alert .content {
> + position: absolute;
> + top: 50px;
> + bottom: 50px;
> + width: 100%;
> + overflow-y: auto; }
> + .externsjs.alert .content .externsjs.label {
> + white-space: normal; }
> + .externsjs.alert .externsjs.controlbar {
> + bottom: 0;
> + height: 50px; }
> +
> +@media all and (-ms-high-contrast: none) {
> + .externsjs.alert {
> + display: table; } }
> +@media (min-width: 768px) {
> + .externsjs.alert {
> + min-width: 450px; } }
> +j|Alert {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout");
> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.AlertModel");
> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.AlertController");
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.AlertView"); }
> +
> +.externsjs.badge {
> + z-index: 2;
> + position: absolute;
> + top: -1em;
> + right: -1em;
> + text-transform: initial;
> + padding: 0.5em;
> + min-width: 2.1em; }
> + .externsjs.badge.overlap {
> + top: 0em;
> + right: 0em; }
> + .externsjs.badge.subindex {
> + top: auto;
> + bottom: -1em; }
> + .externsjs.badge.subindex.overlap {
> + top: auto;
> + bottom: 0em; }
> + .externsjs.badge.preindex {
> + left: -1em;
> + right: auto; }
> + .externsjs.badge.preindex.overlap {
> + left: 0em;
> + right: auto; }
> +
> +.externsjs.button {
> + cursor: pointer;
> + user-select: none;
> + display: inline-flex;
> + position: relative;
> + align-items: center;
> + justify-content: center;
> + vertical-align: middle;
> + overflow: hidden;
> + outline: none;
> + white-space: nowrap;
> + line-height: normal !important;
> + text-align: center;
> + text-decoration: none; }
> + .externsjs.button[disabled] {
> + cursor: default; }
> + .externsjs.button.multiline {
> + white-space: pre-wrap; }
> + .externsjs.button .fonticon {
> + cursor: inherit; }
> + .externsjs.button.viewport {
> + overflow: visible; }
> +
> +@media -royale-swf {
> + j|Button {
> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.TextModel");
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.ButtonView"); } }
> +.externsjs.buttonbar .externsjs.button, .externsjs.buttonbar .externsjs.togglebutton {
> + border-radius: 0; }
> + .externsjs.buttonbar .externsjs.button.first, .externsjs.buttonbar .externsjs.togglebutton.first {
> + border-top-left-radius: 0.25rem;
> + border-bottom-left-radius: 0.25rem; }
> + .externsjs.buttonbar .externsjs.button.last, .externsjs.buttonbar .externsjs.togglebutton.last {
> + border-top-right-radius: 0.25rem;
> + border-bottom-right-radius: 0.25rem; }
> +
> +j|ButtonBar {
> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.ButtonBarModel");
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.ButtonBarView");
> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.ListSingleSelectionMouseController");
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.ButtonBarLayout");
> + IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.SelectionDataItemRendererFactoryForCollectionView");
> + IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
> + IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.ButtonBarItemRenderer");
> + IItemRendererInitializer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ButtonBarItemRendererInitializer"); }
> +
> +@media -royale-swf {
> + j|ButtonBar {
> + IContentView: ClassReference("org.apache.royale.externsjs.supportClasses.list.DataGroup"); } }
> +j|IconButtonBar {
> + IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.IconButtonBarItemRenderer"); }
> +
> +.externsjs.buttonbar.toggle-on-click .externsjs.togglebutton.selected {
> + pointer-events: none; }
> +
> +j|ToggleButtonBar {
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.ToggleButtonBarView");
> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.ToggleButtonBarSelectionMouseController");
> + IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.ToggleButtonBarItemRenderer"); }
> +
> +.externsjs.card {
> + min-width: 120px;
> + min-height: 52px;
> + position: relative; }
> + .externsjs.card .card-header {
> + width: 100%; }
> + .externsjs.card .card-header .card-title {
> + flex: 1 1 auto;
> + overflow: hidden;
> + text-decoration: inherit;
> + text-overflow: ellipsis;
> + text-transform: inherit;
> + z-index: 1; }
> + .externsjs.card .card-expanded-content {
> + width: 100%; }
> + .externsjs.card .card-primary-content {
> + width: 100%;
> + min-height: 152px;
> + position: relative;
> + outline: none;
> + color: inherit;
> + text-decoration: none;
> + flex: 1 1 auto; }
> + .externsjs.card .card-actions {
> + width: 100%;
> + position: relative;
> + outline: none;
> + color: inherit;
> + text-decoration: none; }
> +
> +.externsjs.checkbox {
> + display: inline-flex;
> + position: relative;
> + margin: 0;
> + padding: 0;
> + height: auto; }
> + .externsjs.checkbox input {
> + -webkit-appearance: none;
> + -moz-appearance: none;
> + -o-appearance: none;
> + -ms-appearance: none;
> + appearance: none;
> + display: inline-flex;
> + margin: 0;
> + padding: 0;
> + width: 24px;
> + height: 24px;
> + opacity: 0; }
> + .externsjs.checkbox input + span::before {
> + content: " ";
> + position: absolute;
> + left: 0px;
> + top: 0px;
> + width: 22px;
> + height: 22px; }
> + .externsjs.checkbox input + span::after {
> + content: " ";
> + position: absolute;
> + width: 22px;
> + height: 22px;
> + left: 0px;
> + top: 0px;
> + opacity: 0; }
> + .externsjs.checkbox input:checked + span::after, .externsjs.checkbox input:checked:active + span::after {
> + opacity: 1; }
> + .externsjs.checkbox input:focus + span::before, .externsjs.checkbox input:checked:focus + span::before, .externsjs.checkbox input:checked:active:focus + span::before {
> + outline: none; }
> + .externsjs.checkbox input[disabled] + span {
> + cursor: unset; }
> + .externsjs.checkbox span {
> + cursor: pointer;
> + margin: auto;
> + width: inherit; }
> +
> +.externsjs.switch {
> + display: inline-flex;
> + position: relative;
> + height: auto; }
> + .externsjs.switch input {
> + -webkit-appearance: none;
> + -moz-appearance: none;
> + -o-appearance: none;
> + -ms-appearance: none;
> + appearance: none;
> + display: inline-flex;
> + opacity: 0;
> + width: 44px;
> + height: 24px;
> + margin: 0;
> + padding: 0; }
> + .externsjs.switch input[disabled] + span {
> + cursor: unset; }
> + .externsjs.switch .switch {
> + position: absolute;
> + cursor: pointer;
> + top: 0;
> + left: 0;
> + right: 0;
> + bottom: 0;
> + width: 44px;
> + height: 24px; }
> + .externsjs.switch .switch::before {
> + position: absolute;
> + content: "";
> + height: 20px;
> + width: 20px;
> + left: 2px;
> + bottom: 2px; }
> + .externsjs.switch .label {
> + cursor: pointer;
> + margin: auto;
> + width: inherit; }
> +
> +.externsjs.combobox {
> + display: inline-flex; }
> + .externsjs.combobox .externsjs.textinput {
> + display: block; }
> + .externsjs.combobox .externsjs.button::before {
> + margin: 0;
> + padding: 0; }
> + .externsjs.combobox .externsjs.button::after {
> + content: " ";
> + position: absolute; }
> +
> +j|ComboBox {
> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.ComboBoxModel");
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.ComboBoxView");
> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.ComboBoxController");
> + IPopUp: ClassReference("org.apache.royale.externsjs.supportClasses.combobox.ComboBoxPopUp"); }
> +
> +.combobox-popup {
> + position: fixed;
> + pointer-events: none;
> + bottom: 0;
> + left: 0;
> + width: 100%;
> + height: 100%;
> + overflow: hidden;
> + contain: strict;
> + z-index: 60;
> + color: rgba(0, 0, 0, 0.8); }
> + .combobox-popup::before {
> + position: absolute;
> + display: block;
> + top: 0;
> + left: 0;
> + width: 100%;
> + height: 100%;
> + content: "";
> + opacity: 0;
> + background-color: rgba(0, 0, 0, 0.65);
> + will-change: opacity;
> + transition: opacity 0.4s 0ms; }
> + .combobox-popup .externsjs.list {
> + position: relative;
> + transform: translate(-50%, 100%);
> + transition: none;
> + will-change: transform, opacity;
> + bottom: auto;
> + top: calc(100% - 10px);
> + left: 50%;
> + box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7) !important;
> + opacity: 0; }
> + .combobox-popup.open {
> + pointer-events: auto; }
> + .combobox-popup.open::before {
> + opacity: 1; }
> + .combobox-popup.open .externsjs.list {
> + transform: translate(-50%, -100%);
> + transition: transform 0.3s 0ms, opacity 0.3s 0ms;
> + opacity: 1; }
> +
> +@media (max-width: 767px) {
> + .combobox-popup .externsjs.list {
> + width: 98% !important;
> + max-height: 240px !important; }
> + .combobox-popup .externsjs.list .externsjs.item {
> + min-height: 48px !important; } }
> +@media (min-width: 767px) {
> + .combobox-popup::before {
> + background-color: rgba(0, 0, 0, 0); }
> + .combobox-popup .externsjs.list {
> + transform: none;
> + transition: none;
> + box-shadow: none !important; }
> + .combobox-popup .externsjs.list .externsjs.item {
> + overflow: hidden;
> + transition: height 200ms ease-in; }
> + .combobox-popup.open .externsjs.list {
> + transform: none;
> + top: auto;
> + left: auto; } }
> +j|ComboBoxPopUp {
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.ComboBoxPopUpView"); }
> +
> +j|VirtualComboBox {
> + IPopUp: ClassReference("org.apache.royale.externsjs.supportClasses.combobox.VirtualComboBoxPopUp"); }
> +
> +j|VirtualComboBoxPopUp {
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.VirtualComboBoxPopUpView"); }
> +
> +.externsjs.datagrid {
> + display: flex;
> + flex-direction: column;
> + position: relative;
> + overflow: auto; }
> + .externsjs.datagrid .externsjs.buttonbar.header {
> + width: 100%;
> + flex: 0 0 auto; }
> + .externsjs.datagrid .externsjs.buttonbar.header .externsjs.button {
> + width: 100%; }
> + .externsjs.datagrid .listarea {
> + width: 100%;
> + flex: 1 1 auto; }
> + .externsjs.datagrid .externsjs.list.column {
> + padding-left: 0;
> + padding-right: 0;
> + position: relative;
> + min-height: 100%; }
> + .externsjs.datagrid .externsjs.list.column .externsjs.item.datagrid {
> + width: 100%; }
> + .externsjs.datagrid span:empty:before {
> + content: "\200b"; }
> +
> +j|DataGrid {
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.DataGridView");
> + IBeadModel: ClassReference("org.apache.royale.html.beads.models.DataGridCollectionViewModel");
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.DataGridLayout");
> + headerClass: ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.DataGridButtonBar");
> + headerLayoutClass: ClassReference("org.apache.royale.externsjs.beads.layouts.DataGridColumnLayout");
> + listAreaClass: ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.DataGridListArea");
> + columnClass: ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.DataGridColumnList"); }
> +
> +j|DataGridListArea {
> + IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport"); }
> +
> +j|DataGridColumnList {
> + IItemRendererClassFactory: ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
> + IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.DataGridItemRenderer");
> + IItemRendererInitializer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DataGridColumnListItemRendererInitializer");
> + ISelectableItemRenderer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ClassSelectorListSelectableItemRendererBead");
> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
> +
> +j|DataGridButtonBar {
> + IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.DatagridHeaderRenderer"); }
> +
> +j|VirtualDataGrid {
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.VirtualDataGridView");
> + columnClass: ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.VirtualDataGridColumnList"); }
> +
> +j|VirtualDataGridListArea {
> + IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
> + listAreaClass: ClassReference("org.apache.royale.externsjs.supportClasses.datagrid.VirtualDataGrid");
> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
> +
> +j|VirtualDataGridColumnList {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.VirtualDataGridListAreaLayout");
> + IItemRendererClassFactory: ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
> + IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.DataGridItemRenderer");
> + IItemRendererInitializer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DataGridColumnListItemRendererInitializer");
> + ISelectableItemRenderer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ClassSelectorListSelectableItemRendererBead");
> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport"); }
> +
> +.externsjs.datechooser .externsjs.table {
> + min-width: 324px;
> + min-height: 364px; }
> + .externsjs.datechooser .externsjs.table .externsjs.tablecell {
> + height: auto; }
> + .externsjs.datechooser .externsjs.table .externsjs.tableheadercell.buttonsRow > .layout.horizontal {
> + float: right; }
> + .externsjs.datechooser .externsjs.table .externsjs.tableheadercell.buttonsRow .viewSelector::after {
> + content: " "; }
> + .externsjs.datechooser .externsjs.table .externsjs.tableheadercell.buttonsRow .previousButton::after, .externsjs.datechooser .externsjs.table .externsjs.tableheadercell.buttonsRow .nextButton::after {
> + content: " ";
> + position: absolute; }
> +
> +j|DateChooser {
> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.DateChooserModel");
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.DateChooserView");
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout");
> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.DateChooserMouseController"); }
> +
> +.externsjs.datefield {
> + display: inline-flex; }
> + .externsjs.datefield .externsjs.textinput input {
> + width: 9.2em; }
> + .externsjs.datefield .externsjs.button::before {
> + margin: 0;
> + padding: 0;
> + line-height: 22px; }
> + .externsjs.datefield .externsjs.button::after {
> + content: " ";
> + position: absolute;
> + width: 22px;
> + height: 22px;
> + left: calc(50% - 11px);
> + top: calc(50% - 11px); }
> +
> +.datechooser-popup {
> + position: fixed;
> + pointer-events: none;
> + bottom: 0;
> + left: 0;
> + width: 100%;
> + height: 100%;
> + overflow: hidden;
> + contain: strict;
> + z-index: 60;
> + color: rgba(0, 0, 0, 0.8); }
> + .datechooser-popup::before {
> + position: absolute;
> + display: block;
> + top: 0;
> + left: 0;
> + width: 100%;
> + height: 100%;
> + content: "";
> + opacity: 0;
> + background-color: rgba(0, 0, 0, 0.65);
> + will-change: opacity;
> + transition: opacity 0.4s 0ms; }
> + .datechooser-popup .externsjs.table {
> + position: relative;
> + transform: translate(-50%, 100%);
> + transition: none;
> + will-change: transform, opacity;
> + bottom: auto;
> + top: calc(100% - 10px);
> + left: 50%;
> + touch-action: none;
> + box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7) !important;
> + opacity: 0; }
> + .datechooser-popup.open {
> + pointer-events: auto; }
> + .datechooser-popup.open::before {
> + opacity: 1; }
> + .datechooser-popup.open .externsjs.table {
> + transform: translate(-50%, -100%);
> + transition: transform 0.4s 0ms, opacity 0.4s 0ms;
> + opacity: 1; }
> +
> +@media (max-width: 768px) {
> + .datechooser-popup .externsjs.table {
> + width: calc(100% - 20px); } }
> +@media (min-width: 768px) and (max-width: 992px) {
> + .datechooser-popup .externsjs.table {
> + width: calc(100% - 300px); } }
> +@media (min-width: 992px) {
> + .datechooser-popup::before {
> + background-color: rgba(0, 0, 0, 0); }
> + .datechooser-popup .externsjs.table {
> + transform: none;
> + transition: none;
> + box-shadow: none !important; }
> + .datechooser-popup .externsjs.table .externsjs.item {
> + height: 0;
> + overflow: hidden;
> + transition: height 200ms ease-in; }
> + .datechooser-popup.open .externsjs.table {
> + transform: none;
> + top: auto;
> + left: auto; }
> + .datechooser-popup.open .externsjs.table .externsjs.item {
> + height: 34px; } }
> +j|DateField {
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.DateFieldView");
> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.DateChooserModel");
> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.DateFieldMouseController");
> + IFormatter: ClassReference("org.apache.royale.html.accessories.StringDateFormatter");
> + IPopUp: ClassReference("org.apache.royale.externsjs.DateChooser"); }
> +
> +.externsjs.divider {
> + height: 0;
> + margin: 0; }
> +
> +j|Divider {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
> +
> +.externsjs.drawer.float {
> + position: fixed;
> + pointer-events: none;
> + top: 0;
> + left: 0;
> + width: 100%;
> + height: 100%;
> + overflow: hidden;
> + contain: strict;
> + z-index: 100; }
> + .externsjs.drawer.float::before {
> + position: absolute;
> + display: block;
> + top: 0;
> + left: 0;
> + width: 100%;
> + height: 100%;
> + content: "";
> + opacity: 0; }
> + .externsjs.drawer.float .drawermain {
> + position: absolute;
> + display: flex;
> + flex-direction: column;
> + left: 0;
> + right: initial;
> + height: 100%; }
> + .externsjs.drawer.float.open {
> + pointer-events: auto; }
> + .externsjs.drawer.float.open::before {
> + opacity: 1; }
> +.externsjs.drawer.fixed {
> + width: 0; }
> + .externsjs.drawer.fixed .drawermain {
> + display: inline-flex;
> + flex-direction: column;
> + left: 0;
> + right: auto;
> + height: 100%;
> + overflow: hidden;
> + touch-action: none; }
> + .externsjs.drawer.fixed.open {
> + pointer-events: auto; }
> + .externsjs.drawer.fixed.open .drawermain {
> + transform: none; }
> +
> +@media (min-width: 768px) {
> + .externsjs.drawer.float .drawermain {
> + width: calc(100% - 60px);
> + max-width: 310px; } }
> +.externsjs.drawerheader {
> + position: relative;
> + display: flex;
> + flex-direction: column;
> + align-items: center;
> + flex-shrink: 0; }
> + .externsjs.drawerheader div {
> + display: flex;
> + position: absolute;
> + top: 0;
> + right: 0;
> + bottom: 0;
> + left: 0;
> + align-items: flex-end; }
> +
> +.externsjs.drawercontent {
> + flex: 1 100 auto;
> + margin: 0;
> + overflow-x: hidden;
> + overflow-y: auto;
> + -webkit-overflow-scrolling: touch;
> + touch-action: pan-y; }
> +
> +.externsjs.drawerfooter {
> + display: flex;
> + position: relative;
> + width: 100%;
> + height: 66px; }
> +
> +j|DrawerBase {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
> +
> +j|Drawer {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
> +
> +j|DrawerHeader {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
> +
> +j|DrawerContent {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
> +
> +.externsjs.dropdownlist {
> + -webkit-appearance: none;
> + -moz-appearance: none;
> + -o-appearance: none;
> + -ms-appearance: none;
> + appearance: none;
> + width: 200px;
> + margin: 0;
> + padding: 0.68em 2.38em 0.68em 1.12em;
> + cursor: pointer;
> + display: inline-flex;
> + line-height: normal !important;
> + outline: none; }
> +
> +j|DropDownList {
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.DropDownListView");
> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.DropDownListModel");
> + IDataProviderItemRendererMapper: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DropDownListItemRendererFactoryForCollectionView");
> + IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
> + IItemRendererInitializer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.DropDownListItemRendererInitializer");
> + IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.DropDownListItemRenderer");
> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.DropDownListController"); }
> +
> +@media -royale-swf {
> + j|DropDownList {
> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.ArrayListSelectionModel");
> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.DropDownListController");
> + IPopUp: ClassReference("org.apache.royale.externsjs.supportClasses.dropdownlist.DropDownListList"); } }
> +.externsjs.footerbar {
> + display: inline-flex;
> + flex: 1 1 auto; }
> + .externsjs.footerbar .footerBarAppHeader {
> + display: flex;
> + flex-direction: column;
> + justify-content: space-between;
> + width: 100%;
> + z-index: 20;
> + position: fixed;
> + bottom: 0px; }
> + .externsjs.footerbar .footerBarAppHeader.fixed {
> + transition: box-shadow 200ms linear; }
> + .externsjs.footerbar .externsjs.barrow {
> + display: flex;
> + position: relative;
> + width: 100%;
> + height: 64px; }
> + .externsjs.footerbar .externsjs.barsection {
> + display: inline-flex;
> + flex: 1 1 auto;
> + align-items: center;
> + min-width: 0;
> + z-index: 1;
> + order: -1; }
> + .externsjs.footerbar .externsjs.barsection button {
> + will-change: transform, opacity;
> + display: flex;
> + position: relative;
> + flex-shrink: 0;
> + align-items: center;
> + justify-content: center;
> + width: 48px;
> + height: 48px;
> + outline: none;
> + text-decoration: none;
> + opacity: 1; }
> + .externsjs.footerbar .externsjs.barsection button .fonticon {
> + margin-left: 0px;
> + margin-right: 0px; }
> + .externsjs.footerbar .externsjs.bartitle {
> + -moz-osx-font-smoothing: grayscale;
> + -webkit-font-smoothing: antialiased;
> + white-space: nowrap;
> + flex: 1 1 auto;
> + overflow: hidden;
> + z-index: 1;
> + line-height: 2rem;
> + letter-spacing: 0.0125em;
> + text-decoration: inherit;
> + text-transform: inherit;
> + text-overflow: ellipsis; }
> +
> +j|FooterBar {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
> +
> +.externsjs.formheading .externsjs.label.headingLabel {
> + white-space: initial;
> + flex: 1 1 auto; }
> +
> +j|FormHeading {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.FormHeadingView");
> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.TextModel"); }
> +
> +j|FormItem {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.FormItemLayout");
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.FormItemView");
> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.FormItemModel");
> + IFormItemContentArea: ClassReference("org.apache.royale.externsjs.Group");
> + IFormItemLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout"); }
> +
> +.fonticon {
> + cursor: default; }
> + .fonticon.size-18 {
> + font-size: 18px; }
> + .fonticon.size-24 {
> + font-size: 24px; }
> + .fonticon.size-36 {
> + font-size: 36px; }
> + .fonticon.size-48 {
> + font-size: 48px; }
> +
> +.externsjs.imagebutton {
> + border-style: none;
> + padding: 0px; }
> +
> +j|ImageButton {
> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.ImageModel"); }
> +
> +.externsjs.item, .externsjs.navigationlink, .externsjs.tabbarbutton {
> + text-decoration: none;
> + letter-spacing: 0;
> + line-height: normal !important;
> + overflow: hidden;
> + cursor: auto;
> + flex-shrink: 0;
> + position: relative;
> + list-style: none; }
> + .externsjs.item.selectable, .externsjs.item.hoverable, .externsjs.navigationlink.selectable, .externsjs.navigationlink.hoverable, .externsjs.tabbarbutton.selectable, .externsjs.tabbarbutton.hoverable {
> + cursor: pointer; }
> + .externsjs.item .fonticon, .externsjs.navigationlink .fonticon, .externsjs.tabbarbutton .fonticon {
> + cursor: inherit; }
> +
> +j|ListItemRenderer {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.BasicLayout");
> + IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ItemRendererMouseController"); }
> +
> +.externsjs.label {
> + -webkit-font-smoothing: antialiased;
> + cursor: default;
> + white-space: nowrap; }
> + .externsjs.label.multiline {
> + white-space: pre-wrap;
> + word-wrap: break-word; }
> + .externsjs.label.truncate {
> + overflow: hidden;
> + text-overflow: ellipsis; }
> +
> +j|Label {
> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.TextModel"); }
> +
> +.viewport {
> + overflow: visible; }
> + .viewport.clipped {
> + overflow: hidden; }
> + .viewport.scroll {
> + overflow: auto; }
> +
> +.layout.basic {
> + position: relative; }
> + .layout.basic > * {
> + position: absolute !important; }
> +
> +.layout {
> + display: flex; }
> + .layout.horizontal {
> + flex-direction: row;
> + flex-wrap: nowrap;
> + align-items: flex-start; }
> + .layout.horizontal > * {
> + flex: 0 1 auto; }
> + .layout.horizontal.flow {
> + flex-wrap: wrap;
> + max-width: 100%; }
> + .layout.horizontal.centered {
> + justify-content: center;
> + align-items: center;
> + align-content: center; }
> + .layout.horizontal.centered > * {
> + flex: 0 0 auto !important; }
> + .layout.horizontal.tile {
> + flex-wrap: wrap; }
> + .layout.horizontal.formitem {
> + width: 100%;
> + align-items: flex-start; }
> + .layout.horizontal.gap-1x3px > *:first-child {
> + margin-left: 0px; }
> + .layout.horizontal.gap-1x3px > * {
> + margin-left: 3px; }
> + .layout.horizontal.gap-2x3px > *:first-child {
> + margin-left: 0px; }
> + .layout.horizontal.gap-2x3px > * {
> + margin-left: 6px; }
> + .layout.horizontal.gap-3x3px > *:first-child {
> + margin-left: 0px; }
> + .layout.horizontal.gap-3x3px > * {
> + margin-left: 9px; }
> + .layout.horizontal.gap-4x3px > *:first-child {
> + margin-left: 0px; }
> + .layout.horizontal.gap-4x3px > * {
> + margin-left: 12px; }
> + .layout.horizontal.gap-5x3px > *:first-child {
> + margin-left: 0px; }
> + .layout.horizontal.gap-5x3px > * {
> + margin-left: 15px; }
> + .layout.horizontal.gap-6x3px > *:first-child {
> + margin-left: 0px; }
> + .layout.horizontal.gap-6x3px > * {
> + margin-left: 18px; }
> + .layout.horizontal.gap-7x3px > *:first-child {
> + margin-left: 0px; }
> + .layout.horizontal.gap-7x3px > * {
> + margin-left: 21px; }
> + .layout.horizontal.gap-8x3px > *:first-child {
> + margin-left: 0px; }
> + .layout.horizontal.gap-8x3px > * {
> + margin-left: 24px; }
> + .layout.horizontal.gap-9x3px > *:first-child {
> + margin-left: 0px; }
> + .layout.horizontal.gap-9x3px > * {
> + margin-left: 27px; }
> + .layout.horizontal.gap-10x3px > *:first-child {
> + margin-left: 0px; }
> + .layout.horizontal.gap-10x3px > * {
> + margin-left: 30px; }
> + .layout.horizontal.itemsReverse.gap-1x3px > *:last-child {
> + margin-left: 0px; }
> + .layout.horizontal.itemsReverse.gap-1x3px > * {
> + margin-left: 3px; }
> + .layout.horizontal.itemsReverse.gap-2x3px > *:last-child {
> + margin-left: 0px; }
> + .layout.horizontal.itemsReverse.gap-2x3px > * {
> + margin-left: 6px; }
> + .layout.horizontal.itemsReverse.gap-3x3px > *:last-child {
> + margin-left: 0px; }
> + .layout.horizontal.itemsReverse.gap-3x3px > * {
> + margin-left: 9px; }
> + .layout.horizontal.itemsReverse.gap-4x3px > *:last-child {
> + margin-left: 0px; }
> + .layout.horizontal.itemsReverse.gap-4x3px > * {
> + margin-left: 12px; }
> + .layout.horizontal.itemsReverse.gap-5x3px > *:last-child {
> + margin-left: 0px; }
> + .layout.horizontal.itemsReverse.gap-5x3px > * {
> + margin-left: 15px; }
> + .layout.horizontal.itemsReverse.gap-6x3px > *:last-child {
> + margin-left: 0px; }
> + .layout.horizontal.itemsReverse.gap-6x3px > * {
> + margin-left: 18px; }
> + .layout.horizontal.itemsReverse.gap-7x3px > *:last-child {
> + margin-left: 0px; }
> + .layout.horizontal.itemsReverse.gap-7x3px > * {
> + margin-left: 21px; }
> + .layout.horizontal.itemsReverse.gap-8x3px > *:last-child {
> + margin-left: 0px; }
> + .layout.horizontal.itemsReverse.gap-8x3px > * {
> + margin-left: 24px; }
> + .layout.horizontal.itemsReverse.gap-9x3px > *:last-child {
> + margin-left: 0px; }
> + .layout.horizontal.itemsReverse.gap-9x3px > * {
> + margin-left: 27px; }
> + .layout.horizontal.itemsReverse.gap-10x3px > *:last-child {
> + margin-left: 0px; }
> + .layout.horizontal.itemsReverse.gap-10x3px > * {
> + margin-left: 30px; }
> + .layout.horizontal.sameWidths > * {
> + flex: 1 0 0; }
> + .layout.horizontal.pixelWidths > * {
> + flex: none; }
> + .layout.horizontal.proportionalWidths > * {
> + flex: 1 0; }
> + .layout.horizontal.percentWidths > * {
> + flex: 1 0 auto; }
> + .layout.horizontal.naturalWidths > * {
> + flex: none; }
> + .layout.vertical {
> + flex-direction: column;
> + flex-wrap: nowrap;
> + align-items: flex-start; }
> + .layout.vertical > * {
> + flex: 0 1 auto; }
> + .layout.vertical.flow {
> + flex-wrap: wrap; }
> + .layout.vertical.centered {
> + justify-content: center;
> + align-items: center;
> + align-content: center;
> + flex-direction: column;
> + height: 100%; }
> + .layout.vertical.centered > * {
> + flex: 0 0 auto !important; }
> + .layout.vertical.tile {
> + flex-wrap: wrap; }
> + .layout.vertical.form {
> + width: 100%; }
> + .layout.vertical.gap-1x3px > *:first-child {
> + margin-top: 0px; }
> + .layout.vertical.gap-1x3px > * {
> + margin-top: 3px; }
> + .layout.vertical.gap-2x3px > *:first-child {
> + margin-top: 0px; }
> + .layout.vertical.gap-2x3px > * {
> + margin-top: 6px; }
> + .layout.vertical.gap-3x3px > *:first-child {
> + margin-top: 0px; }
> + .layout.vertical.gap-3x3px > * {
> + margin-top: 9px; }
> + .layout.vertical.gap-4x3px > *:first-child {
> + margin-top: 0px; }
> + .layout.vertical.gap-4x3px > * {
> + margin-top: 12px; }
> + .layout.vertical.gap-5x3px > *:first-child {
> + margin-top: 0px; }
> + .layout.vertical.gap-5x3px > * {
> + margin-top: 15px; }
> + .layout.vertical.gap-6x3px > *:first-child {
> + margin-top: 0px; }
> + .layout.vertical.gap-6x3px > * {
> + margin-top: 18px; }
> + .layout.vertical.gap-7x3px > *:first-child {
> + margin-top: 0px; }
> + .layout.vertical.gap-7x3px > * {
> + margin-top: 21px; }
> + .layout.vertical.gap-8x3px > *:first-child {
> + margin-top: 0px; }
> + .layout.vertical.gap-8x3px > * {
> + margin-top: 24px; }
> + .layout.vertical.gap-9x3px > *:first-child {
> + margin-top: 0px; }
> + .layout.vertical.gap-9x3px > * {
> + margin-top: 27px; }
> + .layout.vertical.gap-10x3px > *:first-child {
> + margin-top: 0px; }
> + .layout.vertical.gap-10x3px > * {
> + margin-top: 30px; }
> + .layout.vertical.itemsReverse.gap-1x3px > *:-child {
> + margin-top: 0px; }
> + .layout.vertical.itemsReverse.gap-1x3px > * {
> + margin-top: 3px; }
> + .layout.vertical.itemsReverse.gap-2x3px > *:-child {
> + margin-top: 0px; }
> + .layout.vertical.itemsReverse.gap-2x3px > * {
> + margin-top: 6px; }
> + .layout.vertical.itemsReverse.gap-3x3px > *:-child {
> + margin-top: 0px; }
> + .layout.vertical.itemsReverse.gap-3x3px > * {
> + margin-top: 9px; }
> + .layout.vertical.itemsReverse.gap-4x3px > *:-child {
> + margin-top: 0px; }
> + .layout.vertical.itemsReverse.gap-4x3px > * {
> + margin-top: 12px; }
> + .layout.vertical.itemsReverse.gap-5x3px > *:-child {
> + margin-top: 0px; }
> + .layout.vertical.itemsReverse.gap-5x3px > * {
> + margin-top: 15px; }
> + .layout.vertical.itemsReverse.gap-6x3px > *:-child {
> + margin-top: 0px; }
> + .layout.vertical.itemsReverse.gap-6x3px > * {
> + margin-top: 18px; }
> + .layout.vertical.itemsReverse.gap-7x3px > *:-child {
> + margin-top: 0px; }
> + .layout.vertical.itemsReverse.gap-7x3px > * {
> + margin-top: 21px; }
> + .layout.vertical.itemsReverse.gap-8x3px > *:-child {
> + margin-top: 0px; }
> + .layout.vertical.itemsReverse.gap-8x3px > * {
> + margin-top: 24px; }
> + .layout.vertical.itemsReverse.gap-9x3px > *:-child {
> + margin-top: 0px; }
> + .layout.vertical.itemsReverse.gap-9x3px > * {
> + margin-top: 27px; }
> + .layout.vertical.itemsReverse.gap-10x3px > *:-child {
> + margin-top: 0px; }
> + .layout.vertical.itemsReverse.gap-10x3px > * {
> + margin-top: 30px; }
> + .layout.grid {
> + flex-flow: row wrap;
> + width: 100%; }
> + .layout.grid > * {
> + flex: 1 1 auto;
> + max-width: 100%;
> + width: 100%; }
> + @media (min-width: 0px) {
> + .layout.grid .phone-col-1-1 {
> + width: 100%; }
> + .layout.grid .phone-col-1-2 {
> + width: 50%; }
> + .layout.grid .phone-col-2-2 {
> + width: 100%; }
> + .layout.grid .phone-col-1-3 {
> + width: 33.3333333333%; }
> + .layout.grid .phone-col-2-3 {
> + width: 66.6666666667%; }
> + .layout.grid .phone-col-3-3 {
> + width: 100%; }
> + .layout.grid .phone-col-1-4 {
> + width: 25%; }
> + .layout.grid .phone-col-2-4 {
> + width: 50%; }
> + .layout.grid .phone-col-3-4 {
> + width: 75%; }
> + .layout.grid .phone-col-4-4 {
> + width: 100%; }
> + .layout.grid .phone-col-1-5 {
> + width: 20%; }
> + .layout.grid .phone-col-2-5 {
> + width: 40%; }
> + .layout.grid .phone-col-3-5 {
> + width: 60%; }
> + .layout.grid .phone-col-4-5 {
> + width: 80%; }
> + .layout.grid .phone-col-5-5 {
> + width: 100%; }
> + .layout.grid .phone-col-1-6 {
> + width: 16.6666666667%; }
> + .layout.grid .phone-col-2-6 {
> + width: 33.3333333333%; }
> + .layout.grid .phone-col-3-6 {
> + width: 50%; }
> + .layout.grid .phone-col-4-6 {
> + width: 66.6666666667%; }
> + .layout.grid .phone-col-5-6 {
> + width: 83.3333333333%; }
> + .layout.grid .phone-col-6-6 {
> + width: 100%; }
> + .layout.grid .phone-col-1-7 {
> + width: 14.2857142857%; }
> + .layout.grid .phone-col-2-7 {
> + width: 28.5714285714%; }
> + .layout.grid .phone-col-3-7 {
> + width: 42.8571428571%; }
> + .layout.grid .phone-col-4-7 {
> + width: 57.1428571429%; }
> + .layout.grid .phone-col-5-7 {
> + width: 71.4285714286%; }
> + .layout.grid .phone-col-6-7 {
> + width: 85.7142857143%; }
> + .layout.grid .phone-col-7-7 {
> + width: 100%; }
> + .layout.grid .phone-col-1-8 {
> + width: 12.5%; }
> + .layout.grid .phone-col-2-8 {
> + width: 25%; }
> + .layout.grid .phone-col-3-8 {
> + width: 37.5%; }
> + .layout.grid .phone-col-4-8 {
> + width: 50%; }
> + .layout.grid .phone-col-5-8 {
> + width: 62.5%; }
> + .layout.grid .phone-col-6-8 {
> + width: 75%; }
> + .layout.grid .phone-col-7-8 {
> + width: 87.5%; }
> + .layout.grid .phone-col-8-8 {
> + width: 100%; }
> + .layout.grid .phone-col-1-9 {
> + width: 11.1111111111%; }
> + .layout.grid .phone-col-2-9 {
> + width: 22.2222222222%; }
> + .layout.grid .phone-col-3-9 {
> + width: 33.3333333333%; }
> + .layout.grid .phone-col-4-9 {
> + width: 44.4444444444%; }
> + .layout.grid .phone-col-5-9 {
> + width: 55.5555555556%; }
> + .layout.grid .phone-col-6-9 {
> + width: 66.6666666667%; }
> + .layout.grid .phone-col-7-9 {
> + width: 77.7777777778%; }
> + .layout.grid .phone-col-8-9 {
> + width: 88.8888888889%; }
> + .layout.grid .phone-col-9-9 {
> + width: 100%; }
> + .layout.grid .phone-col-1-10 {
> + width: 10%; }
> + .layout.grid .phone-col-2-10 {
> + width: 20%; }
> + .layout.grid .phone-col-3-10 {
> + width: 30%; }
> + .layout.grid .phone-col-4-10 {
> + width: 40%; }
> + .layout.grid .phone-col-5-10 {
> + width: 50%; }
> + .layout.grid .phone-col-6-10 {
> + width: 60%; }
> + .layout.grid .phone-col-7-10 {
> + width: 70%; }
> + .layout.grid .phone-col-8-10 {
> + width: 80%; }
> + .layout.grid .phone-col-9-10 {
> + width: 90%; }
> + .layout.grid .phone-col-10-10 {
> + width: 100%; }
> + .layout.grid .phone-col-1-11 {
> + width: 9.0909090909%; }
> + .layout.grid .phone-col-2-11 {
> + width: 18.1818181818%; }
> + .layout.grid .phone-col-3-11 {
> + width: 27.2727272727%; }
> + .layout.grid .phone-col-4-11 {
> + width: 36.3636363636%; }
> + .layout.grid .phone-col-5-11 {
> + width: 45.4545454545%; }
> + .layout.grid .phone-col-6-11 {
> + width: 54.5454545455%; }
> + .layout.grid .phone-col-7-11 {
> + width: 63.6363636364%; }
> + .layout.grid .phone-col-8-11 {
> + width: 72.7272727273%; }
> + .layout.grid .phone-col-9-11 {
> + width: 81.8181818182%; }
> + .layout.grid .phone-col-10-11 {
> + width: 90.9090909091%; }
> + .layout.grid .phone-col-11-11 {
> + width: 100%; }
> + .layout.grid .phone-col-1-12 {
> + width: 8.3333333333%; }
> + .layout.grid .phone-col-2-12 {
> + width: 16.6666666667%; }
> + .layout.grid .phone-col-3-12 {
> + width: 25%; }
> + .layout.grid .phone-col-4-12 {
> + width: 33.3333333333%; }
> + .layout.grid .phone-col-5-12 {
> + width: 41.6666666667%; }
> + .layout.grid .phone-col-6-12 {
> + width: 50%; }
> + .layout.grid .phone-col-7-12 {
> + width: 58.3333333333%; }
> + .layout.grid .phone-col-8-12 {
> + width: 66.6666666667%; }
> + .layout.grid .phone-col-9-12 {
> + width: 75%; }
> + .layout.grid .phone-col-10-12 {
> + width: 83.3333333333%; }
> + .layout.grid .phone-col-11-12 {
> + width: 91.6666666667%; }
> + .layout.grid .phone-col-12-12 {
> + width: 100%; } }
> + @media (min-width: 768px) {
> + .layout.grid .tablet-col-1-1 {
> + width: 100%; }
> + .layout.grid .tablet-col-1-2 {
> + width: 50%; }
> + .layout.grid .tablet-col-2-2 {
> + width: 100%; }
> + .layout.grid .tablet-col-1-3 {
> + width: 33.3333333333%; }
> + .layout.grid .tablet-col-2-3 {
> + width: 66.6666666667%; }
> + .layout.grid .tablet-col-3-3 {
> + width: 100%; }
> + .layout.grid .tablet-col-1-4 {
> + width: 25%; }
> + .layout.grid .tablet-col-2-4 {
> + width: 50%; }
> + .layout.grid .tablet-col-3-4 {
> + width: 75%; }
> + .layout.grid .tablet-col-4-4 {
> + width: 100%; }
> + .layout.grid .tablet-col-1-5 {
> + width: 20%; }
> + .layout.grid .tablet-col-2-5 {
> + width: 40%; }
> + .layout.grid .tablet-col-3-5 {
> + width: 60%; }
> + .layout.grid .tablet-col-4-5 {
> + width: 80%; }
> + .layout.grid .tablet-col-5-5 {
> + width: 100%; }
> + .layout.grid .tablet-col-1-6 {
> + width: 16.6666666667%; }
> + .layout.grid .tablet-col-2-6 {
> + width: 33.3333333333%; }
> + .layout.grid .tablet-col-3-6 {
> + width: 50%; }
> + .layout.grid .tablet-col-4-6 {
> + width: 66.6666666667%; }
> + .layout.grid .tablet-col-5-6 {
> + width: 83.3333333333%; }
> + .layout.grid .tablet-col-6-6 {
> + width: 100%; }
> + .layout.grid .tablet-col-1-7 {
> + width: 14.2857142857%; }
> + .layout.grid .tablet-col-2-7 {
> + width: 28.5714285714%; }
> + .layout.grid .tablet-col-3-7 {
> + width: 42.8571428571%; }
> + .layout.grid .tablet-col-4-7 {
> + width: 57.1428571429%; }
> + .layout.grid .tablet-col-5-7 {
> + width: 71.4285714286%; }
> + .layout.grid .tablet-col-6-7 {
> + width: 85.7142857143%; }
> + .layout.grid .tablet-col-7-7 {
> + width: 100%; }
> + .layout.grid .tablet-col-1-8 {
> + width: 12.5%; }
> + .layout.grid .tablet-col-2-8 {
> + width: 25%; }
> + .layout.grid .tablet-col-3-8 {
> + width: 37.5%; }
> + .layout.grid .tablet-col-4-8 {
> + width: 50%; }
> + .layout.grid .tablet-col-5-8 {
> + width: 62.5%; }
> + .layout.grid .tablet-col-6-8 {
> + width: 75%; }
> + .layout.grid .tablet-col-7-8 {
> + width: 87.5%; }
> + .layout.grid .tablet-col-8-8 {
> + width: 100%; }
> + .layout.grid .tablet-col-1-9 {
> + width: 11.1111111111%; }
> + .layout.grid .tablet-col-2-9 {
> + width: 22.2222222222%; }
> + .layout.grid .tablet-col-3-9 {
> + width: 33.3333333333%; }
> + .layout.grid .tablet-col-4-9 {
> + width: 44.4444444444%; }
> + .layout.grid .tablet-col-5-9 {
> + width: 55.5555555556%; }
> + .layout.grid .tablet-col-6-9 {
> + width: 66.6666666667%; }
> + .layout.grid .tablet-col-7-9 {
> + width: 77.7777777778%; }
> + .layout.grid .tablet-col-8-9 {
> + width: 88.8888888889%; }
> + .layout.grid .tablet-col-9-9 {
> + width: 100%; }
> + .layout.grid .tablet-col-1-10 {
> + width: 10%; }
> + .layout.grid .tablet-col-2-10 {
> + width: 20%; }
> + .layout.grid .tablet-col-3-10 {
> + width: 30%; }
> + .layout.grid .tablet-col-4-10 {
> + width: 40%; }
> + .layout.grid .tablet-col-5-10 {
> + width: 50%; }
> + .layout.grid .tablet-col-6-10 {
> + width: 60%; }
> + .layout.grid .tablet-col-7-10 {
> + width: 70%; }
> + .layout.grid .tablet-col-8-10 {
> + width: 80%; }
> + .layout.grid .tablet-col-9-10 {
> + width: 90%; }
> + .layout.grid .tablet-col-10-10 {
> + width: 100%; }
> + .layout.grid .tablet-col-1-11 {
> + width: 9.0909090909%; }
> + .layout.grid .tablet-col-2-11 {
> + width: 18.1818181818%; }
> + .layout.grid .tablet-col-3-11 {
> + width: 27.2727272727%; }
> + .layout.grid .tablet-col-4-11 {
> + width: 36.3636363636%; }
> + .layout.grid .tablet-col-5-11 {
> + width: 45.4545454545%; }
> + .layout.grid .tablet-col-6-11 {
> + width: 54.5454545455%; }
> + .layout.grid .tablet-col-7-11 {
> + width: 63.6363636364%; }
> + .layout.grid .tablet-col-8-11 {
> + width: 72.7272727273%; }
> + .layout.grid .tablet-col-9-11 {
> + width: 81.8181818182%; }
> + .layout.grid .tablet-col-10-11 {
> + width: 90.9090909091%; }
> + .layout.grid .tablet-col-11-11 {
> + width: 100%; }
> + .layout.grid .tablet-col-1-12 {
> + width: 8.3333333333%; }
> + .layout.grid .tablet-col-2-12 {
> + width: 16.6666666667%; }
> + .layout.grid .tablet-col-3-12 {
> + width: 25%; }
> + .layout.grid .tablet-col-4-12 {
> + width: 33.3333333333%; }
> + .layout.grid .tablet-col-5-12 {
> + width: 41.6666666667%; }
> + .layout.grid .tablet-col-6-12 {
> + width: 50%; }
> + .layout.grid .tablet-col-7-12 {
> + width: 58.3333333333%; }
> + .layout.grid .tablet-col-8-12 {
> + width: 66.6666666667%; }
> + .layout.grid .tablet-col-9-12 {
> + width: 75%; }
> + .layout.grid .tablet-col-10-12 {
> + width: 83.3333333333%; }
> + .layout.grid .tablet-col-11-12 {
> + width: 91.6666666667%; }
> + .layout.grid .tablet-col-12-12 {
> + width: 100%; } }
> + @media (min-width: 992px) {
> + .layout.grid .desktop-col-1-1 {
> + width: 100%; }
> + .layout.grid .desktop-col-1-2 {
> + width: 50%; }
> + .layout.grid .desktop-col-2-2 {
> + width: 100%; }
> + .layout.grid .desktop-col-1-3 {
> + width: 33.3333333333%; }
> + .layout.grid .desktop-col-2-3 {
> + width: 66.6666666667%; }
> + .layout.grid .desktop-col-3-3 {
> + width: 100%; }
> + .layout.grid .desktop-col-1-4 {
> + width: 25%; }
> + .layout.grid .desktop-col-2-4 {
> + width: 50%; }
> + .layout.grid .desktop-col-3-4 {
> + width: 75%; }
> + .layout.grid .desktop-col-4-4 {
> + width: 100%; }
> + .layout.grid .desktop-col-1-5 {
> + width: 20%; }
> + .layout.grid .desktop-col-2-5 {
> + width: 40%; }
> + .layout.grid .desktop-col-3-5 {
> + width: 60%; }
> + .layout.grid .desktop-col-4-5 {
> + width: 80%; }
> + .layout.grid .desktop-col-5-5 {
> + width: 100%; }
> + .layout.grid .desktop-col-1-6 {
> + width: 16.6666666667%; }
> + .layout.grid .desktop-col-2-6 {
> + width: 33.3333333333%; }
> + .layout.grid .desktop-col-3-6 {
> + width: 50%; }
> + .layout.grid .desktop-col-4-6 {
> + width: 66.6666666667%; }
> + .layout.grid .desktop-col-5-6 {
> + width: 83.3333333333%; }
> + .layout.grid .desktop-col-6-6 {
> + width: 100%; }
> + .layout.grid .desktop-col-1-7 {
> + width: 14.2857142857%; }
> + .layout.grid .desktop-col-2-7 {
> + width: 28.5714285714%; }
> + .layout.grid .desktop-col-3-7 {
> + width: 42.8571428571%; }
> + .layout.grid .desktop-col-4-7 {
> + width: 57.1428571429%; }
> + .layout.grid .desktop-col-5-7 {
> + width: 71.4285714286%; }
> + .layout.grid .desktop-col-6-7 {
> + width: 85.7142857143%; }
> + .layout.grid .desktop-col-7-7 {
> + width: 100%; }
> + .layout.grid .desktop-col-1-8 {
> + width: 12.5%; }
> + .layout.grid .desktop-col-2-8 {
> + width: 25%; }
> + .layout.grid .desktop-col-3-8 {
> + width: 37.5%; }
> + .layout.grid .desktop-col-4-8 {
> + width: 50%; }
> + .layout.grid .desktop-col-5-8 {
> + width: 62.5%; }
> + .layout.grid .desktop-col-6-8 {
> + width: 75%; }
> + .layout.grid .desktop-col-7-8 {
> + width: 87.5%; }
> + .layout.grid .desktop-col-8-8 {
> + width: 100%; }
> + .layout.grid .desktop-col-1-9 {
> + width: 11.1111111111%; }
> + .layout.grid .desktop-col-2-9 {
> + width: 22.2222222222%; }
> + .layout.grid .desktop-col-3-9 {
> + width: 33.3333333333%; }
> + .layout.grid .desktop-col-4-9 {
> + width: 44.4444444444%; }
> + .layout.grid .desktop-col-5-9 {
> + width: 55.5555555556%; }
> + .layout.grid .desktop-col-6-9 {
> + width: 66.6666666667%; }
> + .layout.grid .desktop-col-7-9 {
> + width: 77.7777777778%; }
> + .layout.grid .desktop-col-8-9 {
> + width: 88.8888888889%; }
> + .layout.grid .desktop-col-9-9 {
> + width: 100%; }
> + .layout.grid .desktop-col-1-10 {
> + width: 10%; }
> + .layout.grid .desktop-col-2-10 {
> + width: 20%; }
> + .layout.grid .desktop-col-3-10 {
> + width: 30%; }
> + .layout.grid .desktop-col-4-10 {
> + width: 40%; }
> + .layout.grid .desktop-col-5-10 {
> + width: 50%; }
> + .layout.grid .desktop-col-6-10 {
> + width: 60%; }
> + .layout.grid .desktop-col-7-10 {
> + width: 70%; }
> + .layout.grid .desktop-col-8-10 {
> + width: 80%; }
> + .layout.grid .desktop-col-9-10 {
> + width: 90%; }
> + .layout.grid .desktop-col-10-10 {
> + width: 100%; }
> + .layout.grid .desktop-col-1-11 {
> + width: 9.0909090909%; }
> + .layout.grid .desktop-col-2-11 {
> + width: 18.1818181818%; }
> + .layout.grid .desktop-col-3-11 {
> + width: 27.2727272727%; }
> + .layout.grid .desktop-col-4-11 {
> + width: 36.3636363636%; }
> + .layout.grid .desktop-col-5-11 {
> + width: 45.4545454545%; }
> + .layout.grid .desktop-col-6-11 {
> + width: 54.5454545455%; }
> + .layout.grid .desktop-col-7-11 {
> + width: 63.6363636364%; }
> + .layout.grid .desktop-col-8-11 {
> + width: 72.7272727273%; }
> + .layout.grid .desktop-col-9-11 {
> + width: 81.8181818182%; }
> + .layout.grid .desktop-col-10-11 {
> + width: 90.9090909091%; }
> + .layout.grid .desktop-col-11-11 {
> + width: 100%; }
> + .layout.grid .desktop-col-1-12 {
> + width: 8.3333333333%; }
> + .layout.grid .desktop-col-2-12 {
> + width: 16.6666666667%; }
> + .layout.grid .desktop-col-3-12 {
> + width: 25%; }
> + .layout.grid .desktop-col-4-12 {
> + width: 33.3333333333%; }
> + .layout.grid .desktop-col-5-12 {
> + width: 41.6666666667%; }
> + .layout.grid .desktop-col-6-12 {
> + width: 50%; }
> + .layout.grid .desktop-col-7-12 {
> + width: 58.3333333333%; }
> + .layout.grid .desktop-col-8-12 {
> + width: 66.6666666667%; }
> + .layout.grid .desktop-col-9-12 {
> + width: 75%; }
> + .layout.grid .desktop-col-10-12 {
> + width: 83.3333333333%; }
> + .layout.grid .desktop-col-11-12 {
> + width: 91.6666666667%; }
> + .layout.grid .desktop-col-12-12 {
> + width: 100%; } }
> + @media (min-width: 1600px) {
> + .layout.grid .widescreen-col-1-1 {
> + width: 100%; }
> + .layout.grid .widescreen-col-1-2 {
> + width: 50%; }
> + .layout.grid .widescreen-col-2-2 {
> + width: 100%; }
> + .layout.grid .widescreen-col-1-3 {
> + width: 33.3333333333%; }
> + .layout.grid .widescreen-col-2-3 {
> + width: 66.6666666667%; }
> + .layout.grid .widescreen-col-3-3 {
> + width: 100%; }
> + .layout.grid .widescreen-col-1-4 {
> + width: 25%; }
> + .layout.grid .widescreen-col-2-4 {
> + width: 50%; }
> + .layout.grid .widescreen-col-3-4 {
> + width: 75%; }
> + .layout.grid .widescreen-col-4-4 {
> + width: 100%; }
> + .layout.grid .widescreen-col-1-5 {
> + width: 20%; }
> + .layout.grid .widescreen-col-2-5 {
> + width: 40%; }
> + .layout.grid .widescreen-col-3-5 {
> + width: 60%; }
> + .layout.grid .widescreen-col-4-5 {
> + width: 80%; }
> + .layout.grid .widescreen-col-5-5 {
> + width: 100%; }
> + .layout.grid .widescreen-col-1-6 {
> + width: 16.6666666667%; }
> + .layout.grid .widescreen-col-2-6 {
> + width: 33.3333333333%; }
> + .layout.grid .widescreen-col-3-6 {
> + width: 50%; }
> + .layout.grid .widescreen-col-4-6 {
> + width: 66.6666666667%; }
> + .layout.grid .widescreen-col-5-6 {
> + width: 83.3333333333%; }
> + .layout.grid .widescreen-col-6-6 {
> + width: 100%; }
> + .layout.grid .widescreen-col-1-7 {
> + width: 14.2857142857%; }
> + .layout.grid .widescreen-col-2-7 {
> + width: 28.5714285714%; }
> + .layout.grid .widescreen-col-3-7 {
> + width: 42.8571428571%; }
> + .layout.grid .widescreen-col-4-7 {
> + width: 57.1428571429%; }
> + .layout.grid .widescreen-col-5-7 {
> + width: 71.4285714286%; }
> + .layout.grid .widescreen-col-6-7 {
> + width: 85.7142857143%; }
> + .layout.grid .widescreen-col-7-7 {
> + width: 100%; }
> + .layout.grid .widescreen-col-1-8 {
> + width: 12.5%; }
> + .layout.grid .widescreen-col-2-8 {
> + width: 25%; }
> + .layout.grid .widescreen-col-3-8 {
> + width: 37.5%; }
> + .layout.grid .widescreen-col-4-8 {
> + width: 50%; }
> + .layout.grid .widescreen-col-5-8 {
> + width: 62.5%; }
> + .layout.grid .widescreen-col-6-8 {
> + width: 75%; }
> + .layout.grid .widescreen-col-7-8 {
> + width: 87.5%; }
> + .layout.grid .widescreen-col-8-8 {
> + width: 100%; }
> + .layout.grid .widescreen-col-1-9 {
> + width: 11.1111111111%; }
> + .layout.grid .widescreen-col-2-9 {
> + width: 22.2222222222%; }
> + .layout.grid .widescreen-col-3-9 {
> + width: 33.3333333333%; }
> + .layout.grid .widescreen-col-4-9 {
> + width: 44.4444444444%; }
> + .layout.grid .widescreen-col-5-9 {
> + width: 55.5555555556%; }
> + .layout.grid .widescreen-col-6-9 {
> + width: 66.6666666667%; }
> + .layout.grid .widescreen-col-7-9 {
> + width: 77.7777777778%; }
> + .layout.grid .widescreen-col-8-9 {
> + width: 88.8888888889%; }
> + .layout.grid .widescreen-col-9-9 {
> + width: 100%; }
> + .layout.grid .widescreen-col-1-10 {
> + width: 10%; }
> + .layout.grid .widescreen-col-2-10 {
> + width: 20%; }
> + .layout.grid .widescreen-col-3-10 {
> + width: 30%; }
> + .layout.grid .widescreen-col-4-10 {
> + width: 40%; }
> + .layout.grid .widescreen-col-5-10 {
> + width: 50%; }
> + .layout.grid .widescreen-col-6-10 {
> + width: 60%; }
> + .layout.grid .widescreen-col-7-10 {
> + width: 70%; }
> + .layout.grid .widescreen-col-8-10 {
> + width: 80%; }
> + .layout.grid .widescreen-col-9-10 {
> + width: 90%; }
> + .layout.grid .widescreen-col-10-10 {
> + width: 100%; }
> + .layout.grid .widescreen-col-1-11 {
> + width: 9.0909090909%; }
> + .layout.grid .widescreen-col-2-11 {
> + width: 18.1818181818%; }
> + .layout.grid .widescreen-col-3-11 {
> + width: 27.2727272727%; }
> + .layout.grid .widescreen-col-4-11 {
> + width: 36.3636363636%; }
> + .layout.grid .widescreen-col-5-11 {
> + width: 45.4545454545%; }
> + .layout.grid .widescreen-col-6-11 {
> + width: 54.5454545455%; }
> + .layout.grid .widescreen-col-7-11 {
> + width: 63.6363636364%; }
> + .layout.grid .widescreen-col-8-11 {
> + width: 72.7272727273%; }
> + .layout.grid .widescreen-col-9-11 {
> + width: 81.8181818182%; }
> + .layout.grid .widescreen-col-10-11 {
> + width: 90.9090909091%; }
> + .layout.grid .widescreen-col-11-11 {
> + width: 100%; }
> + .layout.grid .widescreen-col-1-12 {
> + width: 8.3333333333%; }
> + .layout.grid .widescreen-col-2-12 {
> + width: 16.6666666667%; }
> + .layout.grid .widescreen-col-3-12 {
> + width: 25%; }
> + .layout.grid .widescreen-col-4-12 {
> + width: 33.3333333333%; }
> + .layout.grid .widescreen-col-5-12 {
> + width: 41.6666666667%; }
> + .layout.grid .widescreen-col-6-12 {
> + width: 50%; }
> + .layout.grid .widescreen-col-7-12 {
> + width: 58.3333333333%; }
> + .layout.grid .widescreen-col-8-12 {
> + width: 66.6666666667%; }
> + .layout.grid .widescreen-col-9-12 {
> + width: 75%; }
> + .layout.grid .widescreen-col-10-12 {
> + width: 83.3333333333%; }
> + .layout.grid .widescreen-col-11-12 {
> + width: 91.6666666667%; }
> + .layout.grid .widescreen-col-12-12 {
> + width: 100%; } }
> + .layout.grid.gap > * {
> + margin: 5px; }
> + @media (min-width: 0px) {
> + .layout.grid.gap .phone-col-1-1 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .phone-col-1-2 {
> + width: calc(50% - 10px); }
> + .layout.grid.gap .phone-col-2-2 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .phone-col-1-3 {
> + width: calc(33.3333333333% - 10px); }
> + .layout.grid.gap .phone-col-2-3 {
> + width: calc(66.6666666667% - 10px); }
> + .layout.grid.gap .phone-col-3-3 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .phone-col-1-4 {
> + width: calc(25% - 10px); }
> + .layout.grid.gap .phone-col-2-4 {
> + width: calc(50% - 10px); }
> + .layout.grid.gap .phone-col-3-4 {
> + width: calc(75% - 10px); }
> + .layout.grid.gap .phone-col-4-4 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .phone-col-1-5 {
> + width: calc(20% - 10px); }
> + .layout.grid.gap .phone-col-2-5 {
> + width: calc(40% - 10px); }
> + .layout.grid.gap .phone-col-3-5 {
> + width: calc(60% - 10px); }
> + .layout.grid.gap .phone-col-4-5 {
> + width: calc(80% - 10px); }
> + .layout.grid.gap .phone-col-5-5 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .phone-col-1-6 {
> + width: calc(16.6666666667% - 10px); }
> + .layout.grid.gap .phone-col-2-6 {
> + width: calc(33.3333333333% - 10px); }
> + .layout.grid.gap .phone-col-3-6 {
> + width: calc(50% - 10px); }
> + .layout.grid.gap .phone-col-4-6 {
> + width: calc(66.6666666667% - 10px); }
> + .layout.grid.gap .phone-col-5-6 {
> + width: calc(83.3333333333% - 10px); }
> + .layout.grid.gap .phone-col-6-6 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .phone-col-1-7 {
> + width: calc(14.2857142857% - 10px); }
> + .layout.grid.gap .phone-col-2-7 {
> + width: calc(28.5714285714% - 10px); }
> + .layout.grid.gap .phone-col-3-7 {
> + width: calc(42.8571428571% - 10px); }
> + .layout.grid.gap .phone-col-4-7 {
> + width: calc(57.1428571429% - 10px); }
> + .layout.grid.gap .phone-col-5-7 {
> + width: calc(71.4285714286% - 10px); }
> + .layout.grid.gap .phone-col-6-7 {
> + width: calc(85.7142857143% - 10px); }
> + .layout.grid.gap .phone-col-7-7 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .phone-col-1-8 {
> + width: calc(12.5% - 10px); }
> + .layout.grid.gap .phone-col-2-8 {
> + width: calc(25% - 10px); }
> + .layout.grid.gap .phone-col-3-8 {
> + width: calc(37.5% - 10px); }
> + .layout.grid.gap .phone-col-4-8 {
> + width: calc(50% - 10px); }
> + .layout.grid.gap .phone-col-5-8 {
> + width: calc(62.5% - 10px); }
> + .layout.grid.gap .phone-col-6-8 {
> + width: calc(75% - 10px); }
> + .layout.grid.gap .phone-col-7-8 {
> + width: calc(87.5% - 10px); }
> + .layout.grid.gap .phone-col-8-8 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .phone-col-1-9 {
> + width: calc(11.1111111111% - 10px); }
> + .layout.grid.gap .phone-col-2-9 {
> + width: calc(22.2222222222% - 10px); }
> + .layout.grid.gap .phone-col-3-9 {
> + width: calc(33.3333333333% - 10px); }
> + .layout.grid.gap .phone-col-4-9 {
> + width: calc(44.4444444444% - 10px); }
> + .layout.grid.gap .phone-col-5-9 {
> + width: calc(55.5555555556% - 10px); }
> + .layout.grid.gap .phone-col-6-9 {
> + width: calc(66.6666666667% - 10px); }
> + .layout.grid.gap .phone-col-7-9 {
> + width: calc(77.7777777778% - 10px); }
> + .layout.grid.gap .phone-col-8-9 {
> + width: calc(88.8888888889% - 10px); }
> + .layout.grid.gap .phone-col-9-9 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .phone-col-1-10 {
> + width: calc(10% - 10px); }
> + .layout.grid.gap .phone-col-2-10 {
> + width: calc(20% - 10px); }
> + .layout.grid.gap .phone-col-3-10 {
> + width: calc(30% - 10px); }
> + .layout.grid.gap .phone-col-4-10 {
> + width: calc(40% - 10px); }
> + .layout.grid.gap .phone-col-5-10 {
> + width: calc(50% - 10px); }
> + .layout.grid.gap .phone-col-6-10 {
> + width: calc(60% - 10px); }
> + .layout.grid.gap .phone-col-7-10 {
> + width: calc(70% - 10px); }
> + .layout.grid.gap .phone-col-8-10 {
> + width: calc(80% - 10px); }
> + .layout.grid.gap .phone-col-9-10 {
> + width: calc(90% - 10px); }
> + .layout.grid.gap .phone-col-10-10 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .phone-col-1-11 {
> + width: calc(9.0909090909% - 10px); }
> + .layout.grid.gap .phone-col-2-11 {
> + width: calc(18.1818181818% - 10px); }
> + .layout.grid.gap .phone-col-3-11 {
> + width: calc(27.2727272727% - 10px); }
> + .layout.grid.gap .phone-col-4-11 {
> + width: calc(36.3636363636% - 10px); }
> + .layout.grid.gap .phone-col-5-11 {
> + width: calc(45.4545454545% - 10px); }
> + .layout.grid.gap .phone-col-6-11 {
> + width: calc(54.5454545455% - 10px); }
> + .layout.grid.gap .phone-col-7-11 {
> + width: calc(63.6363636364% - 10px); }
> + .layout.grid.gap .phone-col-8-11 {
> + width: calc(72.7272727273% - 10px); }
> + .layout.grid.gap .phone-col-9-11 {
> + width: calc(81.8181818182% - 10px); }
> + .layout.grid.gap .phone-col-10-11 {
> + width: calc(90.9090909091% - 10px); }
> + .layout.grid.gap .phone-col-11-11 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .phone-col-1-12 {
> + width: calc(8.3333333333% - 10px); }
> + .layout.grid.gap .phone-col-2-12 {
> + width: calc(16.6666666667% - 10px); }
> + .layout.grid.gap .phone-col-3-12 {
> + width: calc(25% - 10px); }
> + .layout.grid.gap .phone-col-4-12 {
> + width: calc(33.3333333333% - 10px); }
> + .layout.grid.gap .phone-col-5-12 {
> + width: calc(41.6666666667% - 10px); }
> + .layout.grid.gap .phone-col-6-12 {
> + width: calc(50% - 10px); }
> + .layout.grid.gap .phone-col-7-12 {
> + width: calc(58.3333333333% - 10px); }
> + .layout.grid.gap .phone-col-8-12 {
> + width: calc(66.6666666667% - 10px); }
> + .layout.grid.gap .phone-col-9-12 {
> + width: calc(75% - 10px); }
> + .layout.grid.gap .phone-col-10-12 {
> + width: calc(83.3333333333% - 10px); }
> + .layout.grid.gap .phone-col-11-12 {
> + width: calc(91.6666666667% - 10px); }
> + .layout.grid.gap .phone-col-12-12 {
> + width: calc(100% - 10px); } }
> + @media (min-width: 768px) {
> + .layout.grid.gap .tablet-col-1-1 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .tablet-col-1-2 {
> + width: calc(50% - 10px); }
> + .layout.grid.gap .tablet-col-2-2 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .tablet-col-1-3 {
> + width: calc(33.3333333333% - 10px); }
> + .layout.grid.gap .tablet-col-2-3 {
> + width: calc(66.6666666667% - 10px); }
> + .layout.grid.gap .tablet-col-3-3 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .tablet-col-1-4 {
> + width: calc(25% - 10px); }
> + .layout.grid.gap .tablet-col-2-4 {
> + width: calc(50% - 10px); }
> + .layout.grid.gap .tablet-col-3-4 {
> + width: calc(75% - 10px); }
> + .layout.grid.gap .tablet-col-4-4 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .tablet-col-1-5 {
> + width: calc(20% - 10px); }
> + .layout.grid.gap .tablet-col-2-5 {
> + width: calc(40% - 10px); }
> + .layout.grid.gap .tablet-col-3-5 {
> + width: calc(60% - 10px); }
> + .layout.grid.gap .tablet-col-4-5 {
> + width: calc(80% - 10px); }
> + .layout.grid.gap .tablet-col-5-5 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .tablet-col-1-6 {
> + width: calc(16.6666666667% - 10px); }
> + .layout.grid.gap .tablet-col-2-6 {
> + width: calc(33.3333333333% - 10px); }
> + .layout.grid.gap .tablet-col-3-6 {
> + width: calc(50% - 10px); }
> + .layout.grid.gap .tablet-col-4-6 {
> + width: calc(66.6666666667% - 10px); }
> + .layout.grid.gap .tablet-col-5-6 {
> + width: calc(83.3333333333% - 10px); }
> + .layout.grid.gap .tablet-col-6-6 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .tablet-col-1-7 {
> + width: calc(14.2857142857% - 10px); }
> + .layout.grid.gap .tablet-col-2-7 {
> + width: calc(28.5714285714% - 10px); }
> + .layout.grid.gap .tablet-col-3-7 {
> + width: calc(42.8571428571% - 10px); }
> + .layout.grid.gap .tablet-col-4-7 {
> + width: calc(57.1428571429% - 10px); }
> + .layout.grid.gap .tablet-col-5-7 {
> + width: calc(71.4285714286% - 10px); }
> + .layout.grid.gap .tablet-col-6-7 {
> + width: calc(85.7142857143% - 10px); }
> + .layout.grid.gap .tablet-col-7-7 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .tablet-col-1-8 {
> + width: calc(12.5% - 10px); }
> + .layout.grid.gap .tablet-col-2-8 {
> + width: calc(25% - 10px); }
> + .layout.grid.gap .tablet-col-3-8 {
> + width: calc(37.5% - 10px); }
> + .layout.grid.gap .tablet-col-4-8 {
> + width: calc(50% - 10px); }
> + .layout.grid.gap .tablet-col-5-8 {
> + width: calc(62.5% - 10px); }
> + .layout.grid.gap .tablet-col-6-8 {
> + width: calc(75% - 10px); }
> + .layout.grid.gap .tablet-col-7-8 {
> + width: calc(87.5% - 10px); }
> + .layout.grid.gap .tablet-col-8-8 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .tablet-col-1-9 {
> + width: calc(11.1111111111% - 10px); }
> + .layout.grid.gap .tablet-col-2-9 {
> + width: calc(22.2222222222% - 10px); }
> + .layout.grid.gap .tablet-col-3-9 {
> + width: calc(33.3333333333% - 10px); }
> + .layout.grid.gap .tablet-col-4-9 {
> + width: calc(44.4444444444% - 10px); }
> + .layout.grid.gap .tablet-col-5-9 {
> + width: calc(55.5555555556% - 10px); }
> + .layout.grid.gap .tablet-col-6-9 {
> + width: calc(66.6666666667% - 10px); }
> + .layout.grid.gap .tablet-col-7-9 {
> + width: calc(77.7777777778% - 10px); }
> + .layout.grid.gap .tablet-col-8-9 {
> + width: calc(88.8888888889% - 10px); }
> + .layout.grid.gap .tablet-col-9-9 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .tablet-col-1-10 {
> + width: calc(10% - 10px); }
> + .layout.grid.gap .tablet-col-2-10 {
> + width: calc(20% - 10px); }
> + .layout.grid.gap .tablet-col-3-10 {
> + width: calc(30% - 10px); }
> + .layout.grid.gap .tablet-col-4-10 {
> + width: calc(40% - 10px); }
> + .layout.grid.gap .tablet-col-5-10 {
> + width: calc(50% - 10px); }
> + .layout.grid.gap .tablet-col-6-10 {
> + width: calc(60% - 10px); }
> + .layout.grid.gap .tablet-col-7-10 {
> + width: calc(70% - 10px); }
> + .layout.grid.gap .tablet-col-8-10 {
> + width: calc(80% - 10px); }
> + .layout.grid.gap .tablet-col-9-10 {
> + width: calc(90% - 10px); }
> + .layout.grid.gap .tablet-col-10-10 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .tablet-col-1-11 {
> + width: calc(9.0909090909% - 10px); }
> + .layout.grid.gap .tablet-col-2-11 {
> + width: calc(18.1818181818% - 10px); }
> + .layout.grid.gap .tablet-col-3-11 {
> + width: calc(27.2727272727% - 10px); }
> + .layout.grid.gap .tablet-col-4-11 {
> + width: calc(36.3636363636% - 10px); }
> + .layout.grid.gap .tablet-col-5-11 {
> + width: calc(45.4545454545% - 10px); }
> + .layout.grid.gap .tablet-col-6-11 {
> + width: calc(54.5454545455% - 10px); }
> + .layout.grid.gap .tablet-col-7-11 {
> + width: calc(63.6363636364% - 10px); }
> + .layout.grid.gap .tablet-col-8-11 {
> + width: calc(72.7272727273% - 10px); }
> + .layout.grid.gap .tablet-col-9-11 {
> + width: calc(81.8181818182% - 10px); }
> + .layout.grid.gap .tablet-col-10-11 {
> + width: calc(90.9090909091% - 10px); }
> + .layout.grid.gap .tablet-col-11-11 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .tablet-col-1-12 {
> + width: calc(8.3333333333% - 10px); }
> + .layout.grid.gap .tablet-col-2-12 {
> + width: calc(16.6666666667% - 10px); }
> + .layout.grid.gap .tablet-col-3-12 {
> + width: calc(25% - 10px); }
> + .layout.grid.gap .tablet-col-4-12 {
> + width: calc(33.3333333333% - 10px); }
> + .layout.grid.gap .tablet-col-5-12 {
> + width: calc(41.6666666667% - 10px); }
> + .layout.grid.gap .tablet-col-6-12 {
> + width: calc(50% - 10px); }
> + .layout.grid.gap .tablet-col-7-12 {
> + width: calc(58.3333333333% - 10px); }
> + .layout.grid.gap .tablet-col-8-12 {
> + width: calc(66.6666666667% - 10px); }
> + .layout.grid.gap .tablet-col-9-12 {
> + width: calc(75% - 10px); }
> + .layout.grid.gap .tablet-col-10-12 {
> + width: calc(83.3333333333% - 10px); }
> + .layout.grid.gap .tablet-col-11-12 {
> + width: calc(91.6666666667% - 10px); }
> + .layout.grid.gap .tablet-col-12-12 {
> + width: calc(100% - 10px); } }
> + @media (min-width: 992px) {
> + .layout.grid.gap .desktop-col-1-1 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .desktop-col-1-2 {
> + width: calc(50% - 10px); }
> + .layout.grid.gap .desktop-col-2-2 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .desktop-col-1-3 {
> + width: calc(33.3333333333% - 10px); }
> + .layout.grid.gap .desktop-col-2-3 {
> + width: calc(66.6666666667% - 10px); }
> + .layout.grid.gap .desktop-col-3-3 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .desktop-col-1-4 {
> + width: calc(25% - 10px); }
> + .layout.grid.gap .desktop-col-2-4 {
> + width: calc(50% - 10px); }
> + .layout.grid.gap .desktop-col-3-4 {
> + width: calc(75% - 10px); }
> + .layout.grid.gap .desktop-col-4-4 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .desktop-col-1-5 {
> + width: calc(20% - 10px); }
> + .layout.grid.gap .desktop-col-2-5 {
> + width: calc(40% - 10px); }
> + .layout.grid.gap .desktop-col-3-5 {
> + width: calc(60% - 10px); }
> + .layout.grid.gap .desktop-col-4-5 {
> + width: calc(80% - 10px); }
> + .layout.grid.gap .desktop-col-5-5 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .desktop-col-1-6 {
> + width: calc(16.6666666667% - 10px); }
> + .layout.grid.gap .desktop-col-2-6 {
> + width: calc(33.3333333333% - 10px); }
> + .layout.grid.gap .desktop-col-3-6 {
> + width: calc(50% - 10px); }
> + .layout.grid.gap .desktop-col-4-6 {
> + width: calc(66.6666666667% - 10px); }
> + .layout.grid.gap .desktop-col-5-6 {
> + width: calc(83.3333333333% - 10px); }
> + .layout.grid.gap .desktop-col-6-6 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .desktop-col-1-7 {
> + width: calc(14.2857142857% - 10px); }
> + .layout.grid.gap .desktop-col-2-7 {
> + width: calc(28.5714285714% - 10px); }
> + .layout.grid.gap .desktop-col-3-7 {
> + width: calc(42.8571428571% - 10px); }
> + .layout.grid.gap .desktop-col-4-7 {
> + width: calc(57.1428571429% - 10px); }
> + .layout.grid.gap .desktop-col-5-7 {
> + width: calc(71.4285714286% - 10px); }
> + .layout.grid.gap .desktop-col-6-7 {
> + width: calc(85.7142857143% - 10px); }
> + .layout.grid.gap .desktop-col-7-7 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .desktop-col-1-8 {
> + width: calc(12.5% - 10px); }
> + .layout.grid.gap .desktop-col-2-8 {
> + width: calc(25% - 10px); }
> + .layout.grid.gap .desktop-col-3-8 {
> + width: calc(37.5% - 10px); }
> + .layout.grid.gap .desktop-col-4-8 {
> + width: calc(50% - 10px); }
> + .layout.grid.gap .desktop-col-5-8 {
> + width: calc(62.5% - 10px); }
> + .layout.grid.gap .desktop-col-6-8 {
> + width: calc(75% - 10px); }
> + .layout.grid.gap .desktop-col-7-8 {
> + width: calc(87.5% - 10px); }
> + .layout.grid.gap .desktop-col-8-8 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .desktop-col-1-9 {
> + width: calc(11.1111111111% - 10px); }
> + .layout.grid.gap .desktop-col-2-9 {
> + width: calc(22.2222222222% - 10px); }
> + .layout.grid.gap .desktop-col-3-9 {
> + width: calc(33.3333333333% - 10px); }
> + .layout.grid.gap .desktop-col-4-9 {
> + width: calc(44.4444444444% - 10px); }
> + .layout.grid.gap .desktop-col-5-9 {
> + width: calc(55.5555555556% - 10px); }
> + .layout.grid.gap .desktop-col-6-9 {
> + width: calc(66.6666666667% - 10px); }
> + .layout.grid.gap .desktop-col-7-9 {
> + width: calc(77.7777777778% - 10px); }
> + .layout.grid.gap .desktop-col-8-9 {
> + width: calc(88.8888888889% - 10px); }
> + .layout.grid.gap .desktop-col-9-9 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .desktop-col-1-10 {
> + width: calc(10% - 10px); }
> + .layout.grid.gap .desktop-col-2-10 {
> + width: calc(20% - 10px); }
> + .layout.grid.gap .desktop-col-3-10 {
> + width: calc(30% - 10px); }
> + .layout.grid.gap .desktop-col-4-10 {
> + width: calc(40% - 10px); }
> + .layout.grid.gap .desktop-col-5-10 {
> + width: calc(50% - 10px); }
> + .layout.grid.gap .desktop-col-6-10 {
> + width: calc(60% - 10px); }
> + .layout.grid.gap .desktop-col-7-10 {
> + width: calc(70% - 10px); }
> + .layout.grid.gap .desktop-col-8-10 {
> + width: calc(80% - 10px); }
> + .layout.grid.gap .desktop-col-9-10 {
> + width: calc(90% - 10px); }
> + .layout.grid.gap .desktop-col-10-10 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .desktop-col-1-11 {
> + width: calc(9.0909090909% - 10px); }
> + .layout.grid.gap .desktop-col-2-11 {
> + width: calc(18.1818181818% - 10px); }
> + .layout.grid.gap .desktop-col-3-11 {
> + width: calc(27.2727272727% - 10px); }
> + .layout.grid.gap .desktop-col-4-11 {
> + width: calc(36.3636363636% - 10px); }
> + .layout.grid.gap .desktop-col-5-11 {
> + width: calc(45.4545454545% - 10px); }
> + .layout.grid.gap .desktop-col-6-11 {
> + width: calc(54.5454545455% - 10px); }
> + .layout.grid.gap .desktop-col-7-11 {
> + width: calc(63.6363636364% - 10px); }
> + .layout.grid.gap .desktop-col-8-11 {
> + width: calc(72.7272727273% - 10px); }
> + .layout.grid.gap .desktop-col-9-11 {
> + width: calc(81.8181818182% - 10px); }
> + .layout.grid.gap .desktop-col-10-11 {
> + width: calc(90.9090909091% - 10px); }
> + .layout.grid.gap .desktop-col-11-11 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .desktop-col-1-12 {
> + width: calc(8.3333333333% - 10px); }
> + .layout.grid.gap .desktop-col-2-12 {
> + width: calc(16.6666666667% - 10px); }
> + .layout.grid.gap .desktop-col-3-12 {
> + width: calc(25% - 10px); }
> + .layout.grid.gap .desktop-col-4-12 {
> + width: calc(33.3333333333% - 10px); }
> + .layout.grid.gap .desktop-col-5-12 {
> + width: calc(41.6666666667% - 10px); }
> + .layout.grid.gap .desktop-col-6-12 {
> + width: calc(50% - 10px); }
> + .layout.grid.gap .desktop-col-7-12 {
> + width: calc(58.3333333333% - 10px); }
> + .layout.grid.gap .desktop-col-8-12 {
> + width: calc(66.6666666667% - 10px); }
> + .layout.grid.gap .desktop-col-9-12 {
> + width: calc(75% - 10px); }
> + .layout.grid.gap .desktop-col-10-12 {
> + width: calc(83.3333333333% - 10px); }
> + .layout.grid.gap .desktop-col-11-12 {
> + width: calc(91.6666666667% - 10px); }
> + .layout.grid.gap .desktop-col-12-12 {
> + width: calc(100% - 10px); } }
> + @media (min-width: 1600px) {
> + .layout.grid.gap .widescreen-col-1-1 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .widescreen-col-1-2 {
> + width: calc(50% - 10px); }
> + .layout.grid.gap .widescreen-col-2-2 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .widescreen-col-1-3 {
> + width: calc(33.3333333333% - 10px); }
> + .layout.grid.gap .widescreen-col-2-3 {
> + width: calc(66.6666666667% - 10px); }
> + .layout.grid.gap .widescreen-col-3-3 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .widescreen-col-1-4 {
> + width: calc(25% - 10px); }
> + .layout.grid.gap .widescreen-col-2-4 {
> + width: calc(50% - 10px); }
> + .layout.grid.gap .widescreen-col-3-4 {
> + width: calc(75% - 10px); }
> + .layout.grid.gap .widescreen-col-4-4 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .widescreen-col-1-5 {
> + width: calc(20% - 10px); }
> + .layout.grid.gap .widescreen-col-2-5 {
> + width: calc(40% - 10px); }
> + .layout.grid.gap .widescreen-col-3-5 {
> + width: calc(60% - 10px); }
> + .layout.grid.gap .widescreen-col-4-5 {
> + width: calc(80% - 10px); }
> + .layout.grid.gap .widescreen-col-5-5 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .widescreen-col-1-6 {
> + width: calc(16.6666666667% - 10px); }
> + .layout.grid.gap .widescreen-col-2-6 {
> + width: calc(33.3333333333% - 10px); }
> + .layout.grid.gap .widescreen-col-3-6 {
> + width: calc(50% - 10px); }
> + .layout.grid.gap .widescreen-col-4-6 {
> + width: calc(66.6666666667% - 10px); }
> + .layout.grid.gap .widescreen-col-5-6 {
> + width: calc(83.3333333333% - 10px); }
> + .layout.grid.gap .widescreen-col-6-6 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .widescreen-col-1-7 {
> + width: calc(14.2857142857% - 10px); }
> + .layout.grid.gap .widescreen-col-2-7 {
> + width: calc(28.5714285714% - 10px); }
> + .layout.grid.gap .widescreen-col-3-7 {
> + width: calc(42.8571428571% - 10px); }
> + .layout.grid.gap .widescreen-col-4-7 {
> + width: calc(57.1428571429% - 10px); }
> + .layout.grid.gap .widescreen-col-5-7 {
> + width: calc(71.4285714286% - 10px); }
> + .layout.grid.gap .widescreen-col-6-7 {
> + width: calc(85.7142857143% - 10px); }
> + .layout.grid.gap .widescreen-col-7-7 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .widescreen-col-1-8 {
> + width: calc(12.5% - 10px); }
> + .layout.grid.gap .widescreen-col-2-8 {
> + width: calc(25% - 10px); }
> + .layout.grid.gap .widescreen-col-3-8 {
> + width: calc(37.5% - 10px); }
> + .layout.grid.gap .widescreen-col-4-8 {
> + width: calc(50% - 10px); }
> + .layout.grid.gap .widescreen-col-5-8 {
> + width: calc(62.5% - 10px); }
> + .layout.grid.gap .widescreen-col-6-8 {
> + width: calc(75% - 10px); }
> + .layout.grid.gap .widescreen-col-7-8 {
> + width: calc(87.5% - 10px); }
> + .layout.grid.gap .widescreen-col-8-8 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .widescreen-col-1-9 {
> + width: calc(11.1111111111% - 10px); }
> + .layout.grid.gap .widescreen-col-2-9 {
> + width: calc(22.2222222222% - 10px); }
> + .layout.grid.gap .widescreen-col-3-9 {
> + width: calc(33.3333333333% - 10px); }
> + .layout.grid.gap .widescreen-col-4-9 {
> + width: calc(44.4444444444% - 10px); }
> + .layout.grid.gap .widescreen-col-5-9 {
> + width: calc(55.5555555556% - 10px); }
> + .layout.grid.gap .widescreen-col-6-9 {
> + width: calc(66.6666666667% - 10px); }
> + .layout.grid.gap .widescreen-col-7-9 {
> + width: calc(77.7777777778% - 10px); }
> + .layout.grid.gap .widescreen-col-8-9 {
> + width: calc(88.8888888889% - 10px); }
> + .layout.grid.gap .widescreen-col-9-9 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .widescreen-col-1-10 {
> + width: calc(10% - 10px); }
> + .layout.grid.gap .widescreen-col-2-10 {
> + width: calc(20% - 10px); }
> + .layout.grid.gap .widescreen-col-3-10 {
> + width: calc(30% - 10px); }
> + .layout.grid.gap .widescreen-col-4-10 {
> + width: calc(40% - 10px); }
> + .layout.grid.gap .widescreen-col-5-10 {
> + width: calc(50% - 10px); }
> + .layout.grid.gap .widescreen-col-6-10 {
> + width: calc(60% - 10px); }
> + .layout.grid.gap .widescreen-col-7-10 {
> + width: calc(70% - 10px); }
> + .layout.grid.gap .widescreen-col-8-10 {
> + width: calc(80% - 10px); }
> + .layout.grid.gap .widescreen-col-9-10 {
> + width: calc(90% - 10px); }
> + .layout.grid.gap .widescreen-col-10-10 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .widescreen-col-1-11 {
> + width: calc(9.0909090909% - 10px); }
> + .layout.grid.gap .widescreen-col-2-11 {
> + width: calc(18.1818181818% - 10px); }
> + .layout.grid.gap .widescreen-col-3-11 {
> + width: calc(27.2727272727% - 10px); }
> + .layout.grid.gap .widescreen-col-4-11 {
> + width: calc(36.3636363636% - 10px); }
> + .layout.grid.gap .widescreen-col-5-11 {
> + width: calc(45.4545454545% - 10px); }
> + .layout.grid.gap .widescreen-col-6-11 {
> + width: calc(54.5454545455% - 10px); }
> + .layout.grid.gap .widescreen-col-7-11 {
> + width: calc(63.6363636364% - 10px); }
> + .layout.grid.gap .widescreen-col-8-11 {
> + width: calc(72.7272727273% - 10px); }
> + .layout.grid.gap .widescreen-col-9-11 {
> + width: calc(81.8181818182% - 10px); }
> + .layout.grid.gap .widescreen-col-10-11 {
> + width: calc(90.9090909091% - 10px); }
> + .layout.grid.gap .widescreen-col-11-11 {
> + width: calc(100% - 10px); }
> + .layout.grid.gap .widescreen-col-1-12 {
> + width: calc(8.3333333333% - 10px); }
> + .layout.grid.gap .widescreen-col-2-12 {
> + width: calc(16.6666666667% - 10px); }
> + .layout.grid.gap .widescreen-col-3-12 {
> + width: calc(25% - 10px); }
> + .layout.grid.gap .widescreen-col-4-12 {
> + width: calc(33.3333333333% - 10px); }
> + .layout.grid.gap .widescreen-col-5-12 {
> + width: calc(41.6666666667% - 10px); }
> + .layout.grid.gap .widescreen-col-6-12 {
> + width: calc(50% - 10px); }
> + .layout.grid.gap .widescreen-col-7-12 {
> + width: calc(58.3333333333% - 10px); }
> + .layout.grid.gap .widescreen-col-8-12 {
> + width: calc(66.6666666667% - 10px); }
> + .layout.grid.gap .widescreen-col-9-12 {
> + width: calc(75% - 10px); }
> + .layout.grid.gap .widescreen-col-10-12 {
> + width: calc(83.3333333333% - 10px); }
> + .layout.grid.gap .widescreen-col-11-12 {
> + width: calc(91.6666666667% - 10px); }
> + .layout.grid.gap .widescreen-col-12-12 {
> + width: calc(100% - 10px); } }
> + .layout.horizontal.itemsSpaceBetween, .layout.vertical.itemsSpaceBetween, .layout.grid.itemsSpaceBetween {
> + justify-content: space-between; }
> + .layout.horizontal.itemsSpaceAround, .layout.vertical.itemsSpaceAround, .layout.grid.itemsSpaceAround {
> + justify-content: space-around; }
> + .layout.horizontal.itemsSameHeight > * > *, .layout.vertical.itemsSameHeight > * > *, .layout.grid.itemsSameHeight > * > * {
> + min-height: 100%; }
> + .layout.horizontal.itemsExpand, .layout.vertical.itemsExpand, .layout.grid.itemsExpand {
> + width: 100%; }
> + .layout.horizontal.itemsExpand > *, .layout.vertical.itemsExpand > *, .layout.grid.itemsExpand > * {
> + flex: 1 0 auto; }
> + .layout.horizontal.itemsCentered, .layout.grid.itemsCentered {
> + align-items: center; }
> + .layout.horizontal.itemsTop, .layout.grid.itemsTop {
> + align-items: flex-start; }
> + .layout.horizontal.itemsBottom, .layout.grid.itemsBottom {
> + align-items: flex-end; }
> + .layout.horizontal.itemsLeft, .layout.grid.itemsLeft {
> + justify-content: flex-start; }
> + .layout.horizontal.itemsCenter, .layout.grid.itemsCenter {
> + justify-content: center; }
> + .layout.horizontal.itemsRight, .layout.grid.itemsRight {
> + justify-content: flex-end; }
> + .layout.horizontal.itemsReverse, .layout.grid.itemsReverse {
> + flex-direction: row-reverse; }
> + .layout.vertical.itemsCentered {
> + justify-content: center; }
> + .layout.vertical.itemsTop {
> + justify-content: flex-start; }
> + .layout.vertical.itemsBottom {
> + justify-content: flex-end; }
> + .layout.vertical.itemsLeft {
> + align-items: flex-start; }
> + .layout.vertical.itemsCenter {
> + align-items: center; }
> + .layout.vertical.itemsRight {
> + align-items: flex-end; }
> + .layout.vertical.itemsReverse {
> + flex-direction: column-reverse; }
> + .layout.table table {
> + display: table; }
> +
> +@media (max-width: 767px) {
> + .visible-phone {
> + display: flex !important; }
> +
> + .hidden-phone {
> + display: none !important; } }
> +@media (min-width: 768px) and (max-width: 991px) {
> + .visible-tablet {
> + display: flex !important; }
> +
> + .hidden-tablet {
> + display: none !important; } }
> +@media (min-width: 992px) and (max-width: 1599px) {
> + .visible-desktop {
> + display: flex !important; }
> +
> + .hidden-desktop {
> + display: none !important; } }
> +@media (min-width: 1600px) {
> + .visible-widescreen {
> + display: flex !important; }
> +
> + .hidden-widescreen {
> + display: none !important; } }
> +.visible-phone, .visible-tablet, .visible-desktop, .visible-widescreen {
> + display: none !important; }
> +
> +.hidden-phone, .hidden-tablet, .hidden-desktop, .hidden-widescreen {
> + display: flex !important; }
> +
> +.externsjs.list, .externsjs.navigation {
> + align-items: stretch;
> + align-content: flex-start;
> + -webkit-overflow-scrolling: touch; }
> + .externsjs.list > *, .externsjs.navigation > * {
> + flex: 0 0 auto; }
> + .externsjs.list.no-chrome, .externsjs.navigation.no-chrome {
> + background: transparent;
> + border: none; }
> + .externsjs.list.horizontalScroll, .externsjs.navigation.horizontalScroll {
> + align-items: baseline !important; }
> + .externsjs.list.horizontalScroll .externsjs.item, .externsjs.navigation.horizontalScroll .externsjs.item {
> + overflow: initial; }
> +
> +j|List {
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.ListView");
> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.ListSingleSelectionMouseController");
> + IBeadKeyController: ClassReference("org.apache.royale.externsjs.beads.controllers.ListKeyDownController");
> + IItemRendererClassFactory: ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
> + IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.ListItemRenderer");
> + IItemRendererInitializer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ListItemRendererInitializer");
> + ISelectableItemRenderer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ClassSelectorListSelectableItemRendererBead");
> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport");
> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.ArrayListSelectionModel");
> + IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.SelectionDataItemRendererFactoryForCollectionView"); }
> +
> +@media -royale-swf {
> + j|List {
> + IContentView: ClassReference("org.apache.royale.externsjs.supportClasses.list.DataGroup"); } }
> +j|VirtualList {
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.VirtualListView");
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.VirtualListVerticalLayout");
> + IDataProviderItemRendererMapper: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.VirtualDataItemRendererFactoryForCollectionView");
> + IBeadKeyController: ClassReference("org.apache.royale.externsjs.beads.controllers.VirtualListKeyDownController"); }
> +
> +j|Navigation {
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.ListView");
> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.ListSingleSelectionMouseController");
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.VerticalLayout");
> + IItemRendererClassFactory: ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
> + IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.NavigationLinkItemRenderer");
> + IItemRendererInitializer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.NavigationItemRendererInitializer");
> + ISelectableItemRenderer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ClassSelectorListHoverOnlySelectableItemRendererBead");
> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport");
> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.ArrayListSelectionModel");
> + IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.SelectionDataItemRendererFactoryForCollectionView"); }
> +
> +j|NavigationLinkItemRenderer {
> + IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ItemRendererMouseController"); }
> +
> +j|CollapsibleNavigationSectionRenderer {
> + IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ItemRendererMouseController"); }
> +
> +.externsjs.numericstepper {
> + display: flex;
> + flex-flow: column wrap; }
> + .externsjs.numericstepper .externsjs.spinner {
> + display: none;
> + order: -1; }
> + .externsjs.numericstepper .externsjs.textinput {
> + display: inline-flex;
> + order: 0;
> + z-index: 1; }
> + .externsjs.numericstepper .externsjs.button::after {
> + content: " ";
> + position: absolute; }
> + .externsjs.numericstepper .externsjs.button.up {
> + order: 1; }
> + .externsjs.numericstepper .externsjs.button.down {
> + order: 2; }
> +
> +@media (max-width: 992px) {
> + .externsjs.numericstepper {
> + flex-flow: row nowrap; }
> + .externsjs.numericstepper .externsjs.textinput {
> + order: 1; }
> + .externsjs.numericstepper .externsjs.button.up {
> + order: 2; }
> + .externsjs.numericstepper .externsjs.button.down {
> + order: 0; } }
> +j|NumericStepper {
> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.RangeModel");
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.NumericStepperView");
> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.NumericStepperController"); }
> +
> +j|Spinner {
> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.RangeModel");
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.SpinnerView");
> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.SpinnerMouseController"); }
> +
> +.externsjs.popup {
> + display: inline-flex; }
> +
> +.popup-content {
> + position: fixed;
> + pointer-events: none;
> + bottom: 0;
> + left: 0;
> + width: 100%;
> + height: 100%;
> + overflow: hidden;
> + contain: strict;
> + z-index: 40; }
> + .popup-content::before {
> + position: absolute;
> + display: block;
> + top: 0;
> + left: 0;
> + width: 100%;
> + height: 100%;
> + content: ""; }
> + .popup-content .externsjs.popupcontent {
> + display: inline-flex;
> + position: relative;
> + transform: translate(-50%, 100%);
> + transition: none;
> + will-change: transform, opacity;
> + bottom: auto;
> + top: calc(100% - 10px);
> + left: 50%;
> + touch-action: none;
> + opacity: 0; }
> + .popup-content.open {
> + pointer-events: auto; }
> + .popup-content.open::before {
> + opacity: 1; }
> + .popup-content.open .externsjs.popupcontent {
> + transform: translate(-50%, -100%);
> + transition: transform 0.4s 0ms, opacity 0.4s 0ms;
> + opacity: 1; }
> +
> +@media (max-width: 768px) {
> + .popup-content .externsjs.popupcontent {
> + width: calc(100% - 20px); } }
> +@media (min-width: 992px) {
> + .popup-content .externsjs.popupcontent {
> + transform: translate(-50%, -60%); }
> + .popup-content.open .externsjs.popupcontent {
> + top: 50%;
> + left: 50%;
> + margin-right: -50%;
> + transform: translate(-50%, -50%); } }
> +j|PopUp {
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.PopUpView");
> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.PopUpModel");
> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.PopUpMouseController");
> + IPopUpContent: ClassReference("org.apache.royale.core.StyledUIBase"); }
> +
> +.externsjs.radiobutton {
> + display: inline-flex;
> + position: relative;
> + margin: 0;
> + padding: 0;
> + height: auto; }
> + .externsjs.radiobutton input {
> + -webkit-appearance: none;
> + -moz-appearance: none;
> + -o-appearance: none;
> + -ms-appearance: none;
> + appearance: none;
> + display: inline-flex;
> + margin: 0;
> + padding: 0;
> + width: 22px;
> + height: 22px;
> + line-height: 22px;
> + opacity: 0; }
> + .externsjs.radiobutton input + span::before {
> + content: " ";
> + position: absolute;
> + left: 0px;
> + top: 0px;
> + width: 22px;
> + height: 22px; }
> + .externsjs.radiobutton input + span::after {
> + content: " ";
> + position: absolute;
> + left: 0px;
> + top: 0px;
> + width: 22px;
> + height: 22px;
> + opacity: 0; }
> + .externsjs.radiobutton input:checked + span::after, .externsjs.radiobutton input:checked:active + span::after {
> + opacity: 1; }
> + .externsjs.radiobutton input:focus + span::before, .externsjs.radiobutton input:checked:focus + span::before, .externsjs.radiobutton input:checked:active:focus + span::before {
> + outline: none; }
> + .externsjs.radiobutton input[disabled] + span {
> + cursor: unset; }
> + .externsjs.radiobutton span {
> + cursor: pointer;
> + margin: 0;
> + width: inherit; }
> +
> +@media -royale-swf {
> + j|RadioButton {
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.RadioButtonView"); } }
> +.externsjs.section {
> + display: none;
> + flex-flow: column nowrap;
> + height: 100%; }
> + .externsjs.section > * {
> + flex: 0 0 auto; }
> + .externsjs.section.is-selected {
> + display: flex; }
> +
> +j|SectionContent {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
> +
> +j|ScrollableSectionContent {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout");
> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport"); }
> +
> +.externsjs.slider {
> + position: relative;
> + height: 27px;
> + display: flex;
> + flex-direction: row;
> + background: none; }
> + .externsjs.slider input {
> + -webkit-appearance: none;
> + -moz-appearance: none;
> + -o-appearance: none;
> + -ms-appearance: none;
> + appearance: none;
> + outline: 0;
> + cursor: pointer;
> + user-select: none;
> + align-self: center;
> + z-index: 1;
> + margin: 0 20px;
> + padding: 0;
> + width: calc(100% - 40px);
> + height: 36px;
> + background: transparent; }
> + .externsjs.slider input::-webkit-slider-runnable-track {
> + background: transparent; }
> + .externsjs.slider input::-moz-range-track {
> + background: transparent;
> + border: none; }
> + .externsjs.slider input::-ms-track {
> + width: 100%;
> + height: 6px;
> + background: none;
> + border: none;
> + color: transparent; }
> + .externsjs.slider input::-ms-fill-lower {
> + padding: 0; }
> + .externsjs.slider input::-ms-fill-upper {
> + padding: 0; }
> + .externsjs.slider input::-webkit-slider-thumb, .externsjs.slider input::-moz-range-thumb {
> + -webkit-appearance: none;
> + -moz-appearance: none;
> + -o-appearance: none;
> + -ms-appearance: none;
> + appearance: none; }
> + .externsjs.slider input:focus {
> + outline: none; }
> + .externsjs.slider input[disabled] {
> + cursor: unset; }
> + .externsjs.slider input::-ms-tooltip {
> + display: none; }
> +
> +.slider-track-container {
> + position: absolute;
> + display: flex;
> + overflow: hidden;
> + transform: translate(0, -3px);
> + margin: 0 29px;
> + padding: 0;
> + left: 0;
> + width: calc(100% - 58px);
> + height: 6px;
> + background: transparent;
> + border: 0; }
> +
> +.slider-track-fill {
> + position: relative;
> + flex: 0;
> + padding: 0; }
> +
> +.slider-track {
> + position: relative;
> + flex: 0;
> + padding: 0; }
> +
> +j|HSlider {
> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.SliderRangeModel");
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.SliderView");
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout");
> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.SliderMouseController"); }
> +
> +@media -royale-swf {
> + j|HSlider {
> + IThumbView: ClassReference("org.apache.royale.externsjs.beads.views.SliderThumbView");
> + ITrackView: ClassReference("org.apache.royale.externsjs.beads.views.SliderTrackView"); } }
> +.vslider {
> + min-width: 27px;
> + min-height: 150px;
> + position: relative;
> + display: inline-block; }
> + .vslider .transform-container {
> + height: 100%;
> + display: inline-block;
> + position: absolute;
> + margin-left: calc(50% - 27px/2); }
> + .vslider .sizer {
> + height: 100%;
> + visibility: hidden; }
> + .vslider .externsjs.slider {
> + transform: "translate(-50%, -50%) rotate(270deg) translate(-50%, 50%)";
> + left: 0;
> + right: 0;
> + top: 0;
> + position: absolute; }
> + .vslider .externsjs.slider input {
> + margin-left: 0;
> + margin-right: 0;
> + width: 100%; }
> + .vslider .slider-track-container {
> + margin: 0;
> + width: 100%;
> + padding-left: 5px;
> + padding-right: 5px; }
> +
> +.externsjs.tablecell .vslider .transform-container {
> + margin-left: calc(50% - 27px/2*2); }
> +
> +.externsjs.snackbar {
> + bottom: 0;
> + position: fixed;
> + width: 100%;
> + z-index: 40;
> + justify-content: center; }
> +
> +.externsjs.snackbar-content {
> + max-width: 568px;
> + min-width: 288px;
> + padding: 0.68em 1.12em;
> + position: relative; }
> +
> +.externsjs.snackbar-message {
> + float: left;
> + margin: 10px; }
> +
> +.externsjs.snackbar-action {
> + cursor: pointer;
> + float: right;
> + padding: 10px; }
> +
> +@media (max-width: 992px) {
> + .externsjs.snackbar-content {
> + max-width: 100%;
> + width: 100%; } }
> +j|Snackbar {
> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.SnackbarModel");
> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.SnackbarController");
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.SnackbarView"); }
> +
> +.externsjs.tabbar {
> + -webkit-overflow-scrolling: touch;
> + -ms-overflow-style: -ms-autohiding-scrollbar !important;
> + scrollbar-width: none;
> + transform: none;
> + will-change: transform; }
> + .externsjs.tabbar::-webkit-scrollbar {
> + display: none !important;
> + width: 0 !important;
> + height: 0 !important;
> + background-color: transparent; }
> + .externsjs.tabbar::-webkit-scrollbar-thumb {
> + display: none !important; }
> +
> +j|TabBar {
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.TabBarView");
> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.ListSingleSelectionMouseController");
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
> + IItemRendererClassFactory: ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
> + IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.TabBarButtonItemRenderer");
> + IItemRendererInitializer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.TabBarItemRendererInitializer");
> + ISelectableItemRenderer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ClassSelectorListSelectableItemRendererBead");
> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.Viewport");
> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.ArrayListSelectionModel");
> + IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.SelectionDataItemRendererFactoryForCollectionView"); }
> +
> +.externsjs.tabbarbutton {
> + margin: 0;
> + flex: 1 0 auto !important;
> + position: relative;
> + white-space: nowrap;
> + z-index: 1;
> + overflow: initial; }
> + .externsjs.tabbarbutton > .content {
> + display: flex;
> + align-items: center;
> + height: inherit; }
> + .externsjs.tabbarbutton ._internal_ {
> + position: absolute; }
> + .externsjs.tabbarbutton .indicator {
> + display: flex;
> + position: absolute;
> + top: 0;
> + left: 0;
> + width: 100%;
> + height: 100%;
> + pointer-events: none;
> + z-index: 1; }
> + .externsjs.tabbarbutton .indicator > .indicator-content {
> + opacity: 0;
> + align-self: flex-end; }
> + .externsjs.tabbarbutton.indicator-opposite-side .indicator > .indicator-content {
> + align-self: flex-start; }
> + .externsjs.tabbarbutton.selected .indicator > .indicator-content {
> + opacity: 1; }
> +
> +.externsjs.tabbar.layout.horizontal ._internal_ {
> + bottom: 0; }
> +.externsjs.tabbar.layout.horizontal .indicator > .indicator-content {
> + width: 100%; }
> +.externsjs.tabbar.layout.horizontal .indicator-opposite-side ._internal_ {
> + bottom: initial;
> + top: 0; }
> +.externsjs.tabbar.layout.horizontal .indicator-opposite-side .indicator > .indicator-content {
> + bottom: initial; }
> +.externsjs.tabbar.layout.vertical ._internal_ {
> + right: 0; }
> +.externsjs.tabbar.layout.vertical .indicator > .indicator-content {
> + position: absolute;
> + height: 100%;
> + right: 0; }
> +.externsjs.tabbar.layout.vertical .indicator-opposite-side ._internal_ {
> + right: initial;
> + left: 0; }
> +.externsjs.tabbar.layout.vertical .indicator-opposite-side .indicator > .indicator-content {
> + right: initial; }
> +
> +j|TabBarButtonItemRenderer {
> + IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ItemRendererMouseController");
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout"); }
> +
> +j|TabBarContent {
> + IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout");
> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
> +
> +.externsjs.simpletable {
> + position: relative;
> + white-space: nowrap;
> + border-spacing: 0px;
> + overflow: hidden; }
> + .externsjs.simpletable .externsjs.tableheadercell {
> + position: relative;
> + vertical-align: bottom;
> + text-overflow: ellipsis;
> + letter-spacing: 0;
> + text-align: left; }
> + .externsjs.simpletable .externsjs.tbody .externsjs.tablerow {
> + position: relative;
> + transition-duration: 0.28s;
> + transition-property: background-color; }
> + .externsjs.simpletable .externsjs.tablecell {
> + position: relative; }
> +
> +j|SimpleTable {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
> +
> +.externsjs.table table {
> + width: 100%;
> + border-spacing: 0px; }
> +.externsjs.table .externsjs.tableheadercell {
> + position: relative;
> + vertical-align: bottom;
> + text-overflow: ellipsis;
> + letter-spacing: 0;
> + text-align: left; }
> +.externsjs.table .externsjs.tbody .externsjs.tablerow {
> + position: relative;
> + transition-duration: 0.28s;
> + transition-property: background-color; }
> +.externsjs.table .externsjs.tablecell {
> + position: relative;
> + height: 100%; }
> +.externsjs.table.fixedHeader {
> + overflow-y: auto; }
> + .externsjs.table.fixedHeader .externsjs.tableheadercell {
> + position: sticky;
> + top: 0;
> + z-index: 1; }
> +
> +j|Table {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.TableLayout");
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.TableView");
> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.TableModel");
> + IItemRendererClassFactory: ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
> + IItemRenderer: ClassReference("org.apache.royale.externsjs.itemRenderers.TableItemRenderer");
> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.TableCellSelectionMouseController");
> + IBeadKeyController: ClassReference("org.apache.royale.externsjs.beads.controllers.TableKeyDownController");
> + IItemRendererInitializer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.TableItemRendererInitializer");
> + ISelectableItemRenderer: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.ClassSelectorListSelectableItemRendererBead");
> + IDataProviderItemRendererMapper: ClassReference("org.apache.royale.externsjs.beads.itemRenderers.TableItemRendererFactoryForCollectionView");
> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.scrollbar.ScrollingViewport");
> + IContentView: ClassReference("org.apache.royale.externsjs.supportClasses.table.TBodyContentArea"); }
> +
> +.externsjs.tableitem {
> + cursor: pointer;
> + text-decoration: none;
> + letter-spacing: 0;
> + line-height: normal !important;
> + overflow: hidden;
> + cursor: auto; }
> + .externsjs.tableitem.selectable {
> + cursor: pointer; }
> +
> +.empty-cell {
> + pointer-events: none; }
> +
> +j|TableItemRenderer {
> + IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ItemRendererMouseController");
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
> +
> +j|TBody {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
> +
> +j|THead {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
> +
> +j|TFoot {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
> +
> +j|TableCell {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
> +
> +j|TableRow {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
> +
> +.alignTextLeft {
> + text-align: left; }
> +
> +.alignTextRight {
> + text-align: right; }
> +
> +.alignTextCenter {
> + text-align: center; }
> +
> +.externsjs.textinput {
> + position: relative;
> + display: inline-flex;
> + overflow: hidden; }
> + .externsjs.textinput::before {
> + top: calc(50% - 100%);
> + left: calc(50% - 100%);
> + width: 200%;
> + height: 200%;
> + z-index: 1; }
> + .externsjs.textinput::before, .externsjs.textinput::after {
> + position: absolute;
> + pointer-events: none;
> + content: ""; }
> + .externsjs.textinput input {
> + -webkit-appearance: none;
> + -moz-appearance: none;
> + -o-appearance: none;
> + -ms-appearance: none;
> + appearance: none;
> + width: 100%;
> + height: auto;
> + max-width: 100%;
> + flex: 1 0 auto;
> + outline: none;
> + text-align: left;
> + line-height: normal !important; }
> + .externsjs.textinput input[disabled] {
> + cursor: unset; }
> + .externsjs.textinput.icon i.fonticon {
> + cursor: default;
> + pointer-events: none;
> + top: 50%;
> + right: initial;
> + position: absolute;
> + text-align: center;
> + margin-top: -6px; }
> + .externsjs.textinput.icon i.fonticon.material-icons {
> + margin-top: -0.5em; }
> + .externsjs.textinput.icon.right i.fonticon {
> + left: initial; }
> + .externsjs.textinput.truncate input {
> + overflow: hidden;
> + text-overflow: ellipsis; }
> +
> +j|TextInput {
> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.TextModel"); }
> +
> +@media -royale-swf {
> + j|TextInput {
> + IBeadView: ClassReference("org.apache.royale.html.beads.TextInputWithBorderView");
> + IBeadController: ClassReference("org.apache.royale.html.beads.controllers.EditableTextKeyboardController");
> + IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
> + IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead"); } }
> +.externsjs.textarea {
> + position: relative;
> + display: inline-flex; }
> + .externsjs.textarea textarea {
> + -webkit-appearance: none;
> + -moz-appearance: none;
> + -o-appearance: none;
> + -ms-appearance: none;
> + appearance: none;
> + resize: none;
> + max-width: 100%;
> + flex: 1 0 auto;
> + outline: none;
> + text-align: left;
> + line-height: normal !important; }
> + .externsjs.textarea textarea[disabled] {
> + cursor: unset; }
> +
> +j|TextArea {
> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.TextModel"); }
> +
> +.externsjs.titlebar {
> + background-color: transparent;
> + padding: 0px;
> + min-height: 34px; }
> +
> +j|TitleBar {
> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.TitleBarModel");
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.TitleBarView"); }
> +
> +.externsjs.togglebutton {
> + cursor: pointer;
> + user-select: none;
> + display: inline-flex;
> + position: relative;
> + align-items: center;
> + justify-content: center;
> + vertical-align: middle;
> + overflow: hidden;
> + outline: none;
> + white-space: nowrap;
> + line-height: normal !important;
> + text-align: center;
> + text-decoration: none; }
> + .externsjs.togglebutton[disabled] {
> + cursor: default; }
> + .externsjs.togglebutton .fonticon {
> + cursor: inherit; }
> +
> +.externsjs.tooltip {
> + padding: 6px;
> + position: absolute;
> + pointer-events: none;
> + z-index: 80;
> + border-radius: 0.25em; }
> + .externsjs.tooltip.error {
> + margin-top: -31px !important; }
> + .externsjs.tooltip.error::before {
> + content: "";
> + position: absolute;
> + height: 0;
> + width: 0; }
> + .externsjs.tooltip.error.left-top::before {
> + top: 100%;
> + margin-top: 0px; }
> + .externsjs.tooltip.error.middle-top::before {
> + bottom: 0;
> + left: 50%;
> + border-bottom: 0; }
> + .externsjs.tooltip.error.left-middle::before {
> + top: 50%;
> + right: 0;
> + border-right: 0; }
> + .externsjs.tooltip.error.right-middle::before {
> + top: 50%;
> + left: 0;
> + border-left: 0; }
> + .externsjs.tooltip.error.middle-bottom::before {
> + top: 0;
> + left: 50%;
> + border-top: 0; }
> +
> +.externsjs.topappbar {
> + display: inline-flex;
> + flex: 1 1 auto; }
> + .externsjs.topappbar .topBarAppHeader {
> + display: flex;
> + flex-direction: column;
> + justify-content: space-between;
> + width: 100%;
> + z-index: 20;
> + position: fixed; }
> + .externsjs.topappbar .topBarAppHeader.fixed {
> + transition: box-shadow 200ms linear; }
> + .externsjs.topappbar .externsjs.barrow {
> + display: flex;
> + position: relative;
> + width: 100%;
> + height: 64px; }
> + .externsjs.topappbar .externsjs.barsection {
> + display: inline-flex;
> + flex: 1 1 auto;
> + align-items: center;
> + min-width: 0;
> + z-index: 1;
> + order: -1; }
> + .externsjs.topappbar .externsjs.barsection button {
> + will-change: transform, opacity;
> + display: flex;
> + position: relative;
> + flex-shrink: 0;
> + align-items: center;
> + justify-content: center;
> + width: 48px;
> + height: 48px;
> + outline: none;
> + text-decoration: none;
> + opacity: 1; }
> + .externsjs.topappbar .externsjs.barsection button .fonticon {
> + margin-left: 0px;
> + margin-right: 0px; }
> + .externsjs.topappbar .externsjs.bartitle {
> + -moz-osx-font-smoothing: grayscale;
> + -webkit-font-smoothing: antialiased;
> + white-space: nowrap;
> + flex: 1 1 auto;
> + overflow: hidden;
> + z-index: 1;
> + line-height: 2rem;
> + letter-spacing: 0.0125em;
> + text-decoration: inherit;
> + text-transform: inherit;
> + text-overflow: ellipsis; }
> +
> +j|TopAppBar {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
> +
> +j|BarRow {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
> +
> +j|BarTitle {
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
> +
> +.externsjs.barrow {
> + display: flex;
> + position: relative;
> + width: 100%; }
> +
> +.externsjs.barsection {
> + display: inline-flex;
> + flex: 1 1 auto;
> + align-items: center;
> + min-width: 0;
> + z-index: 1;
> + justify-content: flex-start;
> + order: -1; }
> +
> +.externsjs.wizard.main {
> + align-items: center;
> + width: 100%;
> + height: 100%; }
> +.externsjs.precontent {
> + position: relative;
> + width: 100%;
> + flex: 1 0; }
> +.externsjs.next, .externsjs.previous {
> + z-index: 1;
> + height: 100%;
> + align-items: center;
> + justify-content: center;
> + cursor: pointer;
> + flex: 0 0 0%; }
> + .externsjs.next .externsjs.button, .externsjs.previous .externsjs.button {
> + position: relative;
> + flex-direction: column; }
> +.externsjs.wizardcontent {
> + height: 100%;
> + flex-grow: 100;
> + position: inherit; }
> +.externsjs.wizardpage {
> + position: absolute;
> + top: 0px;
> + bottom: 0px;
> + width: 100%;
> + display: none; }
> + .externsjs.wizardpage > * {
> + margin: auto; }
> + .externsjs.wizardpage.is-selected {
> + z-index: 1;
> + display: block; }
> + .externsjs.wizardpage.is-selected.transitions {
> + opacity: 1;
> + transform: translateX(0%); }
> + .externsjs.wizardpage.transitions {
> + opacity: 0;
> + transition: transform 0.6s ease-out, opacity 0.6s ease-out;
> + transform: translateX(100%);
> + display: block; }
> + .externsjs.wizardpage.transitions.slideLeft {
> + transform: translateX(-100%); }
> + .externsjs.wizardpage.transitions.slideRight {
> + transform: translateX(100%); }
> +
> +j|Wizard {
> + IBeadView: ClassReference("org.apache.royale.externsjs.beads.views.WizardView");
> + IBeadController: ClassReference("org.apache.royale.externsjs.beads.controllers.WizardController");
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.HorizontalLayout");
> + IBeadModel: ClassReference("org.apache.royale.externsjs.beads.models.WizardModel");
> + IWizardContentArea: ClassReference("org.apache.royale.externsjs.WizardContent"); }
> +
> +j|WizardContent {
> + IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout"); }
> +
> +j|WizardPage {
> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.NoViewport"); }
> +
> +.externsjs.main {
> + width: 100%;
> + height: 100%; }
> +
> +.has-topappbar {
> + padding-top: 66px !important; }
> +
> +.has-footerbar {
> + padding-bottom: 66px !important; }
> +
> +j|ApplicationMainContent {
> + IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
> + IBeadLayout: ClassReference("org.apache.royale.externsjs.beads.layouts.NullLayout");
> + IViewport: ClassReference("org.apache.royale.externsjs.supportClasses.Viewport"); }
> +
> +/*# sourceMappingURL=defaults.css.map */
> diff --git a/frameworks/projects/ExternsJS/src/main/resources/externsjs-as-manifest.xml b/frameworks/projects/ExternsJS/src/main/resources/externsjs-as-manifest.xml
> new file mode 100644
> index 0000000..2141c30
> --- /dev/null
> +++ b/frameworks/projects/ExternsJS/src/main/resources/externsjs-as-manifest.xml
> @@ -0,0 +1,25 @@
> +<?xml version="1.0"?>
> +<!--
> +
> + Licensed to the Apache Software Foundation (ASF) under one or more
> + contributor license agreements. See the NOTICE file distributed with
> + this work for additional information regarding copyright ownership.
> + The ASF licenses this file to You 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
> +
> + Unless required by applicable law or agreed to in writing, software
> + distributed under the License is distributed on an "AS IS" BASIS,
> + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
> + See the License for the specific language governing permissions and
> + limitations under the License.
> +
> +-->
> +
> +
> +<componentPackage>
> +
> +
> +</componentPackage>
> diff --git a/frameworks/projects/ExternsJS/src/main/resources/externsjs-manifest.xml b/frameworks/projects/ExternsJS/src/main/resources/externsjs-manifest.xml
> new file mode 100644
> index 0000000..04f2f97
> --- /dev/null
> +++ b/frameworks/projects/ExternsJS/src/main/resources/externsjs-manifest.xml
> @@ -0,0 +1,27 @@
> +<?xml version="1.0"?>
> +<!--
> +
> + Licensed to the Apache Software Foundation (ASF) under one or more
> + contributor license agreements. See the NOTICE file distributed with
> + this work for additional information regarding copyright ownership.
> + The ASF licenses this file to You 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
> +
> + Unless required by applicable law or agreed to in writing, software
> + distributed under the License is distributed on an "AS IS" BASIS,
> + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
> + See the License for the specific language governing permissions and
> + limitations under the License.
> +
> +-->
> +
> +
> +<componentPackage>
> +
> +
> +
> +
> +</componentPackage>
> diff --git a/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/New Text Document.html b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/New Text Document.html
> new file mode 100644
> index 0000000..ae9a4d3
> --- /dev/null
> +++ b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/New Text Document.html
> @@ -0,0 +1,56 @@
> +<!--
> + * 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
> + *
> + * Unless required by applicable law or agreed to in writing, software
> + * distributed under the License is distributed on an 'AS IS' BASIS,
> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
> + * See the License for the specific language governing permissions and
> + * limitations under the License.
> + -->
> + <!DOCTYPE html>
> +<html>
> +<body>
> +<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
> +<script src="inspire-tree.min.js"></script>
> +<script src="inspire-tree-dom.min.js"></script>
> +<script>
> + var objtree = new InspireTree(
> + {
> + selection: {
> + mode: 'checkbox'
> + },
> + data: [{
> + text: 'A node'
> + }]
> + });
> +
> + new InspireTreeDOM(objtree, {target: demo});
> +</script>
> +
> +<h1>My First JavaScript</h1>
> +
> +<button type="button"
> +onclick="document.getElementById('demo').innerHTML = Date()">
> +Click me to display Date and Time.</button>
> +
> +<div id="demo"></div>
> +</body>
> +</html>
> + background-image: url('../assets/inspiretree/alinakazi.jpg');
> + background-repeat:no-repeat;
> + background-position:right;
> +
> +
> +
> + #mainContent > main > section > div > div > div > div > ol > li:nth-child(1) > div.wholerow > img
> +
> +
> +
> + <div class="wholerow">
> + <img src="assets/inspiretree/alinakazi.jpg" width="10" height="10">
> +
> +</div>
> \ No newline at end of file
> diff --git a/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-custom.css b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-custom.css
> new file mode 100644
> index 0000000..d1fcc64
> --- /dev/null
> +++ b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-custom.css
> @@ -0,0 +1,435 @@
> +/**
> + * 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
> + *
> + * Unless required by applicable law or agreed to in writing, software
> + * distributed under the License is distributed on an 'AS IS' BASIS,
> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
> + * See the License for the specific language governing permissions and
> + * limitations under the License.
> + */
> +.inspire-tree {
> + -webkit-user-select: none;
> + -moz-user-select: none;
> + -ms-user-select: none;
> + user-select: none; }
> + .inspire-tree .btn {
> + background-color: rgba(255, 255, 255, 0.4);
> + border: 1px solid rgba(0, 0, 0, 0.2);
> + border-radius: 3px;
> + display: inline-block;
> + height: 20px;
> + transition: all 150ms linear;
> + width: 20px; }
> + .inspire-tree .btn:hover {
> + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); }
> + .inspire-tree .btn + .btn {
> + margin-left: 5px; }
> + .inspire-tree .btn.icon {
> + position: relative; }
> + .inspire-tree .btn.icon::before {
> + display: block;
> + height: 14px;
> + left: 50%;
> + position: absolute;
> + top: 50%;
> + -webkit-transform: translate(-50%, -50%);
> + transform: translate(-50%, -50%);
> + width: 14px; }
> + .inspire-tree .btn-group {
> + display: inline-block;
> + height: 35px;
> + line-height: 35px; }
> + .inspire-tree:focus {
> + outline: none; }
> + .inspire-tree ol {
> + list-style: none;
> + margin: 0;
> + padding: 0; }
> + .inspire-tree ol ol {
> + padding-left: 20px; }
> + .inspire-tree li > .title-wrap {
> + min-height: 35px;
> + position: relative;
> + z-index: 2; }
> + .inspire-tree .toggle {
> + height: 35px;
> + left: 0;
> + position: absolute;
> + top: 0;
> + width: 35px;
> + z-index: 2; }
> + .inspire-tree .toggle::before {
> + display: block;
> + left: 50%;
> + position: absolute;
> + top: 50%;
> + -webkit-transform: translate(-50%, -50%);
> + transform: translate(-50%, -50%); }
> + .inspire-tree input[type="checkbox"] {
> + background: transparent;
> + left: 50px !important;
> + height: 24px;
> + position: absolute;
> + vertical-align: middle;
> + width: 24px;
> + z-index: 2;
> + -moz-appearance: none;
> + -ms-appearance: none;
> + -o-appearance: none;
> + -webkit-appearance: none;
> + cursor: pointer; }
> + .inspire-tree input[type="checkbox"]::before {
> + background: white;
> + border-radius: 3px;
> + border: 1px solid #d9d9d9;
> + content: " ";
> + height: 22px;
> + left: 0px;
> + position: absolute;
> + top: 0px;
> + width: 22px; }
> + .inspire-tree input[type="checkbox"]::after {
> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%232196F3' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
> + border-radius: 3px;
> + border: 1px solid transparent;
> + content: " ";
> + height: 22px;
> + left: 0px;
> + opacity: 0;
> + position: absolute;
> + top: 0px;
> + transform: scale(0);
> + transition: all 0.3s ease;
> + width: 22px; }
> + .inspire-tree input[type="checkbox"]:checked::after {
> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%232196F3' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
> + opacity: 1;
> + transform: scale(1); }
> + .inspire-tree input[type="checkbox"]:checked:active::after {
> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%232196F3' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
> + opacity: 1;
> + transform: scale(1); }
> + .inspire-tree input[type="checkbox"]:checked:active:focus::before {
> + background: #9ACFFA;
> + border-radius: 3px;
> + border: 1px solid #2196F3;
> + outline: none; }
> + .inspire-tree input[type="checkbox"]:checked:focus::before {
> + background: #9ACFFA;
> + border-radius: 3px;
> + border: 1px solid #2196F3;
> + outline: none; }
> + .inspire-tree input[type="checkbox"]:indeterminate::after {
> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Crect stroke-width='0' stroke='%23FFFFFF' height='12' width='12' y='5' x='5' fill='%232196F3' /%3E%3C/svg%3E") no-repeat center center;
> + opacity: 1;
> + transform: scale(1); }
> + .inspire-tree input[type="checkbox"]:indeterminate:active::after {
> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Crect stroke-width='0' stroke='%23FFFFFF' height='12' width='12' y='5' x='5' fill='%232196F3' /%3E%3C/svg%3E") no-repeat center center;
> + opacity: 1;
> + transform: scale(1); }
> + .inspire-tree input[type="checkbox"]:indeterminate:active:focus::before {
> + background: #9ACFFA;
> + border-radius: 3px;
> + border: 1px solid #2196F3;
> + outline: none; }
> + .inspire-tree input[type="checkbox"]:indeterminate:focus::before {
> + background: #9ACFFA;
> + border-radius: 3px;
> + border: 1px solid #2196F3;
> + outline: none; }
> + .inspire-tree input[type="checkbox"]:focus::before {
> + background: #9ACFFA;
> + border-radius: 3px;
> + border: 1px solid #2196F3;
> + outline: none; }
> + .inspire-tree input[type="checkbox"][disabled] {
> + color: silver;
> + cursor: unset; }
> + .inspire-tree input[type="checkbox"][disabled]::before {
> + background: #f3f3f3;
> + border-radius: 3px;
> + border: 1px solid #d9d9d9; }
> + .inspire-tree input[type="checkbox"][disabled]::after {
> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center; }
> + .inspire-tree input[type="checkbox"]:checked[disabled]::after {
> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center; }
> + .inspire-tree input[type="checkbox"]:indeterminate[disabled]::after {
> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Crect stroke-width='0' stroke='%23FFFFFF' height='12' width='12' y='5' x='5' fill='%23cccccc' /%3E%3C/svg%3E") no-repeat center center; }
> + .inspire-tree.rejected input[type="checkbox"]:indeterminate::after {
> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cline stroke-width='4' stroke='%232196F3' stroke-linecap='undefined' stroke-linejoin='undefined' y2='10.9375' x2='17' y1='11.0625' x1='5' fill='none' /%3E%3C/svg%3E") no-repeat center center;
> + opacity: 1;
> + transform: scale(1); }
> + .inspire-tree.rejected input[type="checkbox"]:indeterminate:active::after {
> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cline stroke-width='4' stroke='%232196F3' stroke-linecap='undefined' stroke-linejoin='undefined' y2='10.9375' x2='17' y1='11.0625' x1='5' fill='none' /%3E%3C/svg%3E") no-repeat center center;
> + opacity: 1;
> + transform: scale(1); }
> + .inspire-tree.rejected input[type="checkbox"]:indeterminate[disabled]::after {
> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cline stroke-width='4' stroke='%23cccccc' stroke-linecap='undefined' stroke-linejoin='undefined' y2='10.9375' x2='17' y1='11.0625' x1='5' fill='none' /%3E%3C/svg%3E") no-repeat center center; }
> + .inspire-tree .title {
> + cursor: default;
> + display: block;
> + height: 35px;
> + line-height: 35px;
> + overflow: hidden;
> + padding-left: 42px;
> + position: relative;
> + text-overflow: ellipsis;
> + vertical-align: middle;
> + white-space: nowrap;
> + z-index: 1; }
> + .inspire-tree .title.load-more {
> + color: #476cb8;
> + cursor: pointer; }
> + .inspire-tree .title.load-more:hover {
> + text-decoration: underline; }
> + .inspire-tree .title::before {
> + left: 30px;
> + position: absolute;
> + top: 45%;
> + -webkit-transform: translateY(-50%);
> + transform: translateY(-50%);
> + vertical-align: top; }
> + .inspire-tree .title:focus {
> + outline: none; }
> + .inspire-tree.drag-and-drop li:not(.drop-target) {
> + opacity: 0.5; }
> + .inspire-tree .editable form {
> + display: inline-block;
> + height: 35px;
> + line-height: 35px;
> + padding-top: 2px; }
> + .inspire-tree .editable form input {
> + height: 20px; }
> + .inspire-tree .editable > .btn-group {
> + display: none;
> + padding-top: 2px;
> + position: absolute;
> + right: 10px;
> + z-index: 3; }
> + .inspire-tree .editable:hover > .btn-group {
> + display: block; }
> + .inspire-tree input + .btn-group {
> + margin-left: 10px; }
> + .inspire-tree > .btn.icon {
> + margin-left: 2px; }
> +
> +.itree-menu {
> + background: #ddd;
> + border: 1px solid #c4c4c4;
> + border-radius: 3px;
> + font-family: sans-serif;
> + list-style: none;
> + margin: 0;
> + min-width: 150px;
> + padding: 0;
> + position: absolute;
> + z-index: 10; }
> + .itree-menu a {
> + display: block;
> + padding: 3px 8px; }
> + .itree-menu a:hover {
> + background: rgba(218, 250, 255, 0.5);
> + color: rgba(164, 234, 245, 0.5); }
> +
> +.inspire-tree, .inspire-tree * {
> + box-sizing: border-box; }
> +
> +.inspire-tree .collapsed > ol, .inspire-tree .hidden {
> + display: none; }
> +
> +.drag-targeting.drag-targeting-insert.inspire-tree,
> +.drag-targeting.drag-targeting-insert > .title-wrap > .title {
> + border: 1px solid #2dadc5; }
> +
> +.drag-targeting.drag-targeting-above > .title-wrap > .title {
> + border-top: 3px solid #2dadc5; }
> +.drag-targeting.drag-targeting-below > .title-wrap > .title {
> + border-bottom: 3px solid #2dadc5; }
> +
> +.inspire-tree .editable form input, .inspire-tree .editable form .btn {
> + vertical-align: top; }
> +
> +.inspire-tree > ol > .folder:first-child:not(:only-child) {
> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC");
> + background-position: 11px 13px;
> + background-repeat: no-repeat; }
> +.inspire-tree.editable-add > ol > .folder:last-child:not(:only-child) {
> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC");
> + background-repeat: repeat-y; }
> +.inspire-tree.editable-add > ol > .leaf:last-child {
> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAYCAYAAAAh8HdUAAAAN0lEQVQ4T2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGLo0dBDDz0SMu5o2oMFFgBXbEeI0XwYIwAAAABJRU5ErkJgggAA"); }
> +.inspire-tree li.expanded:not(:last-child) > ol {
> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC");
> + background-position: 11px 0;
> + background-repeat: repeat-y; }
> +.inspire-tree li.expanded.folder:not(.loading) > .title-wrap {
> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC");
> + background-position: 31px 13px;
> + background-repeat: no-repeat; }
> +.inspire-tree .leaf:not(:last-child):not(.detached) {
> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAYCAYAAAAh8HdUAAAAN0lEQVQ4T2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGLo0dBDDz0SMu5o2oMFFgBXbEeI0XwYIwAAAABJRU5ErkJgggAA");
> + background-position: 11px 0;
> + background-repeat: no-repeat; }
> +.inspire-tree .leaf:last-child {
> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAKklEQVQoU2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGJoAGUZM32Z0U8tAAAAAElFTkSuQmCC");
> + background-position: 11px 0;
> + background-repeat: no-repeat; }
> +.inspire-tree .leaf.detached:last-child {
> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC");
> + background-position: 11px 0;
> + background-repeat: no-repeat; }
> +
> +.inspire-tree .folder:last-child:not(:only-child), .inspire-tree li .folder:last-child {
> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC");
> + background-position: 11px 0;
> + background-repeat: no-repeat; }
> +
> +.inspire-tree > ol .expanded:not(:last-child):not(:first-child), .inspire-tree li:not(:last-child) {
> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC");
> + background-position: 11px 0;
> + background-repeat: no-repeat; }
> +
> +.inspire-tree .icon::before {
> + background-position: 0 0;
> + background-repeat: no-repeat;
> + content: "";
> + display: inline-block;
> + height: 14px;
> + width: 14px; }
> +.inspire-tree .icon-check::before {
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M27%204l-15%2015-7-7-5%205%2012%2012%2020-20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
> +.inspire-tree .icon-check:hover::before {
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%230ccc0a%22%20d%3D%22M27%204l-15%2015-7-7-5%205%2012%2012%2020-20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
> +.inspire-tree .icon-collapse::before {
> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%232196F3' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
> + content: " ";
> + height: 22px;
> + left: 50%;
> + top: 50%;
> + width: 14px; }
> +.inspire-tree .icon-cross::before {
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M31.708%2025.708c-0-0-0-0-0-0l-9.708-9.708%209.708-9.708c0-0%200-0%200-0%200.105-0.105%200.18-0.227%200.229-0.357%200.133-0.356%200.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.28 [...]
> +.inspire-tree .icon-cross:hover::before {
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23c00%22%20d%3D%22M31.708%2025.708c-0-0-0-0-0-0l-9.708-9.708%209.708-9.708c0-0%200-0%200-0%200.105-0.105%200.18-0.227%200.229-0.357%200.133-0.356%200.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0 [...]
> +.inspire-tree .icon-expand::before {
> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%232196F3' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
> + content: " ";
> + height: 22px;
> + left: 25%;
> + top: 25%;
> + width: 14px;
> + -webkit-transform: rotate(-90deg);
> + -ms-transform: rotate(-90deg);
> + transform: rotate(-90deg); }
> +.inspire-tree .icon-file-empty::before {
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23a5a5a5%22%20d%3D%22M28.681%207.159c-0.694-0.947-1.662-2.053-2.724-3.116s-2.169-2.030-3.116-2.724c-1.612-1.182-2.393-1.319-2.841-1.319h-15.5c-1.378%200-2.5%201.121-2.5%202.5v27c0%201.378%201.122%202 [...]
> +.inspire-tree .icon-folder::before {
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M14%204l4%204h14v22h-32v-26z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
> +.inspire-tree .icon-folder-open::before {
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M26%2030l6-16h-26l-6%2016zM4%2012l-4%2018v-26h9l4%204h13v4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E%0A"); }
> +.inspire-tree .icon-minus::before {
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M0%2013v6c0%200.552%200.448%201%201%201h30c0.552%200%201-0.448%201-1v-6c0-0.552-0.448-1-1-1h-30c-0.552%200-1%200.448-1%201z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
> +.inspire-tree .icon-minus:hover::before {
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23c00%22%20d%3D%22M0%2013v6c0%200.552%200.448%201%201%201h30c0.552%200%201-0.448%201-1v-6c0-0.552-0.448-1-1-1h-30c-0.552%200-1%200.448-1%201z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
> +.inspire-tree .icon-more::before {
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M12%209.984c1.078%200%202.016%200.938%202.016%202.016s-0.938%202.016-2.016%202.016-2.016-0.938-2.016-2.016%200.938-2.016%202.016-2.016zM18%209.984c1.078%200%202.016%200.938%202.0 [...]
> +.inspire-tree .icon-pencil::before {
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M27%200c2.761%200%205%202.239%205%205%200%201.126-0.372%202.164-1%203l-2%202-7-7%202-2c0.836-0.628%201.874-1%203-1zM2%2023l-2%209%209-2%2018.5-18.5-7-7-18.5%2018.5zM22.362%2011.3 [...]
> +.inspire-tree .icon-pencil:hover::before {
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%230ccc0a%22%20d%3D%22M27%200c2.761%200%205%202.239%205%205%200%201.126-0.372%202.164-1%203l-2%202-7-7%202-2c0.836-0.628%201.874-1%203-1zM2%2023l-2%209%209-2%2018.5-18.5-7-7-18.5%2018.5zM22.362%2011.3 [...]
> +.inspire-tree .icon-plus::before {
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M31%2012h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552%200-1%200.448-1%201v11h-11c-0.552%200-1%200.448-1%201v6c0%200.552%200.448%201%201%201h11v11c0%200.552%200.448%201%201%201h6c0.552%2 [...]
> +.inspire-tree .icon-plus:hover::before {
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%230ccc0a%22%20d%3D%22M31%2012h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552%200-1%200.448-1%201v11h-11c-0.552%200-1%200.448-1%201v6c0%200.552%200.448%201%201%201h11v11c0%200.552%200.448%201%201%201h6c0.552%2 [...]
> +.inspire-tree .selected > .title-wrap .icon-folder::before {
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%233CADF1%22%20d%3D%22M14%204l4%204h14v22h-32v-26z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
> +.inspire-tree .selected > .title-wrap .icon-folder-open::before {
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%233CADF1%22%20d%3D%22M26%2030l6-16h-26l-6%2016zM4%2012l-4%2018v-26h9l4%204h13v4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E%0A"); }
> +.inspire-tree .selected > .title-wrap .icon-file-empty::before {
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%233CADF1%22%20d%3D%22M28.681%207.159c-0.694-0.947-1.662-2.053-2.724-3.116s-2.169-2.030-3.116-2.724c-1.612-1.182-2.393-1.319-2.841-1.319h-15.5c-1.378%200-2.5%201.121-2.5%202.5v27c0%201.378%201.122%202 [...]
> +.inspire-tree .loading > .title-wrap input {
> + display: none; }
> +.inspire-tree .loading > .title-wrap .title::before {
> + background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2714px%27%20height%3D%2714px%27%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22xMidYMid%22%20class%3D%22uil-ring%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22none%22%20class%3D%22bk%22%3E%3C%2Frect%3E%3Cdefs%3E%3Cfilter%20id%3D%22uil-ring-shadow%22%20x%3D%22-100%25%22%20y%3D%22-100%25%22%20width%3D%22300%25%22% [...]
> + content: "";
> + height: 14px;
> + width: 14px; }
> +.inspire-tree > ol {
> + position: relative; }
> +.inspire-tree .wholerow {
> + height: 35px;
> + left: 0;
> + margin-top: -35px;
> + position: absolute;
> + width: 100%;
> + z-index: 1; }
> +.inspire-tree .focused > .wholerow {
> + border: 1px dotted black; }
> +
> +.inspire-tree .wholerow:hover,
> +.inspire-tree .title-wrap:hover + .wholerow {
> + background-color: rgba(218, 250, 255, 0.5); }
> +
> +.inspire-tree .selected > .wholerow,
> +.inspire-tree .selected > .wholerow:hover,
> +.inspire-tree .selected > .title-wrap:hover + .wholerow {
> + background-color: rgba(164, 234, 245, 0.5); }
> +
> +.inspire-tree .matched > .wholerow,
> +.inspire-tree .matched > .wholerow:hover,
> +.inspire-tree .matched > .title-wrap:hover + .wholerow {
> + background-color: rgba(247, 255, 170, 0.5); }
> +
> +/* Custom */
> +.inspire-tree {
> + overflow: auto; }
> + .inspire-tree .title {
> + padding-left: 85px; }
> + .inspire-tree .icon::before {
> + height: 16px;
> + width: 16px; }
> + .inspire-tree.withoutcheckbox .title {
> + padding-left: 55px !important; }
> +
> +.editrevert.inspire-tree .icon-folder-open::after,
> +.editrevert.inspire-tree .icon-folder::after {
> + background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201536%201536%22%3E%3Cpath%20d%3D%22M1511%20928q0%205-1%207q-64%20268-268%20434.5T764%201536q-146%200-282.5-55T238%201324l-129%20129q-19%2019-45%2019t-45-19t-19-45V960q0-26%2019-45t45-19h448q26%200%2045%2019t19%2045t-19%204 [...]
> + background-repeat: no-repeat;
> + content: " ";
> + cursor: pointer;
> + height: 16px;
> + position: absolute;
> + right: 3px;
> + top: 22%;
> + width: 16px;
> + z-index: 3; }
> +
> +.editrevert.inspire-tree .title {
> + padding-right: 20px; }
> +
> +.inspire-tree.noneicon .title {
> + padding-left: 58px; }
> +.inspire-tree.noneicon input[type="checkbox"] {
> + left: 25px !important; }
> +.inspire-tree.noneicon .icon-folder::before {
> + background-image: url(); }
> +.inspire-tree.noneicon .icon-folder-open::before {
> + background-image: url(); }
> +.inspire-tree.noneicon .icon-file-empty::before {
> + background-image: url(); }
> +.inspire-tree.noneicon .selected > .title-wrap .icon-folder::before {
> + background-image: url(); }
> +.inspire-tree.noneicon .selected > .title-wrap .icon-folder-open::before {
> + background-image: url(); }
> +.inspire-tree.noneicon .selected > .title-wrap .icon-file-empty::before {
> + background-image: url(); }
> +.inspire-tree.noneicon.withoutcheckbox .title {
> + padding-left: 35px !important; }
> +.inspire-tree.readonly input[type="checkbox"] {
> + z-index: -1; }
> +
> +/*# sourceMappingURL=inspire-tree-custom.css.map */
> diff --git a/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-custom.sass b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-custom.sass
> new file mode 100644
> index 0000000..3097e48
> --- /dev/null
> +++ b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-custom.sass
> @@ -0,0 +1,541 @@
> +/**
> + * 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
> + *
> + * Unless required by applicable law or agreed to in writing, software
> + * distributed under the License is distributed on an 'AS IS' BASIS,
> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
> + * See the License for the specific language governing permissions and
> + * limitations under the License.
> + */
> +// primary color $blue: #3CADF1
> +$blue: #3CADF1
> +$blue-withoutHash: 3CADF1 // color for parent and child icons when selected in case of default
> +
> +
> +
> +
> +$Basic-theme-Original: rgba($blue, 1)
> +$Basic-theme-Original-withoutHashForSVG: 3CADF1
> +$color1: #2196F3 //blue rgb(33, 150, 243)
> +$color1-withoutHashForSVG: 2196F3 //blue rgb(33, 150, 243) //for checbox and left arrow "expanded and collapse"
> +
> +$color2: #BBDEFA //light blue rgb(187, 222, 250)
> +$color3: #333333 //dark grey rgb(51, 51, 51)
> +$color4: #9E9E9E // light grey rgb(158, 158, 158)
> +$color5: #EDECED //lightest blue rgb(237, 236, 237)
> +$color-checkboxBackground: #9ACFFA
> +
> +
> +
> +
> +.inspire-tree
> + -webkit-user-select: none
> + -moz-user-select: none
> + -ms-user-select: none
> + user-select: none
> + .btn
> + background-color: rgba(255, 255, 255, 0.4)
> + border: 1px solid rgba(0, 0, 0, 0.2)
> + border-radius: 3px
> + display: inline-block
> + height: 20px
> + transition: all 150ms linear
> + width: 20px
> + &:hover
> + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1)
> + & + .btn
> + margin-left: 5px
> + &.icon
> + position: relative
> + &::before
> + display: block
> + height: 14px
> + left: 50%
> + position: absolute
> + top: 50%
> + -webkit-transform: translate(-50%, -50%)
> + transform: translate(-50%, -50%)
> + width: 14px
> + .btn-group
> + display: inline-block
> + height: 35px
> + line-height: 35px
> + &:focus
> + outline: none
> + ol
> + list-style: none
> + margin: 0
> + padding: 0
> + ol
> + padding-left: 20px
> + li
> + & > .title-wrap
> + min-height: 35px
> + position: relative
> + z-index: 2
> + .toggle
> + height: 35px
> + left: 0
> + position: absolute
> + top: 0
> + width: 35px
> + z-index: 2
> + &::before
> + display: block
> + left: 50%
> + position: absolute
> + top: 50%
> + -webkit-transform: translate(-50%, -50%)
> + transform: translate(-50%, -50%)
> + input[type="checkbox"]
> + background: transparent
> + left: 50px !important
> + height: 24px
> + position: absolute
> + vertical-align: middle
> + width: 24px
> + z-index: 2
> + -moz-appearance: none
> + -ms-appearance: none
> + -o-appearance: none
> + -webkit-appearance: none
> + cursor: pointer
> + input[type="checkbox"]::before
> + background: white
> + border-radius: 3px
> + border: 1px solid #d9d9d9
> + content: " "
> + height: 22px
> + left: 0px
> + position: absolute
> + top: 0px
> + width: 22px
> + input[type="checkbox"]::after
> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23"+$color1-withoutHashForSVG+"' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center
> + border-radius: 3px
> + border: 1px solid transparent
> + content: " "
> + height: 22px
> + left: 0px
> + opacity: 0
> + position: absolute
> + top: 0px
> + transform: scale(0)
> + transition: all 0.3s ease
> + width: 22px
> + input[type="checkbox"]:checked
> + &::after
> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23"+$color1-withoutHashForSVG+"' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center
> + opacity: 1
> + transform: scale(1)
> + &:active
> + &::after
> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23"+$color1-withoutHashForSVG+"' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center
> + opacity: 1
> + transform: scale(1)
> + &:focus
> + &::before
> + background: $color-checkboxBackground
> + border-radius: 3px
> + border: 1px solid $color1
> + outline: none
> + &:focus
> + &::before
> + background: $color-checkboxBackground
> + border-radius: 3px
> + border: 1px solid $color1
> + outline: none
> + input[type="checkbox"]:indeterminate
> + &::after
> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Crect stroke-width='0' stroke='%23FFFFFF' height='12' width='12' y='5' x='5' fill='%23"+$color1-withoutHashForSVG+"' /%3E%3C/svg%3E") no-repeat center center
> + opacity: 1
> + transform: scale(1)
> + &:active
> + &::after
> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Crect stroke-width='0' stroke='%23FFFFFF' height='12' width='12' y='5' x='5' fill='%23"+$color1-withoutHashForSVG+"' /%3E%3C/svg%3E") no-repeat center center
> + opacity: 1
> + transform: scale(1)
> + &:focus
> + &::before
> + background: $color-checkboxBackground
> + border-radius: 3px
> + border: 1px solid $color1
> + outline: none
> + &:focus
> + &::before
> + background: $color-checkboxBackground
> + border-radius: 3px
> + border: 1px solid $color1
> + outline: none
> + input[type="checkbox"]:focus
> + &::before
> + background: $color-checkboxBackground
> + border-radius: 3px
> + border: 1px solid $color1
> + outline: none
> + input[type="checkbox"][disabled]
> + color: silver
> + cursor: unset
> + input[type="checkbox"][disabled]::before
> + background: #f3f3f3
> + border-radius: 3px
> + border: 1px solid #d9d9d9
> + input[type="checkbox"][disabled]::after
> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center
> + input[type="checkbox"]:checked[disabled]::after
> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center
> + input[type="checkbox"]:indeterminate[disabled]::after
> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Crect stroke-width='0' stroke='%23FFFFFF' height='12' width='12' y='5' x='5' fill='%23cccccc' /%3E%3C/svg%3E") no-repeat center center
> + &.rejected
> + input[type="checkbox"]:indeterminate
> + &::after
> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cline stroke-width='4' stroke='%23"+$color1-withoutHashForSVG+"' stroke-linecap='undefined' stroke-linejoin='undefined' y2='10.9375' x2='17' y1='11.0625' x1='5' fill='none' /%3E%3C/svg%3E") no-repeat center center
> + opacity: 1
> + transform: scale(1)
> + &:active
> + &::after
> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cline stroke-width='4' stroke='%23"+$color1-withoutHashForSVG+"' stroke-linecap='undefined' stroke-linejoin='undefined' y2='10.9375' x2='17' y1='11.0625' x1='5' fill='none' /%3E%3C/svg%3E") no-repeat center center
> + opacity: 1
> + transform: scale(1)
> + input[type="checkbox"]:indeterminate[disabled]::after
> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cline stroke-width='4' stroke='%23cccccc' stroke-linecap='undefined' stroke-linejoin='undefined' y2='10.9375' x2='17' y1='11.0625' x1='5' fill='none' /%3E%3C/svg%3E") no-repeat center center
> + .title
> + cursor: default
> + display: block
> + height: 35px
> + line-height: 35px
> + overflow: hidden
> + padding-left: 42px
> + position: relative
> + text-overflow: ellipsis
> + vertical-align: middle
> + white-space: nowrap
> + z-index: 1
> + &.load-more
> + color: #476cb8
> + cursor: pointer
> + &:hover
> + text-decoration: underline
> + &::before
> + left: 30px
> + position: absolute
> + top: 45%
> + -webkit-transform: translateY(-50%)
> + transform: translateY(-50%)
> + vertical-align: top
> + &:focus
> + outline: none
> + &.drag-and-drop
> + li
> + &:not(.drop-target)
> + opacity: .5
> + .editable
> + form
> + display: inline-block
> + height: 35px
> + line-height: 35px
> + padding-top: 2px
> + input
> + height: 20px
> + & > .btn-group
> + display: none
> + padding-top: 2px
> + position: absolute
> + right: 10px
> + z-index: 3
> + &:hover
> + & > .btn-group
> + display: block
> + input
> + & + .btn-group
> + margin-left: 10px
> + & > .btn
> + &.icon
> + margin-left: 2px
> +.itree-menu
> + background: #ddd
> + border: 1px solid #c4c4c4
> + border-radius: 3px
> + font-family: sans-serif
> + list-style: none
> + margin: 0
> + min-width: 150px
> + padding: 0
> + position: absolute
> + z-index: 10
> + a
> + display: block
> + padding: 3px 8px
> + &:hover
> + background: rgba(218, 250, 255, 0.5)
> + color: rgba(164, 234, 245, 0.5)
> +.inspire-tree, .inspire-tree *
> + box-sizing: border-box
> +.inspire-tree .collapsed > ol, .inspire-tree .hidden
> + display: none
> +.drag-targeting.drag-targeting-insert.inspire-tree,
> +.drag-targeting.drag-targeting-insert > .title-wrap > .title
> + border: 1px solid #2dadc5
> +.drag-targeting
> + &.drag-targeting-above
> + & > .title-wrap
> + & > .title
> + border-top: 3px solid #2dadc5
> + &.drag-targeting-below
> + & > .title-wrap
> + & > .title
> + border-bottom: 3px solid #2dadc5
> +.inspire-tree .editable form input, .inspire-tree .editable form .btn
> + vertical-align: top
> +.inspire-tree
> + & > ol
> + & > .folder
> + &:first-child
> + &:not(:only-child)
> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC")
> + background-position: 11px 13px
> + background-repeat: no-repeat
> + &.editable-add
> + & > ol
> + & > .folder
> + &:last-child
> + &:not(:only-child)
> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC")
> + background-repeat: repeat-y
> + & > .leaf
> + &:last-child
> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAYCAYAAAAh8HdUAAAAN0lEQVQ4T2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGLo0dBDDz0SMu5o2oMFFgBXbEeI0XwYIwAAAABJRU5ErkJgggAA")
> + li
> + &.expanded
> + &:not(:last-child)
> + & > ol
> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC")
> + background-position: 11px 0
> + background-repeat: repeat-y
> + &.folder
> + &:not(.loading)
> + & > .title-wrap
> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC")
> + background-position: 31px 13px
> + background-repeat: no-repeat
> + .leaf
> + &:not(:last-child):not(.detached)
> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAYCAYAAAAh8HdUAAAAN0lEQVQ4T2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGLo0dBDDz0SMu5o2oMFFgBXbEeI0XwYIwAAAABJRU5ErkJgggAA")
> + background-position: 11px 0
> + background-repeat: no-repeat
> + &:last-child
> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAKklEQVQoU2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGJoAGUZM32Z0U8tAAAAAElFTkSuQmCC")
> + background-position: 11px 0
> + background-repeat: no-repeat
> + &.detached
> + &:last-child
> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC")
> + background-position: 11px 0
> + background-repeat: no-repeat
> +.inspire-tree .folder:last-child:not(:only-child), .inspire-tree li .folder:last-child
> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC")
> + background-position: 11px 0
> + background-repeat: no-repeat
> +.inspire-tree > ol .expanded:not(:last-child):not(:first-child), .inspire-tree li:not(:last-child)
> + background-image: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC")
> + background-position: 11px 0
> + background-repeat: no-repeat
> +.inspire-tree
> + .icon
> + &::before
> + background-position: 0 0
> + background-repeat: no-repeat
> + content: ''
> + display: inline-block
> + height: 14px
> + width: 14px
> + .icon-check
> + &::before
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M27%204l-15%2015-7-7-5%205%2012%2012%2020-20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")
> + &:hover
> + &::before
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%230ccc0a%22%20d%3D%22M27%204l-15%2015-7-7-5%205%2012%2012%2020-20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")
> + .icon-collapse
> + &::before
> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23"+$color1-withoutHashForSVG+"' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 [...]
> + content: " "
> + height: 22px
> + left: 50%
> + top: 50%
> + width: 14px
> + .icon-cross
> + &::before
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M31.708%2025.708c-0-0-0-0-0-0l-9.708-9.708%209.708-9.708c0-0%200-0%200-0%200.105-0.105%200.18-0.227%200.229-0.357%200.133-0.356%200.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.2 [...]
> + &:hover
> + &::before
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23c00%22%20d%3D%22M31.708%2025.708c-0-0-0-0-0-0l-9.708-9.708%209.708-9.708c0-0%200-0%200-0%200.105-0.105%200.18-0.227%200.229-0.357%200.133-0.356%200.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286 [...]
> + .icon-expand
> + &::before
> + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23"+$color1-withoutHashForSVG+"' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 [...]
> + content: " "
> + height: 22px
> + left: 25%
> + top: 25%
> + width: 14px
> + -webkit-transform: rotate(-90deg)
> + -ms-transform: rotate(-90deg)
> + transform: rotate(-90deg)
> + .icon-file-empty
> + &::before
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23a5a5a5%22%20d%3D%22M28.681%207.159c-0.694-0.947-1.662-2.053-2.724-3.116s-2.169-2.030-3.116-2.724c-1.612-1.182-2.393-1.319-2.841-1.319h-15.5c-1.378%200-2.5%201.121-2.5%202.5v27c0%201.378%201.122%20 [...]
> + .icon-folder
> + &::before
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M14%204l4%204h14v22h-32v-26z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")
> + .icon-folder-open
> + &::before
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M26%2030l6-16h-26l-6%2016zM4%2012l-4%2018v-26h9l4%204h13v4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E%0A")
> + .icon-minus
> + &::before
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M0%2013v6c0%200.552%200.448%201%201%201h30c0.552%200%201-0.448%201-1v-6c0-0.552-0.448-1-1-1h-30c-0.552%200-1%200.448-1%201z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")
> + &:hover
> + &::before
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23c00%22%20d%3D%22M0%2013v6c0%200.552%200.448%201%201%201h30c0.552%200%201-0.448%201-1v-6c0-0.552-0.448-1-1-1h-30c-0.552%200-1%200.448-1%201z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")
> + .icon-more
> + &::before
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M12%209.984c1.078%200%202.016%200.938%202.016%202.016s-0.938%202.016-2.016%202.016-2.016-0.938-2.016-2.016%200.938-2.016%202.016-2.016zM18%209.984c1.078%200%202.016%200.938%202. [...]
> + .icon-pencil
> + &::before
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M27%200c2.761%200%205%202.239%205%205%200%201.126-0.372%202.164-1%203l-2%202-7-7%202-2c0.836-0.628%201.874-1%203-1zM2%2023l-2%209%209-2%2018.5-18.5-7-7-18.5%2018.5zM22.362%2011. [...]
> + &:hover
> + &::before
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%230ccc0a%22%20d%3D%22M27%200c2.761%200%205%202.239%205%205%200%201.126-0.372%202.164-1%203l-2%202-7-7%202-2c0.836-0.628%201.874-1%203-1zM2%2023l-2%209%209-2%2018.5-18.5-7-7-18.5%2018.5zM22.362%2011 [...]
> + .icon-plus
> + &::before
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M31%2012h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552%200-1%200.448-1%201v11h-11c-0.552%200-1%200.448-1%201v6c0%200.552%200.448%201%201%201h11v11c0%200.552%200.448%201%201%201h6c0.552% [...]
> + &:hover
> + &::before
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%230ccc0a%22%20d%3D%22M31%2012h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552%200-1%200.448-1%201v11h-11c-0.552%200-1%200.448-1%201v6c0%200.552%200.448%201%201%201h11v11c0%200.552%200.448%201%201%201h6c0.552 [...]
> + .selected
> + & > .title-wrap
> + .icon-folder
> + &::before
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23"+$Basic-theme-Original-withoutHashForSVG+"%22%20d%3D%22M14%204l4%204h14v22h-32v-26z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")
> + .icon-folder-open
> + &::before
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23"+$Basic-theme-Original-withoutHashForSVG+"%22%20d%3D%22M26%2030l6-16h-26l-6%2016zM4%2012l-4%2018v-26h9l4%204h13v4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E%0A")
> + .icon-file-empty
> + &::before
> + background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23"+$Basic-theme-Original-withoutHashForSVG+"%22%20d%3D%22M28.681%207.159c-0.694-0.947-1.662-2.053-2.724-3.116s-2.169-2.030-3.116-2.724c-1.612-1.182-2.393-1.319-2.841-1.319h-15.5c-1.378%200-2.5%20 [...]
> + .loading
> + & > .title-wrap
> + input
> + display: none
> + .title
> + &::before
> + background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2714px%27%20height%3D%2714px%27%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22xMidYMid%22%20class%3D%22uil-ring%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22none%22%20class%3D%22bk%22%3E%3C%2Frect%3E%3Cdefs%3E%3Cfilter%20id%3D%22uil-ring-shadow%22%20x%3D%22-100%25%22%20y%3D%22-100%25%22%20width%3D%22300%25% [...]
> + content: ''
> + height: 14px
> + width: 14px
> + & > ol
> + position: relative
> + .wholerow
> + height: 35px
> + left: 0
> + margin-top: -35px
> + position: absolute
> + width: 100%
> + z-index: 1
> + .focused
> + & > .wholerow
> + border: 1px dotted black
> +.inspire-tree .wholerow:hover,
> +.inspire-tree .title-wrap:hover + .wholerow
> + background-color: rgba(218, 250, 255, 0.5)
> +.inspire-tree .selected > .wholerow,
> +.inspire-tree .selected > .wholerow:hover,
> +.inspire-tree .selected > .title-wrap:hover + .wholerow
> + background-color: rgba(164, 234, 245, 0.5)
> +.inspire-tree .matched > .wholerow,
> +.inspire-tree .matched > .wholerow:hover,
> +.inspire-tree .matched > .title-wrap:hover + .wholerow
> + background-color: rgba(247, 255, 170, 0.5)
> +
> +/* Custom */
> +.inspire-tree
> + overflow: auto
> + .title
> + padding-left: 85px
> + .icon
> + &::before
> + height: 16px
> + width: 16px
> + &.withoutcheckbox
> + .title
> + padding-left: 55px !important
> +
> +.editrevert.inspire-tree .icon-folder-open::after,
> +.editrevert.inspire-tree .icon-folder::after
> + background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201536%201536%22%3E%3Cpath%20d%3D%22M1511%20928q0%205-1%207q-64%20268-268%20434.5T764%201536q-146%200-282.5-55T238%201324l-129%20129q-19%2019-45%2019t-45-19t-19-45V960q0-26%2019-45t45-19h448q26%200%2045%2019t19%2045t-19%2045 [...]
> + background-repeat: no-repeat
> + content: " "
> + cursor: pointer
> + height: 16px
> + position: absolute
> + right: 3px
> + top: 22%
> + width: 16px
> + z-index: 3
> +.editrevert
> + &.inspire-tree
> + .title
> + padding-right: 20px
> +.inspire-tree
> + &.noneicon
> + .title
> + padding-left: 58px
> + input[type="checkbox"]
> + left: 25px !important
> + .icon-folder
> + &::before
> + background-image: url()
> + .icon-folder-open
> + &::before
> + background-image: url()
> + .icon-file-empty
> + &::before
> + background-image: url()
> + .selected
> + & > .title-wrap
> + .icon-folder
> + &::before
> + background-image: url()
> + .icon-folder-open
> + &::before
> + background-image: url()
> + .icon-file-empty
> + &::before
> + background-image: url()
> + &.withoutcheckbox
> + .title
> + padding-left: 35px !important
> + &.readonly
> + input[type="checkbox"]
> + z-index: -1
> +
> +//.inspire-tree
> +// &.noneiconWithoutCheckBox
> +// .title
> +// padding-left: 35px !important
> +// &.withiconWithoutCheckBox
> +// .title
> +// padding-left: 55px !important
> +
> +//.inspire-tree
> +// &.noneicon
> +// &.withoutcheckbox
> +// .title
> +// padding-left: 35px !important
> +
> +//.inspire-tree
> +// &.withoutcheckbox
> +// .title
> +// padding-left: 55px !important
> diff --git a/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dark.css b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dark.css
> new file mode 100644
> index 0000000..fa2dba9
> --- /dev/null
> +++ b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dark.css
> @@ -0,0 +1,325 @@
> +/**
> + * 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
> + *
> + * Unless required by applicable law or agreed to in writing, software
> + * distributed under the License is distributed on an 'AS IS' BASIS,
> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
> + * See the License for the specific language governing permissions and
> + * limitations under the License.
> + */
> +.inspire-tree .btn {
> + background-color: white;
> + border: 1px solid rgba(0, 0, 0, 0.2);
> + border-radius: 3px;
> + display: inline-block;
> + height: 20px;
> + transition: all 150ms linear;
> + width: 20px; }
> + .inspire-tree .btn:hover {
> + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); }
> + .inspire-tree .btn + .btn {
> + margin-left: 5px; }
> + .inspire-tree .btn.icon {
> + position: relative; }
> + .inspire-tree .btn.icon::before {
> + display: block;
> + height: 14px;
> + left: 50%;
> + position: absolute;
> + top: 50%;
> + -webkit-transform: translate(-50%, -50%);
> + transform: translate(-50%, -50%);
> + width: 14px; }
> +
> +.inspire-tree .btn-group {
> + display: inline-block;
> + height: 25px;
> + line-height: 25px; }
> +
> +/* ~~@@@~~~~~ Context Menu ~~~~~@@@~~ */
> +.itree-menu {
> + background: #ddd;
> + border: 1px solid #c4c4c4;
> + border-radius: 3px;
> + font-family: sans-serif;
> + list-style: none;
> + margin: 0;
> + min-width: 150px;
> + padding: 0;
> + position: absolute;
> + z-index: 10; }
> + .itree-menu a {
> + display: block;
> + padding: 3px 8px; }
> + .itree-menu a:hover {
> + background: rgba(100, 100, 100, 0.5);
> + color: rgba(74, 110, 116, 0.5); }
> +
> +.inspire-tree {
> + -webkit-user-select: none;
> + -moz-user-select: none;
> + -ms-user-select: none;
> + user-select: none;
> + /* ~~@@@~~~~~ Lists ~~~~~@@@~~ */
> + /* ~~@@@~~~~~ Node Content ~~~~~@@@~~ */ }
> + .inspire-tree:focus {
> + outline: none; }
> + .inspire-tree, .inspire-tree * {
> + box-sizing: border-box; }
> + .inspire-tree ol {
> + list-style: none;
> + margin: 0;
> + padding: 0; }
> + .inspire-tree ol ol {
> + padding-left: 20px; }
> + .inspire-tree .collapsed > ol, .inspire-tree .hidden {
> + display: none; }
> + .inspire-tree li > .title-wrap {
> + min-height: 25px;
> + position: relative;
> + z-index: 2; }
> + .inspire-tree .toggle {
> + height: 25px;
> + left: 0;
> + position: absolute;
> + top: 0;
> + width: 25px;
> + z-index: 2; }
> + .inspire-tree .toggle::before {
> + display: block;
> + left: 50%;
> + position: absolute;
> + top: 50%;
> + -webkit-transform: translate(-50%, -50%);
> + transform: translate(-50%, -50%); }
> + .inspire-tree [type="checkbox"] {
> + left: 18px;
> + position: absolute;
> + top: 4px;
> + vertical-align: middle;
> + width: 20px;
> + z-index: 2; }
> + .inspire-tree .title {
> + cursor: default;
> + display: block;
> + height: 25px;
> + line-height: 25px;
> + overflow: hidden;
> + padding-left: 42px;
> + position: relative;
> + text-overflow: ellipsis;
> + vertical-align: middle;
> + white-space: nowrap;
> + z-index: 1; }
> + .inspire-tree .title.load-more {
> + color: #476cb8;
> + cursor: pointer; }
> + .inspire-tree .title.load-more:hover {
> + text-decoration: underline; }
> + .inspire-tree .title::before {
> + left: 24px;
> + position: absolute;
> + top: 50%;
> + -webkit-transform: translateY(-50%);
> + transform: translateY(-50%);
> + vertical-align: top; }
> + .inspire-tree .title:focus {
> + outline: none; }
> +
> +.inspire-tree.drag-and-drop li:not(.drop-target) {
> + opacity: .5; }
> +
> +.drag-targeting.drag-targeting-insert.inspire-tree,
> +.drag-targeting.drag-targeting-insert > .title-wrap > .title {
> + border: 1px solid #2dadc5; }
> +
> +.drag-targeting.drag-targeting-above > .title-wrap > .title {
> + border-top: 3px solid #2dadc5; }
> +
> +.drag-targeting.drag-targeting-below > .title-wrap > .title {
> + border-bottom: 3px solid #2dadc5; }
> +
> +.inspire-tree .editable form {
> + display: inline-block;
> + height: 25px;
> + line-height: 25px;
> + padding-top: 2px; }
> + .inspire-tree .editable form input {
> + height: 20px; }
> + .inspire-tree .editable form input, .inspire-tree .editable form .btn {
> + vertical-align: top; }
> +
> +.inspire-tree .editable > .btn-group {
> + display: none;
> + padding-top: 2px;
> + position: absolute;
> + right: 10px;
> + z-index: 3; }
> +
> +.inspire-tree .editable:hover > .btn-group {
> + display: block; }
> +
> +.inspire-tree input + .btn-group {
> + margin-left: 10px; }
> +
> +.inspire-tree > .btn.icon {
> + margin-left: 2px; }
> +
> +.inspire-tree > ol > .folder:first-child:not(:only-child) {
> + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC");
> + background-position: 11px 13px;
> + background-repeat: no-repeat; }
> +
> +.inspire-tree .folder:last-child:not(:only-child), .inspire-tree li .folder:last-child {
> + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC");
> + background-position: 11px 0;
> + background-repeat: no-repeat; }
> +
> +.inspire-tree.editable-add > ol > .folder:last-child:not(:only-child) {
> + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC");
> + background-repeat: repeat-y; }
> +
> +.inspire-tree > ol .expanded:not(:last-child):not(:first-child), .inspire-tree li:not(:last-child) {
> + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC");
> + background-position: 11px 0;
> + background-repeat: no-repeat; }
> +
> +.inspire-tree li.expanded:not(:last-child) > ol {
> + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC");
> + background-position: 11px 0;
> + background-repeat: repeat-y; }
> +
> +.inspire-tree li.expanded.folder:not(.loading) > .title-wrap {
> + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC");
> + background-position: 31px 13px;
> + background-repeat: no-repeat; }
> +
> +.inspire-tree .leaf:not(:last-child):not(.detached) {
> + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAYCAYAAAAh8HdUAAAAN0lEQVQ4T2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGLo0dBDDz0SMu5o2oMFFgBXbEeI0XwYIwAAAABJRU5ErkJgggAA");
> + background-position: 11px 0;
> + background-repeat: no-repeat; }
> +
> +.inspire-tree .leaf:last-child {
> + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAKklEQVQoU2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGJoAGUZM32Z0U8tAAAAAElFTkSuQmCC");
> + background-position: 11px 0;
> + background-repeat: no-repeat; }
> +
> +.inspire-tree .leaf.detached:last-child {
> + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC");
> + background-position: 11px 0;
> + background-repeat: no-repeat; }
> +
> +.inspire-tree.editable-add > ol > .leaf:last-child {
> + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAYCAYAAAAh8HdUAAAAN0lEQVQ4T2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGLo0dBDDz0SMu5o2oMFFgBXbEeI0XwYIwAAAABJRU5ErkJgggAA"); }
> +
> +.inspire-tree .icon::before {
> + background-position: 0 0;
> + background-repeat: no-repeat;
> + content: '';
> + display: inline-block;
> + height: 14px;
> + width: 14px; }
> +
> +.inspire-tree .icon-check::before {
> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M27%204l-15%2015-7-7-5%205%2012%2012%2020-20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
> +
> +.inspire-tree .icon-check:hover::before {
> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%230ccc0a%22%20d%3D%22M27%204l-15%2015-7-7-5%205%2012%2012%2020-20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
> +
> +.inspire-tree .icon-collapse::before {
> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23aaa%22%20d%3D%22M4%201h16q1.242%200%202.121%200.879t0.879%202.121v16q0%201.242-0.879%202.121t-2.121%200.879h-16q-1.242%200-2.121-0.879t-0.879-2.121v-16q0-1.242%200.879-2.121t2.121- [...]
> + background-color: black;
> + border-radius: 3px;
> + margin-left: -1px; }
> +
> +.inspire-tree .icon-cross::before {
> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M31.708%2025.708c-0-0-0-0-0-0l-9.708-9.708%209.708-9.708c0-0%200-0%200-0%200.105-0.105%200.18-0.227%200.229-0.357%200.133-0.356%200.057-0.771-0.229-1.057l-4.586- [...]
> +
> +.inspire-tree .icon-cross:hover::before {
> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23c00%22%20d%3D%22M31.708%2025.708c-0-0-0-0-0-0l-9.708-9.708%209.708-9.708c0-0%200-0%200-0%200.105-0.105%200.18-0.227%200.229-0.357%200.133-0.356%200.057-0.771-0.229-1.057l-4.586-4.5 [...]
> +
> +.inspire-tree .icon-expand::before {
> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23aaa%22%20d%3D%22M4%201h16q1.242%200%202.121%200.879t0.879%202.121v16q0%201.242-0.879%202.121t-2.121%200.879h-16q-1.242%200-2.121-0.879t-0.879-2.121v-16q0-1.242%200.879-2.121t2.121- [...]
> + background-color: black;
> + border-radius: 3px;
> + margin-left: -1px; }
> +
> +.inspire-tree .icon-file-empty::before {
> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23a5a5a5%22%20d%3D%22M28.681%207.159c-0.694-0.947-1.662-2.053-2.724-3.116s-2.169-2.030-3.116-2.724c-1.612-1.182-2.393-1.319-2.841-1.319h-15.5c-1.378%200-2.5%201.121-2.5%202.5v27c0%20 [...]
> +
> +.inspire-tree .icon-folder::before {
> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M14%204l4%204h14v22h-32v-26z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
> +
> +.inspire-tree .icon-folder-open::before {
> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M26%2030l6-16h-26l-6%2016zM4%2012l-4%2018v-26h9l4%204h13v4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E%0A"); }
> +
> +.inspire-tree .icon-minus::before {
> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M0%2013v6c0%200.552%200.448%201%201%201h30c0.552%200%201-0.448%201-1v-6c0-0.552-0.448-1-1-1h-30c-0.552%200-1%200.448-1%201z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
> +
> +.inspire-tree .icon-minus:hover::before {
> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23c00%22%20d%3D%22M0%2013v6c0%200.552%200.448%201%201%201h30c0.552%200%201-0.448%201-1v-6c0-0.552-0.448-1-1-1h-30c-0.552%200-1%200.448-1%201z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
> +
> +.inspire-tree .icon-more::before {
> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M12%209.984c1.078%200%202.016%200.938%202.016%202.016s-0.938%202.016-2.016%202.016-2.016-0.938-2.016-2.016%200.938-2.016%202.016-2.016zM18%209.984c1.078%200%202. [...]
> +
> +.inspire-tree .icon-pencil::before {
> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M27%200c2.761%200%205%202.239%205%205%200%201.126-0.372%202.164-1%203l-2%202-7-7%202-2c0.836-0.628%201.874-1%203-1zM2%2023l-2%209%209-2%2018.5-18.5-7-7-18.5%2018 [...]
> +
> +.inspire-tree .icon-pencil:hover::before {
> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%230ccc0a%22%20d%3D%22M27%200c2.761%200%205%202.239%205%205%200%201.126-0.372%202.164-1%203l-2%202-7-7%202-2c0.836-0.628%201.874-1%203-1zM2%2023l-2%209%209-2%2018.5-18.5-7-7-18.5%2018 [...]
> +
> +.inspire-tree .icon-plus::before {
> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%236a6a6a%22%20d%3D%22M31%2012h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552%200-1%200.448-1%201v11h-11c-0.552%200-1%200.448-1%201v6c0%200.552%200.448%201%201%201h11v11c0%200.552%200.448%201% [...]
> +
> +.inspire-tree .icon-plus:hover::before {
> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%230ccc0a%22%20d%3D%22M31%2012h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552%200-1%200.448-1%201v11h-11c-0.552%200-1%200.448-1%201v6c0%200.552%200.448%201%201%201h11v11c0%200.552%200.448%201% [...]
> +
> +.inspire-tree .selected > .title-wrap .icon-folder::before {
> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%2366a0a9%22%20d%3D%22M14%204l4%204h14v22h-32v-26z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
> +
> +.inspire-tree .selected > .title-wrap .icon-folder-open::before {
> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%2366a0a9%22%20d%3D%22M26%2030l6-16h-26l-6%2016zM4%2012l-4%2018v-26h9l4%204h13v4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E%0A"); }
> +
> +.inspire-tree .selected > .title-wrap .icon-file-empty::before {
> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%2366a0a9%22%20d%3D%22M28.681%207.159c-0.694-0.947-1.662-2.053-2.724-3.116s-2.169-2.030-3.116-2.724c-1.612-1.182-2.393-1.319-2.841-1.319h-15.5c-1.378%200-2.5%201.121-2.5%202.5v27c0%20 [...]
> +
> +.inspire-tree .loading > .title-wrap input {
> + display: none; }
> +
> +.inspire-tree .loading > .title-wrap .title::before {
> + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2714px%27%20height%3D%2714px%27%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22xMidYMid%22%20class%3D%22uil-ring%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22none%22%20class%3D%22bk%22%3E%3C%2Frect%3E%3Cdefs%3E%3Cfilter%20id%3D%22uil-ring-shadow%22%20x%3D%22-100%25%22%20y%3D%22-100%25%22%20widt [...]
> + content: '';
> + height: 14px;
> + width: 14px; }
> +
> +.inspire-tree > ol {
> + position: relative; }
> +
> +.inspire-tree .wholerow {
> + height: 25px;
> + left: 0;
> + margin-top: -25px;
> + position: absolute;
> + width: 100%;
> + z-index: 1; }
> +
> +.inspire-tree .focused > .wholerow {
> + border: 1px dotted white; }
> +
> +.inspire-tree .wholerow:hover,
> +.inspire-tree .title-wrap:hover + .wholerow {
> + background-color: rgba(100, 100, 100, 0.5); }
> +
> +.inspire-tree .selected > .wholerow,
> +.inspire-tree .selected > .wholerow:hover,
> +.inspire-tree .selected > .title-wrap:hover + .wholerow {
> + background-color: rgba(74, 110, 116, 0.5); }
> +
> +.inspire-tree .matched > .wholerow,
> +.inspire-tree .matched > .wholerow:hover,
> +.inspire-tree .matched > .title-wrap:hover + .wholerow {
> + background-color: rgba(247, 255, 170, 0.5); }
> diff --git a/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dark.min.css b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dark.min.css
> new file mode 100644
> index 0000000..165af06
> --- /dev/null
> +++ b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dark.min.css
> @@ -0,0 +1,14 @@
> +/**
> + * 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
> + *
> + * Unless required by applicable law or agreed to in writing, software
> + * distributed under the License is distributed on an 'AS IS' BASIS,
> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
> + * See the License for the specific language governing permissions and
> + * limitations under the License.
> + */
> +.inspire-tree .btn{background-color:#fff;border:1px solid rgba(0,0,0,.2);border-radius:3px;display:inline-block;height:20px;transition:all .15s linear;width:20px}.inspire-tree .btn:hover{box-shadow:0 2px 3px rgba(0,0,0,.1)}.inspire-tree .btn+.btn{margin-left:5px}.inspire-tree .btn.icon{position:relative}.inspire-tree .btn.icon:before{display:block;height:14px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:14px}.inspire-tree .btn-group{display:inline-block;height: [...]
> \ No newline at end of file
> diff --git a/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dom-royale.js b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dom-royale.js
> new file mode 100644
> index 0000000..37d8e22
> --- /dev/null
> +++ b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dom-royale.js
> @@ -0,0 +1,3766 @@
> +/**
> + * 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
> + *
> + * Unless required by applicable law or agreed to in writing, software
> + * distributed under the License is distributed on an 'AS IS' BASIS,
> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
> + * See the License for the specific language governing permissions and
> + * limitations under the License.
> + */
> + /* Inspire Tree DOM
> + * @version 4.0.6
> + * https://github.com/helion3/inspire-tree-dom
> + * @copyright Copyright 2015 Helion3, and other contributors
> + * @license Licensed under MIT
> + * see https://github.com/helion3/inspire-tree-dom/blob/master/LICENSE
> + */
> +(function (global, factory) {
> + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('lodash'), require('inspire-tree')) :
> + typeof define === 'function' && define.amd ? define(['lodash', 'inspire-tree'], factory) :
> + (global.InspireTreeDOM = factory(global._,global.InspireTree));
> +}(this, (function (_,InspireTree) { 'use strict';
> +
> + InspireTree = InspireTree && InspireTree.hasOwnProperty('default') ? InspireTree['default'] : InspireTree;
> +
> + var NO_OP = '$NO_OP';
> + var ERROR_MSG = 'a runtime error occured! Use Inferno in development environment to find the error.';
> + var isBrowser = !!(typeof window !== 'undefined' && window.document);
> + var isArray = Array.isArray;
> + function isStringOrNumber(o) {
> + var type = typeof o;
> + return type === 'string' || type === 'number';
> + }
> + function isNullOrUndef(o) {
> + return isUndefined(o) || isNull(o);
> + }
> + function isInvalid(o) {
> + return isNull(o) || o === false || isTrue(o) || isUndefined(o);
> + }
> + function isFunction(o) {
> + return typeof o === 'function';
> + }
> + function isString(o) {
> + return typeof o === 'string';
> + }
> + function isNumber(o) {
> + return typeof o === 'number';
> + }
> + function isNull(o) {
> + return o === null;
> + }
> + function isTrue(o) {
> + return o === true;
> + }
> + function isUndefined(o) {
> + return o === void 0;
> + }
> + function throwError(message) {
> + if (!message) {
> + message = ERROR_MSG;
> + }
> + throw new Error(("Inferno Error: " + message));
> + }
> + function combineFrom(first, second) {
> + var out = {};
> + if (first) {
> + for (var key in first) {
> + out[key] = first[key];
> + }
> + }
> + if (second) {
> + for (var key$1 in second) {
> + out[key$1] = second[key$1];
> + }
> + }
> + return out;
> + }
> +
> + var keyPrefix = '$';
> + function getVNode(childFlags, children, className, flags, key, props, ref, type) {
> + return {
> + childFlags: childFlags,
> + children: children,
> + className: className,
> + dom: null,
> + flags: flags,
> + key: key === void 0 ? null : key,
> + parentVNode: null,
> + props: props === void 0 ? null : props,
> + ref: ref === void 0 ? null : ref,
> + type: type
> + };
> + }
> + function createVNode(flags, type, className, children, childFlags, props, key, ref) {
> + var childFlag = childFlags === void 0 ? 1 /* HasInvalidChildren */ : childFlags;
> + var vNode = getVNode(childFlag, children, className, flags, key, props, ref, type);
> + if (childFlag === 0 /* UnknownChildren */) {
> + normalizeChildren(vNode, vNode.children);
> + }
> + return vNode;
> + }
> + function createComponentVNode(flags, type, props, key, ref) {
> + if ((flags & 2 /* ComponentUnknown */) > 0) {
> + flags = type.prototype && isFunction(type.prototype.render) ? 4 /* ComponentClass */ : 8 /* ComponentFunction */;
> + }
> + // set default props
> + var defaultProps = type.defaultProps;
> + if (!isNullOrUndef(defaultProps)) {
> + if (!props) {
> + props = {}; // Props can be referenced and modified at application level so always create new object
> + }
> + for (var prop in defaultProps) {
> + if (isUndefined(props[prop])) {
> + props[prop] = defaultProps[prop];
> + }
> + }
> + }
> + if ((flags & 8 /* ComponentFunction */) > 0) {
> + var defaultHooks = type.defaultHooks;
> + if (!isNullOrUndef(defaultHooks)) {
> + if (!ref) {
> + // As ref cannot be referenced from application level, we can use the same refs object
> + ref = defaultHooks;
> + }
> + else {
> + for (var prop$1 in defaultHooks) {
> + if (isUndefined(ref[prop$1])) {
> + ref[prop$1] = defaultHooks[prop$1];
> + }
> + }
> + }
> + }
> + }
> + var vNode = getVNode(1 /* HasInvalidChildren */, null, null, flags, key, props, ref, type);
> + var optsVNode = options.createVNode;
> + if (isFunction(optsVNode)) {
> + optsVNode(vNode);
> + }
> + return vNode;
> + }
> + function createTextVNode(text, key) {
> + return getVNode(1 /* HasInvalidChildren */, isNullOrUndef(text) ? '' : text, null, 16 /* Text */, key, null, null, null);
> + }
> + function normalizeProps(vNode) {
> + var props = vNode.props;
> + if (props) {
> + var flags = vNode.flags;
> + if (flags & 481 /* Element */) {
> + if (props.children !== void 0 && isNullOrUndef(vNode.children)) {
> + normalizeChildren(vNode, props.children);
> + }
> + if (props.className !== void 0) {
> + vNode.className = props.className || null;
> + props.className = undefined;
> + }
> + }
> + if (props.key !== void 0) {
> + vNode.key = props.key;
> + props.key = undefined;
> + }
> + if (props.ref !== void 0) {
> + if (flags & 8 /* ComponentFunction */) {
> + vNode.ref = combineFrom(vNode.ref, props.ref);
> + }
> + else {
> + vNode.ref = props.ref;
> + }
> + props.ref = undefined;
> + }
> + }
> + return vNode;
> + }
> + function directClone(vNodeToClone) {
> + var newVNode;
> + var flags = vNodeToClone.flags;
> + if (flags & 14 /* Component */) {
> + var props;
> + var propsToClone = vNodeToClone.props;
> + if (!isNull(propsToClone)) {
> + props = {};
> + for (var key in propsToClone) {
> + props[key] = propsToClone[key];
> + }
> + }
> + newVNode = createComponentVNode(flags, vNodeToClone.type, props, vNodeToClone.key, vNodeToClone.ref);
> + }
> + else if (flags & 481 /* Element */) {
> + newVNode = createVNode(flags, vNodeToClone.type, vNodeToClone.className, vNodeToClone.children, vNodeToClone.childFlags, vNodeToClone.props, vNodeToClone.key, vNodeToClone.ref);
> + }
> + else if (flags & 16 /* Text */) {
> + newVNode = createTextVNode(vNodeToClone.children, vNodeToClone.key);
> + }
> + else if (flags & 1024 /* Portal */) {
> + newVNode = vNodeToClone;
> + }
> + return newVNode;
> + }
> + function createVoidVNode() {
> + return createTextVNode('', null);
> + }
> + function _normalizeVNodes(nodes, result, index, currentKey) {
> + for (var len = nodes.length; index < len; index++) {
> + var n = nodes[index];
> + if (!isInvalid(n)) {
> + var newKey = currentKey + keyPrefix + index;
> + if (isArray(n)) {
> + _normalizeVNodes(n, result, 0, newKey);
> + }
> + else {
> + if (isStringOrNumber(n)) {
> + n = createTextVNode(n, newKey);
> + }
> + else {
> + var oldKey = n.key;
> + var isPrefixedKey = isString(oldKey) && oldKey[0] === keyPrefix;
> + if (!isNull(n.dom) || isPrefixedKey) {
> + n = directClone(n);
> + }
> + if (isNull(oldKey) || isPrefixedKey) {
> + n.key = newKey;
> + }
> + else {
> + n.key = currentKey + oldKey;
> + }
> + }
> + result.push(n);
> + }
> + }
> + }
> + }
> + function normalizeChildren(vNode, children) {
> + var newChildren;
> + var newChildFlags = 1 /* HasInvalidChildren */;
> + // Don't change children to match strict equal (===) true in patching
> + if (isInvalid(children)) {
> + newChildren = children;
> + }
> + else if (isString(children)) {
> + newChildFlags = 2 /* HasVNodeChildren */;
> + newChildren = createTextVNode(children);
> + }
> + else if (isNumber(children)) {
> + newChildFlags = 2 /* HasVNodeChildren */;
> + newChildren = createTextVNode(children + '');
> + }
> + else if (isArray(children)) {
> + var len = children.length;
> + if (len === 0) {
> + newChildren = null;
> + newChildFlags = 1 /* HasInvalidChildren */;
> + }
> + else {
> + // we assign $ which basically means we've flagged this array for future note
> + // if it comes back again, we need to clone it, as people are using it
> + // in an immutable way
> + // tslint:disable-next-line
> + if (Object.isFrozen(children) || children['$'] === true) {
> + children = children.slice();
> + }
> + newChildFlags = 8 /* HasKeyedChildren */;
> + for (var i = 0; i < len; i++) {
> + var n = children[i];
> + if (isInvalid(n) || isArray(n)) {
> + newChildren = newChildren || children.slice(0, i);
> + _normalizeVNodes(children, newChildren, i, '');
> + break;
> + }
> + else if (isStringOrNumber(n)) {
> + newChildren = newChildren || children.slice(0, i);
> + newChildren.push(createTextVNode(n, keyPrefix + i));
> + }
> + else {
> + var key = n.key;
> + var isNullDom = isNull(n.dom);
> + var isNullKey = isNull(key);
> + var isPrefixed = !isNullKey && key[0] === keyPrefix;
> + if (!isNullDom || isNullKey || isPrefixed) {
> + newChildren = newChildren || children.slice(0, i);
> + if (!isNullDom || isPrefixed) {
> + n = directClone(n);
> + }
> + if (isNullKey || isPrefixed) {
> + n.key = keyPrefix + i;
> + }
> + newChildren.push(n);
> + }
> + else if (newChildren) {
> + newChildren.push(n);
> + }
> + }
> + }
> + newChildren = newChildren || children;
> + newChildren.$ = true;
> + }
> + }
> + else {
> + newChildren = children;
> + if (!isNull(children.dom)) {
> + newChildren = directClone(children);
> + }
> + newChildFlags = 2 /* HasVNodeChildren */;
> + }
> + vNode.children = newChildren;
> + vNode.childFlags = newChildFlags;
> + return vNode;
> + }
> + var options = {
> + afterRender: null,
> + beforeRender: null,
> + createVNode: null,
> + renderComplete: null
> + };
> +
> + var xlinkNS = 'http://www.w3.org/1999/xlink';
> + var xmlNS = 'http://www.w3.org/XML/1998/namespace';
> + var svgNS = 'http://www.w3.org/2000/svg';
> + var namespaces = {
> + 'xlink:actuate': xlinkNS,
> + 'xlink:arcrole': xlinkNS,
> + 'xlink:href': xlinkNS,
> + 'xlink:role': xlinkNS,
> + 'xlink:show': xlinkNS,
> + 'xlink:title': xlinkNS,
> + 'xlink:type': xlinkNS,
> + 'xml:base': xmlNS,
> + 'xml:lang': xmlNS,
> + 'xml:space': xmlNS
> + };
> +
> + // We need EMPTY_OBJ defined in one place.
> + // Its used for comparison so we cant inline it into shared
> + var EMPTY_OBJ = {};
> + var LIFECYCLE = [];
> + function appendChild(parentDom, dom) {
> + parentDom.appendChild(dom);
> + }
> + function insertOrAppend(parentDom, newNode, nextNode) {
> + if (isNullOrUndef(nextNode)) {
> + appendChild(parentDom, newNode);
> + }
> + else {
> + parentDom.insertBefore(newNode, nextNode);
> + }
> + }
> + function documentCreateElement(tag, isSVG) {
> + if (isSVG === true) {
> + return document.createElementNS(svgNS, tag);
> + }
> + return document.createElement(tag);
> + }
> + function replaceChild(parentDom, newDom, lastDom) {
> + parentDom.replaceChild(newDom, lastDom);
> + }
> + function removeChild(parentDom, dom) {
> + parentDom.removeChild(dom);
> + }
> + function callAll(arrayFn) {
> + var listener;
> + while ((listener = arrayFn.shift()) !== undefined) {
> + listener();
> + }
> + }
> +
> + var attachedEventCounts = {};
> + var attachedEvents = {};
> + function handleEvent(name, nextEvent, dom) {
> + var eventsLeft = attachedEventCounts[name];
> + var eventsObject = dom.$EV;
> + if (nextEvent) {
> + if (!eventsLeft) {
> + attachedEvents[name] = attachEventToDocument(name);
> + attachedEventCounts[name] = 0;
> + }
> + if (!eventsObject) {
> + eventsObject = dom.$EV = {};
> + }
> + if (!eventsObject[name]) {
> + attachedEventCounts[name]++;
> + }
> + eventsObject[name] = nextEvent;
> + }
> + else if (eventsObject && eventsObject[name]) {
> + attachedEventCounts[name]--;
> + if (eventsLeft === 1) {
> + document.removeEventListener(normalizeEventName(name), attachedEvents[name]);
> + attachedEvents[name] = null;
> + }
> + eventsObject[name] = nextEvent;
> + }
> + }
> + function dispatchEvents(event, target, isClick, name, eventData) {
> + var dom = target;
> + while (!isNull(dom)) {
> + // Html Nodes can be nested fe: span inside button in that scenario browser does not handle disabled attribute on parent,
> + // because the event listener is on document.body
> + // Don't process clicks on disabled elements
> + if (isClick && dom.disabled) {
> + return;
> + }
> + var eventsObject = dom.$EV;
> + if (eventsObject) {
> + var currentEvent = eventsObject[name];
> + if (currentEvent) {
> + // linkEvent object
> + eventData.dom = dom;
> + if (currentEvent.event) {
> + currentEvent.event(currentEvent.data, event);
> + }
> + else {
> + currentEvent(event);
> + }
> + if (event.cancelBubble) {
> + return;
> + }
> + }
> + }
> + dom = dom.parentNode;
> + }
> + }
> + function normalizeEventName(name) {
> + return name.substr(2).toLowerCase();
> + }
> + function stopPropagation() {
> + this.cancelBubble = true;
> + if (!this.immediatePropagationStopped) {
> + this.stopImmediatePropagation();
> + }
> + }
> + function attachEventToDocument(name) {
> + var docEvent = function (event) {
> + var type = event.type;
> + var isClick = type === 'click' || type === 'dblclick';
> + if (isClick && event.button !== 0) {
> + // Firefox incorrectly triggers click event for mid/right mouse buttons.
> + // This bug has been active for 12 years.
> + // https://bugzilla.mozilla.org/show_bug.cgi?id=184051
> + event.stopPropagation();
> + return false;
> + }
> + event.stopPropagation = stopPropagation;
> + // Event data needs to be object to save reference to currentTarget getter
> + var eventData = {
> + dom: document
> + };
> + Object.defineProperty(event, 'currentTarget', {
> + configurable: true,
> + get: function get() {
> + return eventData.dom;
> + }
> + });
> + dispatchEvents(event, event.target, isClick, name, eventData);
> + return;
> + };
> + document.addEventListener(normalizeEventName(name), docEvent);
> + return docEvent;
> + }
> +
> + function isSameInnerHTML(dom, innerHTML) {
> + var tempdom = document.createElement('i');
> + tempdom.innerHTML = innerHTML;
> + return tempdom.innerHTML === dom.innerHTML;
> + }
> + function isSamePropsInnerHTML(dom, props) {
> + return Boolean(props && props.dangerouslySetInnerHTML && props.dangerouslySetInnerHTML.__html && isSameInnerHTML(dom, props.dangerouslySetInnerHTML.__html));
> + }
> +
> + function triggerEventListener(props, methodName, e) {
> + if (props[methodName]) {
> + var listener = props[methodName];
> + if (listener.event) {
> + listener.event(listener.data, e);
> + }
> + else {
> + listener(e);
> + }
> + }
> + else {
> + var nativeListenerName = methodName.toLowerCase();
> + if (props[nativeListenerName]) {
> + props[nativeListenerName](e);
> + }
> + }
> + }
> + function createWrappedFunction(methodName, applyValue) {
> + var fnMethod = function (e) {
> + e.stopPropagation();
> + var vNode = this.$V;
> + // If vNode is gone by the time event fires, no-op
> + if (!vNode) {
> + return;
> + }
> + var props = vNode.props || EMPTY_OBJ;
> + var dom = vNode.dom;
> + if (isString(methodName)) {
> + triggerEventListener(props, methodName, e);
> + }
> + else {
> + for (var i = 0; i < methodName.length; i++) {
> + triggerEventListener(props, methodName[i], e);
> + }
> + }
> + if (isFunction(applyValue)) {
> + var newVNode = this.$V;
> + var newProps = newVNode.props || EMPTY_OBJ;
> + applyValue(newProps, dom, false, newVNode);
> + }
> + };
> + Object.defineProperty(fnMethod, 'wrapped', {
> + configurable: false,
> + enumerable: false,
> + value: true,
> + writable: false
> + });
> + return fnMethod;
> + }
> +
> + function isCheckedType(type) {
> + return type === 'checkbox' || type === 'radio';
> + }
> + var onTextInputChange = createWrappedFunction('onInput', applyValueInput);
> + var wrappedOnChange = createWrappedFunction(['onClick', 'onChange'], applyValueInput);
> + /* tslint:disable-next-line:no-empty */
> + function emptywrapper(event) {
> + event.stopPropagation();
> + }
> + emptywrapper.wrapped = true;
> + function inputEvents(dom, nextPropsOrEmpty) {
> + if (isCheckedType(nextPropsOrEmpty.type)) {
> + dom.onchange = wrappedOnChange;
> + dom.onclick = emptywrapper;
> + }
> + else {
> + dom.oninput = onTextInputChange;
> + }
> + }
> + function applyValueInput(nextPropsOrEmpty, dom) {
> + var type = nextPropsOrEmpty.type;
> + var value = nextPropsOrEmpty.value;
> + var checked = nextPropsOrEmpty.checked;
> + var multiple = nextPropsOrEmpty.multiple;
> + var defaultValue = nextPropsOrEmpty.defaultValue;
> + var hasValue = !isNullOrUndef(value);
> + if (type && type !== dom.type) {
> + dom.setAttribute('type', type);
> + }
> + if (!isNullOrUndef(multiple) && multiple !== dom.multiple) {
> + dom.multiple = multiple;
> + }
> + if (!isNullOrUndef(defaultValue) && !hasValue) {
> + dom.defaultValue = defaultValue + '';
> + }
> + if (isCheckedType(type)) {
> + if (hasValue) {
> + dom.value = value;
> + }
> + if (!isNullOrUndef(checked)) {
> + dom.checked = checked;
> + }
> + }
> + else {
> + if (hasValue && dom.value !== value) {
> + dom.defaultValue = value;
> + dom.value = value;
> + }
> + else if (!isNullOrUndef(checked)) {
> + dom.checked = checked;
> + }
> + }
> + }
> +
> + function updateChildOptionGroup(vNode, value) {
> + var type = vNode.type;
> + if (type === 'optgroup') {
> + var children = vNode.children;
> + var childFlags = vNode.childFlags;
> + if (childFlags & 12 /* MultipleChildren */) {
> + for (var i = 0, len = children.length; i < len; i++) {
> + updateChildOption(children[i], value);
> + }
> + }
> + else if (childFlags === 2 /* HasVNodeChildren */) {
> + updateChildOption(children, value);
> + }
> + }
> + else {
> + updateChildOption(vNode, value);
> + }
> + }
> + function updateChildOption(vNode, value) {
> + var props = vNode.props || EMPTY_OBJ;
> + var dom = vNode.dom;
> + // we do this as multiple may have changed
> + dom.value = props.value;
> + if ((isArray(value) && value.indexOf(props.value) !== -1) || props.value === value) {
> + dom.selected = true;
> + }
> + else if (!isNullOrUndef(value) || !isNullOrUndef(props.selected)) {
> + dom.selected = props.selected || false;
> + }
> + }
> + var onSelectChange = createWrappedFunction('onChange', applyValueSelect);
> + function selectEvents(dom) {
> + dom.onchange = onSelectChange;
> + }
> + function applyValueSelect(nextPropsOrEmpty, dom, mounting, vNode) {
> + var multiplePropInBoolean = Boolean(nextPropsOrEmpty.multiple);
> + if (!isNullOrUndef(nextPropsOrEmpty.multiple) && multiplePropInBoolean !== dom.multiple) {
> + dom.multiple = multiplePropInBoolean;
> + }
> + var childFlags = vNode.childFlags;
> + if ((childFlags & 1 /* HasInvalidChildren */) === 0) {
> + var children = vNode.children;
> + var value = nextPropsOrEmpty.value;
> + if (mounting && isNullOrUndef(value)) {
> + value = nextPropsOrEmpty.defaultValue;
> + }
> + if (childFlags & 12 /* MultipleChildren */) {
> + for (var i = 0, len = children.length; i < len; i++) {
> + updateChildOptionGroup(children[i], value);
> + }
> + }
> + else if (childFlags === 2 /* HasVNodeChildren */) {
> + updateChildOptionGroup(children, value);
> + }
> + }
> + }
> +
> + var onTextareaInputChange = createWrappedFunction('onInput', applyValueTextArea);
> + var wrappedOnChange$1 = createWrappedFunction('onChange');
> + function textAreaEvents(dom, nextPropsOrEmpty) {
> + dom.oninput = onTextareaInputChange;
> + if (nextPropsOrEmpty.onChange) {
> + dom.onchange = wrappedOnChange$1;
> + }
> + }
> + function applyValueTextArea(nextPropsOrEmpty, dom, mounting) {
> + var value = nextPropsOrEmpty.value;
> + var domValue = dom.value;
> + if (isNullOrUndef(value)) {
> + if (mounting) {
> + var defaultValue = nextPropsOrEmpty.defaultValue;
> + if (!isNullOrUndef(defaultValue) && defaultValue !== domValue) {
> + dom.defaultValue = defaultValue;
> + dom.value = defaultValue;
> + }
> + }
> + }
> + else if (domValue !== value) {
> + /* There is value so keep it controlled */
> + dom.defaultValue = value;
> + dom.value = value;
> + }
> + }
> +
> + /**
> + * There is currently no support for switching same input between controlled and nonControlled
> + * If that ever becomes a real issue, then re design controlled elements
> + * Currently user must choose either controlled or non-controlled and stick with that
> + */
> + function processElement(flags, vNode, dom, nextPropsOrEmpty, mounting, isControlled) {
> + if (flags & 64 /* InputElement */) {
> + applyValueInput(nextPropsOrEmpty, dom);
> + }
> + else if (flags & 256 /* SelectElement */) {
> + applyValueSelect(nextPropsOrEmpty, dom, mounting, vNode);
> + }
> + else if (flags & 128 /* TextareaElement */) {
> + applyValueTextArea(nextPropsOrEmpty, dom, mounting);
> + }
> + if (isControlled) {
> + dom.$V = vNode;
> + }
> + }
> + function addFormElementEventHandlers(flags, dom, nextPropsOrEmpty) {
> + if (flags & 64 /* InputElement */) {
> + inputEvents(dom, nextPropsOrEmpty);
> + }
> + else if (flags & 256 /* SelectElement */) {
> + selectEvents(dom);
> + }
> + else if (flags & 128 /* TextareaElement */) {
> + textAreaEvents(dom, nextPropsOrEmpty);
> + }
> + }
> + function isControlledFormElement(nextPropsOrEmpty) {
> + return nextPropsOrEmpty.type && isCheckedType(nextPropsOrEmpty.type) ? !isNullOrUndef(nextPropsOrEmpty.checked) : !isNullOrUndef(nextPropsOrEmpty.value);
> + }
> +
> + function remove(vNode, parentDom) {
> + unmount(vNode);
> + if (parentDom && vNode.dom) {
> + removeChild(parentDom, vNode.dom);
> + // Let carbage collector free memory
> + vNode.dom = null;
> + }
> + }
> + function unmount(vNode) {
> + var flags = vNode.flags;
> + if (flags & 481 /* Element */) {
> + var ref = vNode.ref;
> + var props = vNode.props;
> + if (isFunction(ref)) {
> + ref(null);
> + }
> + var children = vNode.children;
> + var childFlags = vNode.childFlags;
> + if (childFlags & 12 /* MultipleChildren */) {
> + unmountAllChildren(children);
> + }
> + else if (childFlags === 2 /* HasVNodeChildren */) {
> + unmount(children);
> + }
> + if (!isNull(props)) {
> + for (var name in props) {
> + switch (name) {
> + case 'onClick':
> + case 'onDblClick':
> + case 'onFocusIn':
> + case 'onFocusOut':
> + case 'onKeyDown':
> + case 'onKeyPress':
> + case 'onKeyUp':
> + case 'onMouseDown':
> + case 'onMouseMove':
> + case 'onMouseUp':
> + case 'onSubmit':
> + case 'onTouchEnd':
> + case 'onTouchMove':
> + case 'onTouchStart':
> + handleEvent(name, null, vNode.dom);
> + break;
> + default:
> + break;
> + }
> + }
> + }
> + }
> + else {
> + var children$1 = vNode.children;
> + // Safe guard for crashed VNode
> + if (children$1) {
> + if (flags & 14 /* Component */) {
> + var ref$1 = vNode.ref;
> + if (flags & 4 /* ComponentClass */) {
> + if (isFunction(children$1.componentWillUnmount)) {
> + children$1.componentWillUnmount();
> + }
> + if (isFunction(ref$1)) {
> + ref$1(null);
> + }
> + children$1.$UN = true;
> + if (children$1.$LI) {
> + unmount(children$1.$LI);
> + }
> + }
> + else {
> + if (!isNullOrUndef(ref$1) && isFunction(ref$1.onComponentWillUnmount)) {
> + ref$1.onComponentWillUnmount(vNode.dom, vNode.props || EMPTY_OBJ);
> + }
> + unmount(children$1);
> + }
> + }
> + else if (flags & 1024 /* Portal */) {
> + remove(children$1, vNode.type);
> + }
> + }
> + }
> + }
> + function unmountAllChildren(children) {
> + for (var i = 0, len = children.length; i < len; i++) {
> + unmount(children[i]);
> + }
> + }
> + function removeAllChildren(dom, children) {
> + unmountAllChildren(children);
> + dom.textContent = '';
> + }
> +
> + function createLinkEvent(linkEvent, nextValue) {
> + return function (e) {
> + linkEvent(nextValue.data, e);
> + };
> + }
> + function patchEvent(name, lastValue, nextValue, dom) {
> + var nameLowerCase = name.toLowerCase();
> + if (!isFunction(nextValue) && !isNullOrUndef(nextValue)) {
> + var linkEvent = nextValue.event;
> + if (linkEvent && isFunction(linkEvent)) {
> + dom[nameLowerCase] = createLinkEvent(linkEvent, nextValue);
> + }
> + }
> + else {
> + var domEvent = dom[nameLowerCase];
> + // if the function is wrapped, that means it's been controlled by a wrapper
> + if (!domEvent || !domEvent.wrapped) {
> + dom[nameLowerCase] = nextValue;
> + }
> + }
> + }
> + function getNumberStyleValue(style, value) {
> + switch (style) {
> + case 'animationIterationCount':
> + case 'borderImageOutset':
> + case 'borderImageSlice':
> + case 'borderImageWidth':
> + case 'boxFlex':
> + case 'boxFlexGroup':
> + case 'boxOrdinalGroup':
> + case 'columnCount':
> + case 'fillOpacity':
> + case 'flex':
> + case 'flexGrow':
> + case 'flexNegative':
> + case 'flexOrder':
> + case 'flexPositive':
> + case 'flexShrink':
> + case 'floodOpacity':
> + case 'fontWeight':
> + case 'gridColumn':
> + case 'gridRow':
> + case 'lineClamp':
> + case 'lineHeight':
> + case 'opacity':
> + case 'order':
> + case 'orphans':
> + case 'stopOpacity':
> + case 'strokeDasharray':
> + case 'strokeDashoffset':
> + case 'strokeMiterlimit':
> + case 'strokeOpacity':
> + case 'strokeWidth':
> + case 'tabSize':
> + case 'widows':
> + case 'zIndex':
> + case 'zoom':
> + return value;
> + default:
> + return value + 'px';
> + }
> + }
> + // We are assuming here that we come from patchProp routine
> + // -nextAttrValue cannot be null or undefined
> + function patchStyle(lastAttrValue, nextAttrValue, dom) {
> + var domStyle = dom.style;
> + var style;
> + var value;
> + if (isString(nextAttrValue)) {
> + domStyle.cssText = nextAttrValue;
> + return;
> + }
> + if (!isNullOrUndef(lastAttrValue) && !isString(lastAttrValue)) {
> + for (style in nextAttrValue) {
> + // do not add a hasOwnProperty check here, it affects performance
> + value = nextAttrValue[style];
> + if (value !== lastAttrValue[style]) {
> + domStyle[style] = isNumber(value) ? getNumberStyleValue(style, value) : value;
> + }
> + }
> + for (style in lastAttrValue) {
> + if (isNullOrUndef(nextAttrValue[style])) {
> + domStyle[style] = '';
> + }
> + }
> + }
> + else {
> + for (style in nextAttrValue) {
> + value = nextAttrValue[style];
> + domStyle[style] = isNumber(value) ? getNumberStyleValue(style, value) : value;
> + }
> + }
> + }
> + function patchProp(prop, lastValue, nextValue, dom, isSVG, hasControlledValue, lastVNode) {
> + switch (prop) {
> + case 'onClick':
> + case 'onDblClick':
> + case 'onFocusIn':
> + case 'onFocusOut':
> + case 'onKeyDown':
> + case 'onKeyPress':
> + case 'onKeyUp':
> + case 'onMouseDown':
> + case 'onMouseMove':
> + case 'onMouseUp':
> + case 'onSubmit':
> + case 'onTouchEnd':
> + case 'onTouchMove':
> + case 'onTouchStart':
> + handleEvent(prop, nextValue, dom);
> + break;
> + case 'children':
> + case 'childrenType':
> + case 'className':
> + case 'defaultValue':
> + case 'key':
> + case 'multiple':
> + case 'ref':
> + break;
> + case 'autoFocus':
> + dom.autofocus = !!nextValue;
> + break;
> + case 'allowfullscreen':
> + case 'autoplay':
> + case 'capture':
> + case 'checked':
> + case 'controls':
> + case 'default':
> + case 'disabled':
> + case 'hidden':
> + case 'indeterminate':
> + case 'loop':
> + case 'muted':
> + case 'novalidate':
> + case 'open':
> + case 'readOnly':
> + case 'required':
> + case 'reversed':
> + case 'scoped':
> + case 'seamless':
> + case 'selected':
> + dom[prop] = !!nextValue;
> + break;
> + case 'defaultChecked':
> + case 'value':
> + case 'volume':
> + if (hasControlledValue && prop === 'value') {
> + return;
> + }
> + var value = isNullOrUndef(nextValue) ? '' : nextValue;
> + if (dom[prop] !== value) {
> + dom[prop] = value;
> + }
> + break;
> + case 'dangerouslySetInnerHTML':
> + var lastHtml = (lastValue && lastValue.__html) || '';
> + var nextHtml = (nextValue && nextValue.__html) || '';
> + if (lastHtml !== nextHtml) {
> + if (!isNullOrUndef(nextHtml) && !isSameInnerHTML(dom, nextHtml)) {
> + if (!isNull(lastVNode)) {
> + if (lastVNode.childFlags & 12 /* MultipleChildren */) {
> + unmountAllChildren(lastVNode.children);
> + }
> + else if (lastVNode.childFlags === 2 /* HasVNodeChildren */) {
> + unmount(lastVNode.children);
> + }
> + lastVNode.children = null;
> + lastVNode.childFlags = 1 /* HasInvalidChildren */;
> + }
> + dom.innerHTML = nextHtml;
> + }
> + }
> + break;
> + default:
> + if (prop[0] === 'o' && prop[1] === 'n') {
> + patchEvent(prop, lastValue, nextValue, dom);
> + }
> + else if (isNullOrUndef(nextValue)) {
> + dom.removeAttribute(prop);
> + }
> + else if (prop === 'style') {
> + patchStyle(lastValue, nextValue, dom);
> + }
> + else if (isSVG && namespaces[prop]) {
> + // We optimize for isSVG being false
> + // If we end up in this path we can read property again
> + dom.setAttributeNS(namespaces[prop], prop, nextValue);
> + }
> + else {
> + dom.setAttribute(prop, nextValue);
> + }
> + break;
> + }
> + }
> + function mountProps(vNode, flags, props, dom, isSVG) {
> + var hasControlledValue = false;
> + var isFormElement = (flags & 448 /* FormElement */) > 0;
> + if (isFormElement) {
> + hasControlledValue = isControlledFormElement(props);
> + if (hasControlledValue) {
> + addFormElementEventHandlers(flags, dom, props);
> + }
> + }
> + for (var prop in props) {
> + // do not add a hasOwnProperty check here, it affects performance
> + patchProp(prop, null, props[prop], dom, isSVG, hasControlledValue, null);
> + }
> + if (isFormElement) {
> + processElement(flags, vNode, dom, props, true, hasControlledValue);
> + }
> + }
> +
> + function createClassComponentInstance(vNode, Component, props, context) {
> + var instance = new Component(props, context);
> + vNode.children = instance;
> + instance.$V = vNode;
> + instance.$BS = false;
> + instance.context = context;
> + if (instance.props === EMPTY_OBJ) {
> + instance.props = props;
> + }
> + instance.$UN = false;
> + if (isFunction(instance.componentWillMount)) {
> + instance.$BR = true;
> + instance.componentWillMount();
> + if (instance.$PSS) {
> + var state = instance.state;
> + var pending = instance.$PS;
> + if (isNull(state)) {
> + instance.state = pending;
> + }
> + else {
> + for (var key in pending) {
> + state[key] = pending[key];
> + }
> + }
> + instance.$PSS = false;
> + instance.$PS = null;
> + }
> + instance.$BR = false;
> + }
> + if (isFunction(options.beforeRender)) {
> + options.beforeRender(instance);
> + }
> + var input = handleComponentInput(instance.render(props, instance.state, context), vNode);
> + var childContext;
> + if (isFunction(instance.getChildContext)) {
> + childContext = instance.getChildContext();
> + }
> + if (isNullOrUndef(childContext)) {
> + instance.$CX = context;
> + }
> + else {
> + instance.$CX = combineFrom(context, childContext);
> + }
> + if (isFunction(options.afterRender)) {
> + options.afterRender(instance);
> + }
> + instance.$LI = input;
> + return instance;
> + }
> + function handleComponentInput(input, componentVNode) {
> + if (isInvalid(input)) {
> + input = createVoidVNode();
> + }
> + else if (isStringOrNumber(input)) {
> + input = createTextVNode(input, null);
> + }
> + else {
> + if (input.dom) {
> + input = directClone(input);
> + }
> + if (input.flags & 14 /* Component */) {
> + // if we have an input that is also a component, we run into a tricky situation
> + // where the root vNode needs to always have the correct DOM entry
> + // we can optimise this in the future, but this gets us out of a lot of issues
> + input.parentVNode = componentVNode;
> + }
> + }
> + return input;
> + }
> +
> + function mount(vNode, parentDom, context, isSVG) {
> + var flags = vNode.flags;
> + if (flags & 481 /* Element */) {
> + return mountElement(vNode, parentDom, context, isSVG);
> + }
> + if (flags & 14 /* Component */) {
> + return mountComponent(vNode, parentDom, context, isSVG, (flags & 4 /* ComponentClass */) > 0);
> + }
> + if (flags & 512 /* Void */ || flags & 16 /* Text */) {
> + return mountText(vNode, parentDom);
> + }
> + if (flags & 1024 /* Portal */) {
> + mount(vNode.children, vNode.type, context, false);
> + return (vNode.dom = mountText(createVoidVNode(), parentDom));
> + }
> + }
> + function mountText(vNode, parentDom) {
> + var dom = (vNode.dom = document.createTextNode(vNode.children));
> + if (!isNull(parentDom)) {
> + appendChild(parentDom, dom);
> + }
> + return dom;
> + }
> + function mountElement(vNode, parentDom, context, isSVG) {
> + var flags = vNode.flags;
> + var children = vNode.children;
> + var props = vNode.props;
> + var className = vNode.className;
> + var ref = vNode.ref;
> + var childFlags = vNode.childFlags;
> + isSVG = isSVG || (flags & 32 /* SvgElement */) > 0;
> + var dom = documentCreateElement(vNode.type, isSVG);
> + vNode.dom = dom;
> + if (!isNullOrUndef(className) && className !== '') {
> + if (isSVG) {
> + dom.setAttribute('class', className);
> + }
> + else {
> + dom.className = className;
> + }
> + }
> + if (!isNull(parentDom)) {
> + appendChild(parentDom, dom);
> + }
> + if ((childFlags & 1 /* HasInvalidChildren */) === 0) {
> + var childrenIsSVG = isSVG === true && vNode.type !== 'foreignObject';
> + if (childFlags === 2 /* HasVNodeChildren */) {
> + mount(children, dom, context, childrenIsSVG);
> + }
> + else if (childFlags & 12 /* MultipleChildren */) {
> + mountArrayChildren(children, dom, context, childrenIsSVG);
> + }
> + }
> + if (!isNull(props)) {
> + mountProps(vNode, flags, props, dom, isSVG);
> + }
> + if (isFunction(ref)) {
> + mountRef(dom, ref);
> + }
> + return dom;
> + }
> + function mountArrayChildren(children, dom, context, isSVG) {
> + for (var i = 0, len = children.length; i < len; i++) {
> + var child = children[i];
> + if (!isNull(child.dom)) {
> + children[i] = child = directClone(child);
> + }
> + mount(child, dom, context, isSVG);
> + }
> + }
> + function mountComponent(vNode, parentDom, context, isSVG, isClass) {
> + var dom;
> + var type = vNode.type;
> + var props = vNode.props || EMPTY_OBJ;
> + var ref = vNode.ref;
> + if (isClass) {
> + var instance = createClassComponentInstance(vNode, type, props, context);
> + vNode.dom = dom = mount(instance.$LI, null, instance.$CX, isSVG);
> + mountClassComponentCallbacks(vNode, ref, instance);
> + instance.$UPD = false;
> + }
> + else {
> + var input = handleComponentInput(type(props, context), vNode);
> + vNode.children = input;
> + vNode.dom = dom = mount(input, null, context, isSVG);
> + mountFunctionalComponentCallbacks(props, ref, dom);
> + }
> + if (!isNull(parentDom)) {
> + appendChild(parentDom, dom);
> + }
> + return dom;
> + }
> + function createClassMountCallback(instance) {
> + return function () {
> + instance.componentDidMount();
> + };
> + }
> + function mountClassComponentCallbacks(vNode, ref, instance) {
> + if (isFunction(ref)) {
> + ref(instance);
> + }
> + if (isFunction(instance.componentDidMount)) {
> + LIFECYCLE.push(createClassMountCallback(instance));
> + }
> + }
> + function createOnMountCallback(ref, dom, props) {
> + return function () { return ref.onComponentDidMount(dom, props); };
> + }
> + function mountFunctionalComponentCallbacks(props, ref, dom) {
> + if (!isNullOrUndef(ref)) {
> + if (isFunction(ref.onComponentWillMount)) {
> + ref.onComponentWillMount(props);
> + }
> + if (isFunction(ref.onComponentDidMount)) {
> + LIFECYCLE.push(createOnMountCallback(ref, dom, props));
> + }
> + }
> + }
> + function mountRef(dom, value) {
> + LIFECYCLE.push(function () { return value(dom); });
> + }
> +
> + function hydrateComponent(vNode, dom, context, isSVG, isClass) {
> + var type = vNode.type;
> + var ref = vNode.ref;
> + var props = vNode.props || EMPTY_OBJ;
> + if (isClass) {
> + var instance = createClassComponentInstance(vNode, type, props, context);
> + var input = instance.$LI;
> + hydrateVNode(input, dom, instance.$CX, isSVG);
> + vNode.dom = input.dom;
> + mountClassComponentCallbacks(vNode, ref, instance);
> + instance.$UPD = false; // Mount finished allow going sync
> + }
> + else {
> + var input$1 = handleComponentInput(type(props, context), vNode);
> + hydrateVNode(input$1, dom, context, isSVG);
> + vNode.children = input$1;
> + vNode.dom = input$1.dom;
> + mountFunctionalComponentCallbacks(props, ref, dom);
> + }
> + }
> + function hydrateElement(vNode, dom, context, isSVG) {
> + var children = vNode.children;
> + var props = vNode.props;
> + var className = vNode.className;
> + var flags = vNode.flags;
> + var ref = vNode.ref;
> + isSVG = isSVG || (flags & 32 /* SvgElement */) > 0;
> + if (dom.nodeType !== 1 || dom.tagName.toLowerCase() !== vNode.type) {
> + var newDom = mountElement(vNode, null, context, isSVG);
> + vNode.dom = newDom;
> + replaceChild(dom.parentNode, newDom, dom);
> + }
> + else {
> + vNode.dom = dom;
> + var childNode = dom.firstChild;
> + var childFlags = vNode.childFlags;
> + if ((childFlags & 1 /* HasInvalidChildren */) === 0) {
> + var nextSibling = null;
> + while (childNode) {
> + nextSibling = childNode.nextSibling;
> + if (childNode.nodeType === 8) {
> + if (childNode.data === '!') {
> + dom.replaceChild(document.createTextNode(''), childNode);
> + }
> + else {
> + dom.removeChild(childNode);
> + }
> + }
> + childNode = nextSibling;
> + }
> + childNode = dom.firstChild;
> + if (childFlags === 2 /* HasVNodeChildren */) {
> + if (isNull(childNode)) {
> + mount(children, dom, context, isSVG);
> + }
> + else {
> + nextSibling = childNode.nextSibling;
> + hydrateVNode(children, childNode, context, isSVG);
> + childNode = nextSibling;
> + }
> + }
> + else if (childFlags & 12 /* MultipleChildren */) {
> + for (var i = 0, len = children.length; i < len; i++) {
> + var child = children[i];
> + if (isNull(childNode)) {
> + mount(child, dom, context, isSVG);
> + }
> + else {
> + nextSibling = childNode.nextSibling;
> + hydrateVNode(child, childNode, context, isSVG);
> + childNode = nextSibling;
> + }
> + }
> + }
> + // clear any other DOM nodes, there should be only a single entry for the root
> + while (childNode) {
> + nextSibling = childNode.nextSibling;
> + dom.removeChild(childNode);
> + childNode = nextSibling;
> + }
> + }
> + else if (!isNull(dom.firstChild) && !isSamePropsInnerHTML(dom, props)) {
> + dom.textContent = ''; // dom has content, but VNode has no children remove everything from DOM
> + if (flags & 448 /* FormElement */) {
> + // If element is form element, we need to clear defaultValue also
> + dom.defaultValue = '';
> + }
> + }
> + if (!isNull(props)) {
> + mountProps(vNode, flags, props, dom, isSVG);
> + }
> + if (isNullOrUndef(className)) {
> + if (dom.className !== '') {
> + dom.removeAttribute('class');
> + }
> + }
> + else if (isSVG) {
> + dom.setAttribute('class', className);
> + }
> + else {
> + dom.className = className;
> + }
> + if (isFunction(ref)) {
> + mountRef(dom, ref);
> + }
> + }
> + }
> + function hydrateText(vNode, dom) {
> + if (dom.nodeType !== 3) {
> + var newDom = mountText(vNode, null);
> + vNode.dom = newDom;
> + replaceChild(dom.parentNode, newDom, dom);
> + }
> + else {
> + var text = vNode.children;
> + if (dom.nodeValue !== text) {
> + dom.nodeValue = text;
> + }
> + vNode.dom = dom;
> + }
> + }
> + function hydrateVNode(vNode, dom, context, isSVG) {
> + var flags = vNode.flags;
> + if (flags & 14 /* Component */) {
> + hydrateComponent(vNode, dom, context, isSVG, (flags & 4 /* ComponentClass */) > 0);
> + }
> + else if (flags & 481 /* Element */) {
> + hydrateElement(vNode, dom, context, isSVG);
> + }
> + else if (flags & 16 /* Text */) {
> + hydrateText(vNode, dom);
> + }
> + else if (flags & 512 /* Void */) {
> + vNode.dom = dom;
> + }
> + else {
> + throwError();
> + }
> + }
> + function hydrate(input, parentDom, callback) {
> + var dom = parentDom.firstChild;
> + if (!isNull(dom)) {
> + if (!isInvalid(input)) {
> + hydrateVNode(input, dom, EMPTY_OBJ, false);
> + }
> + dom = parentDom.firstChild;
> + // clear any other DOM nodes, there should be only a single entry for the root
> + while ((dom = dom.nextSibling)) {
> + parentDom.removeChild(dom);
> + }
> + }
> + if (LIFECYCLE.length > 0) {
> + callAll(LIFECYCLE);
> + }
> + parentDom.$V = input;
> + if (isFunction(callback)) {
> + callback();
> + }
> + }
> +
> + function replaceWithNewNode(lastNode, nextNode, parentDom, context, isSVG) {
> + unmount(lastNode);
> + replaceChild(parentDom, mount(nextNode, null, context, isSVG), lastNode.dom);
> + }
> + function patch(lastVNode, nextVNode, parentDom, context, isSVG) {
> + if (lastVNode !== nextVNode) {
> + var nextFlags = nextVNode.flags | 0;
> + if (lastVNode.flags !== nextFlags || nextFlags & 2048 /* ReCreate */) {
> + replaceWithNewNode(lastVNode, nextVNode, parentDom, context, isSVG);
> + }
> + else if (nextFlags & 481 /* Element */) {
> + patchElement(lastVNode, nextVNode, parentDom, context, isSVG);
> + }
> + else if (nextFlags & 14 /* Component */) {
> + patchComponent(lastVNode, nextVNode, parentDom, context, isSVG, (nextFlags & 4 /* ComponentClass */) > 0);
> + }
> + else if (nextFlags & 16 /* Text */) {
> + patchText(lastVNode, nextVNode, parentDom);
> + }
> + else if (nextFlags & 512 /* Void */) {
> + nextVNode.dom = lastVNode.dom;
> + }
> + else {
> + // Portal
> + patchPortal(lastVNode, nextVNode, context);
> + }
> + }
> + }
> + function patchPortal(lastVNode, nextVNode, context) {
> + var lastContainer = lastVNode.type;
> + var nextContainer = nextVNode.type;
> + var nextChildren = nextVNode.children;
> + patchChildren(lastVNode.childFlags, nextVNode.childFlags, lastVNode.children, nextChildren, lastContainer, context, false);
> + nextVNode.dom = lastVNode.dom;
> + if (lastContainer !== nextContainer && !isInvalid(nextChildren)) {
> + var node = nextChildren.dom;
> + lastContainer.removeChild(node);
> + nextContainer.appendChild(node);
> + }
> + }
> + function patchElement(lastVNode, nextVNode, parentDom, context, isSVG) {
> + var nextTag = nextVNode.type;
> + if (lastVNode.type !== nextTag) {
> + replaceWithNewNode(lastVNode, nextVNode, parentDom, context, isSVG);
> + }
> + else {
> + var dom = lastVNode.dom;
> + var nextFlags = nextVNode.flags;
> + var lastProps = lastVNode.props;
> + var nextProps = nextVNode.props;
> + var isFormElement = false;
> + var hasControlledValue = false;
> + var nextPropsOrEmpty;
> + nextVNode.dom = dom;
> + isSVG = isSVG || (nextFlags & 32 /* SvgElement */) > 0;
> + // inlined patchProps -- starts --
> + if (lastProps !== nextProps) {
> + var lastPropsOrEmpty = lastProps || EMPTY_OBJ;
> + nextPropsOrEmpty = nextProps || EMPTY_OBJ;
> + if (nextPropsOrEmpty !== EMPTY_OBJ) {
> + isFormElement = (nextFlags & 448 /* FormElement */) > 0;
> + if (isFormElement) {
> + hasControlledValue = isControlledFormElement(nextPropsOrEmpty);
> + }
> + for (var prop in nextPropsOrEmpty) {
> + var lastValue = lastPropsOrEmpty[prop];
> + var nextValue = nextPropsOrEmpty[prop];
> + if (lastValue !== nextValue) {
> + patchProp(prop, lastValue, nextValue, dom, isSVG, hasControlledValue, lastVNode);
> + }
> + }
> + }
> + if (lastPropsOrEmpty !== EMPTY_OBJ) {
> + for (var prop$1 in lastPropsOrEmpty) {
> + // do not add a hasOwnProperty check here, it affects performance
> + if (!nextPropsOrEmpty.hasOwnProperty(prop$1) && !isNullOrUndef(lastPropsOrEmpty[prop$1])) {
> + patchProp(prop$1, lastPropsOrEmpty[prop$1], null, dom, isSVG, hasControlledValue, lastVNode);
> + }
> + }
> + }
> + }
> + var lastChildren = lastVNode.children;
> + var nextChildren = nextVNode.children;
> + var nextRef = nextVNode.ref;
> + var lastClassName = lastVNode.className;
> + var nextClassName = nextVNode.className;
> + if (lastChildren !== nextChildren) {
> + patchChildren(lastVNode.childFlags, nextVNode.childFlags, lastChildren, nextChildren, dom, context, isSVG && nextTag !== 'foreignObject');
> + }
> + if (isFormElement) {
> + processElement(nextFlags, nextVNode, dom, nextPropsOrEmpty, false, hasControlledValue);
> + }
> + // inlined patchProps -- ends --
> + if (lastClassName !== nextClassName) {
> + if (isNullOrUndef(nextClassName)) {
> + dom.removeAttribute('class');
> + }
> + else if (isSVG) {
> + dom.setAttribute('class', nextClassName);
> + }
> + else {
> + dom.className = nextClassName;
> + }
> + }
> + if (isFunction(nextRef) && lastVNode.ref !== nextRef) {
> + mountRef(dom, nextRef);
> + }
> + }
> + }
> + function patchChildren(lastChildFlags, nextChildFlags, lastChildren, nextChildren, parentDOM, context, isSVG) {
> + switch (lastChildFlags) {
> + case 2 /* HasVNodeChildren */:
> + switch (nextChildFlags) {
> + case 2 /* HasVNodeChildren */:
> + patch(lastChildren, nextChildren, parentDOM, context, isSVG);
> + break;
> + case 1 /* HasInvalidChildren */:
> + remove(lastChildren, parentDOM);
> + break;
> + default:
> + remove(lastChildren, parentDOM);
> + mountArrayChildren(nextChildren, parentDOM, context, isSVG);
> + break;
> + }
> + break;
> + case 1 /* HasInvalidChildren */:
> + switch (nextChildFlags) {
> + case 2 /* HasVNodeChildren */:
> + mount(nextChildren, parentDOM, context, isSVG);
> + break;
> + case 1 /* HasInvalidChildren */:
> + break;
> + default:
> + mountArrayChildren(nextChildren, parentDOM, context, isSVG);
> + break;
> + }
> + break;
> + default:
> + if (nextChildFlags & 12 /* MultipleChildren */) {
> + var lastLength = lastChildren.length;
> + var nextLength = nextChildren.length;
> + // Fast path's for both algorithms
> + if (lastLength === 0) {
> + if (nextLength > 0) {
> + mountArrayChildren(nextChildren, parentDOM, context, isSVG);
> + }
> + }
> + else if (nextLength === 0) {
> + removeAllChildren(parentDOM, lastChildren);
> + }
> + else if (nextChildFlags === 8 /* HasKeyedChildren */ && lastChildFlags === 8 /* HasKeyedChildren */) {
> + patchKeyedChildren(lastChildren, nextChildren, parentDOM, context, isSVG, lastLength, nextLength);
> + }
> + else {
> + patchNonKeyedChildren(lastChildren, nextChildren, parentDOM, context, isSVG, lastLength, nextLength);
> + }
> + }
> + else if (nextChildFlags === 1 /* HasInvalidChildren */) {
> + removeAllChildren(parentDOM, lastChildren);
> + }
> + else {
> + removeAllChildren(parentDOM, lastChildren);
> + mount(nextChildren, parentDOM, context, isSVG);
> + }
> + break;
> + }
> + }
> + function updateClassComponent(instance, nextState, nextVNode, nextProps, parentDom, context, isSVG, force, fromSetState) {
> + var lastState = instance.state;
> + var lastProps = instance.props;
> + nextVNode.children = instance;
> + var renderOutput;
> + if (instance.$UN) {
> + return;
> + }
> + if (lastProps !== nextProps || nextProps === EMPTY_OBJ) {
> + if (!fromSetState && isFunction(instance.componentWillReceiveProps)) {
> + instance.$BR = true;
> + instance.componentWillReceiveProps(nextProps, context);
> + // If instance component was removed during its own update do nothing...
> + if (instance.$UN) {
> + return;
> + }
> + instance.$BR = false;
> + }
> + if (instance.$PSS) {
> + nextState = combineFrom(nextState, instance.$PS);
> + instance.$PSS = false;
> + instance.$PS = null;
> + }
> + }
> + /* Update if scu is not defined, or it returns truthy value or force */
> + var hasSCU = Boolean(instance.shouldComponentUpdate);
> + if (force || !hasSCU || (hasSCU && instance.shouldComponentUpdate(nextProps, nextState, context))) {
> + if (isFunction(instance.componentWillUpdate)) {
> + instance.$BS = true;
> + instance.componentWillUpdate(nextProps, nextState, context);
> + instance.$BS = false;
> + }
> + instance.props = nextProps;
> + instance.state = nextState;
> + instance.context = context;
> + if (isFunction(options.beforeRender)) {
> + options.beforeRender(instance);
> + }
> + renderOutput = instance.render(nextProps, nextState, context);
> + if (isFunction(options.afterRender)) {
> + options.afterRender(instance);
> + }
> + var didUpdate = renderOutput !== NO_OP;
> + var childContext;
> + if (isFunction(instance.getChildContext)) {
> + childContext = instance.getChildContext();
> + }
> + if (isNullOrUndef(childContext)) {
> + childContext = context;
> + }
> + else {
> + childContext = combineFrom(context, childContext);
> + }
> + instance.$CX = childContext;
> + if (didUpdate) {
> + var lastInput = instance.$LI;
> + var nextInput = (instance.$LI = handleComponentInput(renderOutput, nextVNode));
> + patch(lastInput, nextInput, parentDom, childContext, isSVG);
> + if (isFunction(instance.componentDidUpdate)) {
> + instance.componentDidUpdate(lastProps, lastState);
> + }
> + }
> + }
> + else {
> + instance.props = nextProps;
> + instance.state = nextState;
> + instance.context = context;
> + }
> + nextVNode.dom = instance.$LI.dom;
> + }
> + function patchComponent(lastVNode, nextVNode, parentDom, context, isSVG, isClass) {
> + var nextType = nextVNode.type;
> + var lastKey = lastVNode.key;
> + var nextKey = nextVNode.key;
> + if (lastVNode.type !== nextType || lastKey !== nextKey) {
> + replaceWithNewNode(lastVNode, nextVNode, parentDom, context, isSVG);
> + }
> + else {
> + var nextProps = nextVNode.props || EMPTY_OBJ;
> + if (isClass) {
> + var instance = lastVNode.children;
> + instance.$UPD = true;
> + instance.$V = nextVNode;
> + updateClassComponent(instance, instance.state, nextVNode, nextProps, parentDom, context, isSVG, false, false);
> + instance.$UPD = false;
> + }
> + else {
> + var shouldUpdate = true;
> + var lastProps = lastVNode.props;
> + var nextHooks = nextVNode.ref;
> + var nextHooksDefined = !isNullOrUndef(nextHooks);
> + var lastInput = lastVNode.children;
> + nextVNode.dom = lastVNode.dom;
> + nextVNode.children = lastInput;
> + if (nextHooksDefined && isFunction(nextHooks.onComponentShouldUpdate)) {
> + shouldUpdate = nextHooks.onComponentShouldUpdate(lastProps, nextProps);
> + }
> + if (shouldUpdate !== false) {
> + if (nextHooksDefined && isFunction(nextHooks.onComponentWillUpdate)) {
> + nextHooks.onComponentWillUpdate(lastProps, nextProps);
> + }
> + var nextInput = nextType(nextProps, context);
> + if (nextInput !== NO_OP) {
> + nextInput = handleComponentInput(nextInput, nextVNode);
> + patch(lastInput, nextInput, parentDom, context, isSVG);
> + nextVNode.children = nextInput;
> + nextVNode.dom = nextInput.dom;
> + if (nextHooksDefined && isFunction(nextHooks.onComponentDidUpdate)) {
> + nextHooks.onComponentDidUpdate(lastProps, nextProps);
> + }
> + }
> + }
> + else if (lastInput.flags & 14 /* Component */) {
> + lastInput.parentVNode = nextVNode;
> + }
> + }
> + }
> + }
> + function patchText(lastVNode, nextVNode, parentDom) {
> + var nextText = nextVNode.children;
> + var textNode = parentDom.firstChild;
> + var dom;
> + // Guard against external change on DOM node.
> + if (isNull(textNode)) {
> + parentDom.textContent = nextText;
> + dom = parentDom.firstChild;
> + }
> + else {
> + dom = lastVNode.dom;
> + if (nextText !== lastVNode.children) {
> + dom.nodeValue = nextText;
> + }
> + }
> + nextVNode.dom = dom;
> + }
> + function patchNonKeyedChildren(lastChildren, nextChildren, dom, context, isSVG, lastChildrenLength, nextChildrenLength) {
> + var commonLength = lastChildrenLength > nextChildrenLength ? nextChildrenLength : lastChildrenLength;
> + var i = 0;
> + var nextChild;
> + var lastChild;
> + for (; i < commonLength; i++) {
> + nextChild = nextChildren[i];
> + lastChild = lastChildren[i];
> + if (nextChild.dom) {
> + nextChild = nextChildren[i] = directClone(nextChild);
> + }
> + patch(lastChild, nextChild, dom, context, isSVG);
> + lastChildren[i] = nextChild;
> + }
> + if (lastChildrenLength < nextChildrenLength) {
> + for (i = commonLength; i < nextChildrenLength; i++) {
> + nextChild = nextChildren[i];
> + if (nextChild.dom) {
> + nextChild = nextChildren[i] = directClone(nextChild);
> + }
> + mount(nextChild, dom, context, isSVG);
> + }
> + }
> + else if (lastChildrenLength > nextChildrenLength) {
> + for (i = commonLength; i < lastChildrenLength; i++) {
> + remove(lastChildren[i], dom);
> + }
> + }
> + }
> + function patchKeyedChildren(a, b, dom, context, isSVG, aLength, bLength) {
> + var aEnd = aLength - 1;
> + var bEnd = bLength - 1;
> + var i;
> + var j = 0;
> + var aNode = a[j];
> + var bNode = b[j];
> + var nextPos;
> + // Step 1
> + // tslint:disable-next-line
> + outer: {
> + // Sync nodes with the same key at the beginning.
> + while (aNode.key === bNode.key) {
> + if (bNode.dom) {
> + b[j] = bNode = directClone(bNode);
> + }
> + patch(aNode, bNode, dom, context, isSVG);
> + a[j] = bNode;
> + j++;
> + if (j > aEnd || j > bEnd) {
> + break outer;
> + }
> + aNode = a[j];
> + bNode = b[j];
> + }
> + aNode = a[aEnd];
> + bNode = b[bEnd];
> + // Sync nodes with the same key at the end.
> + while (aNode.key === bNode.key) {
> + if (bNode.dom) {
> + b[bEnd] = bNode = directClone(bNode);
> + }
> + patch(aNode, bNode, dom, context, isSVG);
> + a[aEnd] = bNode;
> + aEnd--;
> + bEnd--;
> + if (j > aEnd || j > bEnd) {
> + break outer;
> + }
> + aNode = a[aEnd];
> + bNode = b[bEnd];
> + }
> + }
> + if (j > aEnd) {
> + if (j <= bEnd) {
> + nextPos = bEnd + 1;
> + var nextNode = nextPos < bLength ? b[nextPos].dom : null;
> + while (j <= bEnd) {
> + bNode = b[j];
> + if (bNode.dom) {
> + b[j] = bNode = directClone(bNode);
> + }
> + j++;
> + insertOrAppend(dom, mount(bNode, null, context, isSVG), nextNode);
> + }
> + }
> + }
> + else if (j > bEnd) {
> + while (j <= aEnd) {
> + remove(a[j++], dom);
> + }
> + }
> + else {
> + var aStart = j;
> + var bStart = j;
> + var aLeft = aEnd - j + 1;
> + var bLeft = bEnd - j + 1;
> + var sources = [];
> + for (i = 0; i < bLeft; i++) {
> + sources.push(0);
> + }
> + // Keep track if its possible to remove whole DOM using textContent = '';
> + var canRemoveWholeContent = aLeft === aLength;
> + var moved = false;
> + var pos = 0;
> + var patched = 0;
> + // When sizes are small, just loop them through
> + if (bLength < 4 || (aLeft | bLeft) < 32) {
> + for (i = aStart; i <= aEnd; i++) {
> + aNode = a[i];
> + if (patched < bLeft) {
> + for (j = bStart; j <= bEnd; j++) {
> + bNode = b[j];
> + if (aNode.key === bNode.key) {
> + sources[j - bStart] = i + 1;
> + if (canRemoveWholeContent) {
> + canRemoveWholeContent = false;
> + while (i > aStart) {
> + remove(a[aStart++], dom);
> + }
> + }
> + if (pos > j) {
> + moved = true;
> + }
> + else {
> + pos = j;
> + }
> + if (bNode.dom) {
> + b[j] = bNode = directClone(bNode);
> + }
> + patch(aNode, bNode, dom, context, isSVG);
> + patched++;
> + break;
> + }
> + }
> + if (!canRemoveWholeContent && j > bEnd) {
> + remove(aNode, dom);
> + }
> + }
> + else if (!canRemoveWholeContent) {
> + remove(aNode, dom);
> + }
> + }
> + }
> + else {
> + var keyIndex = {};
> + // Map keys by their index
> + for (i = bStart; i <= bEnd; i++) {
> + keyIndex[b[i].key] = i;
> + }
> + // Try to patch same keys
> + for (i = aStart; i <= aEnd; i++) {
> + aNode = a[i];
> + if (patched < bLeft) {
> + j = keyIndex[aNode.key];
> + if (j !== void 0) {
> + if (canRemoveWholeContent) {
> + canRemoveWholeContent = false;
> + while (i > aStart) {
> + remove(a[aStart++], dom);
> + }
> + }
> + bNode = b[j];
> + sources[j - bStart] = i + 1;
> + if (pos > j) {
> + moved = true;
> + }
> + else {
> + pos = j;
> + }
> + if (bNode.dom) {
> + b[j] = bNode = directClone(bNode);
> + }
> + patch(aNode, bNode, dom, context, isSVG);
> + patched++;
> + }
> + else if (!canRemoveWholeContent) {
> + remove(aNode, dom);
> + }
> + }
> + else if (!canRemoveWholeContent) {
> + remove(aNode, dom);
> + }
> + }
> + }
> + // fast-path: if nothing patched remove all old and add all new
> + if (canRemoveWholeContent) {
> + removeAllChildren(dom, a);
> + mountArrayChildren(b, dom, context, isSVG);
> + }
> + else {
> + if (moved) {
> + var seq = lis_algorithm(sources);
> + j = seq.length - 1;
> + for (i = bLeft - 1; i >= 0; i--) {
> + if (sources[i] === 0) {
> + pos = i + bStart;
> + bNode = b[pos];
> + if (bNode.dom) {
> + b[pos] = bNode = directClone(bNode);
> + }
> + nextPos = pos + 1;
> + insertOrAppend(dom, mount(bNode, null, context, isSVG), nextPos < bLength ? b[nextPos].dom : null);
> + }
> + else if (j < 0 || i !== seq[j]) {
> + pos = i + bStart;
> + bNode = b[pos];
> + nextPos = pos + 1;
> + insertOrAppend(dom, bNode.dom, nextPos < bLength ? b[nextPos].dom : null);
> + }
> + else {
> + j--;
> + }
> + }
> + }
> + else if (patched !== bLeft) {
> + // when patched count doesn't match b length we need to insert those new ones
> + // loop backwards so we can use insertBefore
> + for (i = bLeft - 1; i >= 0; i--) {
> + if (sources[i] === 0) {
> + pos = i + bStart;
> + bNode = b[pos];
> + if (bNode.dom) {
> + b[pos] = bNode = directClone(bNode);
> + }
> + nextPos = pos + 1;
> + insertOrAppend(dom, mount(bNode, null, context, isSVG), nextPos < bLength ? b[nextPos].dom : null);
> + }
> + }
> + }
> + }
> + }
> + }
> + // https://en.wikipedia.org/wiki/Longest_increasing_subsequence
> + function lis_algorithm(arr) {
> + var p = arr.slice();
> + var result = [0];
> + var i;
> + var j;
> + var u;
> + var v;
> + var c;
> + var len = arr.length;
> + for (i = 0; i < len; i++) {
> + var arrI = arr[i];
> + if (arrI !== 0) {
> + j = result[result.length - 1];
> + if (arr[j] < arrI) {
> + p[i] = j;
> + result.push(i);
> + continue;
> + }
> + u = 0;
> + v = result.length - 1;
> + while (u < v) {
> + c = ((u + v) / 2) | 0;
> + if (arr[result[c]] < arrI) {
> + u = c + 1;
> + }
> + else {
> + v = c;
> + }
> + }
> + if (arrI < arr[result[u]]) {
> + if (u > 0) {
> + p[i] = result[u - 1];
> + }
> + result[u] = i;
> + }
> + }
> + }
> + u = result.length;
> + v = result[u - 1];
> + while (u-- > 0) {
> + result[u] = v;
> + v = p[v];
> + }
> + return result;
> + }
> +
> + var documentBody = isBrowser ? document.body : null;
> + function render(input, parentDom, callback) {
> + if (input === NO_OP) {
> + return;
> + }
> + var rootInput = parentDom.$V;
> + if (isNullOrUndef(rootInput)) {
> + if (!isInvalid(input)) {
> + if (input.dom) {
> + input = directClone(input);
> + }
> + if (isNull(parentDom.firstChild)) {
> + mount(input, parentDom, EMPTY_OBJ, false);
> + parentDom.$V = input;
> + }
> + else {
> + hydrate(input, parentDom);
> + }
> + rootInput = input;
> + }
> + }
> + else {
> + if (isNullOrUndef(input)) {
> + remove(rootInput, parentDom);
> + parentDom.$V = null;
> + }
> + else {
> + if (input.dom) {
> + input = directClone(input);
> + }
> + patch(rootInput, input, parentDom, EMPTY_OBJ, false);
> + rootInput = parentDom.$V = input;
> + }
> + }
> + if (LIFECYCLE.length > 0) {
> + callAll(LIFECYCLE);
> + }
> + if (isFunction(callback)) {
> + callback();
> + }
> + if (isFunction(options.renderComplete)) {
> + options.renderComplete(rootInput);
> + }
> + if (rootInput && rootInput.flags & 14 /* Component */) {
> + return rootInput.children;
> + }
> + }
> +
> + var resolvedPromise = typeof Promise === 'undefined' ? null : Promise.resolve();
> + // raf.bind(window) is needed to work around bug in IE10-IE11 strict mode (TypeError: Invalid calling object)
> + var fallbackMethod = typeof requestAnimationFrame === 'undefined' ? setTimeout : requestAnimationFrame.bind(window);
> + function nextTick(fn) {
> + if (resolvedPromise) {
> + return resolvedPromise.then(fn);
> + }
> + return fallbackMethod(fn);
> + }
> + function queueStateChanges(component, newState, callback, force) {
> + if (isFunction(newState)) {
> + newState = newState(component.state, component.props, component.context);
> + }
> + var pending = component.$PS;
> + if (isNullOrUndef(pending)) {
> + component.$PS = newState;
> + }
> + else {
> + for (var stateKey in newState) {
> + pending[stateKey] = newState[stateKey];
> + }
> + }
> + if (!component.$PSS && !component.$BR) {
> + if (!component.$UPD) {
> + component.$PSS = true;
> + component.$UPD = true;
> + applyState(component, force, callback);
> + component.$UPD = false;
> + }
> + else {
> + // Async
> + var queue = component.$QU;
> + if (isNull(queue)) {
> + queue = component.$QU = [];
> + nextTick(promiseCallback(component, queue));
> + }
> + if (isFunction(callback)) {
> + queue.push(callback);
> + }
> + }
> + }
> + else {
> + component.$PSS = true;
> + if (component.$BR && isFunction(callback)) {
> + LIFECYCLE.push(callback.bind(component));
> + }
> + }
> + }
> + function promiseCallback(component, queue) {
> + return function () {
> + component.$QU = null;
> + component.$UPD = true;
> + applyState(component, false, function () {
> + for (var i = 0, len = queue.length; i < len; i++) {
> + queue[i].call(component);
> + }
> + });
> + component.$UPD = false;
> + };
> + }
> + function applyState(component, force, callback) {
> + if (component.$UN) {
> + return;
> + }
> + if (force || !component.$BR) {
> + component.$PSS = false;
> + var pendingState = component.$PS;
> + var prevState = component.state;
> + var nextState = combineFrom(prevState, pendingState);
> + var props = component.props;
> + var context = component.context;
> + component.$PS = null;
> + var vNode = component.$V;
> + var lastInput = component.$LI;
> + var parentDom = lastInput.dom && lastInput.dom.parentNode;
> + updateClassComponent(component, nextState, vNode, props, parentDom, context, (vNode.flags & 32 /* SvgElement */) > 0, force, true);
> + if (component.$UN) {
> + return;
> + }
> + if ((component.$LI.flags & 1024 /* Portal */) === 0) {
> + var dom = component.$LI.dom;
> + while (!isNull((vNode = vNode.parentVNode))) {
> + if ((vNode.flags & 14 /* Component */) > 0) {
> + vNode.dom = dom;
> + }
> + }
> + }
> + if (LIFECYCLE.length > 0) {
> + callAll(LIFECYCLE);
> + }
> + }
> + else {
> + component.state = component.$PS;
> + component.$PS = null;
> + }
> + if (isFunction(callback)) {
> + callback.call(component);
> + }
> + }
> + var Component = function Component(props, context) {
> + this.state = null;
> + // Internal properties
> + this.$BR = false; // BLOCK RENDER
> + this.$BS = true; // BLOCK STATE
> + this.$PSS = false; // PENDING SET STATE
> + this.$PS = null; // PENDING STATE (PARTIAL or FULL)
> + this.$LI = null; // LAST INPUT
> + this.$V = null; // VNODE
> + this.$UN = false; // UNMOUNTED
> + this.$CX = null; // CHILDCONTEXT
> + this.$UPD = true; // UPDATING
> + this.$QU = null; // QUEUE
> + /** @type {object} */
> + this.props = props || EMPTY_OBJ;
> + /** @type {object} */
> + this.context = context || EMPTY_OBJ; // context should not be mutable
> + };
> + Component.prototype.forceUpdate = function forceUpdate (callback) {
> + if (this.$UN) {
> + return;
> + }
> + // Do not allow double render during force update
> + queueStateChanges(this, {}, callback, true);
> + };
> + Component.prototype.setState = function setState (newState, callback) {
> + if (this.$UN) {
> + return;
> + }
> + if (!this.$BS) {
> + queueStateChanges(this, newState, callback, false);
> + }
> + else {
> + return;
> + }
> + };
> + // tslint:disable-next-line:no-empty
> + Component.prototype.render = function render (nextProps, nextState, nextContext) { };
> +
> +
> +
> + var JSX = /*#__PURE__*/Object.freeze({
> +
> + });
> +
> + var ENTER = 12;
> + var LEFT_ARROW = 37;
> + var UP_ARROW = 38;
> + var RIGHT_ARROW = 39;
> + var DOWN_ARROW = 40;
> +
> + /**
> + * Helper method to create an object for a new node.
> + *
> + * @private
> + * @return {void}
> + */
> + function blankNode() {
> + return {
> + text: 'New Node',
> + itree: {
> + state: {
> + editing: true,
> + focused: true
> + }
> + }
> + };
> + }
> +
> + var classCallCheck = function (instance, Constructor) {
> + if (!(instance instanceof Constructor)) {
> + throw new TypeError("Cannot call a class as a function");
> + }
> + };
> +
> + var createClass = function () {
> + function defineProperties(target, props) {
> + for (var i = 0; i < props.length; i++) {
> + var descriptor = props[i];
> + descriptor.enumerable = descriptor.enumerable || false;
> + descriptor.configurable = true;
> + if ("value" in descriptor) descriptor.writable = true;
> + Object.defineProperty(target, descriptor.key, descriptor);
> + }
> + }
> +
> + return function (Constructor, protoProps, staticProps) {
> + if (protoProps) defineProperties(Constructor.prototype, protoProps);
> + if (staticProps) defineProperties(Constructor, staticProps);
> + return Constructor;
> + };
> + }();
> +
> + var _extends = Object.assign || function (target) {
> + for (var i = 1; i < arguments.length; i++) {
> + var source = arguments[i];
> +
> + for (var key in source) {
> + if (Object.prototype.hasOwnProperty.call(source, key)) {
> + target[key] = source[key];
> + }
> + }
> + }
> +
> + return target;
> + };
> +
> + var inherits = function (subClass, superClass) {
> + if (typeof superClass !== "function" && superClass !== null) {
> + throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
> + }
> +
> + subClass.prototype = Object.create(superClass && superClass.prototype, {
> + constructor: {
> + value: subClass,
> + enumerable: false,
> + writable: true,
> + configurable: true
> + }
> + });
> + if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
> + };
> +
> + var possibleConstructorReturn = function (self, call) {
> + if (!self) {
> + throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
> + }
> +
> + return call && (typeof call === "object" || typeof call === "function") ? call : self;
> + };
> +
> + var Checkbox = function (_Component) {
> + inherits(Checkbox, _Component);
> +
> + function Checkbox() {
> + classCallCheck(this, Checkbox);
> + return possibleConstructorReturn(this, (Checkbox.__proto__ || Object.getPrototypeOf(Checkbox)).apply(this, arguments));
> + }
> +
> + createClass(Checkbox, [{
> + key: 'click',
> + value: function click(event) {
> + var _this2 = this;
> +
> + // Define our default handler
> + var handler = function handler() {
> + _this2.props.node.toggleCheck();
> + };
> +
> + // Emit an event with our forwarded MouseEvent, node, and default handler
> + this.props.dom._tree.emit('node.click', event, this.props.node, handler);
> +
> + // Unless default is prevented, auto call our default handler
> + if (!event.treeDefaultPrevented) {
> + handler();
> + }
> + }
> + }, {
> + key: 'render',
> + value: function render$$1() {
> + return createVNode(64, 'input', null, null, 1, {
> + 'checked': this.props.checked,
> + 'indeterminate': this.props.indeterminate,
> + 'onClick': this.click.bind(this),
> + 'type': 'checkbox'
> + });
> + }
> + }]);
> + return Checkbox;
> + }(Component);
> +
> + /**
> + * Utility method for parsing and merging custom class names.
> + *
> + * @private
> + * @param {TreeNode} node Node object.
> + * @param {string} type 'li' or 'a' attribute object type.
> + * @return {Array} Processed class names
> + */
> + var classlist = (function (node) {
> + var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'li';
> +
> + var nodeAttrs = node.itree[type].attributes;
> + var classNames = [];
> +
> + // Append any custom class names
> + var customClasses = nodeAttrs.class || nodeAttrs.className;
> +
> + // Support callbacks
> + if (_.isFunction(customClasses)) {
> + customClasses = customClasses(node);
> + }
> +
> + // Convert custom classes into an array and concat
> + if (!_.isEmpty(customClasses)) {
> + if (_.isString(customClasses)) {
> + // Support periods for backwards compat with hyperscript-formatted classes
> + classNames = classNames.concat(customClasses.split(/[\s\.]+/));
> + } else if (_.isArray(customClasses)) {
> + classNames = classNames.concat(customClasses);
> + }
> + }
> +
> + return classNames;
> + });
> +
> + var EditToolbar = function (_Component) {
> + inherits(EditToolbar, _Component);
> +
> + function EditToolbar() {
> + classCallCheck(this, EditToolbar);
> + return possibleConstructorReturn(this, (EditToolbar.__proto__ || Object.getPrototypeOf(EditToolbar)).apply(this, arguments));
> + }
> +
> + createClass(EditToolbar, [{
> + key: 'shouldComponentUpdate',
> + value: function shouldComponentUpdate() {
> + return false;
> + }
> + }, {
> + key: 'add',
> + value: function add(event) {
> + event.stopPropagation();
> +
> + this.props.node.addChild(blankNode());
> + this.props.node.expand();
> + }
> + }, {
> + key: 'edit',
> + value: function edit(event) {
> + event.stopPropagation();
> +
> + this.props.node.toggleEditing();
> + }
> + }, {
> + key: 'remove',
> + value: function remove(event) {
> + event.stopPropagation();
> +
> + this.props.node.remove();
> + }
> + }, {
> + key: 'render',
> + value: function render$$1() {
> + var buttons = [];
> +
> + if (this.props.dom._tree.config.editing.edit) {
> + buttons.push(createVNode(1, 'a', 'btn icon icon-pencil', null, 1, {
> + 'onclick': this.edit.bind(this),
> + 'title': 'Edit this node'
> + }));
> + }
> +
> + if (this.props.dom._tree.config.editing.add) {
> + buttons.push(createVNode(1, 'a', 'btn icon icon-plus', null, 1, {
> + 'onclick': this.add.bind(this),
> + 'title': 'Add a child node'
> + }));
> + }
> +
> + if (this.props.dom._tree.config.editing.remove) {
> + buttons.push(createVNode(1, 'a', 'btn icon icon-minus', null, 1, {
> + 'onclick': this.remove.bind(this),
> + 'title': 'Remove this node'
> + }));
> + }
> +
> + return createVNode(1, 'span', 'btn-group', buttons, 0);
> + }
> + }]);
> + return EditToolbar;
> + }(Component);
> +
> + var EmptyList = function (_Component) {
> + inherits(EmptyList, _Component);
> +
> + function EmptyList() {
> + classCallCheck(this, EmptyList);
> + return possibleConstructorReturn(this, (EmptyList.__proto__ || Object.getPrototypeOf(EmptyList)).apply(this, arguments));
> + }
> +
> + createClass(EmptyList, [{
> + key: 'render',
> + value: function render$$1() {
> + return createVNode(1, 'ol', null, createVNode(1, 'li', 'leaf', createVNode(1, 'span', 'title icon icon-file-empty empty', this.props.text, 0), 2), 2);
> + }
> + }]);
> + return EmptyList;
> + }(Component);
> +
> + /**
> + * Compares all keys on the given state. Returns true if any difference exists.
> + *
> + * @private
> + * @category DOM
> + * @param {object} previousState Previous state.
> + * @param {object} currentState Current state.
> + * @return {boolean} Difference was found.
> + */
> + function stateComparator(previousState, currentState) {
> + // Always treat dirty flag as a state difference
> + var isDirty = currentState.dirty || false;
> +
> + if (!isDirty) {
> + _.each(Object.keys(currentState), function (key) {
> + if (key !== 'dirty' && currentState[key] !== previousState[key]) {
> + isDirty = true;
> + return false;
> + }
> + });
> + }
> +
> + return isDirty;
> + }
> +
> + var EditForm = function (_Component) {
> + inherits(EditForm, _Component);
> +
> + function EditForm(props) {
> + classCallCheck(this, EditForm);
> +
> + var _this = possibleConstructorReturn(this, (EditForm.__proto__ || Object.getPrototypeOf(EditForm)).call(this, props));
> +
> + _this.state = _this.getStateFromNodes(props.node);
> + return _this;
> + }
> +
> + createClass(EditForm, [{
> + key: 'getStateFromNodes',
> + value: function getStateFromNodes(node) {
> + return {
> + text: node.text
> + };
> + }
> + }, {
> + key: 'componentWillReceiveProps',
> + value: function componentWillReceiveProps(data) {
> + this.setState(this.getStateFromNodes(data.node));
> + }
> + }, {
> + key: 'shouldComponentUpdate',
> + value: function shouldComponentUpdate(nextProps, nextState) {
> + return stateComparator(this.state, nextState);
> + }
> + }, {
> + key: 'click',
> + value: function click(event) {
> + var _this2 = this;
> +
> + // Define our default handler
> + var handler = function handler() {
> + _this2.props.node.toggleCheck();
> + };
> +
> + // Emit an event with our forwarded MouseEvent, node, and default handler
> + this.props.dom._tree.emit('node.click', event, this.props.node, handler);
> +
> + // Unless default is prevented, auto call our default handler
> + if (!event.treeDefaultPrevented) {
> + handler();
> + }
> + }
> + }, {
> + key: 'keypress',
> + value: function keypress(event) {
> + if (event.which === ENTER) {
> + return this.save();
> + }
> + }
> + }, {
> + key: 'input',
> + value: function input(event) {
> + this.setState({
> + text: event.target.value
> + });
> + }
> + }, {
> + key: 'cancel',
> + value: function cancel(event) {
> + if (event) {
> + event.stopPropagation();
> + }
> +
> + this.props.node.toggleEditing();
> + }
> + }, {
> + key: 'save',
> + value: function save(event) {
> + if (event) {
> + event.stopPropagation();
> + }
> +
> + // Cache current text
> + var originalText = this.props.node.text;
> + var newText = this.ref.value;
> +
> + // Update the text
> + this.props.node.set('text', newText);
> +
> + // Disable editing and update
> + this.props.node.state('editing', false);
> + this.props.node.markDirty();
> + this.props.dom._tree.applyChanges();
> +
> + if (originalText !== newText) {
> + this.props.dom._tree.emit('node.edited', this.props.node, originalText, newText);
> + }
> + }
> + }, {
> + key: 'render',
> + value: function render$$1() {
> + var _this3 = this;
> +
> + return createVNode(1, 'form', null, [createVNode(64, 'input', null, null, 1, {
> + 'onClick': function onClick(event) {
> + return event.stopPropagation;
> + },
> + 'onInput': this.input.bind(this),
> + 'onKeyPress': this.keypress.bind(this),
> + 'value': this.state.text
> + }, null, function (elem) {
> + return _this3.ref = elem;
> + }), createVNode(1, 'span', 'btn-group', [createVNode(1, 'button', 'btn icon icon-check', null, 1, {
> + 'onClick': this.save.bind(this),
> + 'title': 'Save',
> + 'type': 'button'
> + }), createVNode(1, 'button', 'btn icon icon-cross', null, 1, {
> + 'onClick': this.cancel.bind(this),
> + 'title': 'Cancel',
> + 'type': 'button'
> + })], 4)], 4, {
> + 'onsubmit': function onsubmit(event) {
> + return event.preventDefault;
> + }
> + });
> + }
> + }]);
> + return EditForm;
> + }(Component);
> +
> + var NodeAnchor = function (_Component) {
> + inherits(NodeAnchor, _Component);
> +
> + function NodeAnchor() {
> + classCallCheck(this, NodeAnchor);
> + return possibleConstructorReturn(this, (NodeAnchor.__proto__ || Object.getPrototypeOf(NodeAnchor)).apply(this, arguments));
> + }
> +
> + createClass(NodeAnchor, [{
> + key: 'blur',
> + value: function blur() {
> + this.props.node.blur();
> + }
> + }, {
> + key: 'click',
> + value: function click(event) {
> + var _this2 = this;
> +
> + var _props = this.props,
> + node = _props.node,
> + dom = _props.dom;
> +
> + // Define our default handler
> +
> + var handler = function handler() {
> + event.preventDefault();
> +
> + if (_this2.props.editing) {
> + return;
> + }
> +
> + if (event.metaKey || event.ctrlKey || event.shiftKey) {
> + dom._tree.disableDeselection();
> + }
> +
> + if (event.shiftKey) {
> + dom.clearSelection();
> +
> + var selected = dom._tree.lastSelectedNode();
> + if (selected) {
> + dom._tree.selectBetween.apply(dom._tree, dom._tree.boundingNodes(selected, node));
> + }
> + }
> +
> + if (node.selected()) {
> + if (!dom._tree.config.selection.disableDirectDeselection) {
> + node.deselect();
> + }
> + } else {
> + node.select();
> + }
> +
> + dom._tree.enableDeselection();
> + };
> +
> + // Emit an event with our forwarded MouseEvent, node, and default handler
> + dom._tree.emit('node.click', event, node, handler);
> +
> + // Unless default is prevented, auto call our default handler
> + if (!event.treeDefaultPrevented) {
> + handler();
> + }
> + }
> + }, {
> + key: 'contextMenu',
> + value: function contextMenu(event) {
> + var _props2 = this.props,
> + node = _props2.node,
> + dom = _props2.dom;
> +
> +
> + dom._tree.emit('node.contextmenu', event, node);
> + }
> + }, {
> + key: 'dblclick',
> + value: function dblclick(event) {
> + var _props3 = this.props,
> + node = _props3.node,
> + dom = _props3.dom;
> +
> + // Define our default handler
> +
> + var handler = function handler() {
> + // Clear text selection which occurs on double click
> + dom.clearSelection();
> +
> + node.toggleCollapse();
> + };
> +
> + // Emit an event with our forwarded MouseEvent, node, and default handler
> + dom._tree.emit('node.dblclick', event, node, handler);
> +
> + // Unless default is prevented, auto call our default handler
> + if (!event.treeDefaultPrevented) {
> + handler();
> + }
> + }
> + }, {
> + key: 'focus',
> + value: function focus(event) {
> + this.props.node.focus(event);
> + }
> + }, {
> + key: 'mousedown',
> + value: function mousedown() {
> + if (this.props.dom.isDragDropEnabled) {
> + this.props.dom.isMouseHeld = true;
> + }
> + }
> + }, {
> + key: 'render',
> + value: function render$$1() {
> + var node = this.props.node;
> + var attributes = _.clone(node.itree.a.attributes) || {};
> + attributes.tabindex = 1;
> + attributes.unselectable = 'on';
> +
> + // Build and set classnames
> + var classNames = classlist(node, 'a').concat(['title', 'icon']);
> +
> + // Royale - Allow icon + checkbox
> + //if (!this.props.dom.config.showCheckboxes) {
> + var folder = this.props.expanded ? 'icon-folder-open' : 'icon-folder';
> + classNames.push(node.itree.icon || (this.props.hasOrWillHaveChildren ? folder : 'icon-file-empty'));
> + //}
> +
> + attributes.class = attributes.className = classNames.join(' ');
> +
> + var content = node.text;
> + if (node.editing()) {
> + content = createComponentVNode(2, EditForm, {
> + 'dom': this.props.dom,
> + 'node': this.props.node
> + });
> + }
> +
> + return normalizeProps(createVNode(1, 'a', null, content, 0, _extends({
> + 'data-uid': node.id,
> + 'onBlur': this.blur.bind(this),
> + 'onClick': this.click.bind(this),
> + 'onContextMenu': this.contextMenu.bind(this),
> + 'onDblClick': this.dblclick.bind(this),
> + 'onFocus': this.focus.bind(this),
> + 'onMouseDown': this.mousedown.bind(this)
> + }, attributes)));
> + }
> + }]);
> + return NodeAnchor;
> + }(Component);
> +
> + var ToggleAnchor = function (_Component) {
> + inherits(ToggleAnchor, _Component);
> +
> + function ToggleAnchor() {
> + classCallCheck(this, ToggleAnchor);
> + return possibleConstructorReturn(this, (ToggleAnchor.__proto__ || Object.getPrototypeOf(ToggleAnchor)).apply(this, arguments));
> + }
> +
> + createClass(ToggleAnchor, [{
> + key: 'className',
> + value: function className() {
> + return 'toggle icon ' + (this.props.collapsed ? 'icon-expand' : 'icon-collapse');
> + }
> + }, {
> + key: 'render',
> + value: function render$$1() {
> + return createVNode(1, 'a', this.className(), null, 1, {
> + 'onClick': this.props.node.toggleCollapse.bind(this.props.node)
> + });
> + }
> + }]);
> + return ToggleAnchor;
> + }(Component);
> +
> + var ListItem = function (_Component) {
> + inherits(ListItem, _Component);
> +
> + function ListItem(props) {
> + classCallCheck(this, ListItem);
> +
> + var _this = possibleConstructorReturn(this, (ListItem.__proto__ || Object.getPrototypeOf(ListItem)).call(this, props));
> +
> + _this.state = _this.stateFromNode(props.node);
> + return _this;
> + }
> +
> + createClass(ListItem, [{
> + key: 'stateFromNode',
> + value: function stateFromNode(node) {
> + return {
> + dirty: node.itree.dirty
> + };
> + }
> + }, {
> + key: 'componentWillReceiveProps',
> + value: function componentWillReceiveProps(data) {
> + this.setState(this.stateFromNode(data.node));
> + }
> + }, {
> + key: 'shouldComponentUpdate',
> + value: function shouldComponentUpdate(nextProps, nextState) {
> + return nextState.dirty;
> + }
> + }, {
> + key: 'getAttributes',
> + value: function getAttributes() {
> + var node = this.props.node;
> + var attributes = _.clone(node.itree.li.attributes) || {};
> + attributes.class = attributes.className = this.getClassNames();
> +
> + // Force internal-use attributes
> + attributes['data-uid'] = node.id;
> +
> + // Allow drag and drop?
> + if (this.props.dom.config.dragAndDrop.enabled) {
> + attributes.draggable = node.state('draggable');
> + attributes.onDragEnd = this.onDragEnd.bind(this);
> + attributes.onDragEnter = this.onDragEnter.bind(this);
> + attributes.onDragLeave = this.onDragLeave.bind(this);
> + attributes.onDragStart = this.onDragStart.bind(this);
> +
> + // Are we a valid drop target?
> + if (node.state('drop-target')) {
> + attributes.onDragOver = this.onDragOver.bind(this);
> + attributes.onDrop = this.onDrop.bind(this);
> + } else {
> + // Setting to null forces removal of prior listeners
> + attributes.onDragOver = null;
> + attributes.onDrop = null;
> + }
> + }
> +
> + return attributes;
> + }
> + }, {
> + key: 'getClassNames',
> + value: function getClassNames() {
> + var node = this.props.node;
> + var state = node.itree.state;
> +
> + // Set state classnames
> + var classNames = classlist(node);
> +
> + // https://jsperf.com/object-keys-vs-each
> + _.each(Object.keys(state), function (key) {
> + if (state[key]) {
> + classNames.push(key);
> + }
> + });
> +
> + // Inverse and additional classes
> + if (!node.hidden() && node.removed()) {
> + classNames.push('hidden');
> + }
> +
> + if (node.expanded()) {
> + classNames.push('expanded');
> + }
> +
> + classNames.push(node.hasOrWillHaveChildren() ? 'folder' : 'leaf');
> +
> + return classNames.join(' ');
> + }
> + }, {
> + key: 'getTargetDirection',
> + value: function getTargetDirection(event, elem) {
> + var clientY = event.clientY;
> + var targetRect = elem.getBoundingClientRect();
> +
> + var yThresholdForAbove = targetRect.top + targetRect.height / 3;
> + var yThresholdForBelow = targetRect.bottom - targetRect.height / 3;
> +
> + var dir = 0;
> +
> + if (clientY <= yThresholdForAbove) {
> + dir = -1;
> + } else if (clientY >= yThresholdForBelow) {
> + dir = 1;
> + }
> +
> + return dir;
> + }
> + }, {
> + key: 'onDragStart',
> + value: function onDragStart(event) {
> + event.stopPropagation();
> +
> + event.dataTransfer.effectAllowed = 'move';
> + event.dataTransfer.dropEffect = 'move';
> +
> + var node = this.props.node;
> +
> + // Due to "protected" mode we can't access any DataTransfer data
> + // during the dragover event, yet we still need to validate this node with the target
> + this.props.dom._activeDragNode = node;
> +
> + event.dataTransfer.setData('treeId', node.tree().id);
> + event.dataTransfer.setData('nodeId', node.id);
> +
> + // Disable self and children as drop targets
> + node.state('drop-target', false);
> +
> + if (node.hasChildren()) {
> + node.children.stateDeep('drop-target', false);
> + }
> +
> + // If we should validate all nodes as potential drop targets on drag start
> + if (this.props.dom.config.dragAndDrop.validateOn === 'dragstart') {
> + var validator = this.props.dom.config.dragAndDrop.validate;
> + var validateCallable = _.isFunction(validator);
> +
> + // Validate with a custom recursor because a return of "false"
> + // should mean "do not descend" rather than "stop iterating"
> + var recursor = function recursor(obj, iteratee) {
> + if (InspireTree.isTreeNodes(obj)) {
> + _.each(obj, function (n) {
> + recursor(n, iteratee);
> + });
> + } else if (InspireTree.isTreeNode(obj)) {
> + if (iteratee(obj) !== false && obj.hasChildren()) {
> + recursor(obj.children, iteratee);
> + }
> + }
> + };
> +
> + this.props.dom._tree.batch();
> +
> + recursor(this.props.dom._tree.model, function (n) {
> + var valid = n.id !== node.id;
> +
> + // Ensure target node isn't a descendant
> + if (valid) {
> + valid = !n.hasAncestor(node);
> + }
> +
> + // If still valid and user has additional validation...
> + if (valid && validateCallable) {
> + valid = validator(node, n);
> + }
> +
> + // Set state
> + n.state('drop-target', valid);
> +
> + return valid;
> + });
> +
> + this.props.dom._tree.end();
> + }
> +
> + this.props.dom._tree.emit('node.dragstart', event);
> + }
> + }, {
> + key: 'onDragEnd',
> + value: function onDragEnd(event) {
> + event.preventDefault();
> + event.stopPropagation();
> +
> + this.unhighlightTarget();
> +
> + this.props.dom._tree.emit('node.dragend', event);
> + }
> + }, {
> + key: 'onDragEnter',
> + value: function onDragEnter(event) {
> + event.preventDefault();
> + event.stopPropagation();
> +
> + // Nodes already within parents don't trigger enter/leave events on their ancestors
> + this.props.node.recurseUp(this.unhighlightTarget);
> +
> + // Set drag target state
> + this.props.node.state('drag-targeting', true);
> +
> + this.props.dom._tree.emit('node.dragenter', event);
> + }
> + }, {
> + key: 'onDragLeave',
> + value: function onDragLeave(event) {
> + event.preventDefault();
> + event.stopPropagation();
> +
> + this.unhighlightTarget();
> +
> + this.props.dom._tree.emit('node.dragleave', event);
> + }
> + }, {
> + key: 'onDragOver',
> + value: function onDragOver(event) {
> + event.preventDefault();
> + event.stopPropagation();
> +
> + var dragNode = this.props.dom._activeDragNode;
> + var node = this.props.node;
> +
> + // Event.target doesn't always match the element we need to calculate
> + var dir = this.getTargetDirection(event, node.itree.ref.querySelector('a'));
> +
> + if (this.props.dom.config.dragAndDrop.validateOn === 'dragover') {
> + // Validate drop target
> + var validator = this.props.dom.config.dragAndDrop.validate;
> + var validateCallable = _.isFunction(validator);
> +
> + var valid = dragNode.id !== node.id;
> +
> + if (valid) {
> + valid = !node.hasAncestor(dragNode);
> + }
> +
> + if (valid && validateCallable) {
> + valid = validator(dragNode, node, dir);
> + }
> +
> + // Set state
> + node.state('drop-target', valid);
> + this.props.dom._tree.applyChanges();
> +
> + if (!valid) {
> + return;
> + }
> + }
> +
> + // Set drag target states
> + this.props.dom._tree.batch();
> + node.state('drag-targeting', true);
> + node.state('drag-targeting-above', dir === -1);
> + node.state('drag-targeting-below', dir === 1);
> + node.state('drag-targeting-insert', dir === 0);
> + this.props.dom._tree.end();
> +
> + this.props.dom._tree.emit('node.dragover', event, dir);
> + }
> + }, {
> + key: 'onDrop',
> + value: function onDrop(event) {
> + event.preventDefault();
> + event.stopPropagation();
> +
> + // Always unhighlight target
> + this.unhighlightTarget();
> +
> + // Get the data from our transfer
> + var treeId = event.dataTransfer.getData('treeId');
> + var nodeId = event.dataTransfer.getData('nodeId');
> +
> + // Find the drop target
> + var targetNode = this.props.node;
> +
> + // Clear cache
> + this.props.dom._activeDragNode = null;
> +
> + // Determine the insert direction (calc before removing source node, which modifies the DOM)
> + var dir = this.getTargetDirection(event, event.target);
> +
> + var sourceTree = void 0;
> + if (treeId === this.props.dom._tree.id) {
> + sourceTree = this.props.dom._tree;
> + } else if (treeId) {
> + sourceTree = document.querySelector('[data-uid="' + treeId + '"]').inspireTree;
> + }
> +
> + // Only source/handle node if it's a node that was dropped
> + var newNode = void 0,
> + newIndex = void 0;
> + if (sourceTree) {
> + var node = sourceTree.node(nodeId);
> + node.state('drop-target', true);
> +
> + var exported = node.remove(true);
> +
> + // Get the index of the target node
> + var targetIndex = targetNode.context().indexOf(targetNode);
> +
> + if (dir === 0) {
> + // Add as a child
> + newNode = targetNode.addChild(exported);
> +
> + // Cache the new index
> + newIndex = targetNode.children.indexOf(newNode);
> +
> + // Auto-expand
> + targetNode.expand();
> + } else {
> + // Determine the new index
> + newIndex = dir === 1 ? ++targetIndex : targetIndex;
> +
> + // Insert and cache the node
> + newNode = targetNode.context().insertAt(newIndex, exported);
> + }
> + }
> +
> + this.props.dom._tree.emit('node.drop', event, newNode, targetNode, newIndex);
> + }
> + }, {
> + key: 'unhighlightTarget',
> + value: function unhighlightTarget(node) {
> + (node || this.props.node).states(['drag-targeting', 'drag-targeting-above', 'drag-targeting-below', 'drag-targeting-insert'], false);
> + }
> + }, {
> + key: 'renderCheckbox',
> + value: function renderCheckbox() {
> + var node = this.props.node;
> +
> + if (this.props.dom.config.showCheckboxes) {
> + return createComponentVNode(2, Checkbox, {
> + 'checked': node.checked(),
> + 'dom': this.props.dom,
> + 'indeterminate': node.indeterminate(),
> + 'node': node
> + });
> + }
> + }
> + }, {
> + key: 'renderChildren',
> + value: function renderChildren() {
> + var _props = this.props,
> + node = _props.node,
> + dom = _props.dom;
> +
> +
> + if (node.hasChildren()) {
> + var nodes = node.children;
> + var loading = dom.loading;
> + var pagination = nodes.pagination();
> +
> + return createComponentVNode(2, List, {
> + 'context': node,
> + 'dom': dom,
> + 'limit': pagination.limit,
> + 'loading': loading,
> + 'nodes': nodes,
> + 'total': pagination.total
> + });
> + } else if (this.props.dom.isDynamic && node.children) {
> + if (!node.hasLoadedChildren()) {
> + return createComponentVNode(2, EmptyList, {
> + 'text': 'Loading...'
> + });
> + } else {
> + return createComponentVNode(2, EmptyList, {
> + 'text': 'No Results'
> + });
> + }
> + }
> + }
> + }, {
> + key: 'renderEditToolbar',
> + value: function renderEditToolbar() {
> + // @todo fix this boolean
> + if (this.props.dom._tree.config.editing.edit && !this.props.node.editing()) {
> + return createComponentVNode(2, EditToolbar, {
> + 'dom': this.props.dom,
> + 'node': this.props.node
> + });
> + }
> + }
> + }, {
> + key: 'renderToggle',
> + value: function renderToggle() {
> + var node = this.props.node;
> + var hasVisibleChildren = !this.props.dom.isDynamic ? node.hasVisibleChildren() : Boolean(node.children);
> +
> + if (hasVisibleChildren) {
> + return createComponentVNode(2, ToggleAnchor, {
> + 'collapsed': node.collapsed(),
> + 'node': node
> + });
> + }
> + }
> + }, {
> + key: 'render',
> + value: function render$$1() {
> + var _this2 = this;
> +
> + var node = this.props.node;
> +
> + var li = normalizeProps(createVNode(1, 'li', null, [this.renderEditToolbar(), createVNode(1, 'div', 'title-wrap', [this.renderToggle(), this.renderCheckbox(), createComponentVNode(2, NodeAnchor, {
> + 'dom': this.props.dom,
> + 'editing': node.editing(),
> + 'expanded': node.expanded(),
> + 'hasOrWillHaveChildren': node.hasOrWillHaveChildren(),
> + 'node': node,
> + 'text': node.text
> + })], 0), createVNode(1, 'div', 'wholerow'), this.renderChildren()], 0, _extends({}, this.getAttributes()), null, function (elem) {
> + return _this2.node = _this2.props.node.itree.ref = elem;
> + }));
> +
> + // Clear dirty bool only after everything has been generated (and states set)
> + this.props.node.state('rendered', true);
> + this.props.node.itree.dirty = false;
> +
> + return li;
> + }
> + }]);
> + return ListItem;
> + }(Component);
> +
> + var List = function (_Component) {
> + inherits(List, _Component);
> +
> + function List() {
> + classCallCheck(this, List);
> + return possibleConstructorReturn(this, (List.__proto__ || Object.getPrototypeOf(List)).apply(this, arguments));
> + }
> +
> + createClass(List, [{
> + key: 'shouldComponentUpdate',
> + value: function shouldComponentUpdate(nextProps) {
> + return _.find(nextProps.nodes, 'itree.dirty') || stateComparator(this.props, nextProps);
> + }
> + }, {
> + key: 'isDeferred',
> + value: function isDeferred() {
> + return this.props.dom.config.deferredRendering || this.props.dom._tree.config.deferredLoading;
> + }
> + }, {
> + key: 'loadMore',
> + value: function loadMore(event) {
> + event.preventDefault();
> + if (this.props.context) {
> + this.props.context.loadMore(event);
> + } else {
> + this.props.dom._tree.loadMore(event);
> + }
> + }
> + }, {
> + key: 'renderLoadMoreNode',
> + value: function renderLoadMoreNode() {
> + return createVNode(1, 'li', 'leaf detached', createVNode(1, 'a', 'title icon icon-more load-more', createTextVNode('Load More'), 2, {
> + 'onClick': this.loadMore.bind(this)
> + }), 2);
> + }
> + }, {
> + key: 'renderLoadingTextNode',
> + value: function renderLoadingTextNode() {
> + return createVNode(1, 'li', 'leaf', createVNode(1, 'span', 'title icon icon-more', createTextVNode('Loading...'), 2), 2);
> + }
> + }, {
> + key: 'render',
> + value: function render$$1() {
> + var _this2 = this;
> +
> + var renderNodes = this.props.nodes;
> + var pagination = renderNodes.pagination();
> +
> + // If rendering deferred, chunk the nodes client-side
> + if (this.props.dom.config.deferredRendering) {
> + // Filter non-hidden/removed nodes and limit by this context's pagination
> + var count = 0;
> + renderNodes = this.props.nodes.filter(function (n) {
> + var matches = !(n.hidden() || n.removed());
> +
> + if (matches) {
> + count++;
> + }
> +
> + return count <= pagination.limit && matches;
> + });
> + }
> +
> + // Render nodes as list items
> + var items = _.map(renderNodes, function (node) {
> + return createComponentVNode(2, ListItem, {
> + 'dom': _this2.props.dom,
> + 'node': node
> + }, node.id);
> + });
> +
> + if (this.isDeferred() && pagination.limit < pagination.total) {
> + if (!this.props.loading) {
> + items.push(this.renderLoadMoreNode());
> + } else {
> + items.push(this.renderLoadingTextNode());
> + }
> + }
> +
> + return createVNode(1, 'ol', null, [items, this.props.children], 0);
> + }
> + }]);
> + return List;
> + }(Component);
> +
> + var Tree = function (_Component) {
> + inherits(Tree, _Component);
> +
> + function Tree() {
> + classCallCheck(this, Tree);
> + return possibleConstructorReturn(this, (Tree.__proto__ || Object.getPrototypeOf(Tree)).apply(this, arguments));
> + }
> +
> + createClass(Tree, [{
> + key: 'add',
> + value: function add() {
> + this.props.dom._tree.focused().blur();
> +
> + this.props.dom._tree.addNode(blankNode());
> + }
> + }, {
> + key: 'renderAddLink',
> + value: function renderAddLink() {
> + if (this.props.dom._tree.config.editing.add) {
> + return createVNode(1, 'li', null, createVNode(1, 'a', 'btn icon icon-plus', null, 1, {
> + 'onClick': this.add.bind(this),
> + 'title': 'Add a new root node'
> + }), 2);
> + }
> + }
> + }, {
> + key: 'render',
> + value: function render$$1() {
> + var _props = this.props,
> + dom = _props.dom,
> + nodes = _props.nodes;
> +
> + var loading = dom.loading;
> + var pagination = nodes.pagination();
> +
> + return createComponentVNode(2, List, {
> + 'dom': dom,
> + 'limit': pagination.limit,
> + 'loading': loading,
> + 'nodes': nodes,
> + 'total': pagination.total,
> + children: this.renderAddLink()
> + });
> + }
> + }]);
> + return Tree;
> + }(Component);
> +
> + /**
> + * Default InspireTree rendering logic.
> + *
> + * @category DOM
> + * @return {InspireDOM} Default renderer.
> + */
> +
> + var InspireDOM = function () {
> + function InspireDOM(tree, opts) {
> + var _this = this;
> +
> + classCallCheck(this, InspireDOM);
> +
> + if (!(tree instanceof InspireTree)) {
> + throw new TypeError('Tree argument is not an InspireTree instance.');
> + }
> +
> + // Init properties
> + this._tree = tree;
> + this.batching = 0;
> + this.dropTargets = [];
> + this.$scrollLayer;
> +
> + if (!opts.target) {
> + throw new TypeError('Invalid `target` property - must be a selector, HTMLElement, or jQuery element.');
> + }
> +
> + // Let InspireTree know we're in control of a node's `rendered` state
> + tree.usesNativeDOM = true;
> +
> + var dndDefaults = {
> + enabled: false,
> + validateOn: 'dragstart',
> + validate: null
> + };
> +
> + // Assign defaults
> + this.config = _.defaultsDeep({}, opts, {
> + autoLoadMore: true,
> + deferredRendering: false,
> + dragAndDrop: dndDefaults,
> + nodeHeight: 25,
> + showCheckboxes: false,
> + tabindex: -1,
> + target: false
> + });
> +
> + if (opts.dragAndDrop === true) {
> + this.config.dragAndDrop = dndDefaults;
> + this.config.dragAndDrop.enabled = true;
> + }
> +
> + // If user didn't specify showCheckboxes,
> + // but is using checkbox selection mode,
> + // enable it automatically.
> + // Royale - commented
> + //if (tree.config.selection.mode === 'checkbox' && !_.isBoolean(_.get(opts, 'showCheckboxes'))) {
> + // this.config.showCheckboxes = true;
> + //}
> +
> + // Cache because we use in loops
> + this.isDynamic = _.isFunction(this._tree.config.data);
> +
> + // Connect to our target DOM element
> + this.attach(this.config.target);
> +
> + var initialRender = true;
> +
> + // Apply changes
> + tree.on('changes.applied', function () {
> + _this.renderNodes();
> +
> + if (initialRender) {
> + _this.scrollSelectedIntoView();
> +
> + initialRender = false;
> + }
> + });
> +
> + // Immediately render, just in case any already exists
> + this.renderNodes();
> + }
> +
> + /**
> + * Attaches to the DOM element for rendering.
> + *
> + * @category DOM
> + * @private
> + * @param {HTMLElement} target Element, selector, or jQuery-like object.
> + * @return {void}
> + */
> +
> +
> + createClass(InspireDOM, [{
> + key: 'attach',
> + value: function attach(target) {
> + this.$target = this.getElement(target);
> + this.$scrollLayer = this.getScrollableAncestor(this.$target);
> +
> + if (!this.$target) {
> + throw new Error('No valid element to attach to.');
> + }
> +
> + this.$target.setAttribute('data-uid', this._tree.id);
> +
> + // Set classnames
> + var classNames = this.$target.className.split(' ');
> + classNames.push('inspire-tree');
> +
> + if (this._tree.config.editable) {
> + classNames.push('editable');
> +
> + _.each(_.pickBy(this._tree.config.editing, _.identity), function (v, key) {
> + classNames.push('editable-' + key);
> + });
> + }
> +
> + this.$target.className = classNames.join(' ');
> + this.$target.setAttribute('tabindex', this.config.tabindex || 0);
> +
> + // Handle keyboard interaction
> + this.$target.addEventListener('keydown', this.keyboardListener.bind(this));
> +
> + // Drag and drop listeners
> + if (this.config.dragAndDrop.enabled) {
> + this.$target.addEventListener('dragenter', this.onDragEnter.bind(this), false);
> + this.$target.addEventListener('dragleave', this.onDragLeave.bind(this), false);
> + this.$target.addEventListener('dragover', this.onDragOver.bind(this), false);
> + this.$target.addEventListener('drop', this.onDrop.bind(this), false);
> +
> + this.$target.classList.add('drag-and-drop');
> + }
> +
> + // Sync browser focus to focus state
> + this._tree.on('node.focused', function (node) {
> + var elem = node.itree.ref.querySelector('.title');
> + if (elem !== document.activeElement) {
> + elem.focus();
> + }
> + });
> +
> + if (this.config.deferredRendering || this._tree.config.deferredLoading) {
> + // Force valid pagination limit based on viewport
> + var limit = this._tree.config.pagination.limit;
> + this._tree.config.pagination.limit = limit > 0 ? limit : _.ceil(this.$scrollLayer.clientHeight / this.config.nodeHeight);
> +
> + // Listen for scrolls for automatic loading
> + if (this.config.autoLoadMore) {
> + this.$target.addEventListener('scroll', _.throttle(this.scrollListener.bind(this), 20));
> + }
> + }
> +
> + this.$target.inspireTree = this._tree;
> + }
> +
> + /**
> + * Clear page text selection, primarily after a click event which
> + * natively selects a range of text.
> + *
> + * @category DOM
> + * @private
> + * @return {void}
> + */
> +
> + }, {
> + key: 'clearSelection',
> + value: function clearSelection() {
> + if (document.selection && document.selection.empty) {
> + document.selection.empty();
> + } else if (window.getSelection) {
> + window.getSelection().removeAllRanges();
> + }
> + }
> +
> + /**
> + * Get an HTMLElement through various means:
> + * An element, jquery object, or a selector.
> + *
> + * @category DOM
> + * @private
> + * @param {mixed} target Element, jQuery selector, selector.
> + * @return {HTMLElement} Matching element.
> + */
> +
> + }, {
> + key: 'getElement',
> + value: function getElement(target) {
> + var $element = void 0;
> +
> + if (target instanceof HTMLElement) {
> + $element = target;
> + } else if (_.isObject(target) && _.isObject(target[0])) {
> + $element = target[0];
> + } else if (_.isString(target)) {
> + var match = document.querySelector(target);
> + if (match) {
> + $element = match;
> + }
> + }
> +
> + return $element;
> + }
> +
> + /**
> + * Helper method to find a scrollable ancestor element.
> + *
> + * @category DOM
> + * @private
> + * @param {HTMLElement} $element Starting element.
> + * @return {HTMLElement} Scrollable element.
> + */
> +
> + }, {
> + key: 'getScrollableAncestor',
> + value: function getScrollableAncestor($element) {
> + if ($element instanceof Element) {
> + var style = getComputedStyle($element);
> + if (style.overflow !== 'auto' && $element.parentNode) {
> + $element = this.getScrollableAncestor($element.parentNode);
> + }
> + }
> +
> + return $element;
> + }
> +
> + /**
> + * Get a tree instance based on an ID.
> + *
> + * @category DOM
> + * @param {string} id Tree ID.
> + * @return {InspireTree} Tree instance.
> + */
> +
> + }, {
> + key: 'keyboardListener',
> +
> +
> + /**
> + * Listen to keyboard event for navigation.
> + *
> + * @category DOM
> + * @private
> + * @param {Event} event Keyboard event.
> + * @return {void}
> + */
> + value: function keyboardListener(event) {
> + event.stopPropagation();
> +
> + // Ignore keys we won't care for.
> + // For example, this avoids trampling cmd+reload
> + if ([DOWN_ARROW, ENTER, LEFT_ARROW, RIGHT_ARROW, UP_ARROW].indexOf(event.which) < 0) {
> + return;
> + }
> +
> + // Navigation
> + var focusedNodes = this._tree.focused();
> + if (focusedNodes.length) {
> + event.preventDefault();
> +
> + switch (event.which) {
> + case DOWN_ARROW:
> + this.moveFocusDownFrom(focusedNodes[0]);
> + break;
> + case ENTER:
> + focusedNodes[0].toggleSelect();
> + break;
> + case LEFT_ARROW:
> + focusedNodes[0].collapse();
> + break;
> + case RIGHT_ARROW:
> + focusedNodes[0].expand();
> + break;
> + case UP_ARROW:
> + this.moveFocusUpFrom(focusedNodes[0]);
> + break;
> + default:
> + }
> + }
> + }
> +
> + /**
> + * Move select down the visible tree from a starting node.
> + *
> + * @category DOM
> + * @private
> + * @param {object} startingNode Node object.
> + * @return {void}
> + */
> +
> + }, {
> + key: 'moveFocusDownFrom',
> + value: function moveFocusDownFrom(startingNode) {
> + var next = startingNode.nextVisibleNode();
> + if (next) {
> + next.focus();
> + }
> + }
> +
> + /**
> + * Move select up the visible tree from a starting node.
> + *
> + * @category DOM
> + * @private
> + * @param {object} startingNode Node object.
> + * @return {void}
> + */
> +
> + }, {
> + key: 'moveFocusUpFrom',
> + value: function moveFocusUpFrom(startingNode) {
> + var prev = startingNode.previousVisibleNode();
> + if (prev) {
> + prev.focus();
> + }
> + }
> +
> + /**
> + * Helper method for obtaining the data-uid from a DOM element.
> + *
> + * @category DOM
> + * @private
> + * @param {HTMLElement} element HTML Element.
> + * @return {object} Node object
> + */
> +
> + }, {
> + key: 'nodeFromTitleDOMElement',
> + value: function nodeFromTitleDOMElement(element) {
> + var uid = element.parentNode.parentNode.getAttribute('data-uid');
> + return this._tree.node(uid);
> + }
> +
> + /**
> + * Drag enter listener.
> + *
> + * @category DOM
> + * @private
> + * @param {DragEvent} event Drag enter.
> + * @return {void}
> + */
> +
> + }, {
> + key: 'onDragEnter',
> + value: function onDragEnter(event) {
> + event.preventDefault();
> +
> + event.target.classList.add('drag-targeting', 'drag-targeting-insert');
> + }
> +
> + /**
> + * Drag leave listener.
> + *
> + * @category DOM
> + * @private
> + * @param {DragEvent} event Drag leave.
> + * @return {void}
> + */
> +
> + }, {
> + key: 'onDragLeave',
> + value: function onDragLeave(event) {
> + event.preventDefault();
> +
> + this.unhighlightTarget(event.target);
> + }
> +
> + /**
> + * Drag over listener.
> + *
> + * @category DOM
> + * @private
> + * @param {DragEvent} event Drag over.
> + * @return {void}
> + */
> +
> + }, {
> + key: 'onDragOver',
> + value: function onDragOver(event) {
> + event.preventDefault();
> + }
> +
> + /**
> + * Drop listener.
> + *
> + * @category DOM
> + * @private
> + * @param {DragEvent} event Dropped.
> + * @return {void}
> + */
> +
> + }, {
> + key: 'onDrop',
> + value: function onDrop(event) {
> + event.preventDefault();
> +
> + this.unhighlightTarget(event.target);
> +
> + var treeId = event.dataTransfer.getData('treeId');
> + var nodeId = event.dataTransfer.getData('nodeId');
> +
> + // Find the tree
> + var tree = InspireDOM.getTreeById(treeId);
> + var node = tree.node(nodeId);
> +
> + node.state('drop-target', true);
> +
> + // Remove the node from its previous context
> + var exported = node.remove(true);
> +
> + // Add the node to this tree/level
> + var newNode = this._tree.addNode(exported);
> + var newIndex = this._tree.indexOf(newNode);
> +
> + this._tree.emit('node.drop', event, newNode, null, newIndex);
> + }
> +
> + /**
> + * Triggers rendering for the given node array.
> + *
> + * @category DOM
> + * @private
> + * @param {array} nodes Array of node objects.
> + * @return {void}
> + */
> +
> + }, {
> + key: 'renderNodes',
> + value: function renderNodes(nodes) {
> + render(createComponentVNode(2, Tree, {
> + 'dom': this,
> + 'nodes': nodes || this._tree.nodes()
> + }), this.$target);
> + }
> + }, {
> + key: 'scrollListener',
> +
> +
> + /**
> + * Listens for scroll events, to automatically trigger
> + * Load More links when they're scrolled into view.
> + *
> + * @category DOM
> + * @private
> + * @param {Event} event Scroll event.
> + * @return {void}
> + */
> + value: function scrollListener(event) {
> + var _this2 = this;
> +
> + if (!this.rendering && !this.loading) {
> + // Get the bounding rect of the scroll layer
> + var rect = this.$scrollLayer.getBoundingClientRect();
> +
> + // Find all load-more links
> + var links = document.querySelectorAll('.load-more');
> + _.each(links, function (link) {
> + // Look for load-more links which overlap our "viewport"
> + var r = link.getBoundingClientRect();
> + var overlap = !(rect.right < r.left || rect.left > r.right || rect.bottom < r.top || rect.top > r.bottom);
> +
> + if (overlap) {
> + // Auto-trigger Load More links
> + var context = void 0;
> +
> + var $parent = link.parentNode.parentNode.parentNode;
> + if ($parent.tagName === 'LI') {
> + context = _this2._tree.node($parent.getAttribute('data-uid'));
> + }
> +
> + _this2._tree.loadMore(context, event);
> + }
> + });
> + }
> + }
> +
> + /**
> + * Scroll the first selected node into view.
> + *
> + * @category DOM
> + * @private
> + * @return {void}
> + */
> +
> + }, {
> + key: 'scrollSelectedIntoView',
> + value: function scrollSelectedIntoView() {
> + var $selected = this.$target.querySelector('.selected');
> +
> + if ($selected && this.$scrollLayer) {
> + this.$scrollLayer.scrollTop = $selected.offsetTop;
> + }
> + }
> +
> + /**
> + * Remove highlight class.
> + *
> + * @category DOM
> + * @private
> + * @param {HTMLElement} element Target element.
> + * @return {void}
> + */
> +
> + }, {
> + key: 'unhighlightTarget',
> + value: function unhighlightTarget(element) {
> + if (element) {
> + element.classList.remove('drag-targeting', 'drag-targeting-insert');
> + }
> + }
> + }], [{
> + key: 'getTreeById',
> + value: function getTreeById(id) {
> + var element = document.querySelector('[data-uid="' + id + '"]');
> + if (element) {
> + return element.inspireTree;
> + }
> + }
> + }]);
> + return InspireDOM;
> + }();
> +
> + return InspireDOM;
> +
> +})));
> diff --git a/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dom.js b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dom.js
> new file mode 100644
> index 0000000..7b3a60e
> --- /dev/null
> +++ b/frameworks/projects/ExternsJS/src/main/resources/externsjs/inspiretree/inspire-tree-dom.js
> @@ -0,0 +1,3764 @@
> +/**
> + * 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
> + *
> + * Unless required by applicable law or agreed to in writing, software
> + * distributed under the License is distributed on an 'AS IS' BASIS,
> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
> + * See the License for the specific language governing permissions and
> + * limitations under the License.
> + */
> + /* Inspire Tree DOM
> + * @version 4.0.6
> + * https://github.com/helion3/inspire-tree-dom
> + * @copyright Copyright 2015 Helion3, and other contributors
> + * @license Licensed under MIT
> + * see https://github.com/helion3/inspire-tree-dom/blob/master/LICENSE
> + */
> +(function (global, factory) {
> + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('lodash'), require('inspire-tree')) :
> + typeof define === 'function' && define.amd ? define(['lodash', 'inspire-tree'], factory) :
> + (global.InspireTreeDOM = factory(global._,global.InspireTree));
> +}(this, (function (_,InspireTree) { 'use strict';
> +
> + InspireTree = InspireTree && InspireTree.hasOwnProperty('default') ? InspireTree['default'] : InspireTree;
> +
> + var NO_OP = '$NO_OP';
> + var ERROR_MSG = 'a runtime error occured! Use Inferno in development environment to find the error.';
> + var isBrowser = !!(typeof window !== 'undefined' && window.document);
> + var isArray = Array.isArray;
> + function isStringOrNumber(o) {
> + var type = typeof o;
> + return type === 'string' || type === 'number';
> + }
> + function isNullOrUndef(o) {
> + return isUndefined(o) || isNull(o);
> + }
> + function isInvalid(o) {
> + return isNull(o) || o === false || isTrue(o) || isUndefined(o);
> + }
> + function isFunction(o) {
> + return typeof o === 'function';
> + }
> + function isString(o) {
> + return typeof o === 'string';
> + }
> + function isNumber(o) {
> + return typeof o === 'number';
> + }
> + function isNull(o) {
> + return o === null;
> + }
> + function isTrue(o) {
> + return o === true;
> + }
> + function isUndefined(o) {
> + return o === void 0;
> + }
> + function throwError(message) {
> + if (!message) {
> + message = ERROR_MSG;
> + }
> + throw new Error(("Inferno Error: " + message));
> + }
> + function combineFrom(first, second) {
> + var out = {};
> + if (first) {
> + for (var key in first) {
> + out[key] = first[key];
> + }
> + }
> + if (second) {
> + for (var key$1 in second) {
> + out[key$1] = second[key$1];
> + }
> + }
> + return out;
> + }
> +
> + var keyPrefix = '$';
> + function getVNode(childFlags, children, className, flags, key, props, ref, type) {
> + return {
> + childFlags: childFlags,
> + children: children,
> + className: className,
> + dom: null,
> + flags: flags,
> + key: key === void 0 ? null : key,
> + parentVNode: null,
> + props: props === void 0 ? null : props,
> + ref: ref === void 0 ? null : ref,
> + type: type
> + };
> + }
> + function createVNode(flags, type, className, children, childFlags, props, key, ref) {
> + var childFlag = childFlags === void 0 ? 1 /* HasInvalidChildren */ : childFlags;
> + var vNode = getVNode(childFlag, children, className, flags, key, props, ref, type);
> + if (childFlag === 0 /* UnknownChildren */) {
> + normalizeChildren(vNode, vNode.children);
> + }
> + return vNode;
> + }
> + function createComponentVNode(flags, type, props, key, ref) {
> + if ((flags & 2 /* ComponentUnknown */) > 0) {
> + flags = type.prototype && isFunction(type.prototype.render) ? 4 /* ComponentClass */ : 8 /* ComponentFunction */;
> + }
> + // set default props
> + var defaultProps = type.defaultProps;
> + if (!isNullOrUndef(defaultProps)) {
> + if (!props) {
> + props = {}; // Props can be referenced and modified at application level so always create new object
> + }
> + for (var prop in defaultProps) {
> + if (isUndefined(props[prop])) {
> + props[prop] = defaultProps[prop];
> + }
> + }
> + }
> + if ((flags & 8 /* ComponentFunction */) > 0) {
> + var defaultHooks = type.defaultHooks;
> + if (!isNullOrUndef(defaultHooks)) {
> + if (!ref) {
> + // As ref cannot be referenced from application level, we can use the same refs object
> + ref = defaultHooks;
> + }
> + else {
> + for (var prop$1 in defaultHooks) {
> + if (isUndefined(ref[prop$1])) {
> + ref[prop$1] = defaultHooks[prop$1];
> + }
> + }
> + }
> + }
> + }
> + var vNode = getVNode(1 /* HasInvalidChildren */, null, null, flags, key, props, ref, type);
> + var optsVNode = options.createVNode;
> + if (isFunction(optsVNode)) {
> + optsVNode(vNode);
> + }
> + return vNode;
> + }
> + function createTextVNode(text, key) {
> + return getVNode(1 /* HasInvalidChildren */, isNullOrUndef(text) ? '' : text, null, 16 /* Text */, key, null, null, null);
> + }
> + function normalizeProps(vNode) {
> + var props = vNode.props;
> + if (props) {
> + var flags = vNode.flags;
> + if (flags & 481 /* Element */) {
> + if (props.children !== void 0 && isNullOrUndef(vNode.children)) {
> + normalizeChildren(vNode, props.children);
> + }
> + if (props.className !== void 0) {
> + vNode.className = props.className || null;
> + props.className = undefined;
> + }
> + }
> + if (props.key !== void 0) {
> + vNode.key = props.key;
> + props.key = undefined;
> + }
> + if (props.ref !== void 0) {
> + if (flags & 8 /* ComponentFunction */) {
> + vNode.ref = combineFrom(vNode.ref, props.ref);
> + }
> + else {
> + vNode.ref = props.ref;
> + }
> + props.ref = undefined;
> + }
> + }
> + return vNode;
> + }
> + function directClone(vNodeToClone) {
> + var newVNode;
> + var flags = vNodeToClone.flags;
> + if (flags & 14 /* Component */) {
> + var props;
> + var propsToClone = vNodeToClone.props;
> + if (!isNull(propsToClone)) {
> + props = {};
> + for (var key in propsToClone) {
> + props[key] = propsToClone[key];
> + }
> + }
> + newVNode = createComponentVNode(flags, vNodeToClone.type, props, vNodeToClone.key, vNodeToClone.ref);
> + }
> + else if (flags & 481 /* Element */) {
> + newVNode = createVNode(flags, vNodeToClone.type, vNodeToClone.className, vNodeToClone.children, vNodeToClone.childFlags, vNodeToClone.props, vNodeToClone.key, vNodeToClone.ref);
> + }
> + else if (flags & 16 /* Text */) {
> + newVNode = createTextVNode(vNodeToClone.children, vNodeToClone.key);
> + }
> + else if (flags & 1024 /* Portal */) {
> + newVNode = vNodeToClone;
> + }
> + return newVNode;
> + }
> + function createVoidVNode() {
> + return createTextVNode('', null);
> + }
> + function _normalizeVNodes(nodes, result, index, currentKey) {
> + for (var len = nodes.length; index < len; index++) {
> + var n = nodes[index];
> + if (!isInvalid(n)) {
> + var newKey = currentKey + keyPrefix + index;
> + if (isArray(n)) {
> + _normalizeVNodes(n, result, 0, newKey);
> + }
> + else {
> + if (isStringOrNumber(n)) {
> + n = createTextVNode(n, newKey);
> + }
> + else {
> + var oldKey = n.key;
> + var isPrefixedKey = isString(oldKey) && oldKey[0] === keyPrefix;
> + if (!isNull(n.dom) || isPrefixedKey) {
> + n = directClone(n);
> + }
> + if (isNull(oldKey) || isPrefixedKey) {
> + n.key = newKey;
> + }
> + else {
> + n.key = currentKey + oldKey;
> + }
> + }
> + result.push(n);
> + }
> + }
> + }
> + }
> + function normalizeChildren(vNode, children) {
> + var newChildren;
> + var newChildFlags = 1 /* HasInvalidChildren */;
> + // Don't change children to match strict equal (===) true in patching
> + if (isInvalid(children)) {
> + newChildren = children;
> + }
> + else if (isString(children)) {
> + newChildFlags = 2 /* HasVNodeChildren */;
> + newChildren = createTextVNode(children);
> + }
> + else if (isNumber(children)) {
> + newChildFlags = 2 /* HasVNodeChildren */;
> + newChildren = createTextVNode(children + '');
> + }
> + else if (isArray(children)) {
> + var len = children.length;
> + if (len === 0) {
> + newChildren = null;
> + newChildFlags = 1 /* HasInvalidChildren */;
> + }
> + else {
> + // we assign $ which basically means we've flagged this array for future note
> + // if it comes back again, we need to clone it, as people are using it
> + // in an immutable way
> + // tslint:disable-next-line
> + if (Object.isFrozen(children) || children['$'] === true) {
> + children = children.slice();
> + }
> + newChildFlags = 8 /* HasKeyedChildren */;
> + for (var i = 0; i < len; i++) {
> + var n = children[i];
> + if (isInvalid(n) || isArray(n)) {
> + newChildren = newChildren || children.slice(0, i);
> + _normalizeVNodes(children, newChildren, i, '');
> + break;
> + }
> + else if (isStringOrNumber(n)) {
> + newChildren = newChildren || children.slice(0, i);
> + newChildren.push(createTextVNode(n, keyPrefix + i));
> + }
> + else {
> + var key = n.key;
> + var isNullDom = isNull(n.dom);
> + var isNullKey = isNull(key);
> + var isPrefixed = !isNullKey && key[0] === keyPrefix;
> + if (!isNullDom || isNullKey || isPrefixed) {
> + newChildren = newChildren || children.slice(0, i);
> + if (!isNullDom || isPrefixed) {
> + n = directClone(n);
> + }
> + if (isNullKey || isPrefixed) {
> + n.key = keyPrefix + i;
> + }
> + newChildren.push(n);
> + }
> + else if (newChildren) {
> + newChildren.push(n);
> + }
> + }
> + }
> + newChildren = newChildren || children;
> + newChildren.$ = true;
> + }
> + }
> + else {
> + newChildren = children;
> + if (!isNull(children.dom)) {
> + newChildren = directClone(children);
> + }
> + newChildFlags = 2 /* HasVNodeChildren */;
> + }
> + vNode.children = newChildren;
> + vNode.childFlags = newChildFlags;
> + return vNode;
> + }
> + var options = {
> + afterRender: null,
> + beforeRender: null,
> + createVNode: null,
> + renderComplete: null
> + };
> +
> + var xlinkNS = 'http://www.w3.org/1999/xlink';
> + var xmlNS = 'http://www.w3.org/XML/1998/namespace';
> + var svgNS = 'http://www.w3.org/2000/svg';
> + var namespaces = {
> + 'xlink:actuate': xlinkNS,
> + 'xlink:arcrole': xlinkNS,
> + 'xlink:href': xlinkNS,
> + 'xlink:role': xlinkNS,
> + 'xlink:show': xlinkNS,
> + 'xlink:title': xlinkNS,
> + 'xlink:type': xlinkNS,
> + 'xml:base': xmlNS,
> + 'xml:lang': xmlNS,
> + 'xml:space': xmlNS
> + };
> +
> + // We need EMPTY_OBJ defined in one place.
> + // Its used for comparison so we cant inline it into shared
> + var EMPTY_OBJ = {};
> + var LIFECYCLE = [];
> + function appendChild(parentDom, dom) {
> + parentDom.appendChild(dom);
> + }
> + function insertOrAppend(parentDom, newNode, nextNode) {
> + if (isNullOrUndef(nextNode)) {
> + appendChild(parentDom, newNode);
> + }
> + else {
> + parentDom.insertBefore(newNode, nextNode);
> + }
> + }
> + function documentCreateElement(tag, isSVG) {
> + if (isSVG === true) {
> + return document.createElementNS(svgNS, tag);
> + }
> + return document.createElement(tag);
> + }
> + function replaceChild(parentDom, newDom, lastDom) {
> + parentDom.replaceChild(newDom, lastDom);
> + }
> + function removeChild(parentDom, dom) {
> + parentDom.removeChild(dom);
> + }
> + function callAll(arrayFn) {
> + var listener;
> + while ((listener = arrayFn.shift()) !== undefined) {
> + listener();
> + }
> + }
> +
> + var attachedEventCounts = {};
> + var attachedEvents = {};
> + function handleEvent(name, nextEvent, dom) {
> + var eventsLeft = attachedEventCounts[name];
> + var eventsObject = dom.$EV;
> + if (nextEvent) {
> + if (!eventsLeft) {
> + attachedEvents[name] = attachEventToDocument(name);
> + attachedEventCounts[name] = 0;
> + }
> + if (!eventsObject) {
> + eventsObject = dom.$EV = {};
> + }
> + if (!eventsObject[name]) {
> + attachedEventCounts[name]++;
> + }
> + eventsObject[name] = nextEvent;
> + }
> + else if (eventsObject && eventsObject[name]) {
> + attachedEventCounts[name]--;
> + if (eventsLeft === 1) {
> + document.removeEventListener(normalizeEventName(name), attachedEvents[name]);
> + attachedEvents[name] = null;
> + }
> + eventsObject[name] = nextEvent;
> + }
> + }
> + function dispatchEvents(event, target, isClick, name, eventData) {
> + var dom = target;
> + while (!isNull(dom)) {
> + // Html Nodes can be nested fe: span inside button in that scenario browser does not handle disabled attribute on parent,
> + // because the event listener is on document.body
> + // Don't process clicks on disabled elements
> + if (isClick && dom.disabled) {
> + return;
> + }
> + var eventsObject = dom.$EV;
> + if (eventsObject) {
> + var currentEvent = eventsObject[name];
> + if (currentEvent) {
> + // linkEvent object
> + eventData.dom = dom;
> + if (currentEvent.event) {
> + currentEvent.event(currentEvent.data, event);
> + }
> + else {
> + currentEvent(event);
> + }
> + if (event.cancelBubble) {
> + return;
> + }
> + }
> + }
> + dom = dom.parentNode;
> + }
> + }
> + function normalizeEventName(name) {
> + return name.substr(2).toLowerCase();
> + }
> + function stopPropagation() {
> + this.cancelBubble = true;
> + if (!this.immediatePropagationStopped) {
> + this.stopImmediatePropagation();
> + }
> + }
> + function attachEventToDocument(name) {
> + var docEvent = function (event) {
> + var type = event.type;
> + var isClick = type === 'click' || type === 'dblclick';
> + if (isClick && event.button !== 0) {
> + // Firefox incorrectly triggers click event for mid/right mouse buttons.
> + // This bug has been active for 12 years.
> + // https://bugzilla.mozilla.org/show_bug.cgi?id=184051
> + event.stopPropagation();
> + return false;
> + }
> + event.stopPropagation = stopPropagation;
> + // Event data needs to be object to save reference to currentTarget getter
> + var eventData = {
> + dom: document
> + };
> + Object.defineProperty(event, 'currentTarget', {
> + configurable: true,
> + get: function get() {
> + return eventData.dom;
> + }
> + });
> + dispatchEvents(event, event.target, isClick, name, eventData);
> + return;
> + };
> + document.addEventListener(normalizeEventName(name), docEvent);
> + return docEvent;
> + }
> +
> + function isSameInnerHTML(dom, innerHTML) {
> + var tempdom = document.createElement('i');
> + tempdom.innerHTML = innerHTML;
> + return tempdom.innerHTML === dom.innerHTML;
> + }
> + function isSamePropsInnerHTML(dom, props) {
> + return Boolean(props && props.dangerouslySetInnerHTML && props.dangerouslySetInnerHTML.__html && isSameInnerHTML(dom, props.dangerouslySetInnerHTML.__html));
> + }
> +
> + function triggerEventListener(props, methodName, e) {
> + if (props[methodName]) {
> + var listener = props[methodName];
> + if (listener.event) {
> + listener.event(listener.data, e);
> + }
> + else {
> + listener(e);
> + }
> + }
> + else {
> + var nativeListenerName = methodName.toLowerCase();
> + if (props[nativeListenerName]) {
> + props[nativeListenerName](e);
> + }
> + }
> + }
> + function createWrappedFunction(methodName, applyValue) {
> + var fnMethod = function (e) {
> + e.stopPropagation();
> + var vNode = this.$V;
> + // If vNode is gone by the time event fires, no-op
> + if (!vNode) {
> + return;
> + }
> + var props = vNode.props || EMPTY_OBJ;
> + var dom = vNode.dom;
> + if (isString(methodName)) {
> + triggerEventListener(props, methodName, e);
> + }
> + else {
> + for (var i = 0; i < methodName.length; i++) {
> + triggerEventListener(props, methodName[i], e);
> + }
> + }
> + if (isFunction(applyValue)) {
> + var newVNode = this.$V;
> + var newProps = newVNode.props || EMPTY_OBJ;
> + applyValue(newProps, dom, false, newVNode);
> + }
> + };
> + Object.defineProperty(fnMethod, 'wrapped', {
> + configurable: false,
> + enumerable: false,
> + value: true,
> + writable: false
> + });
> + return fnMethod;
> + }
> +
> + function isCheckedType(type) {
> + return type === 'checkbox' || type === 'radio';
> + }
> + var onTextInputChange = createWrappedFunction('onInput', applyValueInput);
> + var wrappedOnChange = createWrappedFunction(['onClick', 'onChange'], applyValueInput);
> + /* tslint:disable-next-line:no-empty */
> + function emptywrapper(event) {
> + event.stopPropagation();
> + }
> + emptywrapper.wrapped = true;
> + function inputEvents(dom, nextPropsOrEmpty) {
> + if (isCheckedType(nextPropsOrEmpty.type)) {
> + dom.onchange = wrappedOnChange;
> + dom.onclick = emptywrapper;
> + }
> + else {
> + dom.oninput = onTextInputChange;
> + }
> + }
> + function applyValueInput(nextPropsOrEmpty, dom) {
> + var type = nextPropsOrEmpty.type;
> + var value = nextPropsOrEmpty.value;
> + var checked = nextPropsOrEmpty.checked;
> + var multiple = nextPropsOrEmpty.multiple;
> + var defaultValue = nextPropsOrEmpty.defaultValue;
> + var hasValue = !isNullOrUndef(value);
> + if (type && type !== dom.type) {
> + dom.setAttribute('type', type);
> + }
> + if (!isNullOrUndef(multiple) && multiple !== dom.multiple) {
> + dom.multiple = multiple;
> + }
> + if (!isNullOrUndef(defaultValue) && !hasValue) {
> + dom.defaultValue = defaultValue + '';
> + }
> + if (isCheckedType(type)) {
> + if (hasValue) {
> + dom.value = value;
> + }
> + if (!isNullOrUndef(checked)) {
> + dom.checked = checked;
> + }
> + }
> + else {
> + if (hasValue && dom.value !== value) {
> + dom.defaultValue = value;
> + dom.value = value;
> + }
> + else if (!isNullOrUndef(checked)) {
> + dom.checked = checked;
> + }
> + }
> + }
> +
> + function updateChildOptionGroup(vNode, value) {
> + var type = vNode.type;
> + if (type === 'optgroup') {
> + var children = vNode.children;
> + var childFlags = vNode.childFlags;
> + if (childFlags & 12 /* MultipleChildren */) {
> + for (var i = 0, len = children.length; i < len; i++) {
> + updateChildOption(children[i], value);
> + }
> + }
> + else if (childFlags === 2 /* HasVNodeChildren */) {
> + updateChildOption(children, value);
> + }
> + }
> + else {
> + updateChildOption(vNode, value);
> + }
> + }
> + function updateChildOption(vNode, value) {
> + var props = vNode.props || EMPTY_OBJ;
> + var dom = vNode.dom;
> + // we do this as multiple may have changed
> + dom.value = props.value;
> + if ((isArray(value) && value.indexOf(props.value) !== -1) || props.value === value) {
> + dom.selected = true;
> + }
> + else if (!isNullOrUndef(value) || !isNullOrUndef(props.selected)) {
> + dom.selected = props.selected || false;
> + }
> + }
> + var onSelectChange = createWrappedFunction('onChange', applyValueSelect);
> + function selectEvents(dom) {
> + dom.onchange = onSelectChange;
> + }
> + function applyValueSelect(nextPropsOrEmpty, dom, mounting, vNode) {
> + var multiplePropInBoolean = Boolean(nextPropsOrEmpty.multiple);
> + if (!isNullOrUndef(nextPropsOrEmpty.multiple) && multiplePropInBoolean !== dom.multiple) {
> + dom.multiple = multiplePropInBoolean;
> + }
> + var childFlags = vNode.childFlags;
> + if ((childFlags & 1 /* HasInvalidChildren */) === 0) {
> + var children = vNode.children;
> + var value = nextPropsOrEmpty.value;
> + if (mounting && isNullOrUndef(value)) {
> + value = nextPropsOrEmpty.defaultValue;
> + }
> + if (childFlags & 12 /* MultipleChildren */) {
> + for (var i = 0, len = children.length; i < len; i++) {
> + updateChildOptionGroup(children[i], value);
> + }
> + }
> + else if (childFlags === 2 /* HasVNodeChildren */) {
> + updateChildOptionGroup(children, value);
> + }
> + }
> + }
> +
> + var onTextareaInputChange = createWrappedFunction('onInput', applyValueTextArea);
> + var wrappedOnChange$1 = createWrappedFunction('onChange');
> + function textAreaEvents(dom, nextPropsOrEmpty) {
> + dom.oninput = onTextareaInputChange;
> + if (nextPropsOrEmpty.onChange) {
> + dom.onchange = wrappedOnChange$1;
> + }
> + }
> + function applyValueTextArea(nextPropsOrEmpty, dom, mounting) {
> + var value = nextPropsOrEmpty.value;
> + var domValue = dom.value;
> + if (isNullOrUndef(value)) {
> + if (mounting) {
> + var defaultValue = nextPropsOrEmpty.defaultValue;
> + if (!isNullOrUndef(defaultValue) && defaultValue !== domValue) {
> + dom.defaultValue = defaultValue;
> + dom.value = defaultValue;
> + }
> + }
> + }
> + else if (domValue !== value) {
> + /* There is value so keep it controlled */
> + dom.defaultValue = value;
> + dom.value = value;
> + }
> + }
> +
> + /**
> + * There is currently no support for switching same input between controlled and nonControlled
> + * If that ever becomes a real issue, then re design controlled elements
> + * Currently user must choose either controlled or non-controlled and stick with that
> + */
> + function processElement(flags, vNode, dom, nextPropsOrEmpty, mounting, isControlled) {
> + if (flags & 64 /* InputElement */) {
> + applyValueInput(nextPropsOrEmpty, dom);
> + }
> + else if (flags & 256 /* SelectElement */) {
> + applyValueSelect(nextPropsOrEmpty, dom, mounting, vNode);
> + }
> + else if (flags & 128 /* TextareaElement */) {
> + applyValueTextArea(nextPropsOrEmpty, dom, mounting);
> + }
> + if (isControlled) {
> + dom.$V = vNode;
> + }
> + }
> + function addFormElementEventHandlers(flags, dom, nextPropsOrEmpty) {
> + if (flags & 64 /* InputElement */) {
> + inputEvents(dom, nextPropsOrEmpty);
> + }
> + else if (flags & 256 /* SelectElement */) {
> + selectEvents(dom);
> + }
> + else if (flags & 128 /* TextareaElement */) {
> + textAreaEvents(dom, nextPropsOrEmpty);
> + }
> + }
> + function isControlledFormElement(nextPropsOrEmpty) {
> + return nextPropsOrEmpty.type && isCheckedType(nextPropsOrEmpty.type) ? !isNullOrUndef(nextPropsOrEmpty.checked) : !isNullOrUndef(nextPropsOrEmpty.value);
> + }
> +
> + function remove(vNode, parentDom) {
> + unmount(vNode);
> + if (parentDom && vNode.dom) {
> + removeChild(parentDom, vNode.dom);
> + // Let carbage collector free memory
> + vNode.dom = null;
> + }
> + }
> + function unmount(vNode) {
> + var flags = vNode.flags;
> + if (flags & 481 /* Element */) {
> + var ref = vNode.ref;
> + var props = vNode.props;
> + if (isFunction(ref)) {
> + ref(null);
> + }
> + var children = vNode.children;
> + var childFlags = vNode.childFlags;
> + if (childFlags & 12 /* MultipleChildren */) {
> + unmountAllChildren(children);
> + }
> + else if (childFlags === 2 /* HasVNodeChildren */) {
> + unmount(children);
> + }
> + if (!isNull(props)) {
> + for (var name in props) {
> + switch (name) {
> + case 'onClick':
> + case 'onDblClick':
> + case 'onFocusIn':
> + case 'onFocusOut':
> + case 'onKeyDown':
> + case 'onKeyPress':
> + case 'onKeyUp':
> + case 'onMouseDown':
> + case 'onMouseMove':
> + case 'onMouseUp':
> + case 'onSubmit':
> + case 'onTouchEnd':
> + case 'onTouchMove':
> + case 'onTouchStart':
> + handleEvent(name, null, vNode.dom);
> + break;
> + default:
> + break;
> + }
> + }
> + }
> + }
> + else {
> + var children$1 = vNode.children;
> + // Safe guard for crashed VNode
> + if (children$1) {
> + if (flags & 14 /* Component */) {
> + var ref$1 = vNode.ref;
> + if (flags & 4 /* ComponentClass */) {
> + if (isFunction(children$1.componentWillUnmount)) {
> + children$1.componentWillUnmount();
> + }
> + if (isFunction(ref$1)) {
> + ref$1(null);
> + }
> + children$1.$UN = true;
> + if (children$1.$LI) {
> + unmount(children$1.$LI);
> + }
> + }
> + else {
> + if (!isNullOrUndef(ref$1) && isFunction(ref$1.onComponentWillUnmount)) {
> + ref$1.onComponentWillUnmount(vNode.dom, vNode.props || EMPTY_OBJ);
> + }
> + unmount(children$1);
> + }
> + }
> + else if (flags & 1024 /* Portal */) {
> + remove(children$1, vNode.type);
> + }
> + }
> + }
> + }
> + function unmountAllChildren(children) {
> + for (var i = 0, len = children.length; i < len; i++) {
> + unmount(children[i]);
> + }
> + }
> + function removeAllChildren(dom, children) {
> + unmountAllChildren(children);
> + dom.textContent = '';
> + }
> +
> + function createLinkEvent(linkEvent, nextValue) {
> + return function (e) {
> + linkEvent(nextValue.data, e);
> + };
> + }
> + function patchEvent(name, lastValue, nextValue, dom) {
> + var nameLowerCase = name.toLowerCase();
> + if (!isFunction(nextValue) && !isNullOrUndef(nextValue)) {
> + var linkEvent = nextValue.event;
> + if (linkEvent && isFunction(linkEvent)) {
> + dom[nameLowerCase] = createLinkEvent(linkEvent, nextValue);
> + }
> + }
> + else {
> + var domEvent = dom[nameLowerCase];
> + // if the function is wrapped, that means it's been controlled by a wrapper
> + if (!domEvent || !domEvent.wrapped) {
> + dom[nameLowerCase] = nextValue;
> + }
> + }
> + }
> + function getNumberStyleValue(style, value) {
> + switch (style) {
> + case 'animationIterationCount':
> + case 'borderImageOutset':
> + case 'borderImageSlice':
> + case 'borderImageWidth':
> ... 23678 lines suppressed ...