@italia/button 0.0.1-alpha.0

package/dist/src/it-button.js

@@ -0,0 +1,681 @@
+import { directive, Directive } from 'lit/directive.js';
+import { LitElement, css, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __metadata(metadataKey, metadataValue) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Form validation status.
+ */
+var VALIDATION_STATUS;
+(function (VALIDATION_STATUS) {
+    /**
+     * One indicating no validation error.
+     */
+    VALIDATION_STATUS["NO_ERROR"] = "";
+    /**
+     * One indicating missing required value.
+     */
+    VALIDATION_STATUS["ERROR_REQUIRED"] = "required";
+})(VALIDATION_STATUS || (VALIDATION_STATUS = {}));
+
+class SetAttributesDirective extends Directive {
+    update(part, [attributes]) {
+        const el = part.element;
+        for (const [name, value] of Object.entries(attributes)) {
+            if (value != null)
+                el.setAttribute(name, value);
+            else
+                el.removeAttribute(name);
+        }
+        return null;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    render(_attributes) {
+        return null;
+    }
+}
+/* How to use:
+
+<textarea ${setAttributes(this._ariaAttributes)} ... />
+*/
+const setAttributes = directive(SetAttributesDirective);
+
+const connectedElements = new Set();
+if (window && !window.translations) {
+    window.translations = new Map();
+}
+const { translations } = window;
+const isClient = typeof MutationObserver !== 'undefined' &&
+    typeof document !== 'undefined' &&
+    typeof document.documentElement !== 'undefined';
+/** Updates all localized elements that are currently connected */
+function update() {
+    if (isClient) {
+        document.documentElement.dir || 'ltr';
+        document.documentElement.lang || navigator.language;
+    }
+    [...connectedElements.keys()].forEach((el) => {
+        const litEl = el;
+        if (typeof litEl.requestUpdate === 'function') {
+            litEl.requestUpdate();
+        }
+    });
+}
+if (isClient) {
+    const documentElementObserver = new MutationObserver(update);
+    document.documentElement.dir || 'ltr';
+    document.documentElement.lang || navigator.language;
+    // Watch for changes on <html lang>
+    documentElementObserver.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['dir', 'lang'],
+    });
+}
+/** Registers one or more translations */
+function registerTranslation(...translation) {
+    translation.forEach((t) => {
+        const code = t.$code.toLowerCase();
+        if (translations.has(code)) {
+            // Merge translations that share the same language code
+            translations.set(code, { ...translations.get(code), ...t });
+        }
+        else {
+            translations.set(code, t);
+        }
+    });
+    update();
+}
+window.registerTranslation = registerTranslation;
+
+/* eslint-disable no-console */
+class Logger {
+    constructor(tag) {
+        this.tag = tag;
+    }
+    format(level, msg) {
+        return [`[${this.tag}] ${msg}`];
+    }
+    warn(msg) {
+        console.warn(...this.format('warn', msg));
+    }
+    error(msg) {
+        console.error(...this.format('error', msg));
+    }
+    info(msg) {
+        console.info(...this.format('info', msg));
+    }
+}
+
+/**
+ * Factory function per creare una base class estendibile
+ * con stili personalizzati.
+ */
+class BaseComponent extends LitElement {
+    constructor() {
+        super();
+        this._ariaAttributes = {}; // tutti gli attributi aria-* passati al Web component
+        this.logger = new Logger(this.tagName.toLowerCase());
+    }
+    // eslint-disable-next-line class-methods-use-this
+    generateId(prefix) {
+        return `${prefix}-${Math.random().toString(36).slice(2)}`;
+    }
+    // eslint-disable-next-line class-methods-use-this, @typescript-eslint/no-unused-vars
+    addFocus(element) {
+        // new TrackFocus(element); // per il momento è stato disattivato perchè ci sono le pseudo classi ::focus-visible per fare quello che fa TrackFocus. Si possono aggiungere regole css in bsi-italia 3 dato che stiamo facendo una breaking release di bsi.
+    }
+    // eslint-disable-next-line class-methods-use-this
+    composeClass(...classes) {
+        let composedClass = '';
+        classes
+            .filter((c) => c.length > 0)
+            .forEach((newClass) => {
+            composedClass += ` ${newClass}`;
+        });
+        return composedClass.trim();
+    }
+    getAriaAttributes() {
+        for (const attr of this.getAttributeNames()) {
+            if (attr.startsWith('aria-')) {
+                this._ariaAttributes[attr] = this.getAttribute(attr);
+            }
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback?.();
+        this.getAriaAttributes();
+        // generate internal _id
+        const prefix = this.id?.length > 0 ? this.id : this.tagName.toLowerCase();
+        this._id = this.generateId(prefix);
+    }
+}
+
+var styles = css`/***************************** 1 ****************************************/
+/***************************** 2 ****************************************/
+/***************************** 1 ****************************************/
+/***************************** 2 ****************************************/
+/***************************** 1 ****************************************/
+/***************************** 2 ****************************************/
+/***************************** 3 ****************************************/
+/***************************** 1 ****************************************/
+/***************************** 2 ****************************************/
+/***************************** 3 ****************************************/
+/***************************** NEUTRAL 1 ****************************************/
+/***************************** NEUTRAL 2 ****************************************/
+/***************************** NEUTRAL 2 / 3 ****************************************/
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+}
+button:not(:disabled),
+[type=button]:not(:disabled),
+[type=reset]:not(:disabled),
+[type=submit]:not(:disabled) {
+  cursor: pointer;
+}
+
+.d-block {
+  display: block !important;
+}
+
+.w-100 {
+  width: 100% !important;
+}
+
+@media (min-width: 576px) {
+  .d-sm-block {
+    display: block !important;
+  }
+}
+@media (min-width: 768px) {
+  .d-md-block {
+    display: block !important;
+  }
+}
+@media (min-width: 992px) {
+  .d-lg-block {
+    display: block !important;
+  }
+}
+@media (min-width: 1200px) {
+  .d-xl-block {
+    display: block !important;
+  }
+}
+@media (min-width: 1400px) {
+  .d-xxl-block {
+    display: block !important;
+  }
+}
+@media print {
+  .d-print-block {
+    display: block !important;
+  }
+}
+.btn {
+  --bs-btn-padding-x: var(--bs-spacing-s);
+  --bs-btn-padding-y: var(--bs-spacing-xs);
+  --bs-btn-font-family: var(--bs-font-sans);
+  --bs-btn-font-weight: var(--bs-font-weight-solid);
+  --bs-btn-font-size: var(--bs-label-font-size);
+  --bs-btn-line-height: var(--bs-font-line-height-3);
+  --bs-btn-text-color: var(--bs-color-text-primary);
+  --bs-btn-background: transparent;
+  --bs-btn-border-size: 0;
+  --bs-btn-border-color: transparent;
+  --bs-btn-border-radius: var(--bs-radius-smooth);
+  --bs-btn-outline-border-size: 2px;
+  --bs-btn-outline-border-color: transparent;
+  --bs-btn-disabled-opacity: 0.5;
+}
+
+.btn {
+  display: inline-block;
+  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
+  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
+  border-radius: var(--bs-btn-border-radius);
+  background: var(--bs-btn-background);
+  box-shadow: var(--bs-btn-box-shadow, none);
+  color: var(--bs-btn-text-color);
+  font-family: var(--bs-btn-font-family);
+  font-size: var(--bs-btn-font-size);
+  font-weight: var(--bs-btn-font-weight);
+  line-height: var(--bs-btn-line-height);
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  white-space: initial;
+  width: auto;
+  transition: all var(--bs-transition-instant) ease-in-out;
+  user-select: none;
+}
+.btn:disabled, .btn.disabled {
+  opacity: var(--bs-btn-disabled-opacity);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.btn:focus-visible {
+  border-color: var(--bs-btn-hover-border-color);
+  outline: 0;
+}
+.btn-check:focus-visible + .btn {
+  border-color: var(--bs-btn-hover-border-color);
+  outline: 0;
+}
+
+.btn-link {
+  --bs-btn-background: transparent;
+  --bs-btn-border-color: transparent;
+  text-decoration: underline;
+}
+.btn-link:hover {
+  color: var(--bs-color-link-hover);
+}
+
+.btn-xs {
+  --bs-btn-padding-x: var(--bs-spacing-xs);
+  --bs-btn-padding-y: var(--bs-spacing-xs);
+  --bs-btn-font-size: var(--bs-label-font-size-s);
+  --bs-btn-line-height: var(--bs-font-line-height-1);
+  --bs-rounded-icon-size: 20px;
+}
+
+.btn-lg {
+  --bs-btn-padding-x: var(--bs-spacing-m);
+  --bs-btn-padding-y: var(--bs-spacing-s);
+  --bs-btn-font-size: var(--bs-label-font-size-m);
+  --bs-btn-line-height: var(--bs-font-line-height-5);
+}
+
+.btn-progress {
+  position: relative;
+}
+
+.btn-icon {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: var(--bs-icon-spacing);
+}
+
+.btn-full {
+  align-self: stretch;
+  width: inherit;
+  border: none;
+  box-shadow: none;
+}
+@media (min-width: 992px) {
+  .btn-full {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+  }
+}
+
+.btn:disabled:hover,
+.btn.disabled:hover {
+  cursor: not-allowed;
+}
+
+.btn-primary,
+a.btn-primary {
+  --bs-btn-text-color: var(--bs-color-text-inverse);
+  --bs-btn-background: var(--bs-color-background-primary);
+}
+.btn-primary:hover,
+a.btn-primary:hover {
+  --bs-btn-background: var(--bs-color-background-primary-hover);
+}
+.btn-primary:active,
+a.btn-primary:active {
+  --bs-btn-background: var(--bs-color-background-primary-active);
+}
+.btn-primary.btn-progress,
+a.btn-primary.btn-progress {
+  border-color: hsl(210, 76%, 67%);
+  opacity: 1;
+  background-color: hsl(210, 76%, 67%);
+}
+
+.btn-secondary,
+a.btn-secondary {
+  --bs-btn-text-color: var(--bs-color-text-inverse);
+  --bs-btn-background: var(--bs-color-background-secondary);
+}
+.btn-secondary:hover,
+a.btn-secondary:hover {
+  --bs-btn-background: var(--bs-color-background-secondary-hover);
+}
+.btn-secondary:active,
+a.btn-secondary:active {
+  --bs-btn-background: var(--bs-color-background-secondary-active);
+}
+.btn-secondary:disabled.btn-progress, .btn-secondary.disabled.btn-progress,
+a.btn-secondary:disabled.btn-progress,
+a.btn-secondary.disabled.btn-progress {
+  border-color: hsl(210, 12%, 52%);
+  opacity: 1;
+  background-color: hsl(210, 12%, 52%);
+}
+
+.btn-success,
+a.btn-success {
+  --bs-btn-text-color: var(--bs-color-text-inverse);
+  --bs-btn-background: var(--bs-color-background-success);
+}
+.btn-success:hover,
+a.btn-success:hover {
+  --bs-btn-background: var(--bs-color-background-success-hover);
+}
+.btn-success:active,
+a.btn-success:active {
+  --bs-btn-background: var(--bs-color-background-success-active);
+}
+
+.btn-warning,
+a.btn-warning {
+  --bs-btn-text-color: var(--bs-color-text-inverse);
+  --bs-btn-background: var(--bs-color-background-warning);
+}
+.btn-warning:hover,
+a.btn-warning:hover {
+  --bs-btn-background: var(--bs-color-background-warning-hover);
+}
+.btn-warning:active,
+a.btn-warning:active {
+  --bs-btn-background: var(--bs-color-background-warning-active);
+}
+
+.btn-danger,
+a.btn-danger {
+  --bs-btn-text-color: var(--bs-color-text-inverse);
+  --bs-btn-background: var(--bs-color-background-danger);
+}
+.btn-danger:hover,
+a.btn-danger:hover {
+  --bs-btn-background: var(--bs-color-background-danger-hover);
+}
+.btn-danger:active,
+a.btn-danger:active {
+  --bs-btn-background: var(--bs-color-background-danger-active);
+}
+
+.btn[class*=btn-outline-] {
+  --bs-btn-box-shadow: inset 0 0 0 var(--bs-btn-outline-border-size) var(--bs-btn-outline-border-color);
+}
+
+.btn-outline-primary,
+a.btn-outline-primary {
+  --bs-btn-outline-border-color: var(--bs-color-border-primary);
+  --bs-btn-text-color: var(--bs-color-text-primary);
+}
+.btn-outline-primary:hover,
+a.btn-outline-primary:hover {
+  --bs-btn-outline-border-color: var(--bs-color-border-primary-hover);
+  --bs-btn-text-color: var(--bs-color-link-hover);
+}
+.btn-outline-primary:active,
+a.btn-outline-primary:active {
+  --bs-btn-outline-border-color: var(--bs-color-border-primary-active);
+  --bs-btn-text-color: var(--bs-color-link-active);
+}
+.btn-outline-secondary,
+a.btn-outline-secondary {
+  --bs-btn-outline-border-color: var(--bs-color-border-secondary);
+  --bs-btn-text-color: var(--bs-color-text-secondary);
+}
+.btn-outline-secondary:hover,
+a.btn-outline-secondary:hover {
+  --bs-btn-outline-border-color: var(--bs-color-border-secondary-hover);
+  --bs-btn-text-color: var(--bs-color-text-secondary-hover);
+}
+.btn-outline-secondary:active,
+a.btn-outline-secondary:active {
+  --bs-btn-outline-border-color: var(--bs-color-border-secondary-active);
+  --bs-btn-text-color: var(--bs-color-text-secondary-active);
+}
+.btn-outline-success,
+a.btn-outline-success {
+  --bs-btn-outline-border-color: var(--bs-color-border-success);
+  --bs-btn-text-color: var(--bs-color-text-success);
+}
+.btn-outline-success:hover,
+a.btn-outline-success:hover {
+  --bs-btn-outline-border-color: var(--bs-color-border-success-hover);
+  --bs-btn-text-color: var(--bs-color-text-success-hover);
+}
+.btn-outline-success:active,
+a.btn-outline-success:active {
+  --bs-btn-outline-border-color: var(--bs-color-border-success-active);
+  --bs-btn-text-color: var(--bs-color-text-success-active);
+}
+.btn-outline-warning,
+a.btn-outline-warning {
+  --bs-btn-outline-border-color: var(--bs-color-border-warning);
+  --bs-btn-text-color: var(--bs-color-text-warning);
+}
+.btn-outline-warning:hover,
+a.btn-outline-warning:hover {
+  --bs-btn-outline-border-color: var(--bs-color-border-warning-hover);
+  --bs-btn-text-color: var(--bs-color-text-warning-hover);
+}
+.btn-outline-warning:active,
+a.btn-outline-warning:active {
+  --bs-btn-outline-border-color: var(--bs-color-border-warning-active);
+  --bs-btn-text-color: var(--bs-color-text-warning-active);
+}
+.btn-outline-danger,
+a.btn-outline-danger {
+  --bs-btn-outline-border-color: var(--bs-color-border-danger);
+  --bs-btn-text-color: var(--bs-color-text-danger);
+}
+.btn-outline-danger:hover,
+a.btn-outline-danger:hover {
+  --bs-btn-outline-border-color: var(--bs-color-border-danger-hover);
+  --bs-btn-text-color: var(--bs-color-text-danger-hover);
+}
+.btn-outline-danger:active,
+a.btn-outline-danger:active {
+  --bs-btn-outline-border-color: var(--bs-color-border-danger-active);
+  --bs-btn-text-color: var(--bs-color-text-danger-active);
+}
+
+.bg-dark .btn-link {
+  --bs-btn-text-color: var(--bs-color-text-inverse);
+}
+.bg-dark .btn-outline-primary,
+.bg-dark a.btn-outline-primary,
+.bg-dark .btn-outline-secondary,
+.bg-dark a.btn-outline-secondary {
+  --bs-btn-outline-border-color: var(--bs-color-border-inverse);
+  --bs-btn-text-color: var(--bs-color-text-inverse);
+}
+
+.btn-close {
+  position: relative;
+  box-sizing: content-box;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  border: 0;
+  opacity: 0.5;
+  background-color: transparent;
+  color: var(--bs-color-text-base);
+}
+.btn-close .icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.btn-close:hover {
+  opacity: 1;
+  text-decoration: none;
+}
+.btn-close:focus {
+  opacity: 1;
+}
+.btn-close:disabled, .btn-close.disabled {
+  opacity: var(--bs-btn-disabled-opacity);
+  pointer-events: none;
+  user-select: none;
+}
+
+.btn-close-white {
+  filter: invert(1) grayscale(100%) brightness(200%);
+}`;
+
+let ItButton = class ItButton extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this._buttonClasses = '';
+        this.type = 'button';
+        this.variant = '';
+        this.size = '';
+        this.outline = false;
+        this.block = false;
+        this.icon = false;
+        this.value = '';
+        this.internals = this.attachInternals();
+    }
+    static get formAssociated() {
+        return true;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    firstUpdated(_changedProperties) {
+        const button = this.renderRoot.querySelector('button');
+        if (button) {
+            this.addFocus(button);
+        }
+    }
+    updated() {
+        this._buttonClasses = this.composeClass('btn', !this.outline && this.variant !== '' ? `btn-${this.variant}` : '', this.outline ? `${this.variant ? 'btn-outline-' : ''}${this.variant}` : '', 'aria-disabled' in this._ariaAttributes ? 'disabled' : '', this.size ? `btn-${this.size}` : '', this.block ? 'd-block w-100' : '', this.icon ? 'btn-icon' : '');
+    }
+    surfaceSubmitEvent(event) {
+        const disabled = 'aria-disabled' in this._ariaAttributes;
+        if (this.form && !disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.form.requestSubmit();
+        }
+        if (disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    get form() {
+        return this.internals ? this.internals.form : null;
+    }
+    connectedCallback() {
+        super.connectedCallback?.();
+        if (this.block) {
+            this.classList.add('d-block', 'w-100');
+        }
+    }
+    // Render the UI as a function of component state
+    render() {
+        const part = this.composeClass('button', this.variant?.length > 0 ? this.variant : '', this.outline ? 'outline' : '');
+        return html `
+      <button
+        part="${part}"
+        type="${this.type}"
+        class="${this._buttonClasses}"
+        @click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
+        .value="${ifDefined(this.value ? this.value : undefined)}"
+        ${setAttributes(this._ariaAttributes)}
+      >
+        <slot></slot>
+      </button>
+    `;
+    }
+};
+ItButton.styles = styles;
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], ItButton.prototype, "_buttonClasses", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], ItButton.prototype, "type", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], ItButton.prototype, "variant", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], ItButton.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], ItButton.prototype, "outline", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], ItButton.prototype, "block", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], ItButton.prototype, "icon", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], ItButton.prototype, "value", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], ItButton.prototype, "internals", void 0);
+ItButton = __decorate([
+    customElement('it-button')
+], ItButton);
+
+export { ItButton };
+//# sourceMappingURL=it-button.js.map