@maggioli-design-system/mds-input-otp 1.0.1

package/src/tailwind/fouc.css

@@ -0,0 +1,118 @@
+:host(:not(:is([hydrated], .hydrated))) {
+  animation-duration: 0s;
+  border-color: transparent;
+  box-shadow: 0 0 0 transparent;
+  opacity: 0;
+  outline-color: transparent;
+  transition-delay: 0s;
+  transition-duration: 0s;
+  visibility: hidden;
+}
+
+/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */
+
+mds-accordion:not(:is([hydrated], .hydrated)),
+mds-accordion-item:not(:is([hydrated], .hydrated)),
+mds-accordion-timer:not(:is([hydrated], .hydrated)),
+mds-accordion-timer-item:not(:is([hydrated], .hydrated)),
+mds-author:not(:is([hydrated], .hydrated)),
+mds-avatar:not(:is([hydrated], .hydrated)),
+mds-badge:not(:is([hydrated], .hydrated)),
+mds-banner:not(:is([hydrated], .hydrated)),
+mds-benchmark-bar:not(:is([hydrated], .hydrated)),
+mds-bibliography:not(:is([hydrated], .hydrated)),
+mds-breadcrumb:not(:is([hydrated], .hydrated)),
+mds-breadcrumb-item:not(:is([hydrated], .hydrated)),
+mds-button:not(:is([hydrated], .hydrated)),
+mds-card:not(:is([hydrated], .hydrated)),
+mds-card-content:not(:is([hydrated], .hydrated)),
+mds-card-footer:not(:is([hydrated], .hydrated)),
+mds-card-header:not(:is([hydrated], .hydrated)),
+mds-card-media:not(:is([hydrated], .hydrated)),
+mds-chip:not(:is([hydrated], .hydrated)),
+mds-details:not(:is([hydrated], .hydrated)),
+mds-dropdown:not(:is([hydrated], .hydrated)),
+mds-entity:not(:is([hydrated], .hydrated)),
+mds-file:not(:is([hydrated], .hydrated)),
+mds-file-preview:not(:is([hydrated], .hydrated)),
+mds-filter:not(:is([hydrated], .hydrated)),
+mds-filter-item:not(:is([hydrated], .hydrated)),
+mds-header:not(:is([hydrated], .hydrated)),
+mds-header-bar:not(:is([hydrated], .hydrated)),
+mds-help:not(:is([hydrated], .hydrated)),
+mds-horizontal-scroll:not(:is([hydrated], .hydrated)),
+mds-hr:not(:is([hydrated], .hydrated)),
+mds-icon:not(:is([hydrated], .hydrated)),
+mds-img:not(:is([hydrated], .hydrated)),
+mds-input:not(:is([hydrated], .hydrated)),
+mds-input-field:not(:is([hydrated], .hydrated)),
+mds-input-range:not(:is([hydrated], .hydrated)),
+mds-input-select:not(:is([hydrated], .hydrated)),
+mds-input-switch:not(:is([hydrated], .hydrated)),
+mds-input-tip:not(:is([hydrated], .hydrated)),
+mds-input-tip-item:not(:is([hydrated], .hydrated)),
+mds-input-upload:not(:is([hydrated], .hydrated)),
+mds-keyboard:not(:is([hydrated], .hydrated)),
+mds-keyboard-key:not(:is([hydrated], .hydrated)),
+mds-kpi:not(:is([hydrated], .hydrated)),
+mds-kpi-item:not(:is([hydrated], .hydrated)),
+mds-label:not(:is([hydrated], .hydrated)),
+mds-list:not(:is([hydrated], .hydrated)),
+mds-list-item:not(:is([hydrated], .hydrated)),
+mds-modal:not(:is([hydrated], .hydrated)),
+mds-note:not(:is([hydrated], .hydrated)),
+mds-notification:not(:is([hydrated], .hydrated)),
+mds-paginator:not(:is([hydrated], .hydrated)),
+mds-paginator-item:not(:is([hydrated], .hydrated)),
+mds-pref:not(:is([hydrated], .hydrated)),
+mds-pref-animation:not(:is([hydrated], .hydrated)),
+mds-pref-consumption:not(:is([hydrated], .hydrated)),
+mds-pref-contrast:not(:is([hydrated], .hydrated)),
+mds-pref-language:not(:is([hydrated], .hydrated)),
+mds-pref-language-item:not(:is([hydrated], .hydrated)),
+mds-pref-theme:not(:is([hydrated], .hydrated)),
+mds-price-table:not(:is([hydrated], .hydrated)),
+mds-price-table-features:not(:is([hydrated], .hydrated)),
+mds-price-table-features-cell:not(:is([hydrated], .hydrated)),
+mds-price-table-features-row:not(:is([hydrated], .hydrated)),
+mds-price-table-header:not(:is([hydrated], .hydrated)),
+mds-price-table-list:not(:is([hydrated], .hydrated)),
+mds-price-table-list-item:not(:is([hydrated], .hydrated)),
+mds-progress:not(:is([hydrated], .hydrated)),
+mds-push-notification:not(:is([hydrated], .hydrated)),
+mds-push-notifications:not(:is([hydrated], .hydrated)),
+mds-quote:not(:is([hydrated], .hydrated)),
+mds-separator:not(:is([hydrated], .hydrated)),
+mds-spinner:not(:is([hydrated], .hydrated)),
+mds-stepper-bar:not(:is([hydrated], .hydrated)),
+mds-stepper-bar-item:not(:is([hydrated], .hydrated)),
+mds-tab:not(:is([hydrated], .hydrated)),
+mds-tab-bar:not(:is([hydrated], .hydrated)),
+mds-tab-bar-item:not(:is([hydrated], .hydrated)),
+mds-tab-item:not(:is([hydrated], .hydrated)),
+mds-table:not(:is([hydrated], .hydrated)),
+mds-table-body:not(:is([hydrated], .hydrated)),
+mds-table-cell:not(:is([hydrated], .hydrated)),
+mds-table-footer:not(:is([hydrated], .hydrated)),
+mds-table-header:not(:is([hydrated], .hydrated)),
+mds-table-header-cell:not(:is([hydrated], .hydrated)),
+mds-table-row:not(:is([hydrated], .hydrated)),
+mds-text:not(:is([hydrated], .hydrated)),
+mds-toast:not(:is([hydrated], .hydrated)),
+mds-tooltip:not(:is([hydrated], .hydrated)),
+mds-tree:not(:is([hydrated], .hydrated)),
+mds-tree-item:not(:is([hydrated], .hydrated)),
+mds-url-view:not(:is([hydrated], .hydrated)),
+mds-usage:not(:is([hydrated], .hydrated)),
+mds-video-wall:not(:is([hydrated], .hydrated)),
+mds-zero:not(:is([hydrated], .hydrated))
+{
+  animation-duration: 0s;
+  border-color: transparent;
+  box-shadow: 0 0 0 transparent;
+  opacity: 0;
+  outline-color: transparent;
+  transition-delay: 0s;
+  transition-duration: 0s;
+  visibility: hidden;
+}

