diff --git a/docs/src/components-spec.json b/docs/src/components-spec.json
index eb7556a966..d5ae78c202 100644
--- a/docs/src/components-spec.json
+++ b/docs/src/components-spec.json
@@ -273,6 +273,33 @@
"icon-name": "text"
}
},
+
+ "gux-tag-popover": {
+ "attributes": {
+ "position": ["left", "right"],
+ "color": "text"
+ },
+ "events": { "deleteTag": "delete tag" }
+ },
+ "gux-tag": {
+ "attributes": {
+ "color": [
+ "navy",
+ "blue",
+ "electric-purple",
+ "aqua-green",
+ "fuscha",
+ "dark-purple",
+ "bubblegum-pink",
+ "olive-green",
+ "lilac",
+ "yellow-green"
+ ]
+ },
+ "events": {
+ "deleteTag": "Click on delete tag button"
+ }
+ },
"gux-text-field": {
"attributes": {
"value": "text",
diff --git a/src/components/beta/gux-tag-popover/example.html b/src/components/beta/gux-tag-popover/example.html
new file mode 100644
index 0000000000..9264bb9a55
--- /dev/null
+++ b/src/components/beta/gux-tag-popover/example.html
@@ -0,0 +1,30 @@
+
+
+ American English
+ Latin American Spanish
+ European Spanish
+ UK English
+ Canadian French
+ European French
+ Dutch
+
+
+
+ American English
+ Latin American Spanish
+ European Spanish
+ UK English
+ Canadian French
+ European French
+ Dutch
+
+
+
+ American English
+ Latin American Spanish
+ European Spanish
+ UK English
+ Canadian French
+ European French
+ Dutch
+
\ No newline at end of file
diff --git a/src/components/beta/gux-tag-popover/gux-tag-popover.less b/src/components/beta/gux-tag-popover/gux-tag-popover.less
new file mode 100644
index 0000000000..a7a16047a5
--- /dev/null
+++ b/src/components/beta/gux-tag-popover/gux-tag-popover.less
@@ -0,0 +1,302 @@
+@import (reference) '../../../style/color.less';
+
+// Variables part
+@grey: #222529;
+
+@menu-background-color: @gux-off-white;
+@menu-border-color: #dae1eb;
+
+@border-radius: 2px;
+
+// Style
+gux-tag-popover-beta {
+ div.gux-tag-popover {
+ position: relative;
+ margin: 4px 0;
+
+ &.right {
+ .gux-tag-popover-container {
+ text-align: right;
+ }
+ .arrow {
+ margin-right: 19px;
+ right: 0;
+ }
+ }
+
+ &.left {
+ .gux-tag-popover-container {
+ text-align: left;
+ }
+ .arrow {
+ margin-left: 19px;
+ left: 0;
+ }
+ }
+
+ .gux-tag-popover-container {
+ position: relative;
+ height: 32px;
+ width: 100%;
+
+ .gux-tag-popover-button {
+ button {
+ font-size: 16px;
+ }
+
+ &.has-tags > button {
+ color: @gux-dark-blue;
+ }
+
+ &:focus {
+ outline: none;
+ box-shadow: 0 0 0 3px fade(@gux-blue, 50%);
+ }
+ }
+ }
+
+ .gux-tag-popover-menu {
+ display: none;
+ box-shadow: 0 0 2px fade(@grey, 24%);
+ margin-top: 8px;
+ position: relative;
+ width: 100%;
+
+ .arrow,
+ .arrow::after {
+ position: absolute;
+ content: ' ';
+ height: 0;
+ width: 0;
+ border-style: solid;
+ border-color: transparent;
+ }
+ .arrow {
+ border-width: 6px;
+ border-bottom-color: @gux-border;
+ margin-top: -12px;
+ }
+ .arrow::after {
+ border-width: 4px;
+ border-bottom-color: @gux-off-white;
+ margin-top: -2px;
+ margin-left: -4px;
+ }
+
+ .gux-tag-popover-menu-container {
+ padding: 8px;
+ background: @gux-off-white;
+
+ .gux-tag-popover-options-container {
+ display: flex;
+
+ .gux-tag-popover-title {
+ padding: 0 5px;
+ white-space: nowrap;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ .gux-tag-popover-chip-container {
+ margin-left: 7px;
+ padding: 2px 5px;
+ display: flex;
+ border-radius: @border-radius;
+ border: 1px solid @gux-charcoal-grey;
+ flex: 1 1 auto;
+ flex-wrap: wrap;
+ &.active {
+ border-color: @gux-dark-blue;
+ }
+ }
+
+ .gux-tag-popover-chip {
+ display: flex;
+ margin: 4px 0;
+ }
+
+ .gux-tag-popover-chip-text,
+ .gux-tag-popover-chip-close-icon-wrap {
+ background-color: @gux-charcoal-grey;
+ height: 24px;
+ border-radius: @border-radius;
+ color: white;
+ margin-right: 8px;
+ font-weight: bold;
+ text-align: center;
+ }
+
+ .gux-tag-popover-chip-text {
+ display: flex;
+ white-space: nowrap;
+ padding: 0 8px;
+ line-height: 24px;
+ }
+
+ .gux-tag-popover-chip:hover {
+ .gux-tag-popover-chip-text {
+ margin-right: 1px;
+ border-radius: @border-radius 0 0 @border-radius;
+ }
+ .gux-tag-popover-chip-close-icon-wrap {
+ display: flex;
+ border-radius: 0 @border-radius @border-radius 0;
+ }
+ }
+
+ .gux-tag-popover-chip-close-icon-wrap {
+ width: 24px;
+ box-sizing: border-box;
+ display: none;
+ cursor: pointer;
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ .gux-tag-popover-chip-icon-wrap {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding-right: 8px;
+ }
+
+ .gux-tag-popover-chip-close-icon {
+ margin: 0 auto;
+ }
+
+ // GUX-DROPDOWN component
+ gux-dropdown input {
+ height: 24px;
+ background-color: transparent;
+ padding: 0;
+ outline: 0;
+ border: none;
+ width: 100%;
+ }
+
+ gux-dropdown input:focus {
+ border: none !important;
+ box-shadow: none !important;
+ }
+
+ gux-dropdown div.gux-dropdown .select-field {
+ height: 24px;
+ }
+
+ gux-dropdown div.gux-dropdown .select-field .ghost {
+ background-color: transparent;
+ color: transparent;
+ border: none;
+ }
+
+ gux-text-field > div > div.gux-field {
+ height: 24px;
+ }
+
+ gux-dropdown div.gux-dropdown .select-field button.dropdown-indicator {
+ display: none;
+ }
+
+
+ .gux-tag-popover-tags-container {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ .gux-tag-popover-input-container {
+ position: relative;
+ flex: 1 1 auto;
+ }
+ }
+
+ }
+
+ &.opened {
+ display: block;
+ }
+ }
+
+ .gux-tag-popover-options {
+ display: none;
+ position: absolute;
+ margin: 0;
+ margin-top: 12px;
+ padding: 8px 0;
+ background: @menu-background-color;
+ border: 1px solid @menu-border-color;
+ box-shadow: none;
+ z-index: 1;
+ color: @gux-charcoal-grey;
+
+ &.opened {
+ display: block;
+ }
+
+ > gux-tag-popover-option {
+ position: relative;
+ height: 32px;
+ line-height: 32px;
+ padding: 0 16px;
+ display: flex;
+ cursor: pointer;
+
+ & {
+ &[selected] {
+ background: @gux-text-selection;
+ color: @gux-charcoal-grey;
+ }
+
+ &:hover,
+ &:focus {
+ background: @gux-dark-blue;
+ color: @gux-off-white;
+ }
+ }
+ }
+ }
+ }
+}
+
+// Theming
+
+// Dark
+.gux-tag-popover-dark-theme {
+ color: @gux-off-white;
+
+ div.gux-tag-popover {
+ .gux-tag-popover-title {
+ color: @gux-charcoal-grey;
+ }
+ }
+}
+
+.gux-dark-theme {
+ gux-tag-popover-beta {
+ .gux-tag-popover-dark-theme();
+ }
+}
+
+gux-tag-popover-beta.gux-dark-theme {
+ .gux-tag-popover-dark-theme();
+}
+
+// Light
+.gux-tag-popover-light-theme {
+ color: @gux-charcoal-grey;
+}
+
+.gux-light-theme {
+ gux-tag-popover-beta {
+ .gux-tag-popover-light-theme();
+ }
+}
+
+gux-tag-popover-beta.gux-light-theme {
+ .gux-tag-popover-light-theme();
+}
+
+// Default Theme
+gux-tag-popover-beta {
+ .gux-tag-popover-light-theme();
+}
diff --git a/src/components/beta/gux-tag-popover/gux-tag-popover.tsx b/src/components/beta/gux-tag-popover/gux-tag-popover.tsx
new file mode 100644
index 0000000000..97d56e5d36
--- /dev/null
+++ b/src/components/beta/gux-tag-popover/gux-tag-popover.tsx
@@ -0,0 +1,170 @@
+import { Component, Element, h, Listen, Prop, State } from '@stencil/core';
+import { buildI18nForComponent } from '../../../i18n';
+import tagPopoverResources from './i18n/en.json';
+import { GuxTag } from '../gux-tag/gux-tag';
+
+@Component({
+ styleUrl: 'gux-tag-popover.less',
+ tag: 'gux-tag-popover-beta'
+})
+export class GuxTagPopover {
+ @Element()
+ root: HTMLElement;
+ i18n: (resourceKey: string, context?: any) => string;
+
+ /**
+ * Tags color
+ */
+ @Prop()
+ color:
+ | 'navy'
+ | 'blue'
+ | 'electric-purple'
+ | 'aqua-green'
+ | 'fuscha'
+ | 'dark-purple'
+ | 'bubblegum-pink'
+ | 'olive-green'
+ | 'lilac'
+ | 'yellow-green';
+
+ /**
+ * Indicates the position of the tag button (right or left)
+ */
+ @Prop()
+ position: string = 'left';
+
+ @State()
+ opened: boolean;
+
+ @State()
+ allOptions: HTMLGuxOptionElement[] = [];
+
+ @State()
+ availableOptions: HTMLGuxOptionElement[] = [];
+
+ @State()
+ tags: string[] = [];
+
+ @State()
+ inputValue: string = '';
+
+ @Listen('deleteTag')
+ onDeleteTag(event): void {
+ const tags = this.tags;
+ tags.splice(event.detail, 1);
+ this.filterOptions();
+ this.tags = [...tags];
+ }
+
+ @Listen('change') // This is not a native "change" event
+ handleChange(event) {
+ event.stopPropagation();
+ this.tags = [...this.tags, event.target.value];
+ this.filterOptions();
+ event.target.value = this.inputValue = ' ';
+ setTimeout(() => {
+ event.target.value = this.inputValue = '';
+ const dropdownInput = this.root.querySelector(
+ 'gux-dropdown input'
+ ) as HTMLElement;
+ dropdownInput.focus();
+ });
+ }
+
+ async componentWillLoad() {
+ this.i18n = await buildI18nForComponent(this.root, tagPopoverResources);
+ this.allOptions = Array.from(this.root.querySelectorAll('gux-option'));
+ this.availableOptions = [...this.allOptions];
+ }
+
+ render() {
+ return (
+
+
+ this.handlerClickOnMenuButton()}
+ >
+
+
+
+
+
+ this.addCustomTag(e)}
+ filterable
+ >
+ {this.availableOptions.map(option => {
+ return {option.text};
+ })}
+
+
+ );
+ }
+
+ private getTags(): GuxTag[] {
+ const tags = [];
+ this.tags.map((tag, index) => {
+ const tagChip = (
+
+ {tag}
+
+ );
+ tags.push(tagChip);
+ });
+ return tags;
+ }
+
+ private addCustomTag(event): void {
+ const target = event.target as HTMLInputElement;
+ const value = target.value;
+
+ if (event.key === ' ' || event.key === 'Enter') {
+ event.preventDefault();
+ if (this.tags.indexOf(value) !== -1) {
+ return;
+ }
+ if (value && value.trim().length) {
+ this.tags = [...this.tags, value];
+ }
+ event.target.value = this.inputValue = ' ';
+ setTimeout(() => {
+ event.target.value = this.inputValue = '';
+ });
+ }
+ }
+
+ private filterOptions(): void {
+ this.availableOptions = this.allOptions.filter(
+ option => !this.tags.includes(option.text)
+ );
+ }
+
+ private handlerClickOnMenuButton(): void {
+ this.opened = !this.opened;
+ }
+}
diff --git a/src/components/beta/gux-tag-popover/i18n/en.json b/src/components/beta/gux-tag-popover/i18n/en.json
new file mode 100644
index 0000000000..f9210cde7a
--- /dev/null
+++ b/src/components/beta/gux-tag-popover/i18n/en.json
@@ -0,0 +1,3 @@
+{
+ "menuTitle": "Add Tags"
+}
diff --git a/src/components/beta/gux-tag-popover/readme.md b/src/components/beta/gux-tag-popover/readme.md
new file mode 100644
index 0000000000..6e3a432a79
--- /dev/null
+++ b/src/components/beta/gux-tag-popover/readme.md
@@ -0,0 +1,42 @@
+# gux-tag-popover
+
+
+
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ---------- | ---------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
+| `color` | `color` | Tags color | `"aqua-green" \| "blue" \| "bubblegum-pink" \| "dark-purple" \| "electric-purple" \| "fuscha" \| "lilac" \| "navy" \| "olive-green" \| "yellow-green"` | `undefined` |
+| `position` | `position` | Indicates the position of the tag button (right or left) | `string` | `'left'` |
+
+
+## Dependencies
+
+### Depends on
+
+- [gux-button](../../stable/gux-button)
+- [gux-icon](../../stable/gux-icon)
+- [gux-dropdown](../../stable/gux-dropdown)
+- [gux-option](../../stable/gux-dropdown/gux-option)
+- [gux-tag-beta](../gux-tag)
+
+### Graph
+```mermaid
+graph TD;
+ gux-tag-popover-beta --> gux-button
+ gux-tag-popover-beta --> gux-icon
+ gux-tag-popover-beta --> gux-dropdown
+ gux-tag-popover-beta --> gux-option
+ gux-tag-popover-beta --> gux-tag-beta
+ gux-dropdown --> gux-text-field
+ gux-dropdown --> gux-icon
+ gux-text-field --> gux-icon
+ gux-option --> gux-text-highlight
+ gux-tag-beta --> gux-icon
+ style gux-tag-popover-beta fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/beta/gux-tag-popover/tests/__snapshots__/gux-tag-popover.spec.ts.snap b/src/components/beta/gux-tag-popover/tests/__snapshots__/gux-tag-popover.spec.ts.snap
new file mode 100644
index 0000000000..4ba078bea8
--- /dev/null
+++ b/src/components/beta/gux-tag-popover/tests/__snapshots__/gux-tag-popover.spec.ts.snap
@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`gux-tag-popover should render 1`] = `
+
+
+
+
+`;
diff --git a/src/components/beta/gux-tag-popover/tests/gux-tag-popover.e2e.ts b/src/components/beta/gux-tag-popover/tests/gux-tag-popover.e2e.ts
new file mode 100644
index 0000000000..8f7a1289ca
--- /dev/null
+++ b/src/components/beta/gux-tag-popover/tests/gux-tag-popover.e2e.ts
@@ -0,0 +1,83 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('gux-tag-popover-beta', () => {
+ it('renders', async () => {
+ const page = await newE2EPage();
+
+ await page.setContent('');
+ const element = await page.find('gux-tag-popover-beta');
+ expect(element).toHaveClass('hydrated');
+ });
+
+ it('opens menu on click', async () => {
+ const page = await newE2EPage();
+ await page.setContent(`
+
+ English
+ Dutch
+
+ `);
+ await page.waitForChanges();
+
+ const element = await page.find('gux-tag-popover-beta');
+ const btnElm = await element.find('.gux-tag-popover-button');
+ btnElm.click();
+ await page.waitForChanges();
+
+ const menuElm = await element.find('.gux-tag-popover-menu');
+ expect(menuElm.className.split(' ')).toContain('opened');
+ });
+
+ it('opens options on click', async () => {
+ const page = await newE2EPage();
+ await page.setContent(`
+
+ English
+ Dutch
+
+ `);
+ await page.waitForChanges();
+
+ const element = await page.find('gux-tag-popover-beta');
+ const btnElm = await element.find('.gux-tag-popover-button');
+ btnElm.click();
+ await page.waitForChanges();
+
+ const inputElm = await element.find('.gux-dropdown');
+ inputElm.click();
+ await page.waitForChanges();
+
+ const optionsElm = await element.find('.gux-options');
+ expect(optionsElm.className.split(' ')).toContain('opened');
+ });
+
+ it('selects an item when an option is clicked', async () => {
+ const page = await newE2EPage();
+ await page.setContent(`
+
+ English
+ Dutch
+
+ `);
+ await page.waitForChanges();
+
+ const element = await page.find('gux-tag-popover-beta');
+ const btnElm = await element.find('.gux-tag-popover-button');
+ btnElm.click();
+ await page.waitForChanges();
+
+ const inputElm = await element.find('.gux-dropdown');
+ inputElm.click();
+ await page.waitForChanges();
+
+ const optionElm = await element.find('gux-option');
+ optionElm.click();
+ await page.waitForChanges();
+
+ const optionsElm = await element.find('.gux-options');
+ expect(optionsElm.className.split(' ')).not.toContain('opened');
+
+ const tagElm = await element.find('gux-tag-beta');
+ expect(tagElm).not.toBeNull();
+ });
+});
diff --git a/src/components/beta/gux-tag-popover/tests/gux-tag-popover.spec.ts b/src/components/beta/gux-tag-popover/tests/gux-tag-popover.spec.ts
new file mode 100644
index 0000000000..6aac4c459f
--- /dev/null
+++ b/src/components/beta/gux-tag-popover/tests/gux-tag-popover.spec.ts
@@ -0,0 +1,19 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { GuxTagPopover } from '../gux-tag-popover';
+
+describe('gux-tag-popover', () => {
+ it('should render', async () => {
+ const page = await newSpecPage({
+ components: [GuxTagPopover],
+ html: `
+
+ English
+ Dutch
+
+ `,
+ language: 'en'
+ });
+
+ expect(page.root).toMatchSnapshot();
+ });
+});
diff --git a/src/components/beta/gux-tag/example.html b/src/components/beta/gux-tag/example.html
new file mode 100644
index 0000000000..bef8a99b0f
--- /dev/null
+++ b/src/components/beta/gux-tag/example.html
@@ -0,0 +1,11 @@
+Basic
+dark blue
+blue
+purple
+teal
+light purple
+dark pink
+dark purple
+pink
+dark yellow
+yellow
\ No newline at end of file
diff --git a/src/components/beta/gux-tag/gux-tag.less b/src/components/beta/gux-tag/gux-tag.less
new file mode 100644
index 0000000000..47487131ed
--- /dev/null
+++ b/src/components/beta/gux-tag/gux-tag.less
@@ -0,0 +1,134 @@
+@import (reference) '../../../style/color.less';
+// Variables part
+@border-radius: 2px;
+
+// Style
+gux-tag-beta {
+ margin-right: 8px;
+ display: inline-block;
+ div.gux-tag {
+ position: relative;
+ margin: 4px 0;
+ display: flex;
+ margin: 4px 0;
+
+ .gux-tag-text,
+ .gux-tag-delete-button {
+ background-color: @gux-charcoal-grey;
+ height: 22px;
+ border-radius: @border-radius;
+ text-align: center;
+ color: white;
+ padding: 0;
+ }
+
+ .navy { background-color: @gux-navy; }
+ .blue { background-color: @gux-blue; }
+ .electric-purple { background-color: @gux-electric-purple; }
+ .aqua-green { background-color: @gux-aqua-green; }
+ .fuscha { background-color: @gux-fuscha; }
+ .dark-purple { background-color: @gux-dark-purple; }
+ .bubblegum-pink { background-color: @gux-bubblegum-pink; }
+ .olive-green { background-color: @gux-olive-green;}
+ .lilac {
+ background-color: @gux-lilac;
+ color: @gux-charcoal-grey;
+ }
+ .yellow {
+ background-color: @gux-yellow-green;
+ color: @gux-charcoal-grey;
+ }
+
+ .gux-tag-text {
+ white-space: nowrap;
+ padding: 1px 8px;
+ line-height: 22px;
+ }
+
+ .gux-tag-delete-button {
+ width: 0;
+ height: 24px;
+ display: flex;
+ border: none;
+ cursor: pointer;
+ flex-direction: column;
+ justify-content: center;
+ border-radius: 0 @border-radius @border-radius 0;
+ margin-left: 1px;
+ }
+
+ .gux-tag-delete-icon {
+ margin: 0 auto;
+ display: none;
+ }
+ .gux-tag-delete-button:active,
+ .gux-tag-delete-button:focus {
+ display: flex;
+ }
+
+ .show-delete-button {
+ width: 24px;
+ .gux-tag-delete-icon {
+ display: inline-block;
+ }
+ }
+ .active-text-element {
+ border-radius: @border-radius 0 0 @border-radius;
+ }
+
+ &:hover {
+ .gux-tag-text {
+ .active-text-element()
+ }
+ .gux-tag-delete-button {
+ .show-delete-button()
+ }
+ }
+ .gux-tag-text:focus {
+ .active-text-element()
+ }
+ .gux-tag-delete-button:focus {
+ .show-delete-button()
+ }
+ .gux-tag-text:focus ~ .gux-tag-delete-button {
+ .show-delete-button();
+ }
+ }
+}
+
+// Theming
+
+// Dark
+.gux-tag-dark-theme {
+ color: @gux-off-white;
+}
+
+.gux-dark-theme {
+ gux-tag-beta {
+ .gux-tag-dark-theme();
+ }
+}
+
+gux-tag-beta.gux-dark-theme {
+ .gux-tag-dark-theme();
+}
+
+// Light
+.gux-tag-light-theme {
+ color: @gux-charcoal-grey;
+}
+
+.gux-light-theme {
+ gux-tag-beta {
+ .gux-tag-light-theme();
+ }
+}
+
+gux-tag-beta.gux-light-theme {
+ .gux-tag-light-theme();
+}
+
+// Default Theme
+gux-tag-beta {
+ .gux-tag-light-theme();
+}
diff --git a/src/components/beta/gux-tag/gux-tag.tsx b/src/components/beta/gux-tag/gux-tag.tsx
new file mode 100644
index 0000000000..d1306b44f6
--- /dev/null
+++ b/src/components/beta/gux-tag/gux-tag.tsx
@@ -0,0 +1,85 @@
+import {
+ Component,
+ Element,
+ h,
+ Prop,
+ Event,
+ EventEmitter
+} from '@stencil/core';
+import tagResources from './i18n/en.json';
+import { buildI18nForComponent } from '../../../i18n';
+
+@Component({
+ styleUrl: 'gux-tag.less',
+ tag: 'gux-tag-beta'
+})
+export class GuxTag {
+ @Element()
+ root: HTMLElement;
+
+ /**
+ * Triggered when click on close button
+ */
+ @Event()
+ deleteTag: EventEmitter;
+
+ /**
+ * Tag background color.
+ */
+ @Prop()
+ color:
+ | 'navy'
+ | 'blue'
+ | 'electric-purple'
+ | 'aqua-green'
+ | 'fuscha'
+ | 'dark-purple'
+ | 'bubblegum-pink'
+ | 'olive-green'
+ | 'lilac'
+ | 'yellow-green';
+
+ /**
+ * Index for remove tag
+ */
+ @Prop()
+ tagId: string;
+
+ private i18n: (resourceKey: string, context?: any) => string;
+
+ private handlerClickDeleteTag(): void {
+ this.deleteTag.emit(this.tagId);
+ }
+
+ private getDeleteButton() {
+ return (
+
+ );
+ }
+
+ async componentWillRender() {
+ this.i18n = await buildI18nForComponent(this.root, tagResources);
+ }
+
+ render() {
+ return (
+
+
+
+
+ {this.getDeleteButton()}
+