paper-chip.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-behaviors/iron-button-state.html">
<link rel="import" href="../iron-behaviors/iron-control-state.html">
<link rel="import" href="./paper-chip-icons.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../paper-material/paper-material.html">
<link rel="import" href="../paper-styles/paper-styles.html">
<link rel="import" href="../paper-styles/typography.html">

<!--
Material design: [Chips](https://material.io/guidelines/components/chips.html#).

> A chip web component made with Polymer 2 following Material Design guidelines

Polymer 2.x `<paper-chip>` may contain a icon or a photo, some line of text or a contact information with Material Design styling.

## Usage

Basic paper-chip.

```html
<paper-chip single-line>
    <div slot="label" class="label">Single-line Chip</div>
</paper-chip>
```

It can show **single-line** or **multi-line** text. You can open a multi-line chip tapping on it.

```html
<paper-chip>
    <iron-icon slot="icon" class="icon" icon="avatars:avatar-1"></iron-icon>
    <div slot="label" class="label">John Foo</div>
    <div slot="caption" class="caption">jfoo@doh.com</div>
</paper-chip>
```

Configure some basic behavior. It may be removable or not.

```html
<paper-chip removable>
    <div slot="label" class="label">Removable Chip</div>
</paper-chip>
```

Choose to set animation in openable chip.

```html
<paper-chip removable animated>
    <div slot="icon" class="icon">P</div>
    <div slot="label" class="label">John Foo</div>
    <div slot="caption" class="caption">jfoo@doh.com</div>
</paper-chip>
```

Use `<paper-chip-input>` component to collect a set of `chip`.

```html
    <paper-chip-input></paper-chip-input>
```

Do you want to change the **keys** that automatically submit chips?

No worries, we support it!

Configure them with the `enter-keys` property adding the keys.

We support the [Polymer.IronA11yKeysBehavior](https://github.com/PolymerElements/iron-a11y-keys-behavior) format.

Following example should clarify the usage of this feature.

```html
<paper-chip-input enter-keys='["enter", "space"]'></paper-chip-input>
```


Do you need **autocomplete** ?

When you have a predefined and finite set of input values you can set the predefined values with `datasource` property.

```html
<paper-chip-input label="Weekdays" datasource='[{"value": "1", "label": "monday" },{"value": "2", "label": "tuesday"}, {"value": "3", "label": "wednesday"}, {"value": "4", "label": "thursday"}, {"value": "5", "label": "friday"}, {"value": "6", "label": "saturday"}, {"value": "7", "label": "sunday"}]'  placeholder="Add day"></paper-chip-input>
```

The default properties for datasource are `label` and `value`, but you can configure it from outside by the properties `display-property` and `value-property`.

```html
<paper-chip-input display-property="value" value-property="key">
</paper-chip-input>
```

```json
{ "value": "apple", "key": 0 },
{ "value": "apricot", "key": 1 }
```

Autocomplete uses a **startWith** filter as default logic.

Do you need to implement a **custom filter logic**? You can do it!

Set `filter` property with your custom *function*. The following lines of code will show you how to do it.

```html
<paper-chip-input id="weekdays" label="Weekdays" datasource='[{"value": "1", "label": "monday" },{"value": "2", "label": "tuesday"}, {"value": "3", "label": "wednesday"}, {"value": "4", "label": "thursday"}, {"value": "5", "label": "friday"}, {"value": "6", "label": "saturday"}, {"value": "7", "label": "sunday"}]' placeholder="Add day"></paper-chip-input>
<script>
let weekdays = document.querySelector("#weekdays")
weekdays.filter = (data, value) => {
    return data.filter((item) => item[weekdays.displayProperty].toLowerCase().includes(value.toLowerCase()))
}
</script>
```

## Styling

The following custom properties and mixins are available for styling:

Custom property | Description | Default
----------------|-------------|----------
`--paper-chip-secondary-text-color` | The paper-chip label-color |
`--paper-chip-background-color` | The paper-chip background-color |
`--paper-chip-icon-background-color` | The paper-chip avatar background-color |
`--paper-chip-icon-text-color` | The paper-chip icon color |
`--paper-chip-closed-label-max-width` | The paper-chip label max-width when is closed | 80px

## Testing
If you are using **polyserve** navigate to the `test/` directory of your element to run its tests. You can view results in browser console.

### web-component-tester

The tests are compatible with [web-component-tester](https://github.com/Polymer/web-component-tester).

Install it via:

```sh
npm install web-component-tester
```

The `wct` tool will run your tests in all the browsers you have installed. Just
run it:

```sh
wct
```

By default, any tests under `test/` will be run. You can override this by
specifying particular files (or globs of files) via `wct path/to/files`.

Otherwise you can run the test suite via npm script

```sh
npm test
```

## License
MIT © fabbricadigitale

@element paper-chip
@demo demo/index.html
-->

<dom-module id="paper-chip">
    <template>
        <style>
            :host {
                display: inline-block;
                vertical-align: top;
                position: relative;
                outline: none;
                cursor: default;
                margin: 8px 0;
                height: 32px;
                overflow: visible;
                @apply --paper-font-body1;
                @apply --paper-chip;
            }

            :host([animated]) * {
                transition: 200ms ease-in;
            }

            #main,
            #chip {
                border-radius: 16px;
            }

            #main {
                background-color: var(--paper-chip-background-color, var(--paper-grey-200));
                position: relative;
                color: var(--paper-chip-secondary-text-color, var(--secondary-text-color));
                @apply --layout-vertical;
            }

            #chip {
                box-sizing: border-box;
                height: 32px;
                @apply --layout-horizontal;
                @apply --layout-center;
            }

            paper-material {
                border-radius: 16px;
            }

            #icon {
                @apply --layout-horizontal;
                @apply --layout-center;
                @apply --layout-center-justified;
            }

            #icon ::slotted([slot="icon"]) {
                margin-right: -4px;
                width: 32px;
                height: 32px;
                line-height: 32px;
                border-radius: 100%;
                overflow: hidden;
                text-align: center;
                vertical-align: middle;
                font-size: 16px;
                font-weight: bold;
                background-color: var(--paper-chip-icon-background-color, var(--paper-grey-500));
                color: var(--paper-chip-icon-text-color, var(--text-primary-color));
                @apply --layout-flex;
            }

            #icon ::slotted([class="icon"]) {
                /* FIXME: only top-level selectors allowed */
                width: 32px;
                height: 32px;
                vertical-align: bottom;
            }

            #label {
                padding: 0 4px 0 12px;
                @apply --layout-flex-auto;
                @apply --layout-self-center;
            }

            :host(:not([removable])) #label {
                padding-right: 12px;
            }

            :host([single-line]) #label {
                padding-right: 12px;
            }

            :host([single-line][removable]) #label {
                padding-right: 0px;
            }

            #label .labelFallback,
            #label ::slotted([slot="label"]) {
                @apply --layout-block;

                margin: 0;
                @apply --paper-font-body2;
                color: var(--paper-chip-secondary-text-color, var(--secondary-text-color));
            }

            :host(:not([opened])) #label .labelFallback,
            :host(:not([opened])) #label ::slotted([slot="label"]) {
                @apply --paper-font-common-nowrap;
                max-width: var(--paper-chip-closed-label-max-width, 80px);
            }


            #label ::slotted([slot="caption"]) {
                display: none;
                white-space: nowrap;
                margin: 0;
                @apply --paper-font-body1;
                color: var(--paper-chip-secondary-text-color, var(--secondary-text-color));
            }

            :host([opened]) #label ::slotted([slot="caption"]) {
                display: block;
            }

            :host([opened]) {
                z-index: 1;
            }

            #label .labelFallback,
            #label ::slotted([slot="label"]) {
                @apply --paper-chip-label;
            }

            #label ::slotted([slot="caption"]) {
                @apply --paper-chip-caption;
            }

            .icon-btn-wrapper {
                @apply --layout-self-center;
            }

            #removeBtn {
                position: relative;
                margin: 0 8px 0 4px;
                padding: 2px;
                cursor: pointer;
                @apply --paper-chip-removebtn;
            }

            #removeBtn iron-icon {
                display: block;
                @apply --paper-chip-removebtn-icon;
            }

            #removeBtn {
                display: none;
            }

            :host([removable]) #removeBtn {
                display: block;
            }

            /* pressed state */

            :host([pressed]) #main {
                background-color: var(--paper-chip-pressed-background-color, var(--paper-grey-300));
            }

            /* opened state */

            :host([opened]) #main,
            :host([opened]) #chip {
                border-radius: 0;
            }

            #content {
                width: 0;
                height: 0;
                min-width: 100%;
                overflow: hidden;
            }

            :host([opened]) #content {
                height: auto;
                width: auto;
                min-width: 100%;
                overflow: hidden;
                @apply --paper-chip-content;
            }

            :host([opened]) #chip {
                height: 72px;
            }

            :host([opened]) #chip,
            :host([opened]) #label ::slotted([slot="content"]) {
                padding: 16px 12px;
                background-color: var(--paper-chip-opened-background-color, var(--paper-grey-50));
            }

            :host([opened]) #label .labelFallback,
            :host([opened]) #label ::slotted([slot="label"]) {
                color: var(--paper-chip-primary-text-color, var(--primary-text-color));
                font-size: 16px;
                @apply --paper-chip-label-opened;
            }

            :host([opened]) paper-material {
                border-radius: 0;
            }

            :host([opened]) #icon ::slotted([slot="icon"]) {
                font-size: 20px;
                width: 40px;
                height: 40px;
                line-height: 40px;
            }

            :host([opened]) #removeBtn {
                padding: 4px;
                margin-left: 16px;
            }

            /* open + active state */

            :host([opened][active]) #chip,
            :host([opened][active]) * ::slotted {
                background-color: var(--paper-chip-active-color, var(--accent-color));
                color: var(--paper-chip-active-text-color, var(--text-primary-color));
            }

            :host([opened][active]) #removeBtn {
                color: var(--paper-chip-active-color, var(--accent-color));
                background-color: var(--paper-chip-active-text-color, var(--text-primary-color));
            }

            :host([opened][removable]) iron-icon {
                padding-top: 2px;
                padding-left: 2px;
            }

            :host([opened][active]) #label ::slotted([slot="label"]) {
                color: var(--paper-chip-active-text-color, var(--text-primary-color));
            }

            :host([opened][active]) * ::slotted(h2) {
                color: var(--paper-chip-active-secondary-text-color, var(--text-primary-color));
            }
        </style>

        <paper-material id="shadow" elevation$="[[_elevation]]" animated$="[[animated]]">

            <div id="main">

                <div id="chip">

                    <div id="icon">

                        <slot name="icon"></slot>

                    </div>

                    <div id="label">

                        <slot id="labelSlot" name="label">
                            <!-- fallback -->
                            <div class="labelFallback">

                                <slot id="fallbackLabelSlot"></slot>

                            </div>

                        </slot>

                        <slot name="caption"></slot>

                    </div>

                    <div id="removeBtn" on-tap="_selfRemove" aria-label="remove button">

                        <iron-icon icon="paper-chip-icons:cancel" class="icon"></iron-icon>

                    </div>

                </div>

                <div id="content">

                    <slot name="content"></slot>

                </div>

            </div>

        </paper-material>

    </template>
    <script>
        class PaperChip extends
            Polymer.mixinBehaviors(Polymer.IronControlState,
                Polymer.mixinBehaviors(Polymer.IronButtonState,
                    Polymer.mixinBehaviors(Polymer.IronA11yKeysBehavior, Polymer.Element))) {

            static get is() {
                return "paper-chip"
            }

            static get properties() {
                return {

                    value: {
                        type: String
                    },

                    index: {
                        type: Number
                    },

                    /**
                     * Whether or not the chip is removable.
                     * When `true`, a remove button will be shown.
                     *
                     * @attribute removable
                     * @type boolean
                     * @default false
                     */
                    removable: {
                        type: Boolean,
                        value: false
                    },

                    /**
                     * Whether or not the chip contains additional content.
                     * Single-line chips do not open.
                     */
                    singleLine: {
                        type: Boolean,
                        value: false,
                        observer: "_singleLineChanged"
                    },

                    /**
                     * Whether or not the chip uses an animated transition between opened and
                     * closed states.
                     *
                     * @attribute animated
                     * @type boolean
                     * @default true
                     */
                    animated: {
                        type: Boolean,
                        value: false
                    },

                    /**
                     * Whether or not the chip is in its opened state.
                     *
                     * @attribute opened
                     * @type boolean
                     * @default false
                     */
                    opened: {
                        type: Boolean,
                        value: false,
                        reflectToAttribute: true,
                        notify: true,
                        observer: "_openedChanged"
                    },

                    _elevation: {
                        type: Number,
                        computed: "_computeElevation(opened, focused, disabled, active, pressed)"
                    },

                    hasLabel: {
                        type: Boolean,
                        readOnly: true
                    }
                }
            }

            static get observers() {
                return [
                    "_handleVisibleLabel(hasLabel, value)"
                ]
            }

            connectedCallback() {
                super.connectedCallback()

                this._boundOnTap = (evt) => this._onTap(evt)
                this._boundOnBlur = (evt) => this._onBlur(evt)
                this._boundOnSlotChange = (evt) => this._onSlotChange(evt)

                this.addEventListener("tap", this._boundOnTap)
                this.addEventListener("blur", this._boundOnBlur, true)

                this._ensureAttribute("tabindex", 0)

                // Detect whether we have a label somehow (at boot and also at runtime)
                this._onSlotChange()
                this.$.fallbackLabelSlot.addEventListener("slotchange", this._boundOnSlotChange)
                this.$.labelSlot.addEventListener("slotchange", this._boundOnSlotChange)
            }

            disconnectedCallback() {
                super.disconnectedCallback()

                this.removeEventListener("tap", this._boundOnTap)
                this.removeEventListener("blur", this._boundOnBlur, true)
            }

            _onSlotChange(event) {
                if (event) {
                    if (event.target == event.currentTarget) {
                        switch (event.target) {
                            case this.$.labelSlot:
                                this._setHasLabel(this.$.labelSlot.assignedNodes().length > 0)
                                break

                            case this.$.fallbackLabelSlot:
                                this._setHasLabel(this.$.fallbackLabelSlot.assignedNodes().length > 0)
                                break
                        }
                    }

                    return
                }

                this._setHasLabel(this.$.labelSlot.assignedNodes().length > 0 || this.$.fallbackLabelSlot.assignedNodes().length > 0)
            }

            _handleVisibleLabel(hasLabel, value) {
                if (!hasLabel && !!value && !this.textContent) {
                    // Restarts (fallback) distribution
                    this.textContent = value
                }
            }

            _computeElevation(opened, focused, pressed) {
                const elevationMax = 4
                const elevationMin = 1
                const noElevation = 0
                if (focused || pressed) {
                    return elevationMin
                }
                if (opened) {
                    return elevationMax
                }
                return noElevation
            }

            _onTap() {
                // Toggle opened status only when this element is focused
                if (this.opened && document.activeElement === this) {
                    this.opened = false
                } else {
                    this.opened = true
                }
            }

            _onBlur(event) {
                let relatedTarget = event.relatedTarget
                if (!relatedTarget || !this.isLightDescendant(relatedTarget)) {
                    this.opened = false
                }
            }

            _selfRemove(evt) {
                evt.stopPropagation()
                this.remove()
            }

            remove() {
                if (!this.removable || !this.parentNode) {
                    return // ignore
                }
                const evt = new CustomEvent("remove", { cancelable: true })
                this.dispatchEvent(evt)
                // Remove from DOM when the event default action has not been prevented
                if (!evt.defaultPrevented) {
                    return this.parentNode.removeChild(this)
                }
            }

            _singleLineChanged(singleLine) {
                if (singleLine && this.opened) {
                    this.opened = false
                }
            }

            _openedChanged(opened) {
                if (opened && this.singleLine) {
                    this.opened = false
                    return
                }
                if (this.animated) {
                    let width = ""
                    let height = ""
                    const content = this.$.content
                    if (this.opened) {
                        this.animated = false
                        this.opened = true
                        width = `${content.offsetWidth} px`
                        height = `${content.offsetHeight} px`
                        this.opened = false
                        this._forceReflow()
                        this.opened = true
                        this.animated = true
                    }
                    content.style.width = width
                    content.style.height = height
                }
            }

            _forceReflow() {
                return this.offsetHeight
            }

            get behaviors() {
                return []
            }

            get keyBindings() {
                return {
                    "delete": "_selfRemove",
                    "backspace": "_selfRemove"
                }
            }

            get label() {

                var nodes = this.$.labelSlot.assignedNodes()
                if (nodes.length <= 0) {
                    nodes = this.$.fallbackLabelSlot.assignedNodes()
                }

                var label = ""
                for (var i = 0; i < nodes.length; i++) {
                    var node = nodes[i]

                    if (node instanceof Text) {
                        label += node.nodeValue
                    } else if (node instanceof Element) {
                        label += node.innerText
                    }
                }

                return label.trim()

            }

        }

        customElements.define(PaperChip.is, PaperChip)
    </script>
</dom-module>