package/src/tailwind/index.css

@@ -0,0 +1,4 @@
+@import './components.css';
+@tailwind components;
+@tailwind utilities;
+

package/src/type/animation.ts

@@ -0,0 +1,3 @@
+export type HorizontalActionsAnimationType =
+  | 'fade'
+  | 'slide'

package/src/type/autocomplete.ts

@@ -0,0 +1,68 @@
+export type AutocompleteType =
+  | 'additional-name'
+  | 'address'
+  | 'address-level1'
+  | 'address-level2'
+  | 'address-level3'
+  | 'address-level4'
+  | 'address-line1'
+  | 'address-line2'
+  | 'address-line3'
+  | 'bday'
+  | 'bday-day'
+  | 'bday-month'
+  | 'bday-year'
+  | 'cc-additional-name'
+  | 'cc-csc'
+  | 'cc-exp'
+  | 'cc-exp-month'
+  | 'cc-exp-year'
+  | 'cc-family-name'
+  | 'cc-given-name'
+  | 'cc-name'
+  | 'cc-number'
+  | 'cc-type'
+  | 'country'
+  | 'country-name'
+  | 'current-password'
+  | 'email'
+  | 'family-name'
+  | 'given-name'
+  | 'honorific-prefix'
+  | 'honorific-suffix'
+  | 'impp'
+  | 'language'
+  | 'name'
+  | 'new-password'
+  | 'nickname'
+  | 'off'
+  | 'on'
+  | 'one-time-code'
+  | 'organization'
+  | 'organization-title'
+  | 'photo'
+  | 'postal-code'
+  | 'sex'
+  | 'street-address'
+  | 'tel'
+  | 'tel-area-code'
+  | 'tel-country-code'
+  | 'tel-extension'
+  | 'tel-local'
+  | 'tel-national'
+  | 'transaction-amount'
+  | 'transaction-currency'
+  | 'url'
+  | 'username'
+
+export type InputTextType =
+  | 'date'
+  | 'email'
+  | 'number'
+  | 'password'
+  | 'search'
+  | 'tel'
+  | 'text'
+  | 'textarea'
+  | 'time'
+  | 'url'

