Initial release.

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,35 @@
+---
+name: Bug report
+about: Create a report to help us improve
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,17 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/workflows/publish-release.yml

@@ -0,0 +1,43 @@
+name: Publish a release
+
+on:
+  release:
+    types:
+      - created
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2.3.2
+      - uses: actions/setup-node@v1.4.3
+      - run: npm ci
+      - run: npm test
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2.3.2
+      - uses: actions/setup-node@v1.4.3
+        with:
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.PUBLISH_NPM_TOKEN}}
+
+  publish-gpr:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2.3.2
+      - uses: actions/setup-node@v1.4.3
+        with:
+          registry-url: https://npm.pkg.github.com/
+          scope: '@contasystemer'
+      - run: npm ci
+      - run: echo registry=https://npm.pkg.github.com/contasystemer >> .npmrc
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.PUBLISH_GITHUB_TOKEN}}

.github/workflows/run-npm-test.yml

@@ -0,0 +1,20 @@
+name: Run tests
+
+on:
+  push:
+    branches:
+      - master
+
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2.3.2
+      - uses: actions/setup-node@v1.4.3
+      - run: npm ci
+      - run: npm test

.gitignore

@@ -0,0 +1 @@
+node_modules

CHANGELOG.md

@@ -0,0 +1,3 @@
+# August 28th 2020
+
+Released version 1.0.0.

CONTRIBUTING.md

@@ -0,0 +1,3 @@
+# Contributing
+
+When contributing to this repository, please first discuss the change you wish to make via an issue to this repository before making a change.

README.md

