@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/development/form-field/form-field-clear.js

@@ -0,0 +1,223 @@
+import { css, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { SbbButtonBaseElement } from "../core/base-elements.js";
+import { SbbConnectedAbortController, SbbLanguageController } from "../core/controllers.js";
+import { hostAttributes } from "../core/decorators.js";
+import { hostContext } from "../core/dom.js";
+import { i18nClearInput } from "../core/i18n.js";
+import { SbbNegativeMixin } from "../core/mixins.js";
+import "../icon.js";
+const style = css`/**
+ * Better font rendering (on OS X)
+ * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx
+ *
+ * Usage:
+ *
+ * .var_dark_on_light {
+ * 	@include font-smoothing;
+ * }
+ * .var_light_on_dark {
+ * 	@include font-smoothing-reset;
+ * }
+ */
+/** This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element. */
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+  outline: none !important;
+}
+
+:host {
+  display: inline-block;
+  -webkit-tap-highlight-color: transparent;
+  height: fit-content;
+  outline: none !important;
+  --sbb-button-color-default-background: var(--sbb-color-black-alpha-0);
+  --sbb-button-color-default-border: var(--sbb-color-black-alpha-0);
+  --sbb-button-color-default-text: var(--sbb-color-charcoal);
+  --sbb-button-color-hover-background: var(--sbb-color-milk);
+  --sbb-button-color-hover-border: var(--sbb-color-milk);
+  --sbb-button-color-hover-text: var(--sbb-color-charcoal);
+  --sbb-button-color-active-background: var(--sbb-color-cloud);
+  --sbb-button-color-active-border: var(--sbb-color-cloud);
+  --sbb-button-color-active-text: var(--sbb-color-charcoal);
+  --sbb-button-color-disabled-background: var(--sbb-color-milk);
+  --sbb-button-color-disabled-border: var(--sbb-color-smoke);
+  --sbb-button-color-disabled-text: var(--sbb-color-granite);
+  --sbb-button-border-style: solid;
+  --sbb-button-border-disabled-style: dashed;
+  --sbb-button-border-width: 0rem;
+  --sbb-button-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-button-transition-duration: var(
+    --sbb-disable-animation-zero-time,
+    var(--sbb-animation-duration-2x)
+  );
+  --sbb-button-transition-easing-function: var(--sbb-animation-easing);
+  --sbb-button-inset: 0;
+}
+@media (forced-colors: active) {
+  :host {
+    --sbb-button-color-default-text: ButtonText !important;
+    --sbb-button-color-default-border: CanvasText !important;
+    --sbb-button-color-active-text: ButtonText !important;
+    --sbb-button-color-active-border: Highlight !important;
+    --sbb-button-color-hover-text: ButtonText !important;
+  }
+}
+:host .sbb-form-field-clear {
+  position: relative;
+  transition-duration: var(--sbb-button-transition-duration);
+  transition-timing-function: var(--sbb-button-transition-easing-function);
+  transition-property: color;
+  border-radius: var(--sbb-button-border-radius);
+  color: var(--sbb-button-color-default-text);
+  cursor: pointer;
+  user-select: none;
+  display: var(--sbb-button-display);
+}
+:host .sbb-form-field-clear::before {
+  position: absolute;
+  content: "";
+  inset: var(--sbb-button-inset);
+  border: var(--sbb-button-border-width) var(--sbb-button-border-style) var(--sbb-button-color-default-border);
+  border-radius: var(--sbb-button-border-radius);
+  background-color: var(--sbb-button-color-default-background);
+  transition-duration: var(--sbb-button-transition-duration);
+  transition-timing-function: var(--sbb-button-transition-easing-function);
+  transition-property: inset, background-color, border-color;
+}
+
+sbb-icon {
+  transition: transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);
+  transform: translateY(var(--sbb-button-translate-y-content-hover, 0rem));
+  display: flex;
+}
+
+:host([negative]) {
+  --sbb-button-color-default-background: var(--sbb-color-black-alpha-0);
+  --sbb-button-color-default-border: var(--sbb-color-black-alpha-0);
+  --sbb-button-color-default-text: var(--sbb-color-milk);
+  --sbb-button-color-hover-background: var(--sbb-color-charcoal);
+  --sbb-button-color-hover-border: var(--sbb-color-charcoal);
+  --sbb-button-color-hover-text: var(--sbb-color-milk);
+  --sbb-button-color-active-background: var(--sbb-color-iron);
+  --sbb-button-color-active-border: var(--sbb-color-iron);
+  --sbb-button-color-active-text: var(--sbb-color-milk);
+  --sbb-button-color-disabled-background: var(--sbb-color-black-alpha-0);
+  --sbb-button-color-disabled-border: var(--sbb-color-smoke);
+  --sbb-button-color-disabled-text: var(--sbb-color-smoke);
+}
+
+:host(:is([disabled], [data-disabled])) {
+  --sbb-button-border-width: var(--sbb-border-width-1x);
+}
+@media (forced-colors: active) {
+  :host(:is([disabled], [data-disabled])) {
+    --sbb-button-color-disabled-text: GrayText !important;
+  }
+}
+:host(:is([disabled], [data-disabled])) .sbb-form-field-clear {
+  color: var(--sbb-button-color-disabled-text);
+  cursor: default;
+  pointer-events: none;
+}
+:host(:is([disabled], [data-disabled])) .sbb-form-field-clear::before {
+  background-color: var(--sbb-button-color-disabled-background);
+  border-color: var(--sbb-button-color-disabled-border);
+  border-style: var(--sbb-button-border-disabled-style);
+}
+
+:host(:focus-visible:not([data-focus-origin=mouse], [data-focus-origin=touch])) .sbb-form-field-clear::before {
+  outline-offset: var(--sbb-focus-outline-offset);
+  outline: var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);
+}
+
+@media (any-hover: hover) {
+  :host(:not([disabled], [data-disabled], :active, [data-active]):hover) {
+    --sbb-button-translate-y-content-hover: -0.0625rem;
+  }
+}
+@media (forced-colors: active) {
+  :host(:not([disabled], [data-disabled], :active, [data-active]):hover) {
+    --sbb-button-color-hover-border: Highlight !important;
+  }
+}
+@media (any-hover: hover) {
+  :host(:not([disabled], [data-disabled], :active, [data-active]):hover) .sbb-form-field-clear::before {
+    inset: calc(var(--sbb-button-border-width) * -1);
+    background-color: var(--sbb-button-color-hover-background);
+    border-color: var(--sbb-button-color-hover-border);
+  }
+}
+@media (any-hover: hover) {
+  :host(:not([disabled], [data-disabled], :active, [data-active]):hover) .sbb-form-field-clear {
+    color: var(--sbb-button-color-hover-text);
+  }
+}
+
+:host(:not([disabled], [data-disabled]):is(:active, [data-active])) .sbb-form-field-clear::before {
+  color: var(--sbb-button-color-active-text);
+  background-color: var(--sbb-button-color-active-background);
+  border-color: var(--sbb-button-color-active-border);
+}`;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let SbbFormFieldClearElement = class extends SbbNegativeMixin(SbbButtonBaseElement) {
+  constructor() {
+    super(...arguments);
+    this._abort = new SbbConnectedAbortController(this);
+    this._language = new SbbLanguageController(this);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const signal = this._abort.signal;
+    this.addEventListener("click", () => this._handleClick(), { signal });
+    this._formField = hostContext("sbb-form-field", this) ?? hostContext("[data-form-field]", this);
+    if (this._formField) {
+      this.negative = this._formField.hasAttribute("negative");
+    }
+  }
+  async _handleClick() {
+    var _a, _b;
+    const input = (_a = this._formField) == null ? void 0 : _a.inputElement;
+    if (!input || input.localName !== "input") {
+      return;
+    }
+    (_b = this._formField) == null ? void 0 : _b.clear();
+    input.focus();
+    input.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
+    input.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    this.setAttribute("aria-label", i18nClearInput[this._language.current]);
+  }
+  renderTemplate() {
+    return html` <sbb-icon name="cross-small"></sbb-icon> `;
+  }
+};
+SbbFormFieldClearElement.styles = style;
+SbbFormFieldClearElement = __decorateClass([
+  customElement("sbb-form-field-clear"),
+  hostAttributes({
+    slot: "suffix"
+  })
+], SbbFormFieldClearElement);
+export {
+  SbbFormFieldClearElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1maWVsZC1jbGVhci5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzL2Zvcm0tZmllbGQvZm9ybS1maWVsZC1jbGVhci9mb3JtLWZpZWxkLWNsZWFyLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQ1NTUmVzdWx0R3JvdXAsIFByb3BlcnR5VmFsdWVzLCBUZW1wbGF0ZVJlc3VsdCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBodG1sIH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGN1c3RvbUVsZW1lbnQgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5cbmltcG9ydCB7IFNiYkJ1dHRvbkJhc2VFbGVtZW50IH0gZnJvbSAnLi4vLi4vY29yZS9iYXNlLWVsZW1lbnRzLmpzJztcbmltcG9ydCB7IFNiYkNvbm5lY3RlZEFib3J0Q29udHJvbGxlciwgU2JiTGFuZ3VhZ2VDb250cm9sbGVyIH0gZnJvbSAnLi4vLi4vY29yZS9jb250cm9sbGVycy5qcyc7XG5pbXBvcnQgeyBob3N0QXR0cmlidXRlcyB9IGZyb20gJy4uLy4uL2NvcmUvZGVjb3JhdG9ycy5qcyc7XG5pbXBvcnQgeyBob3N0Q29udGV4dCB9IGZyb20gJy4uLy4uL2NvcmUvZG9tLmpzJztcbmltcG9ydCB7IGkxOG5DbGVhcklucHV0IH0gZnJvbSAnLi4vLi4vY29yZS9pMThuLmpzJztcbmltcG9ydCB7IFNiYk5lZ2F0aXZlTWl4aW4gfSBmcm9tICcuLi8uLi9jb3JlL21peGlucy5qcyc7XG5pbXBvcnQgdHlwZSB7IFNiYkZvcm1GaWVsZEVsZW1lbnQgfSBmcm9tICcuLi9mb3JtLWZpZWxkLmpzJztcblxuaW1wb3J0IHN0eWxlIGZyb20gJy4vZm9ybS1maWVsZC1jbGVhci5zY3NzP2xpdCZpbmxpbmUnO1xuXG5pbXBvcnQgJy4uLy4uL2ljb24uanMnO1xuXG4vKipcbiAqIENvbWJpbmVkIHdpdGggYHNiYi1mb3JtLWZpZWxkYCwgaXQgZGlzcGxheXMgYSBidXR0b24gd2hpY2ggY2xlYXJzIHRoZSBpbnB1dCB2YWx1ZS5cbiAqL1xuQGN1c3RvbUVsZW1lbnQoJ3NiYi1mb3JtLWZpZWxkLWNsZWFyJylcbkBob3N0QXR0cmlidXRlcyh7XG4gIHNsb3Q6ICdzdWZmaXgnLFxufSlcbmV4cG9ydCBjbGFzcyBTYmJGb3JtRmllbGRDbGVhckVsZW1lbnQgZXh0ZW5kcyBTYmJOZWdhdGl2ZU1peGluKFNiYkJ1dHRvbkJhc2VFbGVtZW50KSB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IHN0eWxlO1xuXG4gIHByaXZhdGUgX2Zvcm1GaWVsZD86IFNiYkZvcm1GaWVsZEVsZW1lbnQ7XG4gIHByaXZhdGUgX2Fib3J0ID0gbmV3IFNiYkNvbm5lY3RlZEFib3J0Q29udHJvbGxlcih0aGlzKTtcbiAgcHJpdmF0ZSBfbGFuZ3VhZ2UgPSBuZXcgU2JiTGFuZ3VhZ2VDb250cm9sbGVyKHRoaXMpO1xuXG4gIHB1YmxpYyBvdmVycmlkZSBjb25uZWN0ZWRDYWxsYmFjaygpOiB2b2lkIHtcbiAgICBzdXBlci5jb25uZWN0ZWRDYWxsYmFjaygpO1xuICAgIGNvbnN0IHNpZ25hbCA9IHRoaXMuX2Fib3J0LnNpZ25hbDtcbiAgICB0aGlzLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgKCkgPT4gdGhpcy5faGFuZGxlQ2xpY2soKSwgeyBzaWduYWwgfSk7XG4gICAgdGhpcy5fZm9ybUZpZWxkID1cbiAgICAgIChob3N0Q29udGV4dCgnc2JiLWZvcm0tZmllbGQnLCB0aGlzKSBhcyBTYmJGb3JtRmllbGRFbGVtZW50KSA/P1xuICAgICAgKGhvc3RDb250ZXh0KCdbZGF0YS1mb3JtLWZpZWxkXScsIHRoaXMpIGFzIFNiYkZvcm1GaWVsZEVsZW1lbnQpO1xuXG4gICAgaWYgKHRoaXMuX2Zvcm1GaWVsZCkge1xuICAgICAgdGhpcy5uZWdhdGl2ZSA9IHRoaXMuX2Zvcm1GaWVsZC5oYXNBdHRyaWJ1dGUoJ25lZ2F0aXZlJyk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBhc3luYyBfaGFuZGxlQ2xpY2soKTogUHJvbWlzZTx2b2lkPiB7XG4gICAgY29uc3QgaW5wdXQgPSB0aGlzLl9mb3JtRmllbGQ/LmlucHV0RWxlbWVudDtcbiAgICBpZiAoIWlucHV0IHx8IGlucHV0LmxvY2FsTmFtZSAhPT0gJ2lucHV0Jykge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICB0aGlzLl9mb3JtRmllbGQ/LmNsZWFyKCk7XG4gICAgaW5wdXQuZm9jdXMoKTtcbiAgICBpbnB1dC5kaXNwYXRjaEV2ZW50KG5ldyBJbnB1dEV2ZW50KCdpbnB1dCcsIHsgYnViYmxlczogdHJ1ZSwgY29tcG9zZWQ6IHRydWUgfSkpO1xuICAgIGlucHV0LmRpc3BhdGNoRXZlbnQobmV3IEV2ZW50KCdjaGFuZ2UnLCB7IGJ1YmJsZXM6IHRydWUgfSkpO1xuICB9XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHdpbGxVcGRhdGUoY2hhbmdlZFByb3BlcnRpZXM6IFByb3BlcnR5VmFsdWVzPHRoaXM+KTogdm9pZCB7XG4gICAgc3VwZXIud2lsbFVwZGF0ZShjaGFuZ2VkUHJvcGVydGllcyk7XG4gICAgdGhpcy5zZXRBdHRyaWJ1dGUoJ2FyaWEtbGFiZWwnLCBpMThuQ2xlYXJJbnB1dFt0aGlzLl9sYW5ndWFnZS5jdXJyZW50XSk7XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyVGVtcGxhdGUoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgIHJldHVybiBodG1sYCA8c2JiLWljb24gbmFtZT1cImNyb3NzLXNtYWxsXCI+PC9zYmItaWNvbj4gYDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLWZvcm0tZmllbGQtY2xlYXInOiBTYmJGb3JtRmllbGRDbGVhckVsZW1lbnQ7XG4gIH1cbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBdUJPLElBQU0sMkJBQU4sY0FBdUMsaUJBQWlCLG9CQUFvQixFQUFFO0FBQUEsRUFBOUUsY0FBQTtBQUFBLFVBQUEsR0FBQSxTQUFBO0FBSUcsU0FBQSxTQUFTLElBQUksNEJBQTRCLElBQUk7QUFDN0MsU0FBQSxZQUFZLElBQUksc0JBQXNCLElBQUk7QUFBQSxFQUFBO0FBQUEsRUFFbEMsb0JBQTBCO0FBQ3hDLFVBQU0sa0JBQWtCO0FBQ2xCLFVBQUEsU0FBUyxLQUFLLE9BQU87QUFDdEIsU0FBQSxpQkFBaUIsU0FBUyxNQUFNLEtBQUssZ0JBQWdCLEVBQUUsUUFBUTtBQUNwRSxTQUFLLGFBQ0YsWUFBWSxrQkFBa0IsSUFBSSxLQUNsQyxZQUFZLHFCQUFxQixJQUFJO0FBRXhDLFFBQUksS0FBSyxZQUFZO0FBQ25CLFdBQUssV0FBVyxLQUFLLFdBQVcsYUFBYSxVQUFVO0FBQUEsSUFDekQ7QUFBQSxFQUNGO0FBQUEsRUFFQSxNQUFjLGVBQThCOztBQUNwQyxVQUFBLFNBQVEsVUFBSyxlQUFMLG1CQUFpQjtBQUMvQixRQUFJLENBQUMsU0FBUyxNQUFNLGNBQWMsU0FBUztBQUN6QztBQUFBLElBQ0Y7QUFDQSxlQUFLLGVBQUwsbUJBQWlCO0FBQ2pCLFVBQU0sTUFBTTtBQUNOLFVBQUEsY0FBYyxJQUFJLFdBQVcsU0FBUyxFQUFFLFNBQVMsTUFBTSxVQUFVLEtBQU0sQ0FBQSxDQUFDO0FBQ3hFLFVBQUEsY0FBYyxJQUFJLE1BQU0sVUFBVSxFQUFFLFNBQVMsS0FBTSxDQUFBLENBQUM7QUFBQSxFQUM1RDtBQUFBLEVBRW1CLFdBQVcsbUJBQStDO0FBQzNFLFVBQU0sV0FBVyxpQkFBaUI7QUFDbEMsU0FBSyxhQUFhLGNBQWMsZUFBZSxLQUFLLFVBQVUsT0FBTyxDQUFDO0FBQUEsRUFDeEU7QUFBQSxFQUVtQixpQkFBaUM7QUFDM0MsV0FBQTtBQUFBLEVBQ1Q7QUFDRjtBQXZDYSx5QkFDWSxTQUF5QjtBQURyQywyQkFBTixnQkFBQTtBQUFBLEVBSk4sY0FBYyxzQkFBc0I7QUFBQSxFQUNwQyxlQUFlO0FBQUEsSUFDZCxNQUFNO0FBQUEsRUFBQSxDQUNQO0FBQUEsR0FDWSx3QkFBQTsifQ==

package/development/form-field/form-field.d.ts

@@ -0,0 +1,2 @@
+export * from './form-field/form-field.js';
+//# sourceMappingURL=form-field.d.ts.map

package/development/form-field/form-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["../../../../src/elements/form-field/form-field.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}