package/src/type/button.ts

@@ -0,0 +1,32 @@
+export type ButtonType =
+  | 'a'
+  | 'button'
+  | 'reset'
+  | 'submit'
+
+export type ButtonTargetType =
+  |'self'
+  |'blank'
+
+export type ButtonSizeType =
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+
+export type ButtonIconPositionType =
+  | 'left'
+  | 'right'
+
+export type ButtonVariantType =
+  | 'ai'
+  | 'apple'
+  | 'dark'
+  | 'error'
+  | 'google'
+  | 'info'
+  | 'light'
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'warning'

package/src/type/date.ts

@@ -0,0 +1,10 @@
+type ISO8601DateFormat<K, T> = K & { __isISO8601DateFormat: T };
+
+// Defines a branded type for the date ISO 8601 string
+type ISO8601Date = ISO8601DateFormat<string, 'ISO8601Date'>
+
+// const validDate: ISO8601Date = sanitizeISO8601Date('2024-09-24T15:30:00Z')
+
+export {
+  ISO8601Date,
+}

package/src/type/file-types.ts

@@ -0,0 +1,61 @@
+export type ExtensionSuffixType =
+  | '7z'
+  | 'ace'
+  | 'ai'
+  | 'db'
+  | 'default'
+  | 'dmg'
+  | 'doc'
+  | 'docm'
+  | 'docx'
+  | 'eml'
+  | 'eps'
+  | 'exe'
+  | 'flac'
+  | 'gif'
+  | 'heic'
+  | 'htm'
+  | 'html'
+  | 'jpe'
+  | 'jpeg'
+  | 'jpg'
+  | 'js'
+  | 'json'
+  | 'jsx'
+  | 'm2v'
+  | 'mp2'
+  | 'mp3'
+  | 'mp4'
+  | 'mp4v'
+  | 'mpeg'
+  | 'mpg'
+  | 'mpg4'
+  | 'mpga'
+  | 'odf'
+  | 'odp'
+  | 'ods'
+  | 'odt'
+  | 'odt'
+  | 'ole'
+  | 'p7m'
+  | 'pdf'
+  | 'php'
+  | 'png'
+  | 'ppt'
+  | 'rar'
+  | 'rtf'
+  | 'sass'
+  | 'shtml'
+  | 'svg'
+  | 'tar'
+  | 'tiff'
+  | 'ts'
+  | 'tsd'
+  | 'txt'
+  | 'wav'
+  | 'webp'
+  | 'xar'
+  | 'xls'
+  | 'xlsx'
+  | 'xml'
+  | 'zip'

package/src/type/floating-ui.ts

