@francofantomius/material-components 1.1.1 → 1.2.0

package/dist/chunks/{chip-CI1ZINnr.js.map → chip-B5c-I8bj.js.map}

@@ -1 +1 @@
-{"version":3,"file":"chip-CI1ZINnr.js","names":[],"sources":["../../src/components/chip/chip.css.ts","../../src/components/chip/chip.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const chipStyles = css`\n  :host {\n    display: inline-flex;\n    outline: none;\n    vertical-align: middle;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  .chip {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 12px;\n    border-radius: var(--md-sys-shape-corner-small, 8px);\n    border: 1px solid var(--md-sys-color-outline, #79747E);\n    background-color: transparent;\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    font-size: var(--md-sys-typescale-label-large-size, 14px);\n    font-weight: 500;\n    line-height: 20px;\n    letter-spacing: 0.1px;\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    gap: 8px;\n    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),\n                border-color 150ms cubic-bezier(0.2, 0, 0, 1),\n                box-shadow 150ms cubic-bezier(0.2, 0, 0, 1);\n    overflow: hidden;\n  }\n\n  :host([selected]) .chip {\n    background-color: var(--md-sys-color-secondary-container, #E8DEF8);\n    color: var(--md-sys-color-on-secondary-container, #1D192B);\n    border-color: transparent;\n  }\n\n  :host([variant=\"elevated\"]) .chip {\n    background-color: var(--md-sys-color-surface-container-low, #F7F2FA);\n    border: none;\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));\n  }\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    color: var(--md-sys-color-primary, #6750A4);\n  }\n\n  .remove-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 18px;\n    height: 18px;\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    background: transparent;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    cursor: pointer;\n    margin-left: 2px;\n  }\n\n  .remove-btn:hover {\n    background-color: rgba(29, 27, 32, 0.12);\n  }\n`;\n\nexport const chipSetStyles = css`\n  :host {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 8px;\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { chipStyles, chipSetStyles } from './chip.css.js';\n\nexport type ChipVariant = 'assist' | 'filter' | 'input' | 'suggestion';\n\n@customElement('md-chip')\nexport class MdChip extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, chipStyles];\n\n  @property({ type: String, reflect: true })\n  variant: ChipVariant = 'assist';\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  @property({ type: Boolean, reflect: true })\n  removable = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.handleClick);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleClick);\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled) return;\n\n    if (this.variant === 'filter') {\n      this.selected = !this.selected;\n      this.emitEvent('change', { selected: this.selected });\n    }\n  };\n\n  private handleRemove = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.emitEvent('remove');\n  };\n\n  override render() {\n    return html`\n      <div class=\"chip\" tabindex=${this.disabled ? '-1' : '0'}>\n        <md-ripple ?disabled=${this.disabled}></md-ripple>\n        <md-focus-ring></md-focus-ring>\n\n        <span class=\"icon\">\n          ${this.variant === 'filter' && this.selected\n            ? html`<md-icon name=\"check\" size=\"18\"></md-icon>`\n            : html`\n                <slot name=\"icon\">\n                  ${this.icon ? html`<md-icon name=${this.icon} size=\"18\"></md-icon>` : nothing}\n                </slot>\n              `}\n        </span>\n\n        <slot>${this.label}</slot>\n\n        ${this.removable || this.variant === 'input'\n          ? html`\n              <button\n                class=\"remove-btn\"\n                aria-label=\"Remove\"\n                @click=${this.handleRemove}\n                tabindex=\"-1\"\n              >\n                <md-icon name=\"close\" size=\"16\"></md-icon>\n              </button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\n@customElement('md-chip-set')\nexport class MdChipSet extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, chipSetStyles];\n\n  override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-chip': MdChip;\n    'md-chip-set': MdChipSet;\n  }\n}\n\n"],"mappings":"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"}
+{"version":3,"file":"chip-B5c-I8bj.js","names":[],"sources":["../../src/components/chip/chip.css.ts","../../src/components/chip/chip.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const chipStyles = css`\n  :host {\n    display: inline-flex;\n    outline: none;\n    vertical-align: middle;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  .chip {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 12px;\n    border-radius: var(--md-sys-shape-corner-small, 8px);\n    border: 1px solid var(--md-sys-color-outline, #79747E);\n    background-color: transparent;\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    font-size: var(--md-sys-typescale-label-large-size, 14px);\n    font-weight: 500;\n    line-height: 20px;\n    letter-spacing: 0.1px;\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    gap: 8px;\n    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),\n                border-color 150ms cubic-bezier(0.2, 0, 0, 1),\n                box-shadow 150ms cubic-bezier(0.2, 0, 0, 1);\n    overflow: hidden;\n  }\n\n  :host([selected]) .chip {\n    background-color: var(--md-sys-color-secondary-container, #E8DEF8);\n    color: var(--md-sys-color-on-secondary-container, #1D192B);\n    border-color: transparent;\n  }\n\n  :host([variant=\"elevated\"]) .chip {\n    background-color: var(--md-sys-color-surface-container-low, #F7F2FA);\n    border: none;\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));\n  }\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    color: var(--md-sys-color-primary, #6750A4);\n  }\n\n  .remove-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 18px;\n    height: 18px;\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    background: transparent;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    cursor: pointer;\n    margin-left: 2px;\n  }\n\n  .remove-btn:hover {\n    background-color: rgba(29, 27, 32, 0.12);\n  }\n`;\n\nexport const chipSetStyles = css`\n  :host {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 8px;\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { chipStyles, chipSetStyles } from './chip.css.js';\n\nexport type ChipVariant = 'assist' | 'filter' | 'input' | 'suggestion';\n\n@customElement('md-chip')\nexport class MdChip extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, chipStyles];\n\n  @property({ type: String, reflect: true })\n  variant: ChipVariant = 'assist';\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  @property({ type: Boolean, reflect: true })\n  removable = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.handleClick);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleClick);\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled) return;\n\n    if (this.variant === 'filter') {\n      this.selected = !this.selected;\n      this.emitEvent('change', { selected: this.selected });\n    }\n  };\n\n  private handleRemove = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.emitEvent('remove');\n  };\n\n  override render() {\n    return html`\n      <div class=\"chip\" tabindex=${this.disabled ? '-1' : '0'}>\n        <md-ripple ?disabled=${this.disabled}></md-ripple>\n        <md-focus-ring></md-focus-ring>\n\n        <span class=\"icon\">\n          ${this.variant === 'filter' && this.selected\n            ? html`<md-icon name=\"check\" size=\"18\"></md-icon>`\n            : html`\n                <slot name=\"icon\">\n                  ${this.icon ? html`<md-icon name=${this.icon} size=\"18\"></md-icon>` : nothing}\n                </slot>\n              `}\n        </span>\n\n        <slot>${this.label}</slot>\n\n        ${this.removable || this.variant === 'input'\n          ? html`\n              <button\n                class=\"remove-btn\"\n                aria-label=\"Remove\"\n                @click=${this.handleRemove}\n                tabindex=\"-1\"\n              >\n                <md-icon name=\"close\" size=\"16\"></md-icon>\n              </button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\n@customElement('md-chip-set')\nexport class MdChipSet extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, chipSetStyles];\n\n  override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-chip': MdChip;\n    'md-chip-set': MdChipSet;\n  }\n}\n\n"],"mappings":";;;;;;;AAEA,IAAa,IAAa,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6EhB,IAAgB,CAAG;;;;;;;GCpEnB,IAAN,cAAqB,EAAc;;EAwChB,aApCD,KAAA,UAAA,UAGf,KAAA,QAAA,IAGD,KAAA,OAAA,IAGI,KAAA,WAAA,IAGC,KAAA,YAAA,IAGD,KAAA,WAAA,IAYY,KAAA,eAAA,MAAsB;GACvC,KAAK,YAEL,KAAK,YAAY,aACnB,KAAK,WAAW,CAAC,KAAK,UACtB,KAAK,UAAU,UAAU,EAAE,UAAU,KAAK,SAAS,CAAC;EAExD,GAEwB,KAAA,gBAAA,MAAsB;GAE5C,AADA,EAAM,gBAAgB,GACtB,KAAK,UAAU,QAAQ;EACzB;;;EA1CyB,KAAA,SAAA,CAAC,EAAc,QAAQ,CAAU;;CAoB1D,oBAA6B;EAE3B,AADA,MAAM,kBAAkB,GACxB,KAAK,iBAAiB,SAAS,KAAK,WAAW;CACjD;CAEA,uBAAgC;EAE9B,AADA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,SAAS,KAAK,WAAW;CACpD;CAgBA,SAAkB;EAChB,OAAO,CAAI;mCACoB,KAAK,WAAW,OAAO,IAAI;+BAC/B,KAAK,SAAS;;;;YAIjC,KAAK,YAAY,YAAY,KAAK,WAChC,CAAI,+CACJ,CAAI;;oBAEE,KAAK,OAAO,CAAI,iBAAiB,KAAK,KAAK,yBAAyB,EAAQ;;gBAEhF;;;gBAGA,KAAK,MAAM;;UAEjB,KAAK,aAAa,KAAK,YAAY,UACjC,CAAI;;;;yBAIS,KAAK,aAAa;;;;;gBAM/B,EAAQ;;;CAGlB;AACF;AA3EG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAGzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAGzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAnB3C,IAAA,EAAA,CAAA,EAAc,SAAS,CAAA,GAAA,CAAA;AAkFjB,IAAM,IAAN,cAAwB,EAAc;;EAClB,KAAA,SAAA,CAAC,EAAc,QAAQ,CAAa;;CAE7D,SAAkB;EAChB,OAAO,CAAI;CACb;AACF;AAPC,IAAA,EAAA,CAAA,EAAc,aAAa,CAAA,GAAA,CAAA"}