@six-group/ui-library 0.0.0-insider.d833923 → 0.0.0-insider.d89f9dc

package/dist/cjs/six-textarea.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-textarea.entry.cjs.js","sources":["src/components/six-textarea/six-textarea.scss?tag=six-textarea&encapsulation=shadow","src/components/six-textarea/six-textarea.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n/**\n * @prop --height: The textarea height.\n */\n:host {\n  --height: 100%;\n  display: block;\n}\n\n.textarea {\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  font-family: var(--six-font-family);\n  font-weight: var(--six-input-font-weight);\n  line-height: var(--six-line-height-normal);\n  letter-spacing: var(--six-input-letter-spacing);\n  background-color: var(--six-input-background-color);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  vertical-align: middle;\n  transition:\n    var(--six-transition-fast) color,\n    var(--six-transition-fast) border,\n    var(--six-transition-fast) box-shadow;\n  cursor: text;\n\n  &:hover:not(.textarea--disabled) {\n    background-color: var(--six-input-background-color-hover);\n    border-color: var(--six-input-border-color-hover);\n\n    .textarea__control {\n      color: var(--six-input-color-hover);\n    }\n  }\n\n  &.textarea--focused:not(.textarea--disabled) {\n    background-color: var(--six-input-background-color-focus);\n    box-shadow: var(--six-input-focus-shadow);\n    border-color: var(--six-input-border-color-focus);\n    color: var(--six-input-color-focus);\n\n    .textarea__control {\n      color: var(--six-input-color-focus);\n    }\n  }\n\n  &.textarea--disabled {\n    background-color: var(--six-input-background-color-disabled);\n    border-color: var(--six-input-border-color-disabled);\n    cursor: not-allowed;\n\n    .textarea__control {\n      color: var(--six-input-color-disabled);\n\n      &::placeholder {\n        color: var(--six-input-placeholder-color-disabled);\n      }\n    }\n  }\n}\n\n.textarea__control {\n  flex: 1 1 auto;\n  height: calc(var(--height) - 2 * var(--six-border-width));\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: 1.4;\n  color: var(--sl-input-color);\n  border: none;\n  background: none;\n  box-shadow: none;\n  cursor: inherit;\n  -webkit-appearance: none;\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  &::placeholder {\n    color: var(--six-input-placeholder-color);\n    user-select: none;\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.textarea--invalid:not(.textarea--disabled):not(.textarea--focused) {\n  border-color: var(--six-input-border-color-danger);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.textarea--small {\n  border-radius: var(--six-input-border-radius-small);\n  font-size: var(--six-input-font-size-small);\n\n  .textarea__control {\n    padding: 0.5em var(--six-input-spacing-small);\n  }\n}\n\n.textarea--medium {\n  border-radius: var(--six-input-border-radius-medium);\n  font-size: var(--six-input-font-size-medium);\n\n  .textarea__control {\n    padding: 0.5em var(--six-input-spacing-medium);\n  }\n}\n\n.textarea--large {\n  border-radius: var(--six-input-border-radius-large);\n  font-size: var(--six-input-font-size-large);\n\n  .textarea__control {\n    padding: 0.5em var(--six-input-spacing-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Resize types\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.textarea--resize-none .textarea__control {\n  resize: none;\n}\n\n.textarea--resize-vertical .textarea__control {\n  resize: vertical;\n}\n\n.textarea--resize-auto .textarea__control {\n  height: auto;\n  resize: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot label - The textarea's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The textarea label.\n * @part textarea - The textarea control.\n * @part help-text - The textarea help text.\n */\n@Component({\n  tag: 'six-textarea',\n  styleUrl: 'six-textarea.scss',\n  shadow: true,\n})\nexport class SixTextarea {\n  private inputId = `textarea-${++id}`;\n  private labelId = `textarea-label-${id}`;\n  private helpTextId = `textarea-help-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private nativeTextarea?: HTMLTextAreaElement;\n  private eventListeners = new EventListeners();\n  private resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n\n  @Element() host!: HTMLSixTextareaElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorTextSlot = false;\n\n  /** The textarea's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The textarea's name attribute. */\n  @Prop({ reflect: true }) name = '';\n\n  /** The textarea's value attribute. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** The textarea's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** The textarea's placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** The number of rows to display by default. */\n  @Prop() rows = 4;\n\n  /** Controls how the textarea can be resized. */\n  @Prop() resize: 'none' | 'vertical' | 'auto' = 'vertical';\n\n  /** Set to true to disable the textarea. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true for a readonly textarea. */\n  @Prop({ reflect: true }) readonly = false;\n\n  /** The minimum length of input that will be considered valid. */\n  @Prop({ reflect: true }) minlength?: number;\n\n  /** The maximum length of input that will be considered valid. */\n  @Prop({ reflect: true }) maxlength?: number;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText: string | string[] = '';\n\n  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n  @Prop() errorTextCount?: number;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** The textarea's autocaptialize attribute. */\n  @Prop() autocapitalize = 'off';\n\n  /** The textarea's autocorrect attribute. */\n  @Prop() autocorrect: 'on' | 'off' = 'off';\n\n  /** The textarea's autocomplete attribute. */\n  @Prop() autocomplete = 'off';\n\n  /** The textarea's autofocus attribute. */\n  @Prop() autofocus = false;\n\n  /** The textarea's spellcheck attribute. */\n  @Prop() spellcheck = false;\n\n  /** The textarea's inputmode attribute. */\n  @Prop() inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n  /** Emitted when the control's value changes. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control receives input. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-input' }) sixInput!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-textarea-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  @Watch('helpText')\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('rows')\n  handleRowsChange() {\n    this.setTextareaHeight();\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    this.value = this.getValue();\n    if (this.nativeTextarea != null) {\n      if (this.nativeTextarea.value !== this.value) {\n        this.nativeTextarea.value = this.value;\n      }\n    }\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.forward('six-textarea-input', 'input', this.host);\n    this.eventListeners.forward('six-textarea-change', 'change', this.host);\n    this.eventListeners.forward('six-textarea-focus', 'focus', this.host);\n    this.eventListeners.forward('six-textarea-blur', 'blur', this.host);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    this.setTextareaHeight();\n    if (this.nativeTextarea != null) {\n      this.resizeObserver.observe(this.nativeTextarea);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.nativeTextarea != null) {\n      this.resizeObserver.unobserve(this.nativeTextarea);\n    }\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the textarea. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeTextarea?.focus(options);\n  }\n\n  /** Removes focus fromt the textarea. */\n  @Method()\n  async removeFocus() {\n    this.nativeTextarea?.blur();\n  }\n\n  /** Selects all the text in the input. */\n  @Method()\n  async select() {\n    return this.nativeTextarea?.select();\n  }\n\n  /** Sets the start and end positions of the text selection (0-based). */\n  @Method()\n  async setSelectionRange(\n    selectionStart: number,\n    selectionEnd: number,\n    selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n  ) {\n    return this.nativeTextarea?.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n  }\n\n  /** Replaces a range of text with a new string. */\n  @Method()\n  async setRangeText(\n    replacement: string,\n    start: number,\n    end: number,\n    selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'\n  ) {\n    if (this.nativeTextarea == null) return;\n\n    this.nativeTextarea.setRangeText(replacement, start, end, selectMode);\n    if (this.getValue() !== this.nativeTextarea.value) {\n      this.value = this.nativeTextarea.value;\n      this.setTextareaHeight();\n      this.sixChange.emit();\n      this.sixInput.emit();\n    }\n  }\n\n  private handleChange = () => {\n    if (this.nativeTextarea != null) {\n      this.value = this.nativeTextarea.value;\n      this.sixChange.emit();\n    }\n  };\n\n  private handleInput = () => {\n    if (this.nativeTextarea != null) {\n      this.value = this.nativeTextarea.value;\n      this.setTextareaHeight();\n      this.sixInput.emit();\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleSlotChange = () => {\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n  };\n\n  private setTextareaHeight() {\n    if (this.nativeTextarea == null) return;\n\n    if (this.resize === 'auto') {\n      this.nativeTextarea.style.height = 'auto';\n      this.nativeTextarea.style.height = this.nativeTextarea.scrollHeight + 'px';\n    } else {\n      (this.nativeTextarea.style.height as string | undefined) = undefined;\n    }\n  }\n\n  private getValue(): string {\n    return (this.value ?? '').toString();\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        errorTextCount={this.errorTextCount}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <div\n          part=\"base\"\n          class={{\n            textarea: true,\n\n            // Sizes\n            'textarea--small': this.size === 'small',\n            'textarea--medium': this.size === 'medium',\n            'textarea--large': this.size === 'large',\n\n            // States\n            'textarea--disabled': this.disabled,\n            'textarea--focused': this.hasFocus,\n            'textarea--empty': this.getValue().length === 0,\n            'textarea--invalid': this.invalid,\n\n            // Modifiers\n            'textarea--resize-none': this.resize === 'none',\n            'textarea--resize-vertical': this.resize === 'vertical',\n            'textarea--resize-auto': this.resize === 'auto',\n          }}\n        >\n          <textarea\n            part=\"textarea\"\n            ref={(el) => (this.nativeTextarea = el)}\n            id={this.inputId}\n            class=\"textarea__control\"\n            name={this.name}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            rows={this.rows}\n            minLength={this.minlength}\n            maxLength={this.maxlength}\n            value={this.getValue()}\n            autoCapitalize={this.autocapitalize}\n            autoCorrect={this.autocorrect}\n            autoFocus={this.autofocus}\n            spellcheck={this.spellcheck}\n            required={this.required}\n            inputMode={this.inputmode}\n            aria-labelledby={this.labelId}\n            onChange={this.handleChange}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n        </div>\n      </FormControl>\n    );\n  }\n}\n"],"names":["EventListeners","hasSlot","h","FormControl"],"mappings":"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"}

package/dist/cjs/six-tile.cjs.entry.js

@@ -1,18 +1,32 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-IrUwKluw.js');
+var slot = require('./slot-DBK7c7jH.js');
 
-const index = require('./index-5bfcf88b.js');
-const slot = require('./slot-1b1232a1.js');
-
-const sixTileCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block}.tile{min-height:var(--tile-size);width:var(--tile-size);background-color:var(--six-color-clay-50);display:inline-grid;grid-template-columns:100%;grid-template-areas:\"header\" \"middle\" \"footer\"}.tile--small{--tile-size:80px;--tile-padding-size:var(--six-spacing-medium)}.tile--medium{--tile-size:120px;--tile-padding-size:var(--six-spacing-large)}.tile--large{--tile-size:160px;--tile-padding-size:var(--six-spacing-x-large)}.tile:not(.tile--visible){visibility:hidden}.tile--elevated{border:0;box-shadow:var(--six-shadow-medium)}.tile__header{grid-area:header;height:5%;justify-self:right;display:flex;justify-content:right;opacity:0;transition:var(--six-transition-fast) opacity}.tile:hover>.tile__header{opacity:1}.tile__header--hidden{visibility:hidden}.tile__header six-icon-button{margin-top:-6px;margin-right:-6px;margin-bottom:-16px}.tile__body,.tile__body--large,.tile__body--medium,.tile__body--small{grid-area:middle;display:grid;place-items:center;cursor:pointer;padding-left:var(--tile-padding-size);padding-right:var(--tile-padding-size)}.tile__body six-icon::part(base),.tile__body--large six-icon::part(base),.tile__body--medium six-icon::part(base),.tile__body--small six-icon::part(base){padding:0}.tile__body--small{--tile-padding-size:var(--six-spacing-medium)}.tile__body--medium{--tile-padding-size:var(--six-spacing-large)}.tile__body--large{--tile-padding-size:var(--six-spacing-x-large)}.tile__footer,.tile__footer--large,.tile__footer--medium,.tile__footer--small{grid-area:footer;display:flex;justify-content:center;cursor:pointer;font-weight:var(--six-font-weight-normal);color:var(--six-color-web-rock-900)}.tile__footer--small{font-size:var(--six-font-size-xxx-small)}.tile__footer--medium{font-size:var(--six-font-size-xx-small)}.tile__footer--large{font-size:var(--six-font-size-small)}.tile__footer .label__footer,.tile__footer--small .label__footer,.tile__footer--medium .label__footer,.tile__footer--large .label__footer{overflow:hidden;text-overflow:ellipsis;width:calc(var(--tile-size) - 2em);text-align:center}";
-const SixTileStyle0 = sixTileCss;
+const sixTileCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:inline-block}.tile{min-height:var(--tile-size);width:var(--tile-size);background-color:var(--six-color-clay-50);display:inline-grid;grid-template-columns:100%;grid-template-areas:\"header\" \"middle\" \"footer\"}.tile--small{--tile-size:80px;--tile-padding-size:var(--six-spacing-medium)}.tile--medium{--tile-size:120px;--tile-padding-size:var(--six-spacing-large)}.tile--large{--tile-size:160px;--tile-padding-size:var(--six-spacing-x-large)}.tile:not(.tile--visible){visibility:hidden}.tile--elevated{border:0;box-shadow:var(--six-shadow-medium)}.tile__header{grid-area:header;height:5%;justify-self:right;display:flex;justify-content:right;opacity:0;transition:var(--six-transition-fast) opacity}.tile:hover>.tile__header{opacity:1}.tile__header--hidden{visibility:hidden}.tile__header six-icon-button{margin-top:-6px;margin-right:-6px;margin-bottom:-16px}.tile__body,.tile__body--large,.tile__body--medium,.tile__body--small{grid-area:middle;display:grid;place-items:center;cursor:pointer;padding-left:var(--tile-padding-size);padding-right:var(--tile-padding-size)}.tile__body six-icon::part(base),.tile__body--large six-icon::part(base),.tile__body--medium six-icon::part(base),.tile__body--small six-icon::part(base){padding:0}.tile__body--small{--tile-padding-size:var(--six-spacing-medium)}.tile__body--medium{--tile-padding-size:var(--six-spacing-large)}.tile__body--large{--tile-padding-size:var(--six-spacing-x-large)}.tile__footer,.tile__footer--large,.tile__footer--medium,.tile__footer--small{grid-area:footer;display:flex;justify-content:center;cursor:pointer;font-weight:var(--six-font-weight-normal);color:var(--six-color-web-rock-900)}.tile__footer--small{font-size:var(--six-font-size-xxx-small)}.tile__footer--medium{font-size:var(--six-font-size-xx-small)}.tile__footer--large{font-size:var(--six-font-size-small)}.tile__footer .label__footer,.tile__footer--small .label__footer,.tile__footer--medium .label__footer,.tile__footer--large .label__footer{overflow:hidden;text-overflow:ellipsis;width:calc(var(--tile-size) - 2em);text-align:center}";
 
 const SixTile = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.sixTileClose = index.createEvent(this, "six-tile-closed", 7);
-        this.sixTileSelected = index.createEvent(this, "six-tile-selected", 7);
+        this.sixTileClose = index.createEvent(this, "six-tile-closed");
+        this.sixTileSelected = index.createEvent(this, "six-tile-selected");
+        /** The tile's label. */
+        this.label = '';
+        /** Flag, whether the tile is closeable. */
+        // eslint-disable-next-line @stencil-community/ban-default-true
+        this.closeable = true;
+        /** Flag, whether the tile should cast a shadow. */
+        this.elevated = false;
+        /** Enables tile tooltip for tiles */
+        // eslint-disable-next-line @stencil-community/ban-default-true
+        this.disableTooltip = true;
+        /** Set to true to disable the tile. */
+        this.disabled = false;
+        /** The tile's size. */
+        this.size = 'medium';
+        this.visible = true;
+        this.hasIconSlot = false;
+        this.hasLabelSlot = false;
         this.handleSlotChange = () => {
             this.hasIconSlot = slot.hasSlot(this.host, 'icon');
             this.hasLabelSlot = slot.hasSlot(this.host, 'label');
@@ -32,16 +46,6 @@ const SixTile = class {
         this.handleClickEvent = () => {
             this.sixTileSelected.emit();
         };
-        this.label = '';
-        this.iconName = undefined;
-        this.closeable = true;
-        this.elevated = false;
-        this.disableTooltip = true;
-        this.disabled = false;
-        this.size = 'medium';
-        this.visible = true;
-        this.hasIconSlot = false;
-        this.hasLabelSlot = false;
     }
     /** Hides the tile */
     async hide() {
@@ -55,22 +59,22 @@ const SixTile = class {
         this.handleSlotChange();
     }
     render() {
-        return (index.h("six-tooltip", { key: '5853578cc56dd0d4d217e69d1601db0f92e59cd4', disabled: this.disableTooltip || this.label === '', content: this.label }, index.h("div", { key: '060c7e5e9096cd16ec0b8c96425456a37b76d151', part: "base", class: {
+        return (index.h("six-tooltip", { key: '8bab8c04079d331d563099673f512ae71d6f1286', disabled: this.disableTooltip || this.label === '', content: this.label }, index.h("div", { key: '449bfabf58a6aeba71a1e0b755cf05c5e25b34fe', part: "base", class: {
                 tile: true,
                 'tile--visible': this.visible,
                 'tile--small': this.size === 'small',
                 'tile--medium': this.size === 'medium',
                 'tile--large': this.size === 'large',
                 'tile--elevated': this.elevated,
-            } }, index.h("div", { key: '6292c0165ef776c29ca299cd477e4e42691c2fdd', part: "header", class: "tile__header" }, index.h("six-icon-button", { key: '3b94f649800cb3d5759acef86a889c50d168bfcc', class: {
+            } }, index.h("div", { key: '56d729edf7027563b7172f3f9b18345906e50dff', part: "header", class: "tile__header" }, index.h("six-icon-button", { key: '7cd9016baa63f562c3b1d0972b3b222c55f9f555', class: {
                 'tile__header--hidden': !this.closeable,
-            }, name: "close", size: closeIconSize(this.size), onClick: this.handleCloseClickEvent })), index.h("div", { key: '4d49bc9c8bb1f20b5e04f82aa4ac4754f00f511e', part: "body", class: "tile__body" }, this.iconName && (index.h("six-icon", { onClick: this.handleClickEvent, size: iconSize(this.size) }, this.iconName)), this.hasIconSlot && index.h("slot", { name: "icon" })), index.h("div", { key: 'dee1f29b9d143927cb233a371257a3d66b457a32', part: "footer", class: {
+            }, name: "close", size: closeIconSize(this.size), onClick: this.handleCloseClickEvent })), index.h("div", { key: '2e6d7d3e708360a4018db6dab1daee7a13cd671b', part: "body", class: "tile__body" }, this.iconName && (index.h("six-icon", { key: '2e0d64a50d9064909c3a0f41a8d8052df6ce1941', onClick: this.handleClickEvent, size: iconSize(this.size) }, this.iconName)), this.hasIconSlot && index.h("slot", { key: '84c53bc538cfedda0b1365cafb64c86feaf1d5f3', name: "icon" })), index.h("div", { key: '46e70b405a6d28c09bd6d3a2a9530fcb0415595c', part: "footer", class: {
                 'tile__footer--small': this.size === 'small',
                 'tile__footer--medium': this.size === 'medium',
                 'tile__footer--large': this.size === 'large',
-            } }, this.label && (index.h("div", { class: {
+            } }, this.label && (index.h("div", { key: '35774ca3faf7192113f5550375ff895a2873bc1f', class: {
                 '.label__footer': true,
-            }, onClick: this.handleClickEvent }, this.label)), this.hasLabelSlot && index.h("slot", { name: "label" })))));
+            }, onClick: this.handleClickEvent }, this.label)), this.hasLabelSlot && index.h("slot", { key: '8c1ce8e5e504e6d33f41c0a9f38862fdddd619b1', name: "label" })))));
     }
     get host() { return index.getElement(this); }
 };
@@ -88,8 +92,9 @@ const iconSize = (size) => {
         large: 'xxxLarge',
     }[size];
 };
-SixTile.style = SixTileStyle0;
+SixTile.style = sixTileCss;
 
 exports.six_tile = SixTile;
+//# sourceMappingURL=six-tile.entry.cjs.js.map
 
 //# sourceMappingURL=six-tile.cjs.entry.js.map

package/dist/cjs/six-tile.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"six-tile.entry.cjs.js","mappings":"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","names":["hasSlot","slot","getSlot","h"],"sources":["src/components/six-tile/six-tile.scss?tag=six-tile&encapsulation=shadow","src/components/six-tile/six-tile.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.tile {\n  &--small {\n    --tile-size: 80px;\n    --tile-padding-size: var(--six-spacing-medium);\n  }\n\n  &--medium {\n    --tile-size: 120px;\n    --tile-padding-size: var(--six-spacing-large);\n  }\n\n  &--large {\n    --tile-size: 160px;\n    --tile-padding-size: var(--six-spacing-x-large);\n  }\n\n  min-height: var(--tile-size);\n  width: var(--tile-size);\n\n  background-color: var(--six-color-clay-50);\n\n  display: inline-grid;\n  grid-template-columns: 100%;\n  grid-template-areas:\n    'header'\n    'middle'\n    'footer';\n\n  &:not(.tile--visible) {\n    visibility: hidden;\n  }\n\n  &--elevated {\n    border: 0;\n    box-shadow: var(--six-shadow-medium);\n  }\n}\n\n.tile__header {\n  grid-area: header;\n  height: 5%;\n  justify-self: right;\n  display: flex;\n  justify-content: right;\n  opacity: 0;\n  transition: var(--six-transition-fast) opacity;\n\n  .tile:hover > & {\n    opacity: 1;\n  }\n\n  &--hidden {\n    visibility: hidden;\n  }\n\n  six-icon-button {\n    margin-top: -6px;\n    margin-right: -6px;\n    margin-bottom: -16px;\n  }\n}\n\n.tile__body {\n  grid-area: middle;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n\n  six-icon::part(base) {\n    padding: 0;\n  }\n\n  &--small {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-medium);\n  }\n\n  &--medium {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-large);\n  }\n\n  &--large {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-x-large);\n  }\n\n  padding-left: var(--tile-padding-size);\n  padding-right: var(--tile-padding-size);\n}\n\n.tile__footer {\n  grid-area: footer;\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  font-weight: var(--six-font-weight-normal);\n  color: var(--six-color-web-rock-900);\n\n  &--small {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-xxx-small);\n  }\n\n  &--medium {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-xx-small);\n  }\n\n  &--large {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-small);\n  }\n\n  .label__footer {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    width: calc(var(--tile-size) - 2em);\n    text-align: center;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getSlot, hasSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n */\n\n@Component({\n  tag: 'six-tile',\n  styleUrl: 'six-tile.scss',\n  shadow: true,\n})\nexport class SixTile {\n  @Element() host!: HTMLSixTileElement;\n\n  /** The tile's label. */\n  @Prop() label = '';\n\n  /** The icon's name. */\n  @Prop() iconName?: string;\n\n  /** Flag, whether the tile is closeable. */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() closeable = true;\n\n  /** Flag, whether the tile should cast a shadow. */\n  @Prop() elevated = false;\n\n  /** Enables tile tooltip for tiles */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() disableTooltip = true;\n\n  /** Set to true to disable the tile. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The tile's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  @State() visible = true;\n\n  /** Emitted when the tile was closed. */\n  @Event({ eventName: 'six-tile-closed' }) sixTileClose!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the tile is selected. */\n  @Event({ eventName: 'six-tile-selected' }) sixTileSelected!: EventEmitter<EmptyPayload>;\n\n  /** Hides the tile */\n  @Method()\n  async hide() {\n    this.visible = false;\n  }\n\n  /** Shows the tile */\n  @Method()\n  async show() {\n    this.visible = true;\n  }\n\n  @State() hasIconSlot = false;\n\n  @State() hasLabelSlot = false;\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  private handleSlotChange = () => {\n    this.hasIconSlot = hasSlot(this.host, 'icon');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n\n    if (this.hasIconSlot) {\n      const slot = getSlot(this.host, 'icon');\n      slot?.addEventListener('click', this.handleClickEvent);\n    }\n\n    if (this.hasLabelSlot) {\n      const slot = getSlot(this.host, 'label');\n      slot?.addEventListener('click', this.handleClickEvent);\n    }\n  };\n\n  render() {\n    return (\n      <six-tooltip disabled={this.disableTooltip || this.label === ''} content={this.label}>\n        <div\n          part=\"base\"\n          class={{\n            tile: true,\n            'tile--visible': this.visible,\n            'tile--small': this.size === 'small',\n            'tile--medium': this.size === 'medium',\n            'tile--large': this.size === 'large',\n            'tile--elevated': this.elevated,\n          }}\n        >\n          <div part=\"header\" class=\"tile__header\">\n            <six-icon-button\n              class={{\n                'tile__header--hidden': !this.closeable,\n              }}\n              name=\"close\"\n              size={closeIconSize(this.size)}\n              onClick={this.handleCloseClickEvent}\n            />\n          </div>\n\n          <div part=\"body\" class=\"tile__body\">\n            {this.iconName && (\n              <six-icon onClick={this.handleClickEvent} size={iconSize(this.size)}>\n                {this.iconName}\n              </six-icon>\n            )}\n            {this.hasIconSlot && <slot name=\"icon\"></slot>}\n          </div>\n\n          <div\n            part=\"footer\"\n            class={{\n              'tile__footer--small': this.size === 'small',\n              'tile__footer--medium': this.size === 'medium',\n              'tile__footer--large': this.size === 'large',\n            }}\n          >\n            {this.label && (\n              <div\n                class={{\n                  '.label__footer': true,\n                }}\n                onClick={this.handleClickEvent}\n              >\n                {this.label}\n              </div>\n            )}\n            {this.hasLabelSlot && <slot name=\"label\"></slot>}\n          </div>\n        </div>\n      </six-tooltip>\n    );\n  }\n\n  private handleCloseClickEvent = () => {\n    this.visible = false;\n    this.sixTileClose.emit();\n  };\n\n  private handleClickEvent = () => {\n    this.sixTileSelected.emit();\n  };\n}\n\nconst closeIconSize = (size: string) => {\n  return {\n    small: 'xxSmall',\n    medium: 'medium',\n    large: 'medium',\n  }[size] as 'xSmall' | 'medium';\n};\n\nconst iconSize = (size: string) => {\n  return {\n    small: 'xLarge',\n    medium: 'xxLarge',\n    large: 'xxxLarge',\n  }[size] as 'xLarge' | 'xxLarge' | 'xxxLarge';\n};\n"],"version":3}
+{"file":"six-tile.entry.cjs.js","mappings":"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","names":["hasSlot","slot","getSlot","h"],"sources":["src/components/six-tile/six-tile.scss?tag=six-tile&encapsulation=shadow","src/components/six-tile/six-tile.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.tile {\n  &--small {\n    --tile-size: 80px;\n    --tile-padding-size: var(--six-spacing-medium);\n  }\n\n  &--medium {\n    --tile-size: 120px;\n    --tile-padding-size: var(--six-spacing-large);\n  }\n\n  &--large {\n    --tile-size: 160px;\n    --tile-padding-size: var(--six-spacing-x-large);\n  }\n\n  min-height: var(--tile-size);\n  width: var(--tile-size);\n\n  background-color: var(--six-color-clay-50);\n\n  display: inline-grid;\n  grid-template-columns: 100%;\n  grid-template-areas:\n    'header'\n    'middle'\n    'footer';\n\n  &:not(.tile--visible) {\n    visibility: hidden;\n  }\n\n  &--elevated {\n    border: 0;\n    box-shadow: var(--six-shadow-medium);\n  }\n}\n\n.tile__header {\n  grid-area: header;\n  height: 5%;\n  justify-self: right;\n  display: flex;\n  justify-content: right;\n  opacity: 0;\n  transition: var(--six-transition-fast) opacity;\n\n  .tile:hover > & {\n    opacity: 1;\n  }\n\n  &--hidden {\n    visibility: hidden;\n  }\n\n  six-icon-button {\n    margin-top: -6px;\n    margin-right: -6px;\n    margin-bottom: -16px;\n  }\n}\n\n.tile__body {\n  grid-area: middle;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n\n  six-icon::part(base) {\n    padding: 0;\n  }\n\n  &--small {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-medium);\n  }\n\n  &--medium {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-large);\n  }\n\n  &--large {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-x-large);\n  }\n\n  padding-left: var(--tile-padding-size);\n  padding-right: var(--tile-padding-size);\n}\n\n.tile__footer {\n  grid-area: footer;\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  font-weight: var(--six-font-weight-normal);\n  color: var(--six-color-web-rock-900);\n\n  &--small {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-xxx-small);\n  }\n\n  &--medium {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-xx-small);\n  }\n\n  &--large {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-small);\n  }\n\n  .label__footer {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    width: calc(var(--tile-size) - 2em);\n    text-align: center;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getSlot, hasSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n */\n\n@Component({\n  tag: 'six-tile',\n  styleUrl: 'six-tile.scss',\n  shadow: true,\n})\nexport class SixTile {\n  @Element() host!: HTMLSixTileElement;\n\n  /** The tile's label. */\n  @Prop() label = '';\n\n  /** The icon's name. */\n  @Prop() iconName?: string;\n\n  /** Flag, whether the tile is closeable. */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() closeable = true;\n\n  /** Flag, whether the tile should cast a shadow. */\n  @Prop() elevated = false;\n\n  /** Enables tile tooltip for tiles */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() disableTooltip = true;\n\n  /** Set to true to disable the tile. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The tile's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  @State() visible = true;\n\n  /** Emitted when the tile was closed. */\n  @Event({ eventName: 'six-tile-closed' }) sixTileClose!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the tile is selected. */\n  @Event({ eventName: 'six-tile-selected' }) sixTileSelected!: EventEmitter<EmptyPayload>;\n\n  /** Hides the tile */\n  @Method()\n  async hide() {\n    this.visible = false;\n  }\n\n  /** Shows the tile */\n  @Method()\n  async show() {\n    this.visible = true;\n  }\n\n  @State() hasIconSlot = false;\n\n  @State() hasLabelSlot = false;\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  private handleSlotChange = () => {\n    this.hasIconSlot = hasSlot(this.host, 'icon');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n\n    if (this.hasIconSlot) {\n      const slot = getSlot(this.host, 'icon');\n      slot?.addEventListener('click', this.handleClickEvent);\n    }\n\n    if (this.hasLabelSlot) {\n      const slot = getSlot(this.host, 'label');\n      slot?.addEventListener('click', this.handleClickEvent);\n    }\n  };\n\n  render() {\n    return (\n      <six-tooltip disabled={this.disableTooltip || this.label === ''} content={this.label}>\n        <div\n          part=\"base\"\n          class={{\n            tile: true,\n            'tile--visible': this.visible,\n            'tile--small': this.size === 'small',\n            'tile--medium': this.size === 'medium',\n            'tile--large': this.size === 'large',\n            'tile--elevated': this.elevated,\n          }}\n        >\n          <div part=\"header\" class=\"tile__header\">\n            <six-icon-button\n              class={{\n                'tile__header--hidden': !this.closeable,\n              }}\n              name=\"close\"\n              size={closeIconSize(this.size)}\n              onClick={this.handleCloseClickEvent}\n            />\n          </div>\n\n          <div part=\"body\" class=\"tile__body\">\n            {this.iconName && (\n              <six-icon onClick={this.handleClickEvent} size={iconSize(this.size)}>\n                {this.iconName}\n              </six-icon>\n            )}\n            {this.hasIconSlot && <slot name=\"icon\"></slot>}\n          </div>\n\n          <div\n            part=\"footer\"\n            class={{\n              'tile__footer--small': this.size === 'small',\n              'tile__footer--medium': this.size === 'medium',\n              'tile__footer--large': this.size === 'large',\n            }}\n          >\n            {this.label && (\n              <div\n                class={{\n                  '.label__footer': true,\n                }}\n                onClick={this.handleClickEvent}\n              >\n                {this.label}\n              </div>\n            )}\n            {this.hasLabelSlot && <slot name=\"label\"></slot>}\n          </div>\n        </div>\n      </six-tooltip>\n    );\n  }\n\n  private handleCloseClickEvent = () => {\n    this.visible = false;\n    this.sixTileClose.emit();\n  };\n\n  private handleClickEvent = () => {\n    this.sixTileSelected.emit();\n  };\n}\n\nconst closeIconSize = (size: string) => {\n  return {\n    small: 'xxSmall',\n    medium: 'medium',\n    large: 'medium',\n  }[size] as 'xSmall' | 'medium';\n};\n\nconst iconSize = (size: string) => {\n  return {\n    small: 'xLarge',\n    medium: 'xxLarge',\n    large: 'xxxLarge',\n  }[size] as 'xLarge' | 'xxLarge' | 'xxxLarge';\n};\n"],"version":3}

package/dist/cjs/six-tile.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-tile.entry.cjs.js","sources":["src/components/six-tile/six-tile.scss?tag=six-tile&encapsulation=shadow","src/components/six-tile/six-tile.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.tile {\n  &--small {\n    --tile-size: 80px;\n    --tile-padding-size: var(--six-spacing-medium);\n  }\n\n  &--medium {\n    --tile-size: 120px;\n    --tile-padding-size: var(--six-spacing-large);\n  }\n\n  &--large {\n    --tile-size: 160px;\n    --tile-padding-size: var(--six-spacing-x-large);\n  }\n\n  min-height: var(--tile-size);\n  width: var(--tile-size);\n\n  background-color: var(--six-color-clay-50);\n\n  display: inline-grid;\n  grid-template-columns: 100%;\n  grid-template-areas:\n    'header'\n    'middle'\n    'footer';\n\n  &:not(.tile--visible) {\n    visibility: hidden;\n  }\n\n  &--elevated {\n    border: 0;\n    box-shadow: var(--six-shadow-medium);\n  }\n}\n\n.tile__header {\n  grid-area: header;\n  height: 5%;\n  justify-self: right;\n  display: flex;\n  justify-content: right;\n  opacity: 0;\n  transition: var(--six-transition-fast) opacity;\n\n  .tile:hover > & {\n    opacity: 1;\n  }\n\n  &--hidden {\n    visibility: hidden;\n  }\n\n  six-icon-button {\n    margin-top: -6px;\n    margin-right: -6px;\n    margin-bottom: -16px;\n  }\n}\n\n.tile__body {\n  grid-area: middle;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n\n  six-icon::part(base) {\n    padding: 0;\n  }\n\n  &--small {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-medium);\n  }\n\n  &--medium {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-large);\n  }\n\n  &--large {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-x-large);\n  }\n\n  padding-left: var(--tile-padding-size);\n  padding-right: var(--tile-padding-size);\n}\n\n.tile__footer {\n  grid-area: footer;\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  font-weight: var(--six-font-weight-normal);\n  color: var(--six-color-web-rock-900);\n\n  &--small {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-xxx-small);\n  }\n\n  &--medium {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-xx-small);\n  }\n\n  &--large {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-small);\n  }\n\n  .label__footer {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    width: calc(var(--tile-size) - 2em);\n    text-align: center;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getSlot, hasSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n */\n\n@Component({\n  tag: 'six-tile',\n  styleUrl: 'six-tile.scss',\n  shadow: true,\n})\nexport class SixTile {\n  @Element() host!: HTMLSixTileElement;\n\n  /** The tile's label. */\n  @Prop() label = '';\n\n  /** The icon's name. */\n  @Prop() iconName?: string;\n\n  /** Flag, whether the tile is closeable. */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() closeable = true;\n\n  /** Flag, whether the tile should cast a shadow. */\n  @Prop() elevated = false;\n\n  /** Enables tile tooltip for tiles */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() disableTooltip = true;\n\n  /** Set to true to disable the tile. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The tile's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  @State() visible = true;\n\n  /** Emitted when the tile was closed. */\n  @Event({ eventName: 'six-tile-closed' }) sixTileClose!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the tile is selected. */\n  @Event({ eventName: 'six-tile-selected' }) sixTileSelected!: EventEmitter<EmptyPayload>;\n\n  /** Hides the tile */\n  @Method()\n  async hide() {\n    this.visible = false;\n  }\n\n  /** Shows the tile */\n  @Method()\n  async show() {\n    this.visible = true;\n  }\n\n  @State() hasIconSlot = false;\n\n  @State() hasLabelSlot = false;\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  private handleSlotChange = () => {\n    this.hasIconSlot = hasSlot(this.host, 'icon');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n\n    if (this.hasIconSlot) {\n      const slot = getSlot(this.host, 'icon');\n      slot?.addEventListener('click', this.handleClickEvent);\n    }\n\n    if (this.hasLabelSlot) {\n      const slot = getSlot(this.host, 'label');\n      slot?.addEventListener('click', this.handleClickEvent);\n    }\n  };\n\n  render() {\n    return (\n      <six-tooltip disabled={this.disableTooltip || this.label === ''} content={this.label}>\n        <div\n          part=\"base\"\n          class={{\n            tile: true,\n            'tile--visible': this.visible,\n            'tile--small': this.size === 'small',\n            'tile--medium': this.size === 'medium',\n            'tile--large': this.size === 'large',\n            'tile--elevated': this.elevated,\n          }}\n        >\n          <div part=\"header\" class=\"tile__header\">\n            <six-icon-button\n              class={{\n                'tile__header--hidden': !this.closeable,\n              }}\n              name=\"close\"\n              size={closeIconSize(this.size)}\n              onClick={this.handleCloseClickEvent}\n            />\n          </div>\n\n          <div part=\"body\" class=\"tile__body\">\n            {this.iconName && (\n              <six-icon onClick={this.handleClickEvent} size={iconSize(this.size)}>\n                {this.iconName}\n              </six-icon>\n            )}\n            {this.hasIconSlot && <slot name=\"icon\"></slot>}\n          </div>\n\n          <div\n            part=\"footer\"\n            class={{\n              'tile__footer--small': this.size === 'small',\n              'tile__footer--medium': this.size === 'medium',\n              'tile__footer--large': this.size === 'large',\n            }}\n          >\n            {this.label && (\n              <div\n                class={{\n                  '.label__footer': true,\n                }}\n                onClick={this.handleClickEvent}\n              >\n                {this.label}\n              </div>\n            )}\n            {this.hasLabelSlot && <slot name=\"label\"></slot>}\n          </div>\n        </div>\n      </six-tooltip>\n    );\n  }\n\n  private handleCloseClickEvent = () => {\n    this.visible = false;\n    this.sixTileClose.emit();\n  };\n\n  private handleClickEvent = () => {\n    this.sixTileSelected.emit();\n  };\n}\n\nconst closeIconSize = (size: string) => {\n  return {\n    small: 'xxSmall',\n    medium: 'medium',\n    large: 'medium',\n  }[size] as 'xSmall' | 'medium';\n};\n\nconst iconSize = (size: string) => {\n  return {\n    small: 'xLarge',\n    medium: 'xxLarge',\n    large: 'xxxLarge',\n  }[size] as 'xLarge' | 'xxLarge' | 'xxxLarge';\n};\n"],"names":["hasSlot","slot","getSlot","h"],"mappings":"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"}

package/dist/cjs/six-timepicker.cjs.entry.js

@@ -1,13 +1,11 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-5bfcf88b.js');
-const types = require('./types-d3da200b.js');
-const executionControl = require('./execution-control-d728da70.js');
-const eventListeners = require('./event-listeners-9fb878f1.js');
-const slot = require('./slot-1b1232a1.js');
-const popup = require('./popup-e854acda.js');
+var index = require('./index-IrUwKluw.js');
+var types = require('./types-7ZstPoJD.js');
+var executionControl = require('./execution-control-oU0MWBWI.js');
+var eventListeners = require('./event-listeners-BrSR7arL.js');
+var slot = require('./slot-DBK7c7jH.js');
+var popup = require('./popup-BBJQmXUh.js');
 
 const getCurrentTimeIn24Hours = () => {
     const now = new Date();
@@ -98,17 +96,103 @@ const createTimeString = (time, format) => {
         .join(':');
 };
 
-const sixTimepickerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block;font-family:var(--six-font-family)}.timepicker_clear{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.timepicker_clear:hover{color:var(--six-input-icon-color-hover)}.timepicker_clear:focus{outline:none}.timepicker_clear--right{right:0;position:absolute}.timepicker_clear--left{right:35px;position:absolute}.timepicker__container{position:relative}.timepicker__popup{display:flex;justify-content:center;min-width:min-content;min-height:145px;background-color:white;padding:0.5em 0.5em 1.5em;box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);user-select:none;position:absolute;z-index:var(--six-z-index-dropdown);right:0;left:0}.timepicker__popup--is-up{bottom:100%}.timepicker__popup--is-inline{position:initial;box-shadow:none;border:1px solid var(--six-color-web-rock-400)}.timepicker__separator{display:flex;align-items:center}.timepicker__item--wide{padding-left:0.5rem;padding-right:0.5rem}.input--empty .timepicker_clear{visibility:hidden}.input--hide{display:none}.prefix{cursor:pointer}.prefix--right{right:0;display:inline-flex;position:absolute;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;margin-right:var(--six-input-spacing-medium);transition:var(--six-transition-fast) color}";
-const SixTimepickerStyle0 = sixTimepickerCss;
+const sixTimepickerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:block;font-family:var(--six-font-family)}.timepicker_clear{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.timepicker_clear:hover{color:var(--six-input-icon-color-hover)}.timepicker_clear:focus{outline:none}.timepicker_clear--right{right:0;position:absolute}.timepicker_clear--left{right:35px;position:absolute}.timepicker__container{position:relative}.timepicker__popup{display:flex;justify-content:center;min-width:min-content;background-color:white;padding:0.5em;box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);user-select:none;position:absolute;z-index:var(--six-z-index-dropdown);right:0;left:0}.timepicker__popup--is-up{bottom:100%}.timepicker__popup--is-inline{position:initial;box-shadow:none;border:1px solid var(--six-color-web-rock-400)}.timepicker__separator{display:flex;align-items:center}.timepicker__item--wide{padding-left:0.5rem;padding-right:0.5rem}.input--empty .timepicker_clear{visibility:hidden}.input--hide{display:none}.prefix{cursor:pointer}.prefix--right{right:0;display:inline-flex;position:absolute;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;margin-right:var(--six-input-spacing-medium);transition:var(--six-transition-fast) color}";
 
 const MIN_POPUP_HEIGHT = 145;
 const SixTimepicker = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.sixChange = index.createEvent(this, "six-timepicker-change", 7);
-        this.sixChangeDebounced = index.createEvent(this, "six-timepicker-change-debounced", 7);
-        this.sixClear = index.createEvent(this, "six-timepicker-clear", 7);
+        this.sixChange = index.createEvent(this, "six-timepicker-change");
+        this.sixChangeDebounced = index.createEvent(this, "six-timepicker-change-debounced");
+        this.sixClear = index.createEvent(this, "six-timepicker-clear");
         this.eventListeners = new eventListeners.EventListeners();
+        /**
+         * Define the time format. Valid formats are:
+         *
+         * HH:mm:ss
+         * hh:mm:ss:aa
+         * HH:mm:ss:ms
+         * hh:mm:ss:ms:aa
+         * HH:mm
+         * hh:mm:aa
+         * HH
+         * hh:aa
+         * mm
+         * ss
+         * ms
+         *
+         * where HH is the 24 hour format
+         * and hh is the 12 hour format
+         *
+         * Please notice that when using the 12-hour-clock (hh)
+         * you always need a period indicator (aa). So the time can be parsed as either am or pm
+         * */
+        this.format = 'HH:mm:ss';
+        /**
+         * Define the separator to be shown between the time unit pickers.
+         * Please be aware that this property will modify the displayed separator only.
+         * The separator for a timestring is always expected to be a colon (eg. '13:52:20')
+         * */
+        this.separator = ':';
+        /**
+         * The value of the timepicker provided as a string. The string mast match the provided format (or default format)
+         */
+        this.value = '';
+        /** Indicates whether the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods. */
+        this.open = false;
+        /** Indicates whether the timepicker should be shown as an inline (always open) component */
+        this.inline = false;
+        /**
+         * If `true` the user can only select a time via the timepicker but not directly edit the input field.
+         */
+        this.readonly = false;
+        /**
+         * If `true` the component is disabled.
+         */
+        this.disabled = false;
+        /** Timepicker size. */
+        this.size = 'medium';
+        /** Set to true to show an asterisk beneath the label. */
+        this.required = false;
+        /** The input's error text. Alternatively, you can use the error-text slot. */
+        this.errorText = '';
+        /** The input's label. Alternatively, you can use the label slot. */
+        this.label = '';
+        /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+        this.invalid = false;
+        /** The input's name attribute. */
+        this.name = '';
+        /** Set to true to add a clear button when the input is populated. */
+        this.clearable = false;
+        /** Set the position of the icon */
+        this.iconPosition = 'left';
+        /**
+         * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+         * `overflow: auto|scroll`.
+         */
+        this.hoist = false;
+        /**
+         * Set the amount of time, in milliseconds, to wait to trigger faster switching between timeunits (e.g. hours).
+         */
+        this.timeout = executionControl.DEFAULT_DEBOUNCE_FAST;
+        /**
+         * Set the amount of time, in milliseconds, to wait between switching to next timeunit (e.g. next hour) when mouse button is held pressed.
+         */
+        this.interval = executionControl.DEFAULT_DEBOUNCE_INSANELY_FAST;
+        /**
+         * Set the amount of time, in milliseconds, to wait to trigger the `six-timepicker-change-debounced` event.
+         * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce
+         * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click
+         * (and keep pressed) and once you release
+         */
+        this.debounce = executionControl.DEFAULT_DEBOUNCE_FAST;
+        this.isPopupContentUp = false;
+        this.isDropDownContentUp = false;
+        /*
+         * Internally the six-timepicker uses a standardized representation of time, so we don't have a mess,
+         * when switching between formats
+         */
+        this.popupValue = {};
         this.handlePickerChange = (event, property) => {
             // stop propagation, since the timepicker should not expose the events of the underlying item-picker
             event.stopPropagation();
@@ -146,32 +230,6 @@ const SixTimepicker = class {
                 valueAsString: '',
             });
         };
-        this.format = 'HH:mm:ss';
-        this.separator = ':';
-        this.value = '';
-        this.open = false;
-        this.inline = false;
-        this.readonly = false;
-        this.disabled = false;
-        this.placement = undefined;
-        this.size = 'medium';
-        this.required = false;
-        this.placeholder = undefined;
-        this.errorText = '';
-        this.errorTextCount = undefined;
-        this.label = '';
-        this.invalid = false;
-        this.name = '';
-        this.clearable = false;
-        this.iconPosition = 'left';
-        this.hoist = false;
-        this.timeout = executionControl.DEFAULT_DEBOUNCE_FAST;
-        this.interval = executionControl.DEFAULT_DEBOUNCE_INSANELY_FAST;
-        this.defaultTime = undefined;
-        this.debounce = executionControl.DEFAULT_DEBOUNCE_FAST;
-        this.isPopupContentUp = false;
-        this.isDropDownContentUp = false;
-        this.popupValue = {};
     }
     async resizeHandler() {
         this.calcIsPopupContentUp();
@@ -374,10 +432,10 @@ const SixTimepicker = class {
             } }, icon));
     }
     render() {
-        return (index.h("div", { key: '19badfa42a1f8d5ef4b6b385780e88dbdceaa9e4', part: "container", ref: (el) => (this.wrapper = el), class: "timepicker__container" }, index.h("six-input", { key: '7cd0508f766099136b7b85bd15dce64170ec3eca', ref: (el) => (this.inputElement = el), part: "input", onClick: () => this.openPopup(), value: this.value, placeholder: this.placeholder, readonly: this.readonly, disabled: this.disabled, errorTextCount: this.errorTextCount, errorText: this.errorText, invalid: this.invalid, size: this.size, name: this.name, label: this.label, required: this.required, class: {
+        return (index.h("div", { key: '58240c7c32227225d1811fa59e9cf336aad03a4d', part: "container", ref: (el) => (this.wrapper = el), class: "timepicker__container" }, index.h("six-input", { key: '1b6e9b28d997b67a933d055fa3e73e3c0751aa53', ref: (el) => (this.inputElement = el), part: "input", onClick: () => this.openPopup(), value: this.value, placeholder: this.placeholder, readonly: this.readonly, disabled: this.disabled, errorTextCount: this.errorTextCount, errorText: this.errorText, invalid: this.invalid, size: this.size, name: this.name, label: this.label, required: this.required, class: {
                 'input--empty': this.value === '',
                 'input--hide': this.inline,
-            } }, this.renderCustomIcon(), this.renderClearable(), slot.hasSlot(this.host, 'label') ? (index.h("span", { slot: "label" }, index.h("slot", { name: "label" }))) : null, slot.hasSlot(this.host, 'error-text') ? (index.h("span", { slot: "error-text" }, index.h("slot", { name: "error-text" }))) : null), this.open && (index.h("div", { ref: (el) => (this.popup = el), part: "popup", class: {
+            } }, this.renderCustomIcon(), this.renderClearable(), slot.hasSlot(this.host, 'label') ? (index.h("span", { slot: "label" }, index.h("slot", { name: "label" }))) : null, slot.hasSlot(this.host, 'error-text') ? (index.h("span", { slot: "error-text" }, index.h("slot", { name: "error-text" }))) : null), this.open && (index.h("div", { key: 'b762116d0af1bc11d7f2cbb255b071e8fe3b52cf', ref: (el) => (this.popup = el), part: "popup", class: {
                 timepicker__popup: true,
                 'timepicker__popup--is-up': this.placement == null ? this.placement === 'top' : this.isPopupContentUp,
                 'timepicker__popup--is-inline': this.inline,
@@ -388,8 +446,9 @@ const SixTimepicker = class {
         "value": ["valueChanged"]
     }; }
 };
-SixTimepicker.style = SixTimepickerStyle0;
+SixTimepicker.style = sixTimepickerCss;
 
 exports.six_timepicker = SixTimepicker;
+//# sourceMappingURL=six-timepicker.entry.cjs.js.map
 
 //# sourceMappingURL=six-timepicker.cjs.entry.js.map