@castlabs/ui 4.18.2

package/README.md

@@ -0,0 +1,94 @@
+# castlabs-ui
+
+This is a vanilla HTML and Vue.js component library for castLabs branded sites.
+
+
+## Using `@castlabs/ui` in npm projects
+
+This is a public NPM package, add it via:
+
+* `npm install @castlabs/ui`
+
+
+## Using `@castlabs/ui` in Vue.js 3 projects
+
+First create a vite Vue project (see Vue homepage's Quickstart), then remove all default css files and components.
+
+Next, follow the steps described above under *Using `@castlabs/ui` in npm projects*. Then edit your `main.js`/`main.ts` file and add:
+
+```
+import '@castlabs/ui/dist/castlabs-ui.css'
+import { castlabsUi } from '@castlabs/ui'
+import { castlabsUiEditor } from '@castlabs/ui/dist/castlabs-ui-editor.common.js' // optional
+import uid from '@castlabs/ui/plugins/uid'
+
+...
+
+app.use(castlabsUi)
+app.use(castlabsUiEditor) // optional
+app.use(uid)
+```
+
+You now have access to all the `<cl-*>` components mentioned in the Styleguide and can start adding the page templates and the sidenav.
+
+
+## Using `@castlabs/ui` in Angular projects
+
+Follow the steps described above under *Using `@castlabs/ui` in npm projects*. Then edit your `angular.json` file and add the style files to your `projects` section:
+
+```
+"assets": [
+  { "glob": "favicon.ico", "input": "node_modules/@castlabs/ui/dist/favicon", "output": "/" },
+  { "glob": "favicon.svg", "input": "node_modules/@castlabs/ui/dist/favicon", "output": "/" },
+  { "glob": "*", "input": "node_modules/@castlabs/ui/dist/favicon", "output": "favicon/" },
+  "src/assets"
+],
+"styles": [
+  "src/styles.scss"
+],
+```
+
+Create/edit your `src/style.scss` file and add:
+
+```
+$castlabs-ui-asset-prefix: '../..';
+@import '@castlabs/ui/src/styles/ui';
+```
+
+To use our `$cl-*` helper SCSS variables in a component `*.scss` file, add to its top:
+
+```
+@import '@castlabs/ui/src/styles/global';
+```
+
+To use our cl* helper js methods (csModalShow in the following examples), import them your TS files:
+
+```
+import { clModalShow } from '@castlabs/ui/dist/castlabs-ui.module.js'
+```
+
+You can use the helpers now in your code/template:
+
+```
+<!-- TS --->
+export class ... {
+  ...
+  clModalShow = (id: string): void => clModalShow(id)
+  ...
+}
+
+<!-- HTML --->
+<button class="btn cl-btn-primary" (click)="clModalShow('mymodal')">click me</button>
+```
+
+Finally, it might or might not necessary to copy `node_modules/@castlabs/ui/dist/castlabs-ui.module.d.ts` over into your source tree for your local IDE to pick up all types. The angular builder should be able to fetch them directly from the node module.
+
+
+## Which .js file to use
+
+There are multiple variants of our library js available. Depending on your needs:
+
+* `castlabs-ui.core.js` is used by static/vanilla JS projects that use <script> tags to load the file.
+* `castlabs-ui.common.js` is used by Vue projects
+* `castlabs-ui-editor.common.js` is used by Vue projects that also use the Ace editor.
+* `castlabs-ui.module.js` is used by other frameworks that `import` JS files as JS modules.

package/dist/assets/castlabs-logo.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 50"><style type="text/css"> .st0{fill:#D2232A;} .st1{fill:#FFFFFF;} </style><rect class="st0" width="50" height="50"/><rect x="51.5" class="st0" width="198.5" height="50"/><path class="st1" d="M15 42.3c1.7-2.4 9.1-12.9 11.4-16.8 -0.8-2.3-6.5-14.8-7.9-17.2l2.2-1.7C23.8 10.8 31 21 34.5 25.5 32 28.1 21.3 39.3 16.8 44L15 42.3z"/><path class="st1" d="M72.4 39.3c-1 0.7-2.9 1.6-6 1.6 -4.3 0-8.8-2.5-8.8-8 0-7.2 5.1-10.3 9.7-10.3 1.8 0 3.5 0.4 4.4 1.1 0 0.8-0.4 1.9-1 2.8h-0.2c-0.6-0.8-2-2.1-4.4-2.1 -2.7 0-5 2.2-5 6.4 0 6 3.1 8.8 7.4 8.8 1.5 0 3.1-0.9 3.6-1.2L72.4 39.3z"/><path class="st1" d="M97.5 40c-0.5 0.3-1.3 0.9-2.9 0.9 -1.9 0-2.6-0.8-3-1.6 -1.2 0.8-2.6 1.6-5.6 1.6 -2.8 0-4.7-1.6-4.7-3.7 0-4.9 6.5-6.4 9.9-7.4V29c0-2.5-0.7-4.6-3.5-4.6 -3 0-4 2.4-4.7 3.8h-0.3c-0.4-0.5-0.7-0.8-1-1.5 1.1-1.5 3.5-4 7.6-4 4.3 0 5.2 2.3 5.2 6.1v5.4c0 2.6 0 5.5 2.1 5.5 0.4 0 0.5-0.1 0.7-0.2L97.5 40zM90.8 31.7c-2.2 0-5.9 0.9-5.9 4.5 0 2.2 1.4 3.4 3.5 3.4 1.7 0 2.6-1.2 2.9-1.5v-6.4H90.8z"/><path class="st1" d="M116.6 28.3c0-1.7-1.2-4.4-3.7-4.4 -1.4 0-2.4 1-2.4 2.7 0 4.3 8.4 3.1 8.4 9.1 0 3.6-2.9 5.3-6.5 5.3 -2.5 0-3.8-0.6-4.8-1.1 -0.6-1.7-0.7-3.6-0.7-5.1h1c0.8 2.5 2 4.9 5.1 4.9 1.7 0 2.7-1.5 2.7-2.8 0-5.1-8.4-3.3-8.4-9.5 0-3.1 2.8-4.8 6-4.8 2 0 3.2 0.6 4 1.1 0.4 1.4 0.5 2.6 0.5 4.6H116.6z"/><path class="st1" d="M139.9 39.7c-0.5 0.2-2.6 1.2-4.5 1.2 -4.1 0-4.2-2.1-4.2-6.3v-9.9c-0.8 0-2-0.1-2.9-0.4v-0.8c1-0.1 2.1-0.3 2.9-0.4v-1.1c1-1.2 2.3-2.5 3.3-3.3L135 19c-0.1 0.7-0.5 3.1-0.5 4.2 1.1 0.1 3 0.3 4 0.4v0.8c-1 0.3-2.9 0.3-4 0.4v8.2c0 3 0 6.2 3.2 6.2 0.8 0 1.5-0.2 1.9-0.3L139.9 39.7z"/><path class="st1" d="M149.2 39.4l1.6-0.1c1.7-0.2 1.7-0.4 1.7-5.8V18.1c0-5.4 0-5.6-1.7-5.8l-1.6-0.1v-1h10.7v1l-1.6 0.1c-1.7 0.2-1.7 0.4-1.7 5.8v20.4c1.6 0.3 3.2 0.5 4.8 0.5 6.5 0 7-2.6 7.8-6.3l1.1 0.2c-0.1 2.8-0.7 4.9-1.5 7.3h-19.7V39.4z"/><path class="st1" d="M196.6 40c-0.5 0.3-1.3 0.9-2.9 0.9 -1.9 0-2.6-0.8-3-1.6 -1.2 0.8-2.6 1.6-5.5 1.6 -2.8 0-4.7-1.6-4.7-3.7 0-4.9 6.5-6.4 9.9-7.4V29c0-2.5-0.7-4.6-3.5-4.6 -3 0-4 2.4-4.7 3.8h-0.3c-0.4-0.5-0.7-0.8-1-1.5 1.1-1.5 3.5-4 7.6-4 4.3 0 5.2 2.3 5.2 6.1v5.4c0 2.6 0 5.5 2.1 5.5 0.4 0 0.5-0.1 0.7-0.2L196.6 40zM189.9 31.7c-2.2 0-5.9 0.9-5.9 4.5 0 2.2 1.4 3.4 3.5 3.4 1.7 0 2.6-1.2 2.9-1.5v-6.4H189.9z"/><path class="st1" d="M210.4 27.8L210.4 27.8c1.3-1.6 4-5.2 7.8-5.2 1.9 0 2.9 1.4 2.9 3.7 0 6.4-3.8 14.7-11.3 14.7 -2.4 0-3.6-1.2-3.6-3.4 0-1.2 0.3-2.8 0.6-4.5l2.8-14.7c0.1-0.7 0.3-1.7 0.3-2 0-0.5-0.2-0.8-0.6-0.8 -0.5 0-1.7 0.5-2.4 0.8l-0.3-0.8c1-0.7 4.2-2.3 5.5-2.3 0.6 0 0.9 0.3 0.9 1.1 0 0.5-0.2 1.5-0.3 2.5L210.4 27.8zM211.6 39.4c4.6 0 6.2-8.4 6.2-11.6 0-1.8-0.2-3.4-1.7-3.4 -2.9 0-6.7 6.5-6.7 11.6C209.4 37.9 210 39.4 211.6 39.4z"/><path class="st1" d="M240.7 28.3c0-1.7-1.2-4.4-3.7-4.4 -1.4 0-2.4 1-2.4 2.7 0 4.3 8.4 3.1 8.4 9.1 0 3.6-2.9 5.3-6.5 5.3 -2.5 0-3.8-0.6-4.8-1.1 -0.6-1.7-0.7-3.6-0.7-5.1h1c0.8 2.5 2 4.9 5.1 4.9 1.7 0 2.7-1.5 2.7-2.8 0-5.1-8.4-3.3-8.4-9.5 0-3.1 2.8-4.8 6-4.8 2 0 3.2 0.6 4 1.1 0.4 1.4 0.5 2.6 0.5 4.6H240.7z"/></svg>

package/dist/assets/cookie.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97 114" width="40" height="40"><style>.st0{fill:#e59b34}.st2{fill:#6a3000}</style><path class="st0" d="M83.2 46.9l-9.8-18.5c5.9-1.3 9.6-5.3 11.5-7.3l11.5 6.7c-1.8 2-13.2 19.1-13.2 19.1zM24.1 110.5C-26 91.1 11.8 15.1 48.6 0l11.5 6.7-36 103.8z"/><path class="st0" d="M63.6 26.6l-11-10.7c2.7 1.6 6.4 1.5 10.4-.7l11.5 6.7c-4 2.1-10.9 4.7-10.9 4.7z"/><path d="M96.4 27.9c3.1 29.3-16.9 64.8-42.1 79.7-23.5 13.6-42.6 2.7-42.7-24.3.3-29.3 21.3-64.7 48.5-76.6-2.7 10.8 2.7 21.2 14.4 15.2-.9 16.4 12.9 16 21.9 6z" fill="#ffb450"/><path class="st2" d="M68.7 76.3c-4.5 1.7-7.8 14.2 0 10.9 4.5-1.6 7.8-14.2 0-10.9zM48.8 63.8c12.2-4-2 20.7-4.7 8.2 0-3 2.1-6.7 4.7-8.2zM72.7 42.9c7.8-3.3 4.5 9.3 0 11-7.8 3.3-4.5-9.3 0-11zM33.8 88c7.8-3.3 4.5 9.3 0 10.9-7.7 3.4-4.4-9.2 0-10.9zM50.8 27.8c7.8-3.3 4.5 9.3 0 11-7.8 3.3-4.5-9.3 0-11zM30 54.7c12.2-4-2 20.7-4.8 8.2.1-3 2.2-6.7 4.8-8.2z"/></svg>