@@ -0,0 +1,149 @@
+# Description
+
+AngularJS custom element module provides functionality to wrap directive/component with custom element.
+Internally in Conta we use the service to reuse existing AngularJS directives/components in Elm.
+
+The service has accompany [Elm module](https://package.elm-lang.org/packages/ContaSystemer/elm-angularjs-custom-element/latest/).
+
+# Dependencies
+
+The service uses ES5 syntax to create custom elements.
+You'll need to include two pollyfils before you include a code with your custom elements:
+
+- **@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js** - this is for new browsers in order to understand ES5 syntax.
+- **@webcomponents/custom-elements/custom-elements.min.js** - this is for old browsers without `customElements` support.
+
+You can add them to your `index.html` file in the following way. Make sure to add it before adding you app scripts.
+
+```html
+<div id="custom-elements-adapter">
+    <!-- Trick to include custom elements es5 adapter only if custom elements are supported -->
+    <script type="text/javascript">
+        if ('customElements' in window === false) {
+            var adapter = document.getElementById('custom-elements-adapter');
+
+            adapter.parentNode.removeChild(adapter);
+            adapter = undefined;
+        }
+    </script>
+    <script type="text/javascript" src="vendor/custom-elements-es5-adapter.js"></script>
+</div>
+
+<div id="custom-elements-polyfill">
+    <!-- Trick to include custom elements polyfill only if custom elements are not supported -->
+    <script type="text/javascript">
+        if ('customElements' in window) {
+            var polyfill = document.getElementById('custom-elements-polyfill');
+
+            polyfill.parentNode.removeChild(polyfill);
+            polyfill = undefined;
+        }
+    </script>
+    <script type="text/javascript" src="vendor/custom-elements.min.js"></script>
+</div>
+```
+
+# Install
+
+Include the file in HTML
+
+```html
+<script src="/node_modules/lodash/lodash.js"></script>
+<script src="/node_modules/@contasystemer/angularjs-assert/src/angularjs-assert.js"></script>
+<script src="/node_modules/@contasystemer/angularjs-custom-element/src/angularjs-custom-element.js"></script>
+```
+
+or require the file
+
+```js
+require('@contasystemer/angularjs-custom-element');
+```
+
+# Use
+
+In JavaScript
+
+```javascript
+csCustomElement.create('cs-component', {
+    // Can be used to specify special element for AngularJS directive which will be used as attribute.
+    attributeDirective: {
+        element: 'div',
+        attributeValue: '{{ vm.csExtraData }}',
+    },
+    attributes: ['cs-required', 'cs-change-year'],
+    interpolations: ['csApiUrl', 'csMainAddressLabel'],
+    scope: {
+        csExtraData: csCustomElement.decode.string,
+    },
+    bindings: {
+        csIntegerBinding: csCustomElement.decode.integer,
+        csBooleanBinding: csCustomElement.decode.boolean,
+    },
+    customBindings: {
+        csCustomBinding: {
+            attribute: 'custom-attribute',
+            attributeValue: '{{ vm.someCustomValue }}',
+            decode: {
+                set: function (value) {
+                    this.$scope.vm.someCustomValue = value;
+                }
+            }
+        }
+    },
+    events: {
+        csOnChange: {
+            model: function (value) {
+                return value === 'my string' : 'Yes, I have got what I wanted' : 'Oops, failed';
+            },
+            data: {
+                argumentName: 'vm.someScopeValue',
+                encode: csCustomElement.encode.identity,
+            },
+            init: csCustomElement.encode.identity
+        }
+    }
+});
+```
+
+In Elm:
+
+```elm
+viewContaComponent : Html Msg
+viewContaComponent =
+    Html.angularComponentWithTransclusion
+        { componentName = "cs-component-element"
+        , attributes =
+            [ Attrs.attribute "cs-required" ""
+            , Attrs.attribute "cs-change-year" ""
+            , Attrs.property "csApiUrl" (Encode.string "some/url")
+            , Attrs.property "csMainAddressLabel" (Encode.string "My address in Oslo")
+            , Attrs.property "csExtraData" (Encode.string "Some extra data")
+            , Attrs.property "csIntegerBinding" (Encode.int 42)
+            , Attrs.property "csBooleanBinding" (Encode.bool True)
+            , Attrs.property "csCustomBinding" (Encode.string "My custom string")
+            , Decode.decode MyMessage
+                |> Decode.requiredAt [ "detail", "model" ] Decode.string
+                |> Decode.requiredAt [ "detail", "data" ] Decoder.int
+                |> Decode.requiredAt [ "detail", "init" ] Decode.bool
+                |> Events.on "csOnChange"
+            ]
+        -- `transclude` takes one parameter with type `List (Html Never)`.
+        -- Which means any content which does not produce any messages.
+        , transclude = [ Html.text "Add some extra content here." ]
+        }
+```
+
+From `cs-component` a custom element will be created with name `cs-component-element`.
+
+For more details/examples please read the source code.
+
+# Extend
+
+The service exposes helper functions for decoding and encoding common types.
+The service exposes `helper.decode` function to construct custom decoding functions.
+Use [module.decorator](https://docs.angularjs.org/guide/decorators) to augment decoders and encoders.
+E.g. at Conta we have decoders for `moment` values, etc..
+
+To augment scope's `vm` for each custom element use [module.decorator](https://docs.angularjs.org/guide/decorators) to override `extendVm` method.
+E.g. at Conta we use `extendVm` method to augment each custom element scope's `vm` with `sendToElm` method.
+`sendToElm` method allows us to send messages from AngularJS to Elm directly (depends on internal implementation).

index.js

@@ -0,0 +1,4 @@
+require('lodash');
+require('angular');
+require('@contasystemer/angularjs-assert');
+module.exports = 'conta.customElement';

karma.conf.js

@@ -0,0 +1,62 @@
+process.env.CHROME_BIN = require('puppeteer').executablePath();
+
+module.exports = function(config) {
+    config.set({
+        // base path that will be used to resolve all patterns (eg. files, exclude)
+        basePath: '',
+
+        // plugins to use
+        plugins: [
+            'karma-chrome-launcher',
+            'karma-jasmine',
+        ],
+
+        // frameworks to use
+        frameworks: ['jasmine'],
+
+        // start these browsers
+        browsers: ['ChromeHeadless'],
+
+        // list of files / patterns to load in the browser
+        files: [
+            'node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js',
+            'node_modules/lodash/lodash.js',
+            'node_modules/angular/angular.js',
+            'node_modules/@contasystemer/angularjs-assert/src/cs-assert.provider.js',
+            'src/cs-custom-element.service.js',
+            'node_modules/angular-mocks/angular-mocks.js',
+            'spec/cs-custom-element.service.spec.js',
+        ],
+
+        // list of files / patterns to exclude
+        exclude: [],
+
+        // preprocess matching files before serving them to the browser
+        preprocessors: {},
+
+        // test results reporter to use
+        // possible values: 'dots', 'progress'
+        reporters: ['progress'],
+
+        // web server port
+        port: 9876,
+
+        // enable / disable colors in the output (reporters and logs)
+        colors: true,
+
+        // level of logging
+        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+        logLevel: config.LOG_INFO,
+
+        // enable / disable watching file and executing tests whenever any file changes
+        autoWatch: false,
+
+        // Continuous Integration mode
+        // if true, Karma captures browsers, runs the tests and exits
+        singleRun: true,
+
+        // Concurrency level
+        // how many browser should be started simultaneous
+        concurrency: Infinity
+    });
+}