@exmg/exm-chip-input 1.1.8 → 1.1.10-alpha.19

package/dist/exm-chip-input-dropdown.d.ts

@@ -21,6 +21,7 @@ export declare class ExmChipInputDropdown extends ChipSet {
     dropdownTitle: string;
     btnAddText: string;
     selectedChips?: ExmChip[];
+    supportingText: string;
     private menuOpen;
     static styles: import("lit").CSSResult[];
     constructor();

package/dist/exm-chip-input-dropdown.js

@@ -7,10 +7,12 @@ import '@material/web/icon/icon.js';
 import '@material/web/menu/menu.js';
 import './dropdown/dropdown-container.js';
 import { ChipSet } from '@material/web/chips/internal/chip-set.js';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { style } from './styles/exm-chip-input-dropdown-css.js';
+import { sharedChipStyle } from './styles/exm-chips-shared-css.js';
+import { classMap } from 'lit/directives/class-map.js';
 /**
  *
  * @final
@@ -22,6 +24,7 @@ let ExmChipInputDropdown = class ExmChipInputDropdown extends ChipSet {
         this.label = '';
         this.dropdownTitle = 'Select items';
         this.btnAddText = 'Add items';
+        this.supportingText = '';
         this.menuOpen = false;
         // Add event listeners in the constructor
         this.addEventListener('click', this._onSelect);
@@ -60,47 +63,40 @@ let ExmChipInputDropdown = class ExmChipInputDropdown extends ChipSet {
         }
     }
     render() {
-        return html `<div class="container">
-      <div class="label">${this.label}</div>
-      <div class="input-container">
-        <div class="selected-chips">
-          ${repeat(this.selectedChips || [], (c) => c.value, (c) => html `<md-input-chip
-                label="${c.label}"
-                data-value=${c.value}
-                selected
-                @remove=${() => this._removeSelected(c.value)}
-              ></md-input-chip>`)}
-        </div>
-        <div class="add">
-          <md-text-button
-            id="button"
-            @click="${this.onOpenClick}"
-            title="${this.dropdownTitle} controls"
+        const containerClasses = { 'has-label': !!this.label };
+        const labelClasses = { 'not-empty': (this.selectedChips || []).length > 0, 'has-focus': this.menuOpen };
+        return html `
+      <div class="container ${classMap(containerClasses)}">
+        <div class="background"></div>
+        <div class="label ${classMap(labelClasses)}">${this.label}</div>
+        <div class="input-container" id="input-container" @click="${this.onOpenClick}">
+          <div class="selected-chips">
+            ${repeat(this.selectedChips || [], (chip) => chip.value, (chip) => html `<md-input-chip
+                  label="${chip.label}"
+                  data-value=${chip.value}
+                  selected
+                  @remove=${() => this._removeSelected(chip.value)}
+                ></md-input-chip>`)}
+          </div>
+          <md-menu
+            anchor="input-container"
+            menu-corner="start-start"
+            anchor-corner="end-start"
+            default-focus="none"
+            role="dialog"
             aria-label="${this.dropdownTitle} controls"
-            aria-haspopup="dialog"
-            aria-expanded=${this.menuOpen ? 'true' : 'false'}
+            .open=${this.menuOpen}
+            @closed=${this.onMenuClosed}
+            @keydown=${this.onKeydown}
           >
-            ${this.btnAddText}
-            <md-icon slot="icon">add</md-icon>
-          </md-text-button>
+            <dropdown-container .dropdownTitle=${this.dropdownTitle}
+              ><slot @slotchange=${this.updateTabIndicesOverride}></slot
+            ></dropdown-container>
+          </md-menu>
         </div>
-        <md-menu
-          anchor="button"
-          menu-corner="start-start"
-          anchor-corner="end-start"
-          default-focus="none"
-          role="dialog"
-          aria-label="${this.dropdownTitle} controls"
-          .open=${this.menuOpen}
-          @closed=${this.onMenuClosed}
-          @keydown=${this.onKeydown}
-        >
-          <dropdown-container .dropdownTitle=${this.dropdownTitle}
-            ><slot @slotchange=${this.updateTabIndicesOverride}></slot
-          ></dropdown-container>
-        </md-menu>
+        ${this.supportingText ? html `<div class="supporting-text">${this.supportingText}</div>` : nothing}
       </div>
-    </div>`;
+    `;
     }
     updateTabIndicesOverride() {
         // The chip that should be focusable is either the chip that currently has
@@ -131,7 +127,7 @@ let ExmChipInputDropdown = class ExmChipInputDropdown extends ChipSet {
         }
     }
 };
-ExmChipInputDropdown.styles = [style];
+ExmChipInputDropdown.styles = [sharedChipStyle, style];
 __decorate([
     property({ type: String })
 ], ExmChipInputDropdown.prototype, "label", void 0);
@@ -144,6 +140,9 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], ExmChipInputDropdown.prototype, "selectedChips", void 0);
+__decorate([
+    property({ type: String, attribute: 'supporting-text' })
+], ExmChipInputDropdown.prototype, "supportingText", void 0);
 __decorate([
     state()
 ], ExmChipInputDropdown.prototype, "menuOpen", void 0);

package/dist/exm-chip-input.d.ts

@@ -11,6 +11,8 @@ declare global {
  */
 export declare class ExmChipInput extends ChipSet {
     label: string;
+    supportingText: string;
+    chipCount: number;
     static styles: import("lit").CSSResult[];
     protected render(): import("lit-html").TemplateResult<1>;
     private updateTabIndicesOverride;

package/dist/exm-chip-input.js

@@ -3,8 +3,10 @@ import { customElement } from 'lit/decorators/custom-element.js';
 import { style } from './styles/exm-chip-input-css.js';
 import { ChipSet } from '@material/web/chips/internal/chip-set.js';
 import { styles } from '@material/web/chips/internal/chip-set-styles.js';
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { sharedChipStyle } from './styles/exm-chips-shared-css.js';
+import { classMap } from 'lit/directives/class-map.js';
 /**
  *
  * @final
@@ -14,17 +16,27 @@ let ExmChipInput = class ExmChipInput extends ChipSet {
     constructor() {
         super(...arguments);
         this.label = '';
+        this.supportingText = '';
+        this.chipCount = 0;
     }
     render() {
-        return html `<div class="container">
-      <div class="label">${this.label}</div>
-      <div class="items"><slot @slotchange=${this.updateTabIndicesOverride}></slot></div>
-    </div>`;
+        const containerClasses = { 'has-label': !!this.label };
+        const labelClasses = { 'not-empty': this.chipCount > 0 };
+        return html `
+      <div class="container ${classMap(containerClasses)}">
+        <div class="background"></div>
+        <div class="state-layer"></div>
+        <div class="label ${classMap(labelClasses)}">${this.label}</div>
+        <div class="items"><slot @slotchange=${this.updateTabIndicesOverride}></slot></div>
+        ${this.supportingText ? html `<div class="supporting-text">${this.supportingText}</div>` : nothing}
+      </div>
+    `;
     }
     updateTabIndicesOverride() {
         // The chip that should be focusable is either the chip that currently has
         // focus or the first chip that can be focused.
         const { chips } = this;
+        this.chipCount = chips.length;
         let chipToFocus;
         for (const chip of chips) {
             const isChipFocusable = chip.alwaysFocusable || !chip.disabled;
@@ -47,10 +59,16 @@ let ExmChipInput = class ExmChipInput extends ChipSet {
         }
     }
 };
-ExmChipInput.styles = [styles, style];
+ExmChipInput.styles = [styles, sharedChipStyle, style];
 __decorate([
     property({ type: String })
 ], ExmChipInput.prototype, "label", void 0);
+__decorate([
+    property({ type: String, attribute: 'supporting-text' })
+], ExmChipInput.prototype, "supportingText", void 0);
+__decorate([
+    state()
+], ExmChipInput.prototype, "chipCount", void 0);
 ExmChipInput = __decorate([
     customElement('exm-chip-input')
 ], ExmChipInput);

package/dist/styles/exm-chip-input-css.js

@@ -4,14 +4,13 @@ export const style = css `
     display: block;
   }
 
-  .label {
-    display: block;
-    font-size: 1rem;
-    font-weight: 500;
-    margin-bottom: 0.5rem;
+  .container {
+    overflow: hidden;
   }
 
   .items {
+    grid-area: 2/1/3/2;
+    padding: 16px;
     display: flex;
     flex-wrap: wrap;
     gap: 0.3rem;

package/dist/styles/exm-chip-input-dropdown-css.js

@@ -4,21 +4,11 @@ export const style = css `
     display: block;
   }
 
-  .label {
-    display: block;
-    font-size: 1rem;
-    font-weight: 500;
-    margin-bottom: 0.5rem;
-  }
-
-  .add {
-    display: flex;
-    align-items: center;
-    margin-top: 0.5rem;
-  }
-
   .input-container {
+    grid-area: 2/1/3/2;
     position: relative;
+    min-height: 32px;
+    padding: 16px;
   }
 
   .selected-chips {

package/dist/styles/exm-chips-shared-css.d.ts

@@ -0,0 +1 @@
+export declare const sharedChipStyle: import("lit").CSSResult;

package/dist/styles/exm-chips-shared-css.js

@@ -0,0 +1,77 @@
+import { css } from 'lit';
+export const sharedChipStyle = css `
+  .container {
+    display: grid;
+    grid-template-rows: 0px auto auto;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+
+  .container.has-label {
+    grid-template-rows: 2rem auto auto;
+  }
+
+  .background {
+    grid-area: 1/1/3/2;
+  }
+
+  .background {
+    background-color: var(--editor-code-background-color, var(--md-sys-color-surface-container-highest));
+    border-bottom: 1px solid var(--editor-border-color-focus, var(--md-sys-color-primary));
+    border-top-right-radius: inherit;
+    border-top-left-radius: inherit;
+  }
+
+  .container:hover .state-layer {
+    background-color: var(--editor-code-background-focus-color, var(--md-sys-color-on-surface-variant));
+    border-top-right-radius: inherit;
+    border-top-left-radius: inherit;
+    opacity: 0.08;
+  }
+
+  .label {
+    grid-area: 1/1/2/2;
+    font-size: 1rem;
+    padding: 0.5rem 0 0 1rem;
+    transition: all 200ms ease;
+    transform: scale(1) translateY(0px);
+  }
+
+  .label.has-focus {
+    color: var(--editor-label-focus-color, var(--md-sys-color-primary));
+  }
+
+  .label.has-focus,
+  .label.not-empty {
+    padding: 0.5rem 0 0 1rem;
+    font-size: 0.7rem;
+    transition: all 200ms ease;
+    transform: scale(1) translateY(0px);
+  }
+
+  .supporting-text {
+    grid-area: 3/1/4/2;
+
+    color: var(--md-filled-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));
+    display: flex;
+    font-family: var(
+      --md-filled-field-supporting-text-font,
+      var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto))
+    );
+    font-size: var(--md-filled-field-supporting-text-size, var(--md-sys-typescale-body-small-size, 0.75rem));
+    line-height: var(
+      --md-filled-field-supporting-text-line-height,
+      var(--md-sys-typescale-body-small-line-height, 1rem)
+    );
+    font-weight: var(
+      --md-filled-field-supporting-text-weight,
+      var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400))
+    );
+    gap: 16px;
+    justify-content: space-between;
+    padding-inline-start: var(--md-filled-field-supporting-text-leading-space, 16px);
+    padding-inline-end: var(--md-filled-field-supporting-text-trailing-space, 16px);
+    padding-top: var(--md-filled-field-supporting-text-top-space, 4px);
+  }
+`;
+//# sourceMappingURL=exm-chips-shared-css.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-chip-input",
-  "version": "1.1.8",
+  "version": "1.1.10-alpha.19+20be399",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,15 +11,12 @@
     "./exm-chip-input-dropdown.js": "./dist/exm-chip-input-dropdown.js",
     "./exm-chip.js": "./dist/exm-chip.js"
   },
-  "dependencies": {
-    "@exmg/lit-base": "^3.0.0",
+  "peerDependencies": {
+    "@exmg/lit-base": "^3.0.3",
     "@material/web": "^2.2.0",
-    "lit": "^3.0.0",
+    "lit": "^3.2.1",
     "tslib": "^2.6.2"
   },
-  "devDependencies": {
-    "@exmg/lit-cli": "1.1.13"
-  },
   "keywords": [
     "web-components",
     "lit",
@@ -42,5 +39,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e9c6e6e7b81658423344b640be549700e95be7c0"
+  "gitHead": "20be399892ecc54f71f080f17a677a370d9f2b9c"
 }