@@ -0,0 +1,17 @@
+export type FloatingUIPlacement =
+  | 'bottom'
+  | 'bottom-end'
+  | 'bottom-start'
+  | 'left'
+  | 'left-end'
+  | 'left-start'
+  | 'right'
+  | 'right-end'
+  | 'right-start'
+  | 'top'
+  | 'top-end'
+  | 'top-start'
+
+export type FloatingUIStrategy =
+  | 'absolute'
+  | 'fixed'

package/src/type/form-rel.ts

@@ -0,0 +1,11 @@
+export type FormRelType =
+  | 'external' // Specifies that the referenced document is not a part of the current site
+  | 'help' // Links to a help document
+  | 'license' // Links to copyright information for the document
+  | 'next' // The next document in a selection
+  | 'nofollow' // Links to an unendorsed document, like a paid link. ("nofollow" is used by Google, to specify that the Google search spider should not follow that link)
+  | 'noopener'
+  | 'noreferrer' // Specifies that the browser should not send a HTTP referrer header if the user follows the hyperlink
+  | 'opener'
+  | 'prev' // The previous document in a selection
+  | 'search' // Links to a search tool for the document

package/src/type/header-bar.ts

@@ -0,0 +1,11 @@
+export type HeaderBarMenuType =
+  | 'all'
+  | 'desktop'
+  | 'mobile'
+  | 'none'
+
+export type HeaderBarNavType =
+  | 'all'
+  | 'desktop'
+  | 'mobile'
+  | 'none'

package/src/type/input-tip.ts

@@ -0,0 +1,11 @@
+export type InputTipItemVariantType =
+  | 'count-almost'
+  | 'count-almost-full'
+  | 'count-empty'
+  | 'count-full'
+  | 'count-incomplete'
+  | 'disabled'
+  | 'readonly'
+  | 'required'
+  | 'required-success'
+  | 'text'

package/src/type/input.ts

@@ -0,0 +1,33 @@
+export type InputControlsLayoutType =
+  | 'horizontal'
+  | 'vertical'
+
+export type InputControlsIconType =
+  | 'arrow'
+  | 'arithmetic'
+
+export type InputValueType =
+  | null
+  | number
+  | string
+  | undefined
+
+export type InputTextType =
+  | 'date'
+  | 'email'
+  | 'number'
+  | 'password'
+  | 'search'
+  | 'tel'
+  | 'text'
+  | 'textarea'
+  | 'time'
+  | 'url'
+  | 'cc'
+  | 'cf'
+  | 'isbn'
+  | 'piva'
+
+export interface MdsInputEventDetail {
+  value?: File | string | FormData | null
+}

package/src/type/keyboard.ts

@@ -0,0 +1,93 @@
+export type KeyboardKeyData = {
+  alias: string
+  description: string
+  group: string
+  keyCodes: string[]
+  keyboardPosition?: { left?: boolean; right?: boolean }
+}
+
+export type KeyboardKeyName =
+  | '0'
+  | '1'
+  | '2'
+  | '3'
+  | '4'
+  | '5'
+  | '6'
+  | '7'
+  | '8'
+  | '9'
+  | 'a'
+  | 'alt'
+  | 'altleft'
+  | 'altright'
+  | 'arrowdown'
+  | 'arrowleft'
+  | 'arrowright'
+  | 'arrowup'
+  | 'b'
+  | 'backspace'
+  | 'c'
+  | 'capslock'
+  | 'command'
+  | 'commandleft'
+  | 'commandright'
+  | 'control'
+  | 'controlleft'
+  | 'controlright'
+  | 'd'
+  | 'delete'
+  | 'e'
+  | 'end'
+  | 'enter'
+  | 'escape'
+  | 'f'
+  | 'f1'
+  | 'f10'
+  | 'f11'
+  | 'f12'
+  | 'f2'
+  | 'f3'
+  | 'f4'
+  | 'f5'
+  | 'f6'
+  | 'f7'
+  | 'f8'
+  | 'f9'
+  | 'g'
+  | 'h'
+  | 'home'
+  | 'i'
+  | 'j'
+  | 'k'
+  | 'l'
+  | 'm'
+  | 'n'
+  | 'o'
+  | 'option'
+  | 'optionleft'
+  | 'optionright'
+  | 'p'
+  | 'pagedown'
+  | 'pageup'
+  | 'q'
+  | 'r'
+  | 's'
+  | 'shift'
+  | 'shiftleft'
+  | 'shiftright'
+  | 'space'
+  | 't'
+  | 'tab'
+  | 'u'
+  | 'v'
+  | 'w'
+  | 'windows'
+  | 'windowsleft'
+  | 'windowsright'
+  | 'x'
+  | 'y'
+  | 'z'
+
+
+export type KeyboardKeyMap = Record<KeyboardKeyName, KeyboardKeyData>;

