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, <harbs.li...@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 <harbs.li...@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, alinak...@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 <alinakazi1...@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=&quot;${royale.swc-date}&quot;"
> />
> >> +            <arg line="-metadata.dateFormat=&quot;MM/dd/yy HH:mm
> Z&quot;" />
> >> +            <arg
> line="-swf-debugfile-alias=&quot;/org/apache/royale/${release.version}&quot;"
> />
> >> +            <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 > * {
>

Reply via email to