#35

elements/brand/ucd-theme-slim-select/ucd-theme-slim-select.js

@@ -0,0 +1,64 @@
+import { LitElement } from 'lit';
+import {render, styles} from "./ucd-theme-slim-select.tpl.js";
+
+import SlimSelect from 'slim-select';
+
+import { Mixin, MutationObserverElement } from "../../utils/index.js";
+
+/**
+ * @class UcdThemeSlimSelect
+ * @classdesc UI component class for displaying a fancy select. This is a wrapper element around the 'slim-select' package.
+ * 
+ * Patternlab URL:
+ *  - http://dev.webstyleguide.ucdavis.edu/redesign/?p=atoms-select-menu
+ */
+export default class UcdThemeSlimSelect extends Mixin(LitElement)
+  .with(MutationObserverElement) {
+
+  static get properties() {
+    return {
+
+    };
+  }
+
+  static get styles() {
+    return styles();
+  }
+
+  constructor() {
+    super();
+    this.render = render.bind(this);
+  }
+  /**
+   * @method connectedCallback
+   * @private
+   * @description Native lifecycle method called when element is connected
+   */
+  connectedCallback(){
+    super.connectedCallback();
+    this._childListObserver.disconnect();
+    this._childListObserver.observe(this, {subtree: true, childList: true, attributes: true, characterData: true});
+  }
+
+  /**
+   * @method _onChildListMutation
+   * @private
+   * @description Fires when light dom child list changes. Injected by MutationObserverElement mixin.
+   */
+  _onChildListMutation(){
+    const children = Array.from(this.children);
+    if (children.length == 0 || children[0].tagName != "SELECT") return;
+    const select = children[0].cloneNode(true);
+    this.renderRoot.innerHTML= "";
+    this.renderRoot.appendChild(select);
+
+    this.slimSelect = new SlimSelect({
+      select: select,
+      onChange: (info) => this.dispatchEvent(new CustomEvent("change", {detail: info}))
+    });
+
+  }
+
+}
+
+customElements.define('ucd-theme-slim-select', UcdThemeSlimSelect);

elements/brand/ucd-theme-slim-select/ucd-theme-slim-select.tpl.js

@@ -0,0 +1,26 @@
+import { html, css } from 'lit';
+
+import formStyles from "@ucd-lib/theme-sass/2_base_class/_forms.css.js";
+import slimSelectStyles from "@ucd-lib/theme-sass/slim-select.css.js"
+import selectStyles from "@ucd-lib/theme-sass/4_component/_slim-select.css.js";
+
+
+
+export function styles() {
+  const elementStyles = css`
+    :host {
+      display: block;
+    }
+  `;
+
+  return [
+    formStyles,
+    slimSelectStyles,
+    selectStyles,
+    elementStyles];
+}
+
+export function render() { 
+return html`
+
+`;}

elements/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucd-lib/theme-elements",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Custom elements for the UCD brand theme",
   "main": "index.js",
   "scripts": {
@@ -9,8 +9,9 @@
   "author": "[email protected]",
   "license": "MIT",
   "dependencies": {
-    "@ucd-lib/theme-sass": "^5.0.10",
+    "@ucd-lib/theme-sass": "^5.0.11",
     "lit": "^2.0.0-rc.4",
-    "photoswipe": "^4.1.3"
+    "photoswipe": "^4.1.3",
+    "slim-select": "^1.26.2"
   }
 }

test-app/index.js

@@ -16,6 +16,7 @@ import "./pages/page-ucd-theme-search-form";
 import "./pages/page-ucd-theme-search-popup";
 import './pages/page-ucd-theme-collapse';
 import './pages/page-ucd-theme-subnav';
+import "./pages/page-ucd-theme-slim-select";
 
 // ucdlib components
 import "./pages/page-ucdlib-icon";