package/src/type/loading.ts

@@ -0,0 +1,3 @@
+export type LoadingType =
+  | 'eager'
+  | 'lazy'

package/src/type/preference.ts

@@ -0,0 +1,11 @@
+export type UIPreferenceType =
+  | 'animation'
+  | 'consumption'
+  | 'contrast'
+  | 'theme'
+  | 'language'
+
+export type ConsumptionModeType =
+  | 'high'
+  | 'medium'
+  | 'low'

package/src/type/text.ts

@@ -0,0 +1,63 @@
+export type TypographyTagType =
+  | 'abbr'
+  | 'address'
+  | 'article'
+  | 'b'
+  | 'bdo'
+  | 'blockquote'
+  | 'cite'
+  | 'code'
+  | 'dd'
+  | 'del'
+  | 'details'
+  | 'dfn'
+  | 'div'
+  | 'dl'
+  | 'dt'
+  | 'em'
+  | 'figcaption'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'i'
+  | 'ins'
+  | 'kbd'
+  | 'label'
+  | 'legend'
+  | 'li'
+  | 'mark'
+  | 'ol'
+  | 'p'
+  | 'pre'
+  | 'q'
+  | 'rb'
+  | 'rt'
+  | 'ruby'
+  | 's'
+  | 'samp'
+  | 'small'
+  | 'span'
+  | 'strong'
+  | 'sub'
+  | 'summary'
+  | 'sup'
+  | 'time'
+  | 'u'
+  | 'ul'
+  | 'var'
+
+export type TypographyHeadingTagType =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+
+export type TypographyTruncateType =
+  | 'all'
+  | 'none'
+  | 'word'

package/src/type/tree.ts

@@ -0,0 +1,12 @@
+export type TreeAppearance =
+  | 'none'
+  | 'depth'
+
+export type TreeIcon =
+  | 'folder'
+  | 'chevron'
+
+
+export type TreeActions =
+  | 'auto'
+  | 'visible'

package/src/type/typography.ts

@@ -0,0 +1,65 @@
+export type TypographyType =
+  | 'action'
+  | 'caption'
+  | 'snippet'
+  | 'detail'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'hack'
+  | 'label'
+  | 'option'
+  | 'paragraph'
+  | 'tip'
+
+export type TypographyVariants =
+  | 'title'
+  | 'info'
+  | 'read'
+  | 'code'
+
+export type TypographyReadingVariants =
+  | 'info'
+  | 'read'
+
+export type TypographyTitleType =
+  | 'action'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+
+export type TypographyInfoType =
+  | 'caption'
+  | 'detail'
+  | 'label'
+  | 'option'
+  | 'paragraph'
+  | 'tip'
+
+export type TypographyReadType =
+  | 'caption'
+  | 'detail'
+  | 'paragraph'
+
+export type TypographySmallerType =
+  | 'tip'
+  | 'option'
+
+export type TypographyMonoType =
+  | 'snippet'
+  | 'hack'
+
+export type TypographyTooltipType =
+  | 'caption'
+  | 'detail'
+  | 'tip'
+
+export type TypographyInputType =
+  | 'snippet'
+  | 'detail'