@nuralyui/timepicker 0.1.4 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle.js +790 -81
- package/package.json +1 -1
- package/timepicker.component.d.ts +0 -2
- package/timepicker.component.js +0 -3
- package/timepicker.component.js.map +1 -1
package/bundle.js
CHANGED
|
@@ -1,106 +1,815 @@
|
|
|
1
|
-
import{css as t,html as r,nothing as i,LitElement as e}from"lit";import{property as a,state as n,customElement as o}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{NuralyUIBaseMixin as l}from"@nuralyui/common/mixins";import{ifDefined as c}from"lit/directives/if-defined.js";import{SharedDropdownController as u}from"@nuralyui/common/controllers";const d=[t`:host{display:flex;flex-direction:column;font-family:var(--nuraly-font-family-input, 'IBM Plex Sans', ui-sans-serif, system-ui)}.input-wrapper{background-color:var(--nuraly-color-input-background,var(--nuraly-color-input-background-fallback,#fff))}#input-container>input{background-color:transparent;border:var(--nuraly-input-border,none);outline:var(--nuraly-input-outline,none);flex:1;min-width:0;width:100%;font-family:var(--nuraly-font-family-input, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto);font-size:var(--nuraly-font-size-input,14px);color:var(--nuraly-color-input-text,var(--nuraly-color-input-text-fallback,rgba(0,0,0,.88)));padding:var(--nuraly-spacing-input-medium-vertical,4px) var(--nuraly-spacing-input-medium-horizontal,11px)}:host([disabled]) .input-wrapper{background-color:var(--nuraly-color-input-disabled-background,var(--nuraly-color-input-disabled-background-fallback,#f4f4f4))}:host([disabled]) #input-container>input{background-color:transparent;cursor:var(--nuraly-cursor-disabled,not-allowed);color:var(--nuraly-color-input-disabled-text,var(--nuraly-color-input-disabled-text-fallback,rgba(0,0,0,.25)))}nr-icon{display:flex;align-items:center;--nuraly-color-icon:var(--nuraly-color-input-icon, var(--nuraly-color-icon, var(--nuraly-color-icon-fallback, #161616)));--nuraly-icon-size:var(--nuraly-size-input-icon, var(--nuraly-icon-size, var(--nuraly-icon-size-fallback, 18px)));--nuraly-color-icon-hover:var(--nuraly-color-input-icon-hover, var(--nuraly-color-icon-hover, var(--nuraly-color-icon-hover-fallback, #0f62fe)));--nuraly-color-icon-active:var(--nuraly-color-input-icon-active, var(--nuraly-color-icon-active, var(--nuraly-color-icon-active-fallback, #054ada)));--nuraly-color-icon-disabled:var(--nuraly-color-input-icon-disabled, var(--nuraly-color-icon-disabled, var(--nuraly-color-icon-disabled-fallback, #c6c6c6)))}::placeholder{color:var(--nuraly-color-input-placeholder,var(--nuraly-color-input-placeholder-fallback,#a8a8a8));font-size:var(--nuraly-font-size-input-placeholder,14px);font-family:var(--nuraly-font-family-input, 'IBM Plex Sans', ui-sans-serif, system-ui)}:host([disabled]) ::placeholder{color:var(--nuraly-color-input-disabled-placeholder,var(--nuraly-color-input-disabled-placeholder-fallback,#c6c6c6))}#warning-icon{--nuraly-color-icon:var(--nuraly-color-input-warning-icon, #f1c21b)}#error-icon{--nuraly-color-icon:var(--nuraly-color-input-error-icon, #da1e28)}#calendar-icon{--nuraly-color-icon:var(--nuraly-color-input-calendar-icon, #161616)}#password-icon{padding-left:var(--nuraly-input-password-icon-padding-left,var(--nuraly-password-icon-padding-left,8px));padding-right:var(--nuraly-input-password-icon-padding-right,var(--nuraly-password-icon-padding-right,8px));cursor:var(--nuraly-cursor-interactive,pointer);--nuraly-color-icon:var(--nuraly-color-input-password-icon, #161616)}#copy-icon{padding-right:var(--nuraly-input-copy-icon-padding-right,var(--nuraly-copy-icon-padding-right,8px));--nuraly-color-icon:var(--nuraly-color-input-copy-icon, #161616);cursor:var(--nuraly-cursor-interactive,pointer)}#clear-icon{padding-right:var(--nuraly-input-clear-icon-padding-right,var(--nuraly-clear-icon-padding-right,8px));--nuraly-color-icon:var(--nuraly-color-input-clear-icon, #161616);cursor:var(--nuraly-cursor-interactive,pointer)}#number-icons{display:flex;justify-content:space-between;align-items:center;cursor:var(--nuraly-cursor-interactive,pointer);position:absolute;right:0;top:0;height:100%;width:var(--nuraly-input-number-icons-container-width,var(--nuraly-number-icons-container-width,50px));padding-right:var(--nuraly-input-number-icons-container-padding-right,var(--nuraly-number-icons-container-padding-right,8px))}#number-icons nr-icon{--nuraly-color-icon:var(--nuraly-color-input-number-icons, #161616);padding-left:var(--nuraly-input-number-icons-padding-left,var(--nuraly-number-icons-padding-left,4px));padding-right:var(--nuraly-input-number-icons-padding-right,var(--nuraly-number-icons-padding-right,4px));width:var(--nuraly-input-number-icons-width,var(--nuraly-number-icons-width,24px));height:var(--nuraly-input-number-icons-height,var(--nuraly-number-icons-height,24px))}#icons-separator{color:var(--nuraly-input-number-icons-separator-color,var(--nuraly-number-icons-separator-color));padding-bottom:var(--nuraly-input-number-icons-separator-padding-bottom,var(--nuraly-number-icons-separator-padding-bottom));padding-left:var(--nuraly-input-number-icons-separator-padding-left,var(--nuraly-number-icons-separator-padding-left));padding-right:var(--nuraly-input-number-icons-separator-padding-right,var(--nuraly-number-icons-separator-padding-right))}:host([disabled]) #calendar-icon,:host([disabled]) #clear-icon,:host([disabled]) #copy-icon,:host([disabled]) #error-icon,:host([disabled]) #number-icons,:host([disabled]) #password-icon,:host([disabled]) #warning-icon{opacity:var(--nuraly-input-disabled-icon-opacity,var(--nuraly-disabled-icon-opacity))}:host([disabled]) #clear-icon,:host([disabled]) #copy-icon,:host([disabled]) #number-icons,:host([disabled]) #password-icon{cursor:not-allowed}.input-wrapper{display:flex;align-items:stretch;width:100%}.input-addon-before{background-color:var(--nuraly-input-addon-background-color,var(--nuraly-addon-background-color));border:var(--nuraly-input-border,var(--nuraly-border));border-right:none;border-top-left-radius:var(--nuraly-input-border-radius,var(--nuraly-border-radius));border-bottom-left-radius:var(--nuraly-input-border-radius,var(--nuraly-border-radius));padding:var(--nuraly-input-addon-padding,var(--nuraly-addon-padding));display:flex;align-items:center;color:var(--nuraly-input-addon-color,var(--nuraly-addon-color));font-size:var(--nuraly-input-font-size,var(--nuraly-font-size));white-space:nowrap;min-width:0;flex-shrink:0}.input-addon-after{background-color:var(--nuraly-input-addon-background-color,var(--nuraly-addon-background-color));border:var(--nuraly-input-border,var(--nuraly-border));border-left:none;border-top-right-radius:var(--nuraly-input-border-radius,var(--nuraly-border-radius));border-bottom-right-radius:var(--nuraly-input-border-radius,var(--nuraly-border-radius));padding:var(--nuraly-input-addon-padding,var(--nuraly-addon-padding));display:flex;align-items:center;color:var(--nuraly-input-addon-color,var(--nuraly-addon-color));font-size:var(--nuraly-input-font-size,var(--nuraly-font-size));white-space:nowrap;min-width:0;flex-shrink:0}.input-wrapper:has(.input-addon-before) #input-container{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.input-wrapper:has(.input-addon-after) #input-container{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}#input-container{border:var(--nuraly-border-width-input,1px) solid var(--nuraly-color-input-border,#d9d9d9);border-radius:var(--nuraly-border-radius-input,6px);background-color:var(--nuraly-color-input-background,#fff);color:var(--nuraly-color-input-text,rgba(0,0,0,.88));font-family:var(--nuraly-font-family-input, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto);font-size:var(--nuraly-font-size-input,14px);display:flex;position:relative;flex:1;min-width:0;transition:var(--nuraly-transition-input,border-color .2s,box-shadow .2s)}.input-wrapper[data-theme^=carbon] #input-container,[data-theme^=carbon] nr-input #input-container,body[data-theme^=carbon] nr-input #input-container,html[data-theme^=carbon] nr-input #input-container{border:var(--nuraly-border-width-input,1px) solid var(--nuraly-color-input-border,transparent)!important;border-bottom:var(--nuraly-border-width-input,2px) solid var(--nuraly-color-input-border-bottom,#8d8d8d)!important;border-radius:var(--nuraly-border-radius-input,0)!important;background-color:var(--nuraly-color-input-background,#f4f4f4)!important;color:var(--nuraly-color-input-text,#161616)!important}.input-wrapper[data-theme^=default] #input-container,[data-theme^=default] nr-input #input-container,body[data-theme^=default] nr-input #input-container,html[data-theme^=default] nr-input #input-container{border:var(--nuraly-border-width-input,1px) solid var(--nuraly-color-input-border,#d9d9d9)!important;border-radius:var(--nuraly-border-radius-input,6px)!important;background-color:var(--nuraly-color-input-background,#fff)!important;color:var(--nuraly-color-input-text,rgba(0,0,0,.88))!important}.input-wrapper[data-theme^=carbon] #input-container>input,[data-theme^=carbon] nr-input #input-container>input,body[data-theme^=carbon] nr-input #input-container>input,html[data-theme^=carbon] nr-input #input-container>input{padding:7px 16px!important}.input-wrapper[data-theme^=default] #input-container>input,[data-theme^=default] nr-input #input-container>input,body[data-theme^=default] nr-input #input-container>input,html[data-theme^=default] nr-input #input-container>input{padding:var(--nuraly-spacing-input-medium-vertical,4px) var(--nuraly-spacing-input-medium-horizontal,11px)!important}#input-container:focus-within{border-color:var(--nuraly-color-input-border-focus,#1890ff);box-shadow:var(--nuraly-shadow-input-focus,0 0 0 2px rgba(24,144,255,.2));outline:0}.input-wrapper[data-theme^=carbon] #input-container:focus-within,[data-theme^=carbon] nr-input #input-container:focus-within,body[data-theme^=carbon] nr-input #input-container:focus-within,html[data-theme^=carbon] nr-input #input-container:focus-within{border:var(--nuraly-border-width-input,2px) solid var(--nuraly-color-input-border-focus,#0f62fe)!important;border-radius:var(--nuraly-border-radius-input,0)!important;box-shadow:var(--nuraly-shadow-input-focus,none)!important;outline:0!important}.input-wrapper[data-theme^=default] #input-container:focus-within,[data-theme^=default] nr-input #input-container:focus-within,body[data-theme^=default] nr-input #input-container:focus-within,html[data-theme^=default] nr-input #input-container:focus-within{border-color:var(--nuraly-color-input-border-focus,#1890ff)!important;border-radius:var(--nuraly-border-radius-input,6px)!important;box-shadow:var(--nuraly-shadow-input-focus,0 0 0 2px rgba(24,144,255,.2))!important;outline:0!important}:host([disabled]) #input-container{background-color:var(--nuraly-color-input-disabled-background,#f5f5f5);border-color:var(--nuraly-color-input-disabled-border,#d9d9d9);color:var(--nuraly-color-input-disabled-text,rgba(0,0,0,.25));cursor:not-allowed}:host([variant=outlined]) #input-container{border:var(--nuraly-input-outlined-border,var(--nuraly-outlined-border));border-radius:var(--nuraly-input-outlined-border-radius,var(--nuraly-outlined-border-radius));background-color:var(--nuraly-input-outlined-background,var(--nuraly-outlined-background))}:host([variant=outlined]) .input-wrapper{background-color:transparent}:host([variant=outlined]:not([state=error])) #input-container:focus-within{border:var(--nuraly-input-outlined-focus-border,var(--nuraly-outlined-focus-border))}:host([variant=filled]) #input-container{background-color:var(--nuraly-input-filled-background,var(--nuraly-filled-background));border-radius:var(--nuraly-input-filled-border-radius,var(--nuraly-filled-border-radius));border-bottom:var(--nuraly-input-filled-border-bottom,var(--nuraly-filled-border-bottom));border-top:none;border-left:none;border-right:none}:host([variant=filled]) .input-wrapper{background-color:transparent}:host([variant=filled]:not([state=error])) #input-container:focus-within{border-bottom:var(--nuraly-input-filled-focus-border-bottom,var(--nuraly-filled-focus-border-bottom));border-top:none;border-left:none;border-right:none}:host([variant=borderless]) #input-container{background-color:var(--nuraly-input-borderless-background,var(--nuraly-borderless-background));border:none;border-radius:var(--nuraly-input-borderless-border-radius,var(--nuraly-borderless-border-radius))}:host([variant=borderless]) .input-wrapper{background-color:transparent}:host([variant=borderless]:not([state=error])) #input-container:focus-within{outline:var(--nuraly-input-borderless-focus-outline,var(--nuraly-borderless-focus-outline));border:none}:host([variant=underlined]) #input-container{border-bottom:var(--nuraly-input-underlined-border-bottom,var(--nuraly-underlined-border-bottom));border-top:none;border-left:none;border-right:none;border-radius:0}:host([variant=underlined]:not([state=error])) #input-container:focus-within{border-bottom:var(--nuraly-input-underlined-focus-border-bottom,var(--nuraly-underlined-focus-border-bottom));border-top:none;border-left:none;border-right:none}input{width:100%;border:none;outline:0;color:var(--nuraly-input-text-color,var(--nuraly-text-color));font-family:var(--nuraly-input-font-family,var(--nuraly-font-family));font-size:var(--nuraly-input-font-size,var(--nuraly-font-size))}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none}input[type=number]{-moz-appearance:textfield}:host(:not([disabled])[state=error]) #input-container{border:var(--nuraly-input-error-border,var(--nuraly-error-border))!important;outline:0!important}:host([variant=borderless][state=error]) #input-container{border:var(--nuraly-input-error-border,var(--nuraly-error-border))!important;outline:0!important}:host([variant=filled][state=error]) #input-container,:host([variant=underlined][state=error]) #input-container{border-top:none!important;border-left:none!important;border-right:none!important;border-bottom:var(--nuraly-input-error-border,var(--nuraly-error-border))!important}:host([state=error]) input[type=number]~#number-icons,:host([state=warning]) input[type=number]~#number-icons{position:static;padding-left:var(--nuraly-input-number-icons-container-padding-left,var(--nuraly-number-icons-container-padding-left))}::slotted([slot=label]){color:var(--nuraly-input-label-color,var(--nuraly-label-color));font-size:var(--nuraly-input-label-font-size,var(--nuraly-label-font-size));padding-bottom:var(--nuraly-input-label-padding-bottom,var(--nuraly-label-padding-bottom))}::slotted([slot=helper-text]){color:var(--nuraly-input-helper-text-color,var(--nuraly-helper-text-color));font-size:var(--nuraly-input-helper-text-font-size,var(--nuraly-helper-text-font-size));padding-top:var(--nuraly-input-helper-text-padding-top,var(--nuraly-helper-text-padding-top));word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;hyphens:auto;white-space:normal;max-width:100%;width:0;min-width:100%;box-sizing:border-box;line-height:1.4}:host([state=error]) ::slotted([slot=helper-text]){color:var(--nuraly-input-error-helper-text-color,var(--nuraly-error-helper-text-color))}:host([state=warning]) ::slotted([slot=helper-text]){color:var(--nuraly-input-warning-helper-text-color,var(--nuraly-warning-helper-text-color))}:host([disabled]) ::slotted([slot=helper-text]){color:var(--nuraly-input-disabled-helper-text-color,var(--nuraly-disabled-helper-text-color))}:host([disabled]) ::slotted([slot=label]){color:var(--nuraly-input-disabled-label-color,var(--nuraly-disabled-label-color))}.input-prefix{display:flex;align-items:center;justify-content:center}::slotted([slot=prefix]){display:flex;align-items:center;padding-right:var(--nuraly-input-prefix-padding-right,var(--nuraly-prefix-padding-right));color:var(--nuraly-input-prefix-color,var(--nuraly-prefix-color));font-size:var(--nuraly-input-prefix-font-size,var(--nuraly-prefix-font-size));flex-shrink:0}.input-suffix{display:flex;align-items:center;justify-content:center}::slotted([slot=suffix]){display:flex;align-items:center;padding-left:var(--nuraly-input-suffix-padding-left,var(--nuraly-suffix-padding-left));color:var(--nuraly-input-suffix-color,var(--nuraly-suffix-color));font-size:var(--nuraly-input-suffix-font-size,var(--nuraly-suffix-font-size));flex-shrink:0}:host([disabled]) ::slotted([slot=prefix]),:host([disabled]) ::slotted([slot=suffix]){opacity:var(--nuraly-input-disabled-icon-opacity,var(--nuraly-disabled-icon-opacity));color:var(--nuraly-input-disabled-prefix-suffix-color,var(--nuraly-disabled-prefix-suffix-color))}`,t`div[data-size=large]{padding-top:var(--nuraly-input-large-padding-top,var(--nuraly-large-padding-top));padding-bottom:var(--nuraly-input-large-padding-bottom,var(--nuraly-large-padding-bottom));padding-left:var(--nuraly-input-large-padding-left,var(--nuraly-large-padding-left));padding-right:var(--nuraly-input-large-padding-right,var(--nuraly-large-padding-right))}div[data-size=medium]{padding-top:var(--nuraly-input-medium-padding-top,var(--nuraly-medium-padding-top));padding-bottom:var(--nuraly-input-medium-padding-bottom,var(--nuraly-medium-padding-bottom));padding-left:var(--nuraly-input-medium-padding-left,var(--nuraly-medium-padding-left));padding-right:var(--nuraly-input-medium-padding-right,var(--nuraly-medium-padding-right))}div[data-size=small]{padding-top:var(--nuraly-input-small-padding-top,var(--nuraly-small-padding-top));padding-bottom:var(--nuraly-input-small-padding-bottom,var(--nuraly-small-padding-bottom));padding-left:var(--nuraly-input-small-padding-left,var(--nuraly-small-padding-left));padding-right:var(--nuraly-input-small-padding-right,var(--nuraly-small-padding-right))}[data-theme^=carbon] div[data-size=medium],body[data-theme^=carbon] nr-input div[data-size=medium],html[data-theme^=carbon] nr-input div[data-size=medium]{padding:4px 8px!important}.character-count{font-size:var(--nuraly-input-character-count-font-size,var(--nuraly-character-count-font-size));color:var(--nuraly-input-character-count-color,var(--nuraly-character-count-color));text-align:right;margin-top:var(--nuraly-input-character-count-margin-top,var(--nuraly-character-count-margin-top));font-family:var(--nuraly-input-font-family,var(--nuraly-font-family))}.character-count[data-over-limit]{color:var(--nuraly-input-character-count-over-limit-color,var(--nuraly-character-count-over-limit-color))}.validation-message{font-size:var(--nuraly-input-validation-message-font-size,var(--nuraly-validation-message-font-size,.875rem));font-family:var(--nuraly-input-font-family,var(--nuraly-font-family));margin-top:var(--nuraly-input-validation-message-margin-top,var(--nuraly-validation-message-margin-top,.25rem));padding:var(--nuraly-input-validation-message-padding,var(--nuraly-validation-message-padding,0));word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;hyphens:auto;white-space:normal;max-width:100%;width:0;min-width:100%;box-sizing:border-box;line-height:var(--nuraly-input-validation-message-line-height,var(--nuraly-validation-message-line-height,1.4))}.validation-message.error{color:var(--nuraly-input-error-message-color,var(--nuraly-error-message-color,var(--nuraly-input-error-color,var(--nuraly-error-color,#dc2626))))}.validation-message.warning{color:var(--nuraly-input-warning-message-color,var(--nuraly-warning-message-color,var(--nuraly-input-warning-color,var(--nuraly-warning-color,#d97706))))}:host([disabled]) .validation-message{opacity:var(--nuraly-input-disabled-validation-message-opacity,var(--nuraly-disabled-validation-message-opacity,.6));color:var(--nuraly-input-disabled-validation-message-color,var(--nuraly-disabled-validation-message-color))}.validation-icon{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center}.validation-icon.validation-loading{color:var(--nuraly-input-primary-color,var(--nuraly-primary-color,#3b82f6));animation:validation-hourglass 2s ease-in-out infinite;transform-origin:center}.validation-icon.validation-error{color:var(--nuraly-input-error-color,var(--nuraly-error-color,#dc2626))}.validation-icon.validation-warning{color:var(--nuraly-input-warning-color,var(--nuraly-warning-color,#d97706))}.validation-icon.validation-success{color:var(--nuraly-input-success-color,var(--nuraly-success-color,#16a34a))}@keyframes validation-hourglass{0%{opacity:.7;transform:scale(1)}25%{opacity:1;transform:scale(1.03)}50%{opacity:.8;transform:scale(1)}75%{opacity:1;transform:scale(1.03)}100%{opacity:.7;transform:scale(1)}}`],p={EMAIL:/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,URL:/^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/,PHONE:/^[\+]?[1-9][\d]{0,15}$/,PASSWORD_STRONG:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/,ALPHANUMERIC:/^[a-zA-Z0-9]+$/,NUMERIC:/^\d+$/,ALPHA:/^[a-zA-Z]+$/,USERNAME:/^[a-zA-Z0-9_-]{3,16}$/,HEX_COLOR:/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,IPV4:/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,CREDIT_CARD:/^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13}|3[0-9]{13}|6(?:011|5[0-9]{2})[0-9]{12})$/},h=t=>({required:!0,message:t||"This field is required"}),m=t=>({type:"email",pattern:p.EMAIL,message:t||"Please enter a valid email address"}),v=t=>({type:"url",pattern:p.URL,message:t||"Please enter a valid URL"}),b=(t,r)=>({maxLength:t,message:r||`Maximum length is ${t} characters`}),y=(t,r)=>({type:"number",min:t,message:r||`Minimum value is ${t}`}),g=(t,r)=>({type:"number",max:t,message:r||`Maximum value is ${t}`});
|
|
2
|
-
/**
|
|
3
|
-
* @license
|
|
4
|
-
* Copyright 2023 Google Laabidi Aymen
|
|
5
|
-
* SPDX-License-Identifier: MIT
|
|
6
|
-
*/
|
|
7
|
-
class f{static validateNumericProperties(t,r,i,e){"number"===t&&(r&&isNaN(Number(r))&&console.warn(`Invalid min value: "${r}" is not a valid number`),i&&isNaN(Number(i))&&console.warn(`Invalid max value: "${i}" is not a valid number`),e&&isNaN(Number(e))&&console.warn(`Invalid step value: "${e}" is not a valid number`),r&&i&&Number(r)>=Number(i)&&console.warn(`Invalid range: min value (${r}) should be less than max value (${i})`))}static preventNonNumericInput(t,r){const i=t.key,e=t.target,a=e.value,n=e.selectionStart||0;if(!(t.ctrlKey||t.metaKey||["Backspace","Delete","Tab","Escape","Enter","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(i)||/^\d$/.test(i))){if("."===i||","===i){if(!(a.includes(".")||a.includes(",")))return}if("-"===i){const t=a.includes("-"),i=!r||Number(r)<0;if(!t&&0===n&&i)return}if("+"===i){if(!a.includes("+")&&0===n)return}t.preventDefault()}}static validateNumericValue(t,r,i){const e=[];if(!t)return{isValid:!0,warnings:e};const a=Number(t);return isNaN(a)?{isValid:!1,warnings:[`Invalid numeric value: "${t}"`]}:(r&&a<Number(r)&&e.push(`Value ${a} is below minimum ${r}`),i&&a>Number(i)&&e.push(`Value ${a} is above maximum ${i}`),{isValid:!0,warnings:e})}}
|
|
8
|
-
/**
|
|
9
|
-
* @license
|
|
10
|
-
* Copyright 2023 Google Laabidi Aymen
|
|
11
|
-
* SPDX-License-Identifier: MIT
|
|
12
|
-
*/class k{static renderPrefix(){return r`<div class="input-prefix"><slot name="prefix"></slot></div>`}static renderSuffix(){return r`<div class="input-suffix"><slot name="suffix"></slot></div>`}static renderAddonBefore(t,e){return t?r`<div class="input-addon-before"><slot name="addon-before" @slotchange="${e}"></slot></div>`:i}static renderAddonAfter(t,e){return t?r`<div class="input-addon-after"><slot name="addon-after" @slotchange="${e}"></slot></div>`:i}static renderCopyIcon(t,e,a,n,o){return t?r`<nr-icon name="copy" type="regular" id="copy-icon" role="button" aria-label="Copy input value" tabindex="0" @click="${e||a?i:n}" @keydown="${o}"></nr-icon>`:i}static renderClearIcon(t,e,a,n,o,s){return!t||!e||a||n?i:r`<nr-icon name="times-circle" type="regular" id="clear-icon" role="button" aria-label="Clear input value" tabindex="0" @click="${o}" @keydown="${s}"></nr-icon>`}static renderStateIcon(t){switch(t){case"warning":return r`<nr-icon name="warning" id="warning-icon"></nr-icon>`;case"error":return r`<nr-icon name="exclamation-circle" id="error-icon"></nr-icon>`;default:return i}}static renderCalendarIcon(t,e){return"default"!==t||"calendar"!==e?i:r`<nr-icon name="calendar" type="regular" id="calendar-icon"></nr-icon>`}static renderPasswordIcon(t,e,a,n,o,s){return"password"!==t?i:"text"===e?r`<nr-icon name="eye-slash" type="regular" id="password-icon" role="button" aria-label="Hide password" tabindex="0" @click="${a||n?i:o}" @keydown="${s}"></nr-icon>`:r`<nr-icon name="eye" type="regular" id="password-icon" role="button" aria-label="Show password" tabindex="0" @click="${a||n?i:o}" @keydown="${s}"></nr-icon>`}static renderNumberIcons(t,e,a,n,o,s,l){return"number"!==t?i:r`<div id="number-icons">${"default"!==e?r`<span id="icons-separator">|</span>`:i}<nr-icon name="minus" aria-label="Decrease value" role="button" tabindex="0" @click="${a||n?i:s}" @keydown="${l}"></nr-icon><span id="icons-separator">|</span><nr-icon name="plus" aria-label="Increase value" role="button" tabindex="0" @click="${a||n?i:o}" @keydown="${l}"></nr-icon></div>`}}
|
|
13
|
-
/**
|
|
14
|
-
* @license
|
|
15
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
16
|
-
* SPDX-License-Identifier: MIT
|
|
17
|
-
*/const x=t=>class extends t{get inputElement(){var t;const r=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("#input, input, textarea");if(r)return r;const i=this.querySelector("input, textarea");if(!i)throw new Error("SelectionMixin requires an input or textarea element");return i}selectAll(){const t=this.inputElement;t&&t.select()}selectRange(t,r){const i=this.inputElement;i&&i.setSelectionRange&&(i.focus(),i.setSelectionRange(t,r))}getCursorPosition(){const t=this.inputElement;return t&&"number"==typeof t.selectionStart?t.selectionStart:null}setCursorPosition(t){const r=this.inputElement;r&&r.setSelectionRange&&(r.focus(),r.setSelectionRange(t,t))}getSelectedText(){const t=this.inputElement;return t&&null!==t.selectionStart&&null!==t.selectionEnd?t.value.substring(t.selectionStart,t.selectionEnd):""}},w=t=>class extends t{get inputElement(){var t;const r=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("#input, input, textarea");if(r)return r;const i=this.querySelector("input, textarea");if(!i)throw new Error("FocusMixin requires an input or textarea element");return i}focus(t={}){const r=this.inputElement;r&&(r.focus({preventScroll:t.preventScroll}),t.selectText&&r.select())}blur(){const t=this.inputElement;t&&t.blur()}isFocused(){const t=this.inputElement;return!!t&&document.activeElement===t}},_=t=>class extends t{get inputElement(){var t;const r=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("#input, input");if(r)return r;const i=this.querySelector("input");if(!i)throw new Error("NumberMixin requires an input element");return i}dispatchInputEvent(t,r){"_dispatchInputEvent"in this&&"function"==typeof this._dispatchInputEvent?this._dispatchInputEvent(t,r):this.dispatchEvent(new CustomEvent(t,{detail:r,bubbles:!0,composed:!0}))}increment(){try{const t=this.inputElement;if(!t.value){const r=t.getAttribute("min");t.value=r||"0"}t.stepUp();const r=t.value;this.dispatchInputEvent("nr-input",{value:r,target:t,action:"increment"}),"value"in this&&(this.value=r)}catch(t){console.warn("Failed to increment value:",t),this.dispatchInputEvent("nr-increment-error",{error:t,value:this.inputElement.value,target:this.inputElement})}}decrement(){try{const t=this.inputElement;t.stepDown();const r=t.value;this.dispatchInputEvent("nr-input",{value:r,target:t,action:"decrement"}),"value"in this&&(this.value=r)}catch(t){console.warn("Failed to decrement value:",t),this.dispatchInputEvent("nr-decrement-error",{error:t,value:this.inputElement.value,target:this.inputElement})}}setStep(t){const r=this.inputElement;t&&this.isValidStep(t)?r.setAttribute("step",t):r.removeAttribute("step")}isValidStep(t){if(!t)return!0;const r=parseFloat(t);return!isNaN(r)&&r>0}};
|
|
18
|
-
/**
|
|
19
|
-
* @license
|
|
20
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
21
|
-
* SPDX-License-Identifier: MIT
|
|
22
|
-
*/
|
|
23
|
-
/**
|
|
24
|
-
* @license
|
|
25
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
26
|
-
* SPDX-License-Identifier: MIT
|
|
27
|
-
*/
|
|
28
|
-
class ${constructor(t){this._host=t,this._host.addController(this)}get host(){return this._host}hostConnected(){}hostDisconnected(){}hostUpdate(){}hostUpdated(){}requestUpdate(){this._host.requestUpdate()}dispatchEvent(t){return this._host.dispatchEvent(t)}handleError(t,r){console.error(`[InputController:${r}]`,t),this.dispatchEvent(new CustomEvent("nr-controller-error",{detail:{error:t,context:r,controller:this.constructor.name},bubbles:!0,composed:!0}))}}
|
|
1
|
+
import{css as e,LitElement as i,html as t,nothing as r}from"lit";import{property as o,state as a,customElement as c}from"lit/decorators.js";import{classMap as l}from"lit/directives/class-map.js";import{NuralyUIBaseMixin as n}from"@nuralyui/common/mixins";import{SharedDropdownController as s}from"@nuralyui/common/controllers";
|
|
29
2
|
/**
|
|
30
3
|
* @license
|
|
31
4
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
32
5
|
* SPDX-License-Identifier: MIT
|
|
33
|
-
*/var
|
|
34
|
-
/**
|
|
35
|
-
* @license
|
|
36
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
37
|
-
* SPDX-License-Identifier: MIT
|
|
38
|
-
*/var S=function(t,r,i,e){return new(i||(i=Promise))((function(a,n){function o(t){try{l(e.next(t))}catch(t){n(t)}}function s(t){try{l(e.throw(t))}catch(t){n(t)}}function l(t){var r;t.done?a(t.value):(r=t.value,r instanceof i?r:new i((function(t){t(r)}))).then(o,s)}l((e=e.apply(t,r||[])).next())}))};class V extends ${constructor(t){super(t),this.stateController=new z(this._host)}get validationHost(){return this._host}get isValid(){return this.stateController.isValid}get validationMessage(){return this.stateController.validationMessage}get validationState(){return this.stateController.validationState}get validationResult(){return this.stateController.validationResult}get isValidating(){return this.stateController.isValidating}hostConnected(){this.setupValidationRules()}hostUpdated(){}setupValidationRules(){const t=[],r=this.validationHost;"email"===r.type&&t.push(m()),"url"===r.type&&t.push(v()),r.required&&t.push(h(r.label?`${r.label} is required`:void 0)),r.maxLength&&t.push(b(r.maxLength)),"number"===r.type&&(void 0!==r.min&&t.push(y(Number(r.min))),void 0!==r.max&&t.push(g(Number(r.max))));const i=r.rules||[],e=[...t.filter((t=>!i.some((r=>this.isSameRuleType(t,r))))),...i];JSON.stringify(r.rules)!==JSON.stringify(e)&&(r.rules=e,this.requestUpdate())}validate(){try{this.stateController.setValidationState(T.Pending),this.stateController.setValidating(!0),this.dispatchValidationEvent();if(this.hasAsyncValidators())return this.performAsyncValidation(this.validationHost.value),!0;const t=this.performDetailedValidation(this.validationHost.value);return this.stateController.setValidationResult(t),t.hasError?this.setValidationResult(!1,this.stateController.validationMessage,T.Invalid):t.hasWarning&&this.validationHost.allowWarnings?this.setValidationResult(!0,this.stateController.validationMessage,T.Warning):this.setValidationResult(!0,"",T.Valid),this.stateController.setValidating(!1),this.updateHostValidationState(),t.isValid}catch(t){return this.handleError(t,"validate"),this.stateController.setValidating(!1),this.setValidationResult(!1,"Validation error occurred",T.Invalid),this.updateHostValidationState(),!1}}validateOnChange(){this.stateController.shouldValidateOnChange()&&this.stateController.debounceValidation((()=>{this.validate()}))}validateOnBlur(){this.stateController.shouldValidateOnBlur()&&(this.stateController.clearDebounceTimer(),this.validate())}addRule(t){const r=this.validationHost.rules||[];this.validationHost.rules=[...r,t],this.requestUpdate()}removeRule(t){const r=this.validationHost.rules||[];this.validationHost.rules=r.filter((r=>!t(r))),this.requestUpdate()}clearRules(){this.validationHost.rules=[],this.reset()}hasAsyncValidators(){return(this.validationHost.rules||[]).some((t=>t.asyncValidator||t.validator&&this.isValidatorAsync(t.validator)))}isValidatorAsync(t){const r=t.toString();return r.includes("Promise")||r.includes("async")||r.includes("setTimeout")||r.includes("new Promise")}performAsyncValidation(t){return S(this,void 0,void 0,(function*(){try{this.stateController.setValidating(!0),this.updateHostValidationState();const r=[],i=[],e=this.validationHost.rules||[];for(const a of e)if(!(a.asyncValidator||a.validator&&this.isValidatorAsync(a.validator))){const e=this.validateRule(a,t);e.isValid||(a.warningOnly&&this.validationHost.allowWarnings?i.push(e.message):r.push(e.message))}if(r.length>0)return this.stateController.setValidationResult({isValid:!1,errors:r,warnings:i,hasError:!0,hasWarning:i.length>0,errorMessage:r[0],warningMessage:i[0]}),this.setValidationResult(!1,this.stateController.validationMessage,T.Invalid),this.stateController.setValidating(!1),void this.updateHostValidationState();for(const a of e)if(a.asyncValidator||a.validator&&this.isValidatorAsync(a.validator))try{yield this.validateAsyncRule(a,t)}catch(t){const e=t.message||a.message||"Validation failed";a.warningOnly&&this.validationHost.allowWarnings?i.push(e):r.push(e)}const a=r.length>0,n=i.length>0;this.stateController.setValidationResult({isValid:!a,errors:r,warnings:i,hasError:a,hasWarning:n,errorMessage:r[0],warningMessage:i[0]}),a?this.setValidationResult(!1,this.stateController.validationMessage,T.Invalid):n&&this.validationHost.allowWarnings?this.setValidationResult(!0,this.stateController.validationMessage,T.Warning):this.setValidationResult(!0,"",T.Valid),this.stateController.setValidating(!1),this.updateHostValidationState()}catch(t){this.handleError(t,"performAsyncValidation"),this.stateController.setValidating(!1),this.setValidationResult(!1,"Async validation error occurred",T.Invalid),this.updateHostValidationState()}}))}validateAsyncRule(t,r){return S(this,void 0,void 0,(function*(){if(t.asyncValidator)yield t.asyncValidator(t,r);else if(t.validator){const i=t.validator(t,r);i&&"object"==typeof i&&"then"in i&&(yield i)}}))}reset(){this.stateController.setValidationResult({isValid:!0,errors:[],warnings:[],hasError:!1,hasWarning:!1}),this.stateController.setValidationState(T.Pristine),this.stateController.setValidating(!1),this.updateHostValidationState(),this.dispatchValidationEvent()}getValidationStatus(){return{isValid:this.stateController.validationResult.isValid,isValidating:this.stateController.isValidating,errors:this.stateController.validationResult.errors,warnings:this.stateController.validationResult.warnings,validationResult:this.stateController.validationResult}}setValidationStatus(t){this.stateController.setValidationResult(t),t.hasError?this.setValidationResult(!1,this.stateController.validationMessage,T.Invalid):t.hasWarning?this.setValidationResult(!0,this.stateController.validationMessage,T.Warning):t.isValid?this.setValidationResult(!0,"",T.Valid):this.setValidationResult(!0,"",T.Pristine),this.updateHostValidationState()}performDetailedValidation(t){const r=[],i=[],e=this.validationHost.rules||[];for(const a of e){const e=this.validateRule(a,t);e.isValid||(a.warningOnly&&this.validationHost.allowWarnings?i.push(e.message):r.push(e.message))}const a=r.length>0;return{isValid:!a,errors:r,warnings:i,hasError:a,hasWarning:i.length>0,errorMessage:r[0],warningMessage:i[0]}}validateRule(t,r){if(t.asyncValidator||t.validator&&this.isValidatorAsync(t.validator))return{isValid:!0,message:""};const i=t.transform?t.transform(r):r;if(t.required&&this.isValueEmpty(r))return{isValid:!1,message:t.message||`${this.validationHost.label||"This field"} is required`};if(this.isValueEmpty(r)&&!t.required)return{isValid:!0,message:""};if(t.type){const r=this.validateType(t.type,i);if(!r.isValid)return{isValid:!1,message:t.message||r.message}}if(t.pattern&&!t.pattern.test(i))return{isValid:!1,message:t.message||"Invalid format"};if(void 0!==t.minLength&&i.length<t.minLength)return{isValid:!1,message:t.message||`Minimum length is ${t.minLength} characters`};if(void 0!==t.maxLength&&i.length>t.maxLength)return{isValid:!1,message:t.message||`Maximum length is ${t.maxLength} characters`};if("number"===t.type||"number"===this.validationHost.type){const r=Number(i);if(void 0!==t.min&&r<t.min)return{isValid:!1,message:t.message||`Minimum value is ${t.min}`};if(void 0!==t.max&&r>t.max)return{isValid:!1,message:t.message||`Maximum value is ${t.max}`}}if(t.enum&&!t.enum.includes(i))return{isValid:!1,message:t.message||`Value must be one of: ${t.enum.join(", ")}`};if(t.validator)try{const r=t.validator(t,i);return r&&"object"==typeof r&&"isValid"in r?{isValid:r.isValid,message:r.isValid?"":r.message||t.message||"Validation failed"}:{isValid:!0,message:""}}catch(r){return{isValid:!1,message:t.message||r.message||"Validation failed"}}return{isValid:!0,message:""}}validateType(t,r){switch(t){case"email":return{isValid:p.EMAIL.test(r),message:"Please enter a valid email address"};case"url":return{isValid:p.URL.test(r),message:"Please enter a valid URL"};case"number":case"integer":return{isValid:!isNaN(Number(r))&&("number"===t||Number.isInteger(Number(r))),message:`Please enter a valid ${t}`};case"float":return{isValid:!isNaN(parseFloat(r)),message:"Please enter a valid number"};default:return{isValid:!0,message:""}}}isValueEmpty(t){return null==t||""===t}isSameRuleType(t,r){return t.type===r.type&&t.required===r.required&&!!t.pattern==!!r.pattern}setValidationResult(t,r,i){const e=this.stateController.isValid!==t||this.stateController.validationMessage!==r||this.stateController.validationState!==i;this.stateController.setValidationState(i),this.stateController.setValidationResult({isValid:t,errors:t?[]:[r],warnings:[],hasError:!t,hasWarning:!1,errorMessage:t?"":r,warningMessage:""}),e&&this.dispatchValidationEvent()}updateHostValidationState(){this.dispatchValidationEvent()}dispatchValidationEvent(){const t={isValid:this.stateController.isValid,validationMessage:this.stateController.validationMessage,validationState:this.stateController.validationState,errors:this.stateController.validationResult.errors,warnings:this.stateController.validationResult.warnings,validationResult:this.stateController.validationResult};this.dispatchEvent(new CustomEvent("nr-validation",{detail:t,bubbles:!0,composed:!0}))}getValidationClasses(){const t=this.host,r=this.host;return{valid:this.stateController.validationResult.isValid&&!this.stateController.validationResult.hasWarning,invalid:this.stateController.validationResult.hasError,warning:this.stateController.validationResult.hasWarning&&!this.stateController.validationResult.hasError,validating:this.stateController.isValidating,"has-feedback":r.hasFeedback||!1,touched:t.isTouched||!1,dirty:t.isDirty||!1,required:this.host.required||!1}}hasValidationFeedback(){const t=this.host;return!!t.hasFeedback&&(this.stateController.isValidating||this.stateController.validationResult.hasError||this.stateController.validationResult.hasWarning||this.stateController.validationResult.isValid&&t.value&&""!==t.value.trim()&&this.stateController.validationState!==T.Pristine)}renderValidationIcon(){const t=this.host;if(!t.hasFeedback)return"";let i="",e="";return this.stateController.isValidating?(i="hourglass-half",e="validation-loading"):this.stateController.validationResult.hasError?(i="exclamation-circle",e="validation-error"):this.stateController.validationResult.hasWarning?(i="exclamation-triangle",e="validation-warning"):this.stateController.validationResult.isValid&&t.value&&""!==t.value.trim()&&this.stateController.validationState!==T.Pristine&&(i="check-circle",e="validation-success"),i?r`<nr-icon name="${i}" class="validation-icon ${e}" part="validation-icon"></nr-icon>`:""}renderValidationMessage(){const t=this.stateController.validationResult.hasError,i=this.stateController.validationResult.hasWarning&&!t,e=t?this.stateController.validationResult.errorMessage:i?this.stateController.validationResult.warningMessage:"";return e?r`<div class="validation-message ${t?"error":"warning"}" part="validation-message" role="alert" aria-live="polite">${e}</div>`:""}clearDebounceTimer(){this.stateController.clearDebounceTimer()}getValidationRenderState(){return{classes:this.getValidationClasses(),hasValidationFeedback:this.hasValidationFeedback(),isValidating:this.stateController.isValidating,validationResult:this.stateController.validationResult,validationState:this.stateController.validationState}}}
|
|
39
|
-
/**
|
|
40
|
-
* @license
|
|
41
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
42
|
-
* SPDX-License-Identifier: MIT
|
|
43
|
-
*/var E=function(t,r,i,e){return new(i||(i=Promise))((function(a,n){function o(t){try{l(e.next(t))}catch(t){n(t)}}function s(t){try{l(e.throw(t))}catch(t){n(t)}}function l(t){var r;t.done?a(t.value):(r=t.value,r instanceof i?r:new i((function(t){t(r)}))).then(o,s)}l((e=e.apply(t,r||[])).next())}))};class C extends ${constructor(){super(...arguments),this.handleKeyDown=t=>{!this.eventHost.readonly||this.isReadonlyKeyAllowed(t)?"Enter"!==t.key?"number"===this.eventHost.type&&this.handleNumericKeyDown(t):this.dispatchEnterEvent(t):t.preventDefault()},this.handleValueChange=t=>{if(this.eventHost.readonly)return void t.preventDefault();const r=t.target,i=r.value;if(this.eventHost.maxLength&&i.length>this.eventHost.maxLength)return void t.preventDefault();"number"===this.eventHost.type&&i&&this.validateNumericValue(i,t),this.eventHost.value=i;const e=this.eventHost;e.validationController&&"function"==typeof e.validationController.validateOnChange&&e.validationController.validateOnChange(),this.eventHost.dispatchInputEvent("nr-input",{value:this.eventHost.value,target:r,originalEvent:t})},this.handleFocus=t=>{var r;this.setFocusState(!0);const i=t.target;this.restoreCursorPosition(i);const e={focused:!0,cursorPosition:null!==(r=this.getCursorPosition())&&void 0!==r?r:void 0,selectedText:this.getSelectedText()};this.eventHost.dispatchFocusEvent("nr-focus",Object.assign({target:t.target,value:this.eventHost.value},e)),this.eventHost.dispatchFocusEvent("nr-focus-change",e)},this.handleBlur=t=>{var r;this.setFocusState(!1);const i={focused:!1,cursorPosition:null!==(r=this.getCursorPosition())&&void 0!==r?r:void 0,selectedText:this.getSelectedText()},e=this.eventHost;e.validationController&&"function"==typeof e.validationController.validateOnBlur&&e.validationController.validateOnBlur(),this.eventHost.dispatchFocusEvent("nr-blur",Object.assign({target:t.target,value:this.eventHost.value},i)),this.eventHost.dispatchFocusEvent("nr-focus-change",i)},this.handleIconKeydown=t=>{if(!this.isActivationKey(t))return;t.preventDefault();const r=t.target;switch(r.id){case"copy-icon":this.handleCopy();break;case"clear-icon":this.handleClear();break;case"password-icon":this.handleTogglePassword();break;default:r.closest("#number-icons")&&this.handleNumberIconAction(r)}},this.handleCopy=()=>E(this,void 0,void 0,(function*(){if(this.eventHost.withCopy&&!this.eventHost.disabled)try{const t=this.inputElement;if(!t)return;t.select(),yield navigator.clipboard.writeText(t.value),this.eventHost.dispatchActionEvent("nr-copy-success",{value:t.value,action:"copy"})}catch(t){this.handleError(t,"copy"),this.eventHost.dispatchActionEvent("nr-copy-error",{error:t,action:"copy"})}})),this.handleClear=()=>{if(this.eventHost.disabled||this.eventHost.readonly||!this.eventHost.allowClear)return;const t=this.eventHost.value;this.eventHost.value="";const r=this.inputElement;r&&(r.value="",r.focus()),this.eventHost.dispatchActionEvent("nr-clear",{previousValue:t,newValue:this.eventHost.value,target:r,action:"clear"}),this.eventHost.dispatchInputEvent("nr-input",{value:this.eventHost.value,target:r,action:"clear"})},this.handleTogglePassword=()=>{if("password"!==this.eventHost.type)return;const t="password"===this.eventHost.inputType?"text":"password";this.eventHost.inputType=t,this.requestUpdate(),this.eventHost.dispatchActionEvent("nr-password-toggle",{visible:"text"===t,action:"password-toggle"})},this.handleIncrement=()=>{"number"===this.eventHost.type&&this.eventHost.increment&&this.eventHost.increment()},this.handleDecrement=()=>{"number"===this.eventHost.type&&this.eventHost.decrement&&this.eventHost.decrement()}}get eventHost(){return this.host}get inputElement(){var t;return(null===(t=this.eventHost.shadowRoot)||void 0===t?void 0:t.querySelector("#input"))||null}handleNumericKeyDown(t){["Backspace","Delete","Tab","Escape","Enter","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)||t.ctrlKey||t.metaKey||"."!==t.key&&"-"!==t.key&&(/^\d$/.test(t.key)||t.preventDefault())}handleNumberIconAction(t){const r=t.classList.contains("increment")||t.closest(".increment"),i=t.classList.contains("decrement")||t.closest(".decrement");r?this.handleIncrement():i&&this.handleDecrement()}dispatchEnterEvent(t){this.eventHost.dispatchInputEvent("nr-enter",{value:this.eventHost.value,target:t.target,originalEvent:t})}validateNumericValue(t,r){}restoreCursorPosition(t){if(t.dataset.restoreCursor){const r=parseInt(t.dataset.restoreCursor,10);isNaN(r)||t.setSelectionRange(r,r),delete t.dataset.restoreCursor}}setFocusState(t){this.eventHost.hasOwnProperty("focused")&&(this.eventHost.focused=t,this.requestUpdate())}getCursorPosition(){if(this.eventHost.getCursorPosition)return this.eventHost.getCursorPosition();const t=this.inputElement;return t?t.selectionStart:null}getSelectedText(){if(this.eventHost.getSelectedText)return this.eventHost.getSelectedText();const t=this.inputElement;return t&&null!==t.selectionStart&&null!==t.selectionEnd?t.value.substring(t.selectionStart,t.selectionEnd):""}isReadonlyKeyAllowed(t){if(this.eventHost.isReadonlyKeyAllowed)return this.eventHost.isReadonlyKeyAllowed(t);return t.ctrlKey||t.metaKey?["KeyA","KeyC"].includes(t.code):["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(t.key)}isActivationKey(t){return this.eventHost.isActivationKey?this.eventHost.isActivationKey(t):"Enter"===t.key||" "===t.key}}
|
|
44
|
-
/**
|
|
45
|
-
* @license
|
|
46
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
47
|
-
* SPDX-License-Identifier: MIT
|
|
48
|
-
*/var A=function(t,r,i,e){for(var a,n=arguments.length,o=n<3?r:null===e?e=Object.getOwnPropertyDescriptor(r,i):e,s=t.length-1;s>=0;s--)(a=t[s])&&(o=(n<3?a(o):n>3?a(r,i,o):a(r,i))||o);return n>3&&o&&Object.defineProperty(r,i,o),o},M=function(t,r,i,e){return new(i||(i=Promise))((function(a,n){function o(t){try{l(e.next(t))}catch(t){n(t)}}function s(t){try{l(e.throw(t))}catch(t){n(t)}}function l(t){var r;t.done?a(t.value):(r=t.value,r instanceof i?r:new i((function(t){t(r)}))).then(o,s)}l((e=e.apply(t,r||[])).next())}))};let N=class extends(_(w(x(l(e))))){constructor(){super(...arguments),this.validationController=new V(this),this.eventController=new C(this),this.disabled=!1,this.readonly=!1,this.state="default",this.value="",this.size="medium",this.variant="underlined",this.type="text",this.placeholder="",this.autocomplete="off",this.withCopy=!1,this.allowClear=!1,this.showCount=!1,this.rules=[],this.validateOnChangeInput=!0,this.validateOnBlurInput=!0,this.hasFeedback=!1,this.allowWarnings=!1,this.validationTrigger="change",this.inputType="",this.hasAddonBefore=!1,this.hasAddonAfter=!1,this.focused=!1,this.requiredComponents=["nr-icon"],this._handleValidationEvent=t=>{const r=t.detail;this.validationMessage=r.validationMessage||"";let i="default";r.validationResult.hasError?i="error":r.validationResult.hasWarning&&this.allowWarnings?i="warning":r.validationResult.isValid&&this.value&&this.hasFeedback&&(i="success"),this.state!==i&&(this.state=i),this.requestUpdate()},this._handleKeyDown=t=>{this.eventController.handleKeyDown(t)},this._valueChange=t=>{this.eventController.handleValueChange(t)},this._focusEvent=t=>{this.eventController.handleFocus(t)},this._blurEvent=t=>{this.eventController.handleBlur(t)},this._handleIconKeydown=t=>{this.eventController.handleIconKeydown(t)}}get _input(){return this.shadowRoot.querySelector("#input")}get characterCountDisplay(){const t=this.value.length;return this.maxLength?`${t}/${this.maxLength}`:`${t}`}get isOverCharacterLimit(){return!!this.maxLength&&this.value.length>this.maxLength}get input(){return this._input}get inputElement(){return this._input}connectedCallback(){super.connectedCallback(),this.addEventListener("nr-validation",this._handleValidationEvent)}disconnectedCallback(){var t,r;super.disconnectedCallback(),this.removeEventListener("nr-validation",this._handleValidationEvent),null===(r=(t=this.validationController).clearDebounceTimer)||void 0===r||r.call(t)}willUpdate(t){super.willUpdate(t),!t.has("type")&&this.inputType||(this.inputType=this.type),(t.has("type")||t.has("min"))&&"number"===this.type&&this.min&&!this.value&&(this.value=this.min),(t.has("type")||t.has("min")||t.has("max")||t.has("step"))&&f.validateNumericProperties(this.type,this.min,this.max,this.step),(t.has("type")||t.has("required")||t.has("maxLength")||t.has("min")||t.has("max"))&&this.validationController.setupValidationRules()}updated(t){if(t.has("step")||t.has("min")||t.has("max")||t.has("maxLength")){const t=this.input;t&&(this.setStep(this.step),this.min?t.setAttribute("min",this.min):t.removeAttribute("min"),this.max?t.setAttribute("max",this.max):t.removeAttribute("max"),this.maxLength?t.setAttribute("maxlength",this.maxLength.toString()):t.removeAttribute("maxlength"))}}firstUpdated(){this._checkInitialSlotContent()}_checkInitialSlotContent(){const t=this.querySelectorAll('[slot="addon-before"]');this.hasAddonBefore=t.length>0;const r=this.querySelectorAll('[slot="addon-after"]');this.hasAddonAfter=r.length>0}_handleSlotChange(t){const r=t.target,i=r.name;"addon-before"===i?this.hasAddonBefore=r.assignedElements().length>0:"addon-after"===i&&(this.hasAddonAfter=r.assignedElements().length>0)}_onCopy(){return M(this,void 0,void 0,(function*(){yield this.eventController.handleCopy()}))}_onClear(){this.eventController.handleClear()}_increment(){this.eventController.handleIncrement()}_decrement(){this.eventController.handleDecrement()}_togglePasswordIcon(){this.eventController.handleTogglePassword()}_getAriaDescribedBy(){var t;const r=[],i=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector('slot[name="helper-text"]');return i&&i.assignedNodes().length>0&&r.push("helper-text"),r.join(" ")||""}validateValue(t){return this.validationController.validate()}addRule(t){this.validationController.addRule(t)}removeRule(t){this.validationController.removeRule(t)}clearRules(){this.validationController.clearRules()}getValidationStatus(){return this.validationController.getValidationStatus()}validateInput(){return M(this,void 0,void 0,(function*(){const t=this.validationController.validate();return this.validationController.isValidating?new Promise((t=>{const r=()=>{this.validationController.isValidating?setTimeout(r,50):t(this.validationController.isValid)};r()})):t}))}setValidationStatus(t){this.validationController.setValidationStatus(t)}getValidationClasses(){return this.validationController.getValidationClasses()}renderValidationIcon(){return this.validationController.renderValidationIcon()}renderValidationMessage(){return this.validationController.renderValidationMessage()}render(){const t=this.getValidationClasses(),i=this.validationController.getValidationRenderState();return r`<slot name="label"></slot><div class="input-wrapper ${Object.entries(t).filter((([,t])=>t)).map((([t])=>t)).join(" ")}" part="input-wrapper" data-theme="${this.currentTheme}" ?data-validating="${i.isValidating}">${k.renderAddonBefore(this.hasAddonBefore,(t=>this._handleSlotChange(t)))}<div data-size="${this.size}" id="input-container" part="input-container">${k.renderPrefix()} <input id="input" part="input" .disabled="${this.disabled}" .readOnly="${this.readonly}" .value="${this.value}" .placeholder="${this.placeholder}" .type="${this.inputType}" .autocomplete="${this.autocomplete}" aria-invalid="${i.validationResult.hasError?"true":"false"}" aria-describedby="${this._getAriaDescribedBy()}" @input="${this._valueChange}" @focus="${this._focusEvent}" @blur="${this._blurEvent}" @keydown="${this._handleKeyDown}"> ${k.renderSuffix()} ${k.renderCopyIcon(this.withCopy,this.disabled,this.readonly,(()=>this._onCopy()),(t=>this._handleIconKeydown(t)))} ${k.renderClearIcon(this.allowClear,this.value,this.disabled,this.readonly,(()=>this._onClear()),(t=>this._handleIconKeydown(t)))} ${i.hasValidationFeedback?this.renderValidationIcon():k.renderStateIcon(this.state)} ${k.renderCalendarIcon(this.state,this.type)} ${k.renderPasswordIcon(this.type,this.inputType,this.disabled,this.readonly,(()=>this._togglePasswordIcon()),(t=>this._handleIconKeydown(t)))} ${k.renderNumberIcons(this.type,this.state,this.disabled,this.readonly,(()=>this._increment()),(()=>this._decrement()),(t=>this._handleIconKeydown(t)))}</div>${k.renderAddonAfter(this.hasAddonAfter,(t=>this._handleSlotChange(t)))}</div><slot name="helper-text"></slot>${this.renderValidationMessage()} ${this.showCount?r`<div class="character-count" part="character-count" ?data-over-limit="${this.isOverCharacterLimit}">${this.characterCountDisplay}</div>`:""}`}};N.styles=d,A([a({type:Boolean,reflect:!0})],N.prototype,"disabled",void 0),A([a({type:Boolean,reflect:!0})],N.prototype,"readonly",void 0),A([a({type:String,reflect:!0})],N.prototype,"state",void 0),A([a({type:String})],N.prototype,"value",void 0),A([a({type:String})],N.prototype,"size",void 0),A([a({type:String,reflect:!0})],N.prototype,"variant",void 0),A([a({reflect:!0})],N.prototype,"type",void 0),A([a({type:String})],N.prototype,"step",void 0),A([a({type:String})],N.prototype,"min",void 0),A([a({type:String})],N.prototype,"max",void 0),A([a({type:String})],N.prototype,"placeholder",void 0),A([a({type:String})],N.prototype,"autocomplete",void 0),A([a({type:String})],N.prototype,"name",void 0),A([a({type:Boolean})],N.prototype,"required",void 0),A([a({type:Boolean,reflect:!0})],N.prototype,"withCopy",void 0),A([a({type:Boolean,reflect:!0})],N.prototype,"allowClear",void 0),A([a({type:Boolean,reflect:!0})],N.prototype,"showCount",void 0),A([a({type:Number})],N.prototype,"maxLength",void 0),A([a({type:Array})],N.prototype,"rules",void 0),A([a({type:Boolean,attribute:"validate-on-change"})],N.prototype,"validateOnChangeInput",void 0),A([a({type:Boolean,attribute:"validate-on-blur"})],N.prototype,"validateOnBlurInput",void 0),A([a({type:Boolean,attribute:"has-feedback"})],N.prototype,"hasFeedback",void 0),A([a({type:Boolean,attribute:"allow-warnings"})],N.prototype,"allowWarnings",void 0),A([a({type:String,attribute:"validation-trigger"})],N.prototype,"validationTrigger",void 0),A([a({type:Number,attribute:"validation-debounce"})],N.prototype,"validationDebounce",void 0),A([a({type:String})],N.prototype,"label",void 0),A([n()],N.prototype,"validationMessage",void 0),A([n()],N.prototype,"inputType",void 0),A([n()],N.prototype,"hasAddonBefore",void 0),A([n()],N.prototype,"hasAddonAfter",void 0),A([n()],N.prototype,"focused",void 0),N=A([o("nr-input")],N);const O="",I=t`:host{display:inline-block;vertical-align:middle;color:var(--nuraly-color-text);background-color:var(--nuraly-color-background);border-color:var(--nuraly-color-border)}button{display:inline-flex;align-items:center;justify-content:center;position:relative;font-family:var(--nuraly-font-family);font-size:.875rem;font-weight:var(--nuraly-font-weight-regular);line-height:1.125rem;letter-spacing:.16px;min-width:5rem;height:3rem;padding:var(--nuraly-spacing-2) var(--nuraly-spacing-4);border:1px solid transparent;border-radius:var(--nuraly-border-radius-button,var(--nuraly-border-radius-medium,0));background-color:var(--nuraly-color-background);color:var(--nuraly-color-text);text-decoration:none;cursor:pointer;transition:all var(--nuraly-transition-fast,.15s) ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:none;text-shadow:none;width:var(--nuraly-button-icon-size,1rem);height:var(--nuraly-button-icon-size,1rem);display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:1;color:inherit;font-size:var(--nuraly-button-icon-size,1rem)!important;transition:all var(--nuraly-transition-fast,.15s) ease;cursor:inherit;pointer-events:none}&:focus:not(:disabled) nr-icon{opacity:1;filter:brightness(1.1)}&:active:not(:disabled) nr-icon{opacity:.9;transform:scale(.95)}&:hover:not(:disabled) nr-icon{opacity:1}[part=container]{display:flex;align-items:center;justify-content:center;gap:inherit}:host([type=secondary]) button{background-color:var(--nuraly-color-button-secondary);border-color:var(--nuraly-color-button-secondary);color:var(--nuraly-color-button-secondary-text,var(--nuraly-color-text-on-color))}:host([type=default]) button{background-color:var(--nuraly-color-background,#fff);border-color:var(--nuraly-color-border,#d0d0d0);color:var(--nuraly-color-text,#161616)}:host([type=ghost]) button,:host([type=tertiary]){background-color:var(--nuraly-color-button-outline,transparent);border-color:var(--nuraly-color-button-outline-border,var(--nuraly-color-border));color:var(--nuraly-color-button-outline-text,var(--nuraly-color-button-tertiary,var(--nuraly-color-button-primary)))}:host([type=danger]) button{background-color:var(--nuraly-color-button-danger);border-color:var(--nuraly-color-button-danger);color:var(--nuraly-color-button-danger-text,var(--nuraly-color-text-on-color))}:host(:not([size])) button{height:var(--nuraly-size-md);padding:var(--nuraly-spacing-2) var(--nuraly-spacing-4)}:host([size=small]) button{height:var(--nuraly-size-sm);padding:var(--nuraly-spacing-01) var(--nuraly-spacing-03);font-size:.75rem;min-width:4rem}:host([size=medium]) button{height:var(--nuraly-size-md);padding:var(--nuraly-spacing-2) var(--nuraly-spacing-4)}:host([size=large]) button{height:var(--nuraly-size-lg);padding:var(--nuraly-spacing-05) var(--nuraly-spacing-06);font-size:1rem;min-width:6rem}:host([full-width]){width:100%}:host([full-width]) button{width:100%}:host([loading]) button{cursor:not-allowed;opacity:.7}:host([shape=round]) button{border-radius:50%;min-width:auto;width:var(--nuraly-size-md);aspect-ratio:1;padding:0}:host([shape=round][size=small]) button{width:var(--nuraly-size-sm)}:host([shape=round][size=medium]) button{width:var(--nuraly-size-md)}:host([shape=round][size=large]) button{width:var(--nuraly-size-lg)}.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.6);transform:scale(0);animation:ripple-animation .6s linear;pointer-events:none;z-index:1}@keyframes ripple-animation{0%{transform:scale(0);opacity:1}70%{transform:scale(3);opacity:.5}100%{transform:scale(4);opacity:0}}:host([type=primary]) .ripple{background:rgba(255,255,255,.4)}:host([type=secondary]) .ripple{background:rgba(255,255,255,.3)}:host([type=default]) .ripple{background:var(--nuraly-color-text,#161616);opacity:.1}:host([type=ghost]) .ripple,:host([type=tertiary]) .ripple{background:var(--nuraly-color-button-tertiary,#0f62fe);opacity:.2}:host([type=danger]) .ripple{background:rgba(255,255,255,.4)}[data-theme=carbon-dark] :host([type=default]) .ripple{background:var(--nuraly-color-text,#f4f4f4);opacity:.1}[data-theme=carbon-dark] :host([type=ghost]) .ripple,[data-theme=carbon-dark] :host([type=tertiary]) .ripple{background:var(--nuraly-color-button-tertiary,#78a9ff);opacity:.2}[data-theme=carbon-dark] :host([type=primary]) .ripple{background:rgba(22,22,22,.4)}[data-theme=carbon-dark] :host([type=secondary]) .ripple{background:rgba(22,22,22,.3)}[data-theme=carbon-dark] :host([type=danger]) .ripple{background:rgba(22,22,22,.4)}:host([data-theme*=carbon]) button,[data-theme*=carbon] :host button{align-items:center;height:var(--nuraly-button-icon-size,1rem);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle;line-height:1}[data-theme=carbon-dark] nr-button button,[data-theme=carbon] nr-button button{align-items:center;height:var(--nuraly-button-icon-size,1rem);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle;line-height:1;margin-top:-1px}nr-icon svg{display:block;margin:0 auto}slot#slot{display:inline-block;line-height:inherit}`;
|
|
49
|
-
/**
|
|
50
|
-
* @license
|
|
51
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
52
|
-
* SPDX-License-Identifier: MIT
|
|
53
|
-
*/
|
|
54
|
-
class R{constructor(t){this._host=t,this._host.addController(this)}get host(){return this._host}hostConnected(){}hostDisconnected(){}hostUpdate(){}hostUpdated(){}handleError(t,r){console.error(`[ButtonController:${this.constructor.name}] Error in ${r}:`,t),this._host.dispatchEvent(new CustomEvent("nr-button-error",{detail:{error:t.message,context:r,controller:this.constructor.name},bubbles:!0,composed:!0}))}requestUpdate(){try{this._host.requestUpdate()}catch(t){this.handleError(t,"requestUpdate")}}dispatchEvent(t){try{return this._host.dispatchEvent(t)}catch(t){return this.handleError(t,"dispatchEvent"),!1}}}
|
|
55
|
-
/**
|
|
56
|
-
* @license
|
|
57
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
58
|
-
* SPDX-License-Identifier: MIT
|
|
59
|
-
*/class H extends R{createRipple(t){try{if(!this.host.ripple||this.host.disabled)return;const r=t.currentTarget,i=r.getBoundingClientRect(),e=2*Math.max(i.width,i.height),a=t.clientX-i.left-e/2,n=t.clientY-i.top-e/2,o=document.createElement("span");o.className="ripple",o.style.width=o.style.height=e+"px",o.style.left=a+"px",o.style.top=n+"px";r.querySelectorAll(".ripple").forEach((t=>t.remove())),r.appendChild(o),setTimeout((()=>{o.remove()}),600)}catch(t){this.handleError(t,"createRipple")}}handleRippleClick(t){try{this.createRipple(t),this.dispatchEvent(new CustomEvent("button-click",{detail:{disabled:this.host.disabled,timestamp:Date.now(),coordinates:{x:t.clientX,y:t.clientY}},bubbles:!0,composed:!0}))}catch(t){this.handleError(t,"handleRippleClick")}}}
|
|
60
|
-
/**
|
|
61
|
-
* @license
|
|
62
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
63
|
-
* SPDX-License-Identifier: MIT
|
|
64
|
-
*/class P extends R{handleKeyboardActivation(t){try{if(this.host.disabled)return;this.isActivationKey(t)&&(t.preventDefault(),this.host.click(),this.dispatchEvent(new CustomEvent("keyboard-activation",{detail:{key:t.key,timestamp:Date.now(),target:this.host},bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"handleKeyboardActivation")}}handleKeydown(t){try{if(this.host.disabled){if(!this.isReadonlyKeyAllowed(t))return void t.preventDefault()}this.handleKeyboardActivation(t)}catch(t){this.handleError(t,"handleKeydown")}}isActivationKey(t){return"Enter"===t.key||" "===t.key}isReadonlyKeyAllowed(t){return["Tab","Shift","Escape","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Home","End"].includes(t.key)}}
|
|
65
|
-
/**
|
|
66
|
-
* @license
|
|
67
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
68
|
-
* SPDX-License-Identifier: MIT
|
|
69
|
-
*/class D extends R{isLinkType(){return"link"===this.host.type&&!!this.host.href}getElementTag(){return this.isLinkType()?"a":"button"}getLinkAttributes(){try{const t={};return this.isLinkType()?(t.href=this.host.href,this.host.target&&(t.target=this.host.target,"_blank"===this.host.target&&(t.rel="noopener noreferrer")),t.role="link"):t.role="button",t}catch(t){return this.handleError(t,"getLinkAttributes"),{role:"button"}}}handleLinkNavigation(t){try{this.isLinkType()&&this.dispatchEvent(new CustomEvent("link-navigation",{detail:{href:this.host.href,target:this.host.target,timestamp:Date.now(),originalEvent:t},bubbles:!0,composed:!0}))}catch(t){this.handleError(t,"handleLinkNavigation")}}}
|
|
70
|
-
/**
|
|
71
|
-
* @license
|
|
72
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
73
|
-
* SPDX-License-Identifier: MIT
|
|
74
|
-
*/var U=function(t,r,i,e){for(var a,n=arguments.length,o=n<3?r:null===e?e=Object.getOwnPropertyDescriptor(r,i):e,s=t.length-1;s>=0;s--)(a=t[s])&&(o=(n<3?a(o):n>3?a(r,i,o):a(r,i))||o);return n>3&&o&&Object.defineProperty(r,i,o),o};let j=class extends(l(e)){constructor(){super(...arguments),this.disabled=!1,this.loading=!1,this.size=O,this.type="default",this.shape="default",this.block=!1,this.dashed=!1,this.icon=[],this.iconPosition="left",this.href=O,this.target=O,this.ripple=!0,this.buttonAriaLabel=O,this.ariaDescribedBy=O,this.htmlType=O,this.requiredComponents=["nr-icon"],this.rippleController=new H(this),this.keyboardController=new P(this),this.linkController=new D(this)}connectedCallback(){super.connectedCallback(),this.validateDependencies()}getCommonAttributes(){return{"data-type":this.type,"data-shape":this.shape,"data-size":this.size||i,"data-state":this.loading?"loading":i,"data-theme":this.currentTheme,"data-block":this.block?"true":i,class:this.dashed?"button-dashed":"","aria-disabled":this.disabled?"true":"false","aria-label":this.buttonAriaLabel||i,"aria-describedby":this.ariaDescribedBy||i,tabindex:this.disabled?"-1":"0"}}renderIcon(t){if(!this.isComponentAvailable("nr-icon")){const r="string"==typeof t?t:t.name;return console.warn(`[nr-button] Icon component 'nr-icon' not available. Icon "${r}" will not render. Ensure the icon component is imported and registered.`),i}const e=()=>{switch(this.size){case"small":return"small";case"medium":default:return"medium";case"large":return"large"}};if("string"==typeof t){const i=e();return r`<nr-icon name="${t}" size="${c(i)}"></nr-icon>`}const{name:a,type:n="solid",size:o,color:s,alt:l}=t,u=o||e();return r`<nr-icon name="${a}" type="${n}" alt="${l||""}" size="${c(u)}" color="${s||""}"></nr-icon>`}handleClick(t){this.disabled?t.preventDefault():(this.rippleController.handleRippleClick(t),this.linkController.isLinkType()&&this.linkController.handleLinkNavigation(t),this.dispatchEventWithMetadata("button-clicked",{type:this.type,disabled:this.disabled,loading:this.loading,href:this.href||null}))}handleKeydown(t){this.keyboardController.handleKeydown(t)}getResolvedLeftIcon(){var t,r;return this.iconLeft?this.iconLeft:(null===(t=this.icons)||void 0===t?void 0:t.left)?this.icons.left:(null===(r=this.icon)||void 0===r?void 0:r.length)>0?this.icon[0]:void 0}getResolvedRightIcon(){var t,r;return this.iconRight?this.iconRight:(null===(t=this.icons)||void 0===t?void 0:t.right)?this.icons.right:2===(null===(r=this.icon)||void 0===r?void 0:r.length)?this.icon[1]:void 0}render(){const t=this.linkController.getElementTag(),e=this.getCommonAttributes(),a=this.linkController.getLinkAttributes(),n=this.getResolvedLeftIcon(),o=this.getResolvedRightIcon(),s=r`<span id="container" part="container">${n?this.renderIcon(n):i}<slot id="slot"></slot>${o?this.renderIcon(o):i}</span>`;return"a"===t?r`<a href="${a.href}" target="${a.target||i}" rel="${a.rel||i}" role="${a.role}" data-type="${e["data-type"]}" data-shape="${e["data-shape"]}" data-size="${e["data-size"]}" data-state="${e["data-state"]}" data-theme="${e["data-theme"]}" data-block="${e["data-block"]}" class="${e.class}" aria-disabled="${this.disabled}" aria-label="${this.buttonAriaLabel||i}" aria-describedby="${this.ariaDescribedBy||i}" tabindex="${this.disabled?-1:0}" @click="${this.handleClick}" @keydown="${this.handleKeydown}">${s}</a>`:r`<button ?disabled="${this.disabled}" type="${this.htmlType||"button"}" role="${a.role}" data-type="${e["data-type"]}" data-shape="${e["data-shape"]}" data-size="${e["data-size"]}" data-state="${e["data-state"]}" data-theme="${e["data-theme"]}" data-block="${e["data-block"]}" class="${e.class}" aria-disabled="${this.disabled}" aria-label="${this.buttonAriaLabel||i}" aria-describedby="${this.ariaDescribedBy||i}" tabindex="${this.disabled?-1:0}" @click="${this.handleClick}" @keydown="${this.handleKeydown}">${s}</button>`}};
|
|
75
|
-
/**
|
|
76
|
-
* @license
|
|
77
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
78
|
-
* SPDX-License-Identifier: MIT
|
|
79
|
-
*/
|
|
80
|
-
var B,L,F,q,K,W,Z,Y;j.styles=I,U([a({type:Boolean})],j.prototype,"disabled",void 0),U([a({type:Boolean})],j.prototype,"loading",void 0),U([a({type:String})],j.prototype,"size",void 0),U([a({type:String})],j.prototype,"type",void 0),U([a({type:String})],j.prototype,"shape",void 0),U([a({type:Boolean})],j.prototype,"block",void 0),U([a({type:Boolean})],j.prototype,"dashed",void 0),U([a({type:Array})],j.prototype,"icon",void 0),U([a({type:Object})],j.prototype,"iconLeft",void 0),U([a({type:Object})],j.prototype,"iconRight",void 0),U([a({type:Object})],j.prototype,"icons",void 0),U([a({reflect:!0})],j.prototype,"iconPosition",void 0),U([a({type:String})],j.prototype,"href",void 0),U([a({type:String})],j.prototype,"target",void 0),U([a({type:Boolean})],j.prototype,"ripple",void 0),U([a({type:String})],j.prototype,"buttonAriaLabel",void 0),U([a({type:String})],j.prototype,"ariaDescribedBy",void 0),U([a({type:String})],j.prototype,"htmlType",void 0),j=U([o("nr-button")],j),function(t){t.TwentyFourHour="24h",t.TwelveHour="12h"}(B||(B={})),function(t){t.Hours="hours",t.Minutes="minutes",t.Seconds="seconds"}(L||(L={})),function(t){t.Small="small",t.Medium="medium",t.Large="large"}(F||(F={})),function(t){t.Default="default",t.Outlined="outlined",t.Filled="filled"}(q||(q={})),function(t){t.Default="default",t.Error="error",t.Warning="warning",t.Success="success"}(K||(K={})),function(t){t.Bottom="bottom",t.Top="top",t.Auto="auto"}(W||(W={})),function(t){t[t.One=1]="One",t[t.Five=5]="Five",t[t.Ten=10]="Ten",t[t.Fifteen=15]="Fifteen",t[t.Thirty=30]="Thirty"}(Z||(Z={})),function(t){t.AM="AM",t.PM="PM"}(Y||(Y={}));const X={[B.TwentyFourHour]:"HH:mm",[B.TwelveHour]:"hh:mm A"},G={[B.TwentyFourHour]:"HH:mm:ss",[B.TwelveHour]:"hh:mm:ss A"},J={HOURS_24:24,HOURS_12:12,MINUTES:60,SECONDS:60,DEFAULT_STEP:1,DEFAULT_MINUTE_INTERVAL:1,DEFAULT_SECOND_INTERVAL:1},Q={TIME_CHANGE:"nr-time-change",FOCUS:"nr-focus",BLUR:"nr-blur",CLOCK_OPEN:"nr-clock-open",CLOCK_CLOSE:"nr-clock-close",VALIDATION:"nr-validation"},tt={hours:0,minutes:0,seconds:0,period:Y.AM},rt={format:B.TwentyFourHour,showSeconds:!1,minuteInterval:1,secondInterval:1,use12HourClock:!1},it="HH:mm",et="HH:mm:ss",at="hh:mm A",nt="hh:mm:ss A",ot="time-input-field",st="time-picker-clock-container",lt={TWENTY_FOUR_HOUR:/^([01]?[0-9]|2[0-3]):([0-5]?[0-9])(:([0-5]?[0-9]))?$/,TWELVE_HOUR:/^(0?[1-9]|1[0-2]):([0-5]?[0-9])(:([0-5]?[0-9]))?\s?(AM|PM|am|pm)$/},ct={MIN_HOUR_24:0,MAX_HOUR_24:23,MIN_HOUR_12:1,MAX_HOUR_12:12,MIN_MINUTE:0,MAX_MINUTE:59,MIN_SECOND:0,MAX_SECOND:59},ut={HOURS:Z.One,MINUTES:Z.One,SECONDS:Z.One},dt={CONTAINER:"time-picker",INPUT:"time-picker__input",CLOCK:"time-picker__clock",DROPDOWN:"time-picker__dropdown",HOUR:"time-picker__hour",MINUTE:"time-picker__minute",SECOND:"time-picker__second",PERIOD:"time-picker__period",BUTTON:"time-picker__button",SEPARATOR:"time-picker__separator"},pt={RADIUS:100,CENTER:50,HOUR_HAND_LENGTH:30,MINUTE_HAND_LENGTH:40,SECOND_HAND_LENGTH:45};
|
|
6
|
+
*/var p,m,u,d,h,k,b,v;!function(e){e.TwentyFourHour="24h",e.TwelveHour="12h"}(p||(p={})),function(e){e.Hours="hours",e.Minutes="minutes",e.Seconds="seconds"}(m||(m={})),function(e){e.Small="small",e.Medium="medium",e.Large="large"}(u||(u={})),function(e){e.Default="default",e.Outlined="outlined",e.Filled="filled"}(d||(d={})),function(e){e.Default="default",e.Error="error",e.Warning="warning",e.Success="success"}(h||(h={})),function(e){e.Bottom="bottom",e.Top="top",e.Auto="auto"}(k||(k={})),function(e){e[e.One=1]="One",e[e.Five=5]="Five",e[e.Ten=10]="Ten",e[e.Fifteen=15]="Fifteen",e[e.Thirty=30]="Thirty"}(b||(b={})),function(e){e.AM="AM",e.PM="PM"}(v||(v={}));const y={[p.TwentyFourHour]:"HH:mm",[p.TwelveHour]:"hh:mm A"},f={[p.TwentyFourHour]:"HH:mm:ss",[p.TwelveHour]:"hh:mm:ss A"},g={HOURS_24:24,HOURS_12:12,MINUTES:60,SECONDS:60,DEFAULT_STEP:1,DEFAULT_MINUTE_INTERVAL:1,DEFAULT_SECOND_INTERVAL:1},_={TIME_CHANGE:"nr-time-change",FOCUS:"nr-focus",BLUR:"nr-blur",CLOCK_OPEN:"nr-clock-open",CLOCK_CLOSE:"nr-clock-close",VALIDATION:"nr-validation"},x={hours:0,minutes:0,seconds:0,period:v.AM},w={format:p.TwentyFourHour,showSeconds:!1,minuteInterval:1,secondInterval:1,use12HourClock:!1},T="HH:mm",S="HH:mm:ss",$="hh:mm A",M="hh:mm:ss A",C="time-input-field",E="time-picker-clock-container",O={TWENTY_FOUR_HOUR:/^([01]?[0-9]|2[0-3]):([0-5]?[0-9])(:([0-5]?[0-9]))?$/,TWELVE_HOUR:/^(0?[1-9]|1[0-2]):([0-5]?[0-9])(:([0-5]?[0-9]))?\s?(AM|PM|am|pm)$/},H={MIN_HOUR_24:0,MAX_HOUR_24:23,MIN_HOUR_12:1,MAX_HOUR_12:12,MIN_MINUTE:0,MAX_MINUTE:59,MIN_SECOND:0,MAX_SECOND:59},z={HOURS:b.One,MINUTES:b.One,SECONDS:b.One},I={CONTAINER:"time-picker",INPUT:"time-picker__input",CLOCK:"time-picker__clock",DROPDOWN:"time-picker__dropdown",HOUR:"time-picker__hour",MINUTE:"time-picker__minute",SECOND:"time-picker__second",PERIOD:"time-picker__period",BUTTON:"time-picker__button",SEPARATOR:"time-picker__separator"},A={RADIUS:100,CENTER:50,HOUR_HAND_LENGTH:30,MINUTE_HAND_LENGTH:40,SECOND_HAND_LENGTH:45};
|
|
81
7
|
/**
|
|
82
8
|
* @license
|
|
83
9
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
84
10
|
* SPDX-License-Identifier: MIT
|
|
85
11
|
*/
|
|
86
|
-
class
|
|
12
|
+
class N{static createTimeValue(e,i,t=0,r){return{hours:Math.max(0,Math.min(e,23)),minutes:Math.max(0,Math.min(i,59)),seconds:Math.max(0,Math.min(t,59)),period:r}}static parseTimeString(e,i=p.TwentyFourHour){if(!(null==e?void 0:e.trim()))return null;const t=e.trim().toUpperCase();return i===p.TwelveHour?this.parse12HourTime(t):this.parse24HourTime(t)}static parse24HourTime(e){const i=e.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);if(!i)return null;const t=parseInt(i[1],10),r=parseInt(i[2],10),o=i[3]?parseInt(i[3],10):0;return this.isValidTime24(t,r,o)?this.createTimeValue(t,r,o):null}static parse12HourTime(e){const i=e.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?\s?(AM|PM)$/);if(!i)return null;let t=parseInt(i[1],10);const r=parseInt(i[2],10),o=i[3]?parseInt(i[3],10):0,a=i[4];return this.isValidTime12(t,r,o)?(a===v.PM&&12!==t?t+=12:a===v.AM&&12===t&&(t=0),this.createTimeValue(t,r,o,a)):null}static formatTimeValue(e,i=p.TwentyFourHour,t=!1){return e?i===p.TwelveHour?this.format12HourTime(e,t):this.format24HourTime(e,t):""}static format24HourTime(e,i){const t=e.hours.toString().padStart(2,"0"),r=e.minutes.toString().padStart(2,"0");if(i){return`${t}:${r}:${e.seconds.toString().padStart(2,"0")}`}return`${t}:${r}`}static format12HourTime(e,i){let t=e.hours;const r=e.minutes.toString().padStart(2,"0"),o=t>=12?v.PM:v.AM;0===t?t=12:t>12&&(t-=12);const a=t.toString();if(i){return`${a}:${r}:${e.seconds.toString().padStart(2,"0")} ${o}`}return`${a}:${r} ${o}`}static getCurrentTime(){const e=new Date;return this.createTimeValue(e.getHours(),e.getMinutes(),e.getSeconds())}static compareTime(e,i){return 3600*e.hours+60*e.minutes+e.seconds-(3600*i.hours+60*i.minutes+i.seconds)}static isTimeEqual(e,i){return 0===this.compareTime(e,i)}static isValidTime24(e,i,t=0){return e>=H.MIN_HOUR_24&&e<=H.MAX_HOUR_24&&i>=H.MIN_MINUTE&&i<=H.MAX_MINUTE&&t>=H.MIN_SECOND&&t<=H.MAX_SECOND}static isValidTime12(e,i,t=0){return e>=H.MIN_HOUR_12&&e<=H.MAX_HOUR_12&&i>=H.MIN_MINUTE&&i<=H.MAX_MINUTE&&t>=H.MIN_SECOND&&t<=H.MAX_SECOND}static addTime(e,i,t,r=0){let o=3600*e.hours+60*e.minutes+e.seconds;o+=3600*i+60*t+r,o=(o%86400+86400)%86400;const a=Math.floor(o/3600),c=Math.floor(o%3600/60),l=o%60;return this.createTimeValue(a,c,l)}static generateTimeOptions(e=15,i=p.TwentyFourHour,t=!1){const r=[];for(let o=0;o<24;o++)for(let a=0;a<60;a+=e){const e=this.createTimeValue(o,a,0),c=this.formatTimeValue(e,i,t);r.push({value:c,label:c})}return r}static roundToInterval(e,i){const t=60*e.hours+e.minutes,r=Math.round(t/i)*i,o=Math.floor(r/60)%24,a=r%60;return this.createTimeValue(o,a,e.seconds)}static isTimeInRange(e,i,t){return!(i&&this.compareTime(e,i)<0)&&!(t&&this.compareTime(e,t)>0)}static dateToTimeValue(e){return this.createTimeValue(e.getHours(),e.getMinutes(),e.getSeconds())}static timeValueToDate(e,i){const t=i?new Date(i):new Date;return t.setHours(e.hours,e.minutes,e.seconds,0),t}}
|
|
87
13
|
/**
|
|
88
14
|
* @license
|
|
89
15
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
90
16
|
* SPDX-License-Identifier: MIT
|
|
91
|
-
*/class
|
|
17
|
+
*/class D{constructor(e){this.host=e,this.selectedTime=null}selectTime(e){if(!this.host.validateTime(e))return;const i=this.selectedTime;this.selectedTime=Object.assign({},e),this.dispatchTimeChangeEvent(e,i),this.host.requestUpdate()}getSelectedTime(){return this.selectedTime?Object.assign({},this.selectedTime):null}clearSelection(){const e=this.selectedTime;this.selectedTime=null,e&&(this.dispatchTimeChangeEvent(null,e),this.host.requestUpdate())}isTimeSelected(e){return!!this.selectedTime&&N.isTimeEqual(e,this.selectedTime)}setTimeInternal(e){this.selectedTime=e?Object.assign({},e):null}updateTime(e){if(this.selectedTime)this.selectedTime=Object.assign(Object.assign({},this.selectedTime),e);else{const i=N.getCurrentTime();this.selectedTime=Object.assign(Object.assign({},i),e)}this.host.validateTime(this.selectedTime)&&(this.dispatchTimeChangeEvent(this.selectedTime,null),this.host.requestUpdate())}incrementTime(e,i=1){let t;switch(this.selectedTime||(this.selectedTime=N.getCurrentTime()),e){case"hours":t=N.addTime(this.selectedTime,i,0,0);break;case"minutes":t=N.addTime(this.selectedTime,0,i,0);break;case"seconds":t=N.addTime(this.selectedTime,0,0,i);break;default:return}this.selectTime(t)}decrementTime(e,i=1){this.incrementTime(e,-i)}setTimeFromString(e){const i=this.host.getConfig(),t=N.parseTimeString(e,i.format);return!(!t||!this.host.validateTime(t))&&(this.selectTime(t),!0)}getFormattedTime(){return this.selectedTime?this.host.formatTime(this.selectedTime):""}dispatchTimeChangeEvent(e,i){const t=this.host;if(!t.dispatchEvent)return;const r={value:e?this.host.formatTime(e):"",timeValue:e,previousValue:i?this.host.formatTime(i):"",previousTimeValue:i},o=new CustomEvent(_.TIME_CHANGE,{detail:r,bubbles:!0,composed:!0});t.dispatchEvent(o)}reset(){this.clearSelection()}setToCurrentTime(){const e=N.getCurrentTime();this.selectTime(e)}roundToInterval(e){if(!this.selectedTime)return;const i=N.roundToInterval(this.selectedTime,e);this.selectTime(i)}}
|
|
92
18
|
/**
|
|
93
19
|
* @license
|
|
94
20
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
95
21
|
* SPDX-License-Identifier: MIT
|
|
96
|
-
*/class
|
|
22
|
+
*/class j{constructor(e){this.host=e,this.constraints={}}setConstraints(e){this.constraints=Object.assign({},e)}getConstraints(){return Object.assign({},this.constraints)}validateConstraints(e){return this.isTimeInBounds(e)&&!this.isTimeDisabled(e)&&this.isTimeEnabled(e)}isTimeInBounds(e){let i=null,t=null;if(this.constraints.minTime){const e=this.host.getConfig();i=N.parseTimeString(this.constraints.minTime,e.format)}if(this.constraints.maxTime){const e=this.host.getConfig();t=N.parseTimeString(this.constraints.maxTime,e.format)}return N.isTimeInRange(e,i,t)}isTimeDisabled(e){if(!this.constraints.disabledTimes||0===this.constraints.disabledTimes.length)return!1;const i=this.host.formatTime(e);return this.constraints.disabledTimes.includes(i)}isTimeEnabled(e){if(!this.constraints.enabledTimes||0===this.constraints.enabledTimes.length)return!0;const i=this.host.formatTime(e);return this.constraints.enabledTimes.includes(i)}getValidationMessage(e){return this.isTimeInBounds(e)?this.isTimeDisabled(e)?"This time is not available":this.isTimeEnabled(e)?"":"This time is not in the allowed time range":this.getBoundsValidationMessage(e)}getBoundsValidationMessage(e){const i=this.host.getConfig();let t="";if(this.constraints.minTime&&this.constraints.maxTime)t=`Time must be between ${this.constraints.minTime} and ${this.constraints.maxTime}`;else if(this.constraints.minTime){const r=N.parseTimeString(this.constraints.minTime,i.format);r&&N.compareTime(e,r)<0&&(t=`Time must be after ${this.constraints.minTime}`)}else if(this.constraints.maxTime){const r=N.parseTimeString(this.constraints.maxTime,i.format);r&&N.compareTime(e,r)>0&&(t=`Time must be before ${this.constraints.maxTime}`)}return t}validateTimeFormat(e){const i=this.host.getConfig();return null!==N.parseTimeString(e,i.format)}getValidationResult(e){const i=[];return this.isTimeInBounds(e)||i.push(this.getBoundsValidationMessage(e)),this.isTimeDisabled(e)&&i.push("This time is disabled"),this.isTimeEnabled(e)||i.push("This time is not in the allowed range"),{isValid:0===i.length,message:i.length>0?i[0]:"",errors:i}}findNearestValidTime(e){if(this.validateConstraints(e))return e;for(let i=1;i<=60;i++){const t=N.addTime(e,0,i,0);if(this.validateConstraints(t))return t;const r=N.addTime(e,0,-i,0);if(this.validateConstraints(r))return r}return null}isCurrentSelectionValid(){const e=this.host.getCurrentTime();return this.validateConstraints(e)}setMinTime(e){this.constraints.minTime=e||void 0}setMaxTime(e){this.constraints.maxTime=e||void 0}setDisabledTimes(e){this.constraints.disabledTimes=[...e]}setEnabledTimes(e){this.constraints.enabledTimes=[...e]}clearConstraints(){this.constraints={}}}
|
|
97
23
|
/**
|
|
98
24
|
* @license
|
|
99
25
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
100
26
|
* SPDX-License-Identifier: MIT
|
|
101
|
-
*/class
|
|
27
|
+
*/class U{constructor(e){this.host=e}formatForDisplay(e){const i=this.host.getConfig();return N.formatTimeValue(e,i.format,i.showSeconds)}formatForInput(e){return this.formatForDisplay(e)}parseInputValue(e){const i=this.host.getConfig();return N.parseTimeString(e,i.format)}getFormatPattern(){const e=this.host.getConfig();return e.format===p.TwelveHour?e.showSeconds?M:$:e.showSeconds?S:T}getPlaceholder(){const e=this.host.getConfig();return e.format===p.TwelveHour?e.showSeconds?"hh:mm:ss AM/PM":"hh:mm AM/PM":e.showSeconds?"HH:mm:ss":"HH:mm"}formatTimeComponent(e,i=2){return e.toString().padStart(i,"0")}formatHours(e){if(this.host.getConfig().format===p.TwelveHour){let i=e;return 0===i?i=12:i>12&&(i-=12),i.toString()}return this.formatTimeComponent(e)}formatMinutes(e){return this.formatTimeComponent(e)}formatSeconds(e){return this.formatTimeComponent(e)}getPeriod(e){return e>=12?v.PM:v.AM}formatTimeParts(e){const i=this.host.getConfig();return{hours:this.formatHours(e.hours),minutes:this.formatMinutes(e.minutes),seconds:this.formatSeconds(e.seconds),period:i.format===p.TwelveHour?this.getPeriod(e.hours):void 0}}parseTimeParts(e){const i=this.host.getConfig(),t=N.parseTimeString(e,i.format);return t?{hours:t.hours,minutes:t.minutes,seconds:t.seconds,period:i.format===p.TwelveHour?this.getPeriod(t.hours):void 0}:null}getTimeSeparator(){return":"}isValidFormat(e){const i=N.createTimeValue(12,30,45);try{const e=this.formatForDisplay(i);return null!==this.parseInputValue(e)}catch(e){return!1}}getFormatExamples(){const e=this.host.getConfig();return[N.createTimeValue(9,15,0),N.createTimeValue(14,30,45),N.createTimeValue(23,59,59)].map((i=>N.formatTimeValue(i,e.format,e.showSeconds)))}convertFormat(e,i,t){const r=N.parseTimeString(e,i);if(!r)return null;const o=this.host.getConfig();return N.formatTimeValue(r,t,o.showSeconds)}getTimeDescription(e){const i=this.host.getConfig(),t=N.formatTimeValue(e,i.format,i.showSeconds),r=N.getCurrentTime(),o=N.compareTime(e,r);return 0===o?`${t} (now)`:o>0?`${t} (future)`:`${t} (past)`}}const R=e`
|
|
28
|
+
${e`
|
|
29
|
+
:host {
|
|
30
|
+
/* ========================================
|
|
31
|
+
* TIMEPICKER THEME-AWARE VARIABLES
|
|
32
|
+
* Uses CSS custom properties from theme files
|
|
33
|
+
* ======================================== */
|
|
34
|
+
|
|
35
|
+
/* Base timepicker styling - uses theme variables with fallbacks */
|
|
36
|
+
--nuraly-timepicker-local-background-color: var(--nuraly-color-timepicker-background, #ffffff);
|
|
37
|
+
--nuraly-timepicker-local-text-color: var(--nuraly-color-timepicker-text, rgba(0, 0, 0, 0.88));
|
|
38
|
+
--nuraly-timepicker-local-font-family: var(--nuraly-font-family-timepicker, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif);
|
|
39
|
+
--nuraly-timepicker-local-font-size: var(--nuraly-font-size-timepicker, 14px);
|
|
40
|
+
|
|
41
|
+
/* Timepicker borders - theme-aware */
|
|
42
|
+
--nuraly-timepicker-local-border-color: var(--nuraly-color-timepicker-border, #d9d9d9);
|
|
43
|
+
--nuraly-timepicker-local-border-width: var(--nuraly-border-width-timepicker, 1px);
|
|
44
|
+
--nuraly-timepicker-local-border-radius: var(--nuraly-border-radius-timepicker, 6px);
|
|
45
|
+
--nuraly-timepicker-local-border-radius-sm: var(--nuraly-border-radius-timepicker-sm, calc(var(--nuraly-border-radius-timepicker, 6px) * 0.5));
|
|
46
|
+
|
|
47
|
+
/* Primary and selection colors - theme-aware */
|
|
48
|
+
--nuraly-timepicker-local-primary-color: var(--nuraly-color-timepicker-primary, #1890ff);
|
|
49
|
+
--nuraly-timepicker-local-focus-color: var(--nuraly-color-timepicker-focus, #1890ff);
|
|
50
|
+
--nuraly-timepicker-local-border-color-hover: var(--nuraly-color-timepicker-border-hover, #1890ff);
|
|
51
|
+
--nuraly-timepicker-local-selected-color: var(--nuraly-color-timepicker-selected, #1890ff);
|
|
52
|
+
--nuraly-timepicker-local-selected-text-color: var(--nuraly-color-timepicker-selected-text, #ffffff);
|
|
53
|
+
--nuraly-timepicker-local-hover-color: var(--nuraly-color-timepicker-hover, #f5f5f5);
|
|
54
|
+
--nuraly-timepicker-local-clock-hand-color: var(--nuraly-color-timepicker-clock-hand, #1890ff);
|
|
55
|
+
|
|
56
|
+
/* Control item states - theme-aware */
|
|
57
|
+
--nuraly-timepicker-local-control-item-bg-hover: var(--nuraly-color-timepicker-control-item-bg-hover, #f5f5f5);
|
|
58
|
+
--nuraly-timepicker-local-control-item-bg-active: var(--nuraly-color-timepicker-control-item-bg-active, #e6f7ff);
|
|
59
|
+
|
|
60
|
+
/* Text colors - theme-aware */
|
|
61
|
+
--nuraly-timepicker-local-text-color-secondary: var(--nuraly-color-timepicker-text-secondary, rgba(0, 0, 0, 0.45));
|
|
62
|
+
--nuraly-timepicker-local-text-color-disabled: var(--nuraly-color-timepicker-text-disabled, rgba(0, 0, 0, 0.25));
|
|
63
|
+
|
|
64
|
+
/* Disabled states - theme-aware */
|
|
65
|
+
--nuraly-timepicker-local-disabled-color: var(--nuraly-color-timepicker-disabled, #f5f5f5);
|
|
66
|
+
--nuraly-timepicker-local-disabled-bg: var(--nuraly-color-timepicker-disabled-bg, #f5f5f5);
|
|
67
|
+
--nuraly-timepicker-local-disabled-text-color: var(--nuraly-color-timepicker-disabled-text, rgba(0, 0, 0, 0.25));
|
|
68
|
+
--nuraly-timepicker-local-disabled-opacity: var(--nuraly-opacity-timepicker-disabled, 1);
|
|
69
|
+
|
|
70
|
+
/* Input field colors - theme-aware */
|
|
71
|
+
--nuraly-timepicker-local-input-background: var(--nuraly-color-timepicker-input-background, #ffffff);
|
|
72
|
+
--nuraly-timepicker-local-input-border-color: var(--nuraly-color-timepicker-input-border, #d9d9d9);
|
|
73
|
+
--nuraly-timepicker-local-input-focus-border-color: var(--nuraly-color-timepicker-input-focus-border, #1890ff);
|
|
74
|
+
--nuraly-timepicker-local-input-text-color: var(--nuraly-color-timepicker-input-text, rgba(0, 0, 0, 0.88));
|
|
75
|
+
--nuraly-timepicker-local-input-placeholder-color: var(--nuraly-color-timepicker-input-placeholder, rgba(0, 0, 0, 0.25));
|
|
76
|
+
|
|
77
|
+
/* Dropdown and clock colors - theme-aware */
|
|
78
|
+
--nuraly-timepicker-local-dropdown-background: var(--nuraly-color-timepicker-dropdown-background, #ffffff);
|
|
79
|
+
--nuraly-timepicker-local-clock-background: var(--nuraly-color-timepicker-clock-background, #ffffff);
|
|
80
|
+
--nuraly-timepicker-local-clock-text-color: var(--nuraly-color-timepicker-clock-text, rgba(0, 0, 0, 0.88));
|
|
81
|
+
--nuraly-timepicker-local-clock-face-color: var(--nuraly-color-timepicker-clock-face, rgba(0, 0, 0, 0.45));
|
|
82
|
+
--nuraly-timepicker-local-clock-border-color: var(--nuraly-color-timepicker-clock-border, #f0f0f0);
|
|
83
|
+
|
|
84
|
+
/* Item selection colors - theme-aware */
|
|
85
|
+
--nuraly-timepicker-local-item-hover-color: var(--nuraly-color-timepicker-item-hover, #f5f5f5);
|
|
86
|
+
--nuraly-timepicker-local-item-active-color: var(--nuraly-color-timepicker-item-active, #e6f7ff);
|
|
87
|
+
--nuraly-timepicker-local-item-selected-color: var(--nuraly-color-timepicker-item-selected, #1890ff);
|
|
88
|
+
--nuraly-timepicker-local-item-selected-text-color: var(--nuraly-color-timepicker-item-selected-text, #ffffff);
|
|
89
|
+
|
|
90
|
+
/* Error/warning/success colors - theme-aware */
|
|
91
|
+
--nuraly-timepicker-local-error-color: var(--nuraly-color-timepicker-error, #ff4d4f);
|
|
92
|
+
--nuraly-timepicker-local-warning-color: var(--nuraly-color-timepicker-warning, #faad14);
|
|
93
|
+
--nuraly-timepicker-local-success-color: var(--nuraly-color-timepicker-success, #52c41a);
|
|
94
|
+
|
|
95
|
+
/* Layout and sizing - theme-aware */
|
|
96
|
+
--nuraly-timepicker-local-width: var(--nuraly-size-timepicker-width, 120px);
|
|
97
|
+
--nuraly-timepicker-local-height: var(--nuraly-size-timepicker-height, 32px);
|
|
98
|
+
--nuraly-timepicker-local-dropdown-width: var(--nuraly-size-timepicker-dropdown-width, 180px);
|
|
99
|
+
--nuraly-timepicker-local-clock-size: var(--nuraly-size-timepicker-clock, 200px);
|
|
100
|
+
|
|
101
|
+
/* Typography - theme-aware */
|
|
102
|
+
--nuraly-timepicker-local-font-weight: var(--nuraly-font-weight-timepicker, 400);
|
|
103
|
+
--nuraly-timepicker-local-line-height: var(--nuraly-line-height-timepicker, 1.5715);
|
|
104
|
+
--nuraly-timepicker-local-clock-font-size: var(--nuraly-font-size-timepicker-clock, 14px);
|
|
105
|
+
|
|
106
|
+
/* Spacing - theme-aware */
|
|
107
|
+
--nuraly-timepicker-local-gap: var(--nuraly-spacing-timepicker-gap, 4px);
|
|
108
|
+
--nuraly-timepicker-local-dropdown-padding: var(--nuraly-spacing-timepicker-dropdown-padding, 8px);
|
|
109
|
+
--nuraly-timepicker-local-input-padding: var(--nuraly-spacing-timepicker-input-padding, 4px 11px);
|
|
110
|
+
--nuraly-timepicker-local-padding: var(--nuraly-spacing-timepicker-padding, 4px 11px);
|
|
111
|
+
|
|
112
|
+
/* Borders - theme-aware */
|
|
113
|
+
--nuraly-timepicker-local-input-border-width: var(--nuraly-border-width-timepicker-input, 1px);
|
|
114
|
+
--nuraly-timepicker-local-focus-border-width: var(--nuraly-border-width-timepicker-focus, 2px);
|
|
115
|
+
|
|
116
|
+
/* Shadows - theme-aware */
|
|
117
|
+
--nuraly-timepicker-local-shadow-color: var(--nuraly-color-timepicker-shadow, rgba(0, 0, 0, 0.15));
|
|
118
|
+
--nuraly-timepicker-local-box-shadow: var(--nuraly-shadow-timepicker-box, 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05));
|
|
119
|
+
--nuraly-timepicker-local-input-focus-shadow: var(--nuraly-shadow-timepicker-input-focus, 0 0 0 2px rgba(24, 144, 255, 0.2));
|
|
120
|
+
|
|
121
|
+
/* States - theme-aware */
|
|
122
|
+
--nuraly-timepicker-local-hover-opacity: var(--nuraly-opacity-timepicker-hover, 1);
|
|
123
|
+
|
|
124
|
+
/* Animation and transitions - theme-aware */
|
|
125
|
+
--nuraly-timepicker-local-transition-duration: var(--nuraly-transition-duration-timepicker, 0.2s);
|
|
126
|
+
--nuraly-timepicker-local-transition-timing: var(--nuraly-transition-timing-timepicker, ease-in-out);
|
|
127
|
+
|
|
128
|
+
/* Z-index - theme-aware */
|
|
129
|
+
--nuraly-timepicker-local-dropdown-z-index: var(--nuraly-z-index-timepicker-dropdown, 1050);
|
|
130
|
+
|
|
131
|
+
/* Icon sizes - theme-aware */
|
|
132
|
+
--nuraly-timepicker-local-icon-size: var(--nuraly-size-timepicker-icon, 14px);
|
|
133
|
+
|
|
134
|
+
/* Size variants - theme-aware */
|
|
135
|
+
--nuraly-timepicker-local-small-font-size: var(--nuraly-font-size-timepicker-small, 12px);
|
|
136
|
+
--nuraly-timepicker-local-small-padding: var(--nuraly-spacing-timepicker-small-padding, 0px 7px);
|
|
137
|
+
--nuraly-timepicker-local-small-height: var(--nuraly-size-timepicker-small-height, 24px);
|
|
138
|
+
|
|
139
|
+
--nuraly-timepicker-local-medium-font-size: var(--nuraly-font-size-timepicker-medium, 14px);
|
|
140
|
+
--nuraly-timepicker-local-medium-padding: var(--nuraly-spacing-timepicker-medium-padding, 4px 11px);
|
|
141
|
+
--nuraly-timepicker-local-medium-height: var(--nuraly-size-timepicker-medium-height, 32px);
|
|
142
|
+
|
|
143
|
+
--nuraly-timepicker-local-large-font-size: var(--nuraly-font-size-timepicker-large, 16px);
|
|
144
|
+
--nuraly-timepicker-local-large-padding: var(--nuraly-spacing-timepicker-large-padding, 6px 11px);
|
|
145
|
+
--nuraly-timepicker-local-large-height: var(--nuraly-size-timepicker-large-height, 40px);
|
|
146
|
+
}
|
|
147
|
+
`
|
|
102
148
|
/**
|
|
103
149
|
* @license
|
|
104
150
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
105
151
|
* SPDX-License-Identifier: MIT
|
|
106
|
-
*/}:host{display:block;font-family:var(--nuraly-timepicker-local-font-family);font-size:var(--nuraly-timepicker-local-font-size);font-weight:var(--nuraly-timepicker-local-font-weight)}:host([disabled]){opacity:var(--nuraly-timepicker-local-disabled-opacity);pointer-events:none}.time-picker{position:relative;display:inline-block;width:100%}.time-picker__input-wrapper:hover:not(.time-picker--disabled) nr-input{--nuraly-input-border-color:var(--nuraly-timepicker-local-border-color-hover)}.time-picker--open .time-picker__input-wrapper nr-input,.time-picker__input-wrapper nr-input:focus,.time-picker__input-wrapper:focus-within nr-input{--nuraly-input-border-color:var(--nuraly-timepicker-local-focus-color);--nuraly-input-box-shadow:0 0 0 2px var(--nuraly-timepicker-local-focus-color) 33}.time-picker--disabled .time-picker__input-wrapper nr-input{--nuraly-input-background-color:var(--nuraly-timepicker-local-disabled-bg);--nuraly-input-border-color:var(--nuraly-timepicker-local-border-color);--nuraly-input-text-color:var(--nuraly-timepicker-local-text-color-disabled);cursor:not-allowed;opacity:.6}.time-picker__input-wrapper{position:relative;width:100%}.time-picker__input-wrapper nr-input{width:100%}.time-picker__trigger{padding:4px!important;min-width:auto!important;width:24px!important;height:24px!important;border-radius:var(--nuraly-timepicker-local-border-radius-sm)!important}.time-picker__trigger svg{width:16px;height:16px;color:var(--nuraly-timepicker-local-text-color-secondary);transition:color .2s ease}.time-picker__trigger:hover svg{color:var(--nuraly-timepicker-local-primary-color)}.time-picker__trigger:hover{color:var(--nuraly-timepicker-local-primary-color)}.time-picker__trigger:disabled{color:var(--nuraly-timepicker-local-text-color-disabled);cursor:not-allowed}.time-picker__trigger svg{width:14px;height:14px}.time-picker__dropdown{position:absolute;z-index:1000;background-color:var(--nuraly-timepicker-local-background-color);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--nuraly-timepicker-local-border-color);border-radius:var(--nuraly-timepicker-local-border-radius);box-shadow:var(--nuraly-timepicker-local-box-shadow);width:100%;min-width:180px;opacity:1;visibility:visible;transform:translateY(0);transition:all .2s ease-in-out;isolation:isolate;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transform:translateZ(0);animation:dropdown-enter .15s ease-out;overflow:hidden}.time-picker__dropdown.placement-top{animation:dropdown-enter-top .15s ease-out}@keyframes dropdown-enter{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes dropdown-enter-top{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.time-picker__columns{display:flex;max-height:216px;overflow:hidden;border-radius:var(--nuraly-timepicker-local-border-radius);background:var(--nuraly-timepicker-local-background-color);padding:4px 0}.time-picker__column{flex:1;border-right:1px solid rgba(0,0,0,.06);background:0 0;overflow:hidden;position:relative;min-width:60px}.time-picker__column:last-child{border-right:none}.time-picker__column-list{max-height:216px;overflow-y:scroll;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.06) transparent;padding:4px 2px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.time-picker__column-list::-webkit-scrollbar{width:6px;-webkit-appearance:none}.time-picker__column-list::-webkit-scrollbar-track{background:rgba(0,0,0,.04);margin:8px 0;border-radius:var(--nuraly-timepicker-local-border-radius-sm)}.time-picker__column-list::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2);border-radius:var(--nuraly-timepicker-local-border-radius-sm);transition:background-color .2s ease;min-height:20px}.time-picker__column-list::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.3)}.time-picker__column-list{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) rgba(0,0,0,.04);scroll-behavior:smooth}.time-picker__column-item{display:flex;align-items:center;justify-content:center;padding:4px 8px;color:var(--nuraly-timepicker-local-text-color);font-size:var(--nuraly-timepicker-local-font-size);font-weight:var(--nuraly-timepicker-local-font-weight);cursor:pointer;transition:all .2s ease-in-out;border-radius:var(--nuraly-timepicker-local-border-radius);position:relative;user-select:none;line-height:var(--nuraly-timepicker-local-line-height);min-height:28px;margin:1px 2px}.time-picker__column-item:hover{background-color:var(--nuraly-timepicker-local-control-item-bg-hover);color:var(--nuraly-timepicker-local-primary-color)}.time-picker__column-item:active{background-color:var(--nuraly-timepicker-local-control-item-bg-active);color:var(--nuraly-timepicker-local-primary-color)}.time-picker__column-item--selected{background-color:var(--nuraly-timepicker-local-control-item-bg-active);color:var(--nuraly-timepicker-local-primary-color);font-weight:600;border-radius:var(--nuraly-timepicker-local-border-radius)}.time-picker__column-item--selected:hover{background-color:var(--nuraly-timepicker-local-control-item-bg-active);color:var(--nuraly-timepicker-local-primary-color)}.time-picker__column-item--focused{background-color:var(--nuraly-timepicker-local-control-item-bg-hover);outline:2px solid var(--nuraly-timepicker-local-focus-color);outline-offset:-2px;border-radius:var(--nuraly-timepicker-local-border-radius);color:var(--nuraly-timepicker-local-primary-color)}.time-picker__column-item--disabled{opacity:.4;cursor:not-allowed;color:var(--timepicker-text-color-disabled)}.time-picker__column-item--disabled:hover{background-color:transparent;color:var(--timepicker-text-color-disabled)}.time-picker__dropdown--top{top:auto;bottom:100%;margin-top:0;margin-bottom:4px}.time-picker__clock-container{padding:12px;display:flex;flex-direction:column;gap:12px;background:var(--timepicker-background-color)}.time-picker__digital-inputs{display:flex;align-items:center;gap:8px;justify-content:center;padding:8px 12px;border-bottom:1px solid var(--timepicker-border-color)}.time-picker__time-input{width:56px;height:32px;text-align:center;padding:4px 8px;border:1px solid var(--timepicker-border-color);border-radius:var(--timepicker-border-radius);font-size:14px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:var(--timepicker-text-color);background-color:var(--timepicker-background-color);transition:all .3s;outline:0}.time-picker__time-input:hover{border-color:var(--timepicker-primary-color-hover)}.time-picker__time-input:focus{border-color:var(--timepicker-primary-color);box-shadow:0 0 0 2px var(--timepicker-primary-color-active)}.time-picker__separator{font-weight:600;color:var(--timepicker-text-color)}.time-picker__period-toggle{display:flex;flex-direction:column;border:1px solid var(--timepicker-border-color);border-radius:var(--timepicker-border-radius);overflow:hidden;margin-left:8px}.time-picker__period-button{background:var(--timepicker-background-color);border:none;padding:6px 12px;font-size:12px;color:var(--timepicker-text-color);cursor:pointer;transition:all .3s;min-width:44px;height:24px;display:flex;align-items:center;justify-content:center}.time-picker__period-button:hover{background-color:var(--timepicker-item-hover-bg);color:var(--timepicker-text-color)}.time-picker__period-button--active{background-color:var(--timepicker-primary-color);color:#fff}.time-picker__period-button+.time-picker__period-button{border-top:1px solid var(--timepicker-border-color)}.time-picker__clock{width:var(--timepicker-clock-size);height:var(--timepicker-clock-size);border:1px solid var(--timepicker-border-color);border-radius:50%;background-color:var(--timepicker-background-color);position:relative;margin:0 auto;user-select:none}.time-picker__clock-face{width:100%;height:100%;position:relative}.time-picker__clock-number{position:absolute;color:var(--timepicker-text-color);font-size:14px;font-weight:400;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;transition:all .3s;transform:translate(-50%,-50%)}.time-picker__clock-number:hover{background-color:var(--timepicker-item-hover-bg);color:var(--timepicker-text-color)}.time-picker__clock-number--selected{background-color:var(--timepicker-primary-color);color:#fff}.time-picker__clock-hand{position:absolute;background-color:var(--timepicker-primary-color);transform-origin:bottom center;border-radius:2px 2px 0 0}.time-picker__clock-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;background-color:var(--timepicker-primary-color);border-radius:50%;z-index:10}.time-picker__mode-buttons{display:flex;gap:8px;justify-content:center;margin-bottom:8px}.time-picker__mode-button{padding:6px 16px;border:1px solid var(--timepicker-border-color);background:var(--timepicker-background-color);color:var(--timepicker-text-color);border-radius:var(--timepicker-border-radius);cursor:pointer;font-size:14px;transition:all .3s;outline:0}.time-picker__mode-button:hover{background-color:var(--timepicker-item-hover-bg);border-color:var(--timepicker-primary-color-hover)}.time-picker__mode-button--active{background-color:var(--timepicker-primary-color);color:#fff;border-color:var(--timepicker-primary-color)}.time-picker__actions{display:flex;gap:8px;justify-content:flex-end;padding:8px 12px;border-top:1px solid rgba(0,0,0,.06);background:var(--timepicker-background-color);border-bottom-left-radius:8px;border-bottom-right-radius:8px}.time-picker__actions nr-button{border-radius:var(--nuraly-timepicker-local-border-radius);font-weight:400;font-size:14px;height:28px}.time-picker__label{display:block;margin-bottom:8px;font-weight:400;color:var(--timepicker-text-color);font-size:14px}.time-picker__helper-text{font-size:14px;margin-top:4px;color:var(--timepicker-text-color-secondary)}.time-picker__helper-text--error{color:var(--timepicker-error-color)}:host([size=small]){--timepicker-height:32px;--timepicker-font-size:12px;--timepicker-padding:4px 8px;--timepicker-clock-size:240px}:host([size=large]){--timepicker-height:48px;--timepicker-font-size:16px;--timepicker-padding:12px 16px;--timepicker-clock-size:320px}:host([variant=outlined]) .time-picker__input{background-color:transparent}:host([variant=filled]) .time-picker__input{border:none;background-color:var(--timepicker-border-color) 33;border-bottom:2px solid var(--timepicker-border-color);border-radius:var(--timepicker-border-radius) var(--timepicker-border-radius) 0 0}:host([variant=filled]) .time-picker__input:focus{border-bottom-color:var(--timepicker-focus-color);box-shadow:none}:host([disabled]) .time-picker{pointer-events:none;opacity:.6}.time-picker__dropdown{opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s}.time-picker__dropdown--open{opacity:1;transform:translateY(0)}.time-picker__time-input::-webkit-inner-spin-button,.time-picker__time-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.time-picker__time-input[type=number]{-moz-appearance:textfield}@media (max-width:480px){.time-picker__clock{--timepicker-clock-size:240px}.time-picker__dropdown{left:50%;transform:translateX(-50%);width:90vw;max-width:320px}}`;var gt=function(t,r,i,e){for(var a,n=arguments.length,o=n<3?r:null===e?e=Object.getOwnPropertyDescriptor(r,i):e,s=t.length-1;s>=0;s--)(a=t[s])&&(o=(n<3?a(o):n>3?a(r,i,o):a(r,i))||o);return n>3&&o&&Object.defineProperty(r,i,o),o};let ft=class extends(l(e)){constructor(){super(),this.value="",this.name="",this.placeholder="Select time",this.format=B.TwentyFourHour,this.showSeconds=!1,this.disabled=!1,this.readonly=!1,this.required=!1,this.helperText="",this.label="",this.size="medium",this.variant="outlined",this.placement=W.Bottom,this.scrollBehavior="instant",this.inputValue="",this.state=K.Default,this.validationMessage="",this.dropdownController=new u(this),this.selectionController=new mt(this),this.validationController=new vt(this),this.formattingController=new bt(this)}connectedCallback(){super.connectedCallback(),this.updateConstraints(),this.value&&this.setTimeFromValue(this.value),this.addEventListener("click",this.handleComponentClick.bind(this)),document.addEventListener("click",this.handleDocumentClick.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleDocumentClick.bind(this))}updated(t){super.updated(t),t.has("value")&&this.value!==this.inputValue&&(this.setTimeFromValue(this.value),this.dropdownController.isOpen&&setTimeout((()=>{this.scrollToSelectedTime()}),50)),this.shouldUpdateConstraints(t)&&this.updateConstraints(),this.setupDropdownElements()}setupDropdownElements(){var t,r;const i=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".time-picker__dropdown"),e=null===(r=this.shadowRoot)||void 0===r?void 0:r.querySelector(".time-picker__input-wrapper");i&&e&&this.dropdownController.setElements(i,e)}render(){const t={"time-picker":!0,"time-picker--open":this.dropdownController.isOpen,"time-picker--disabled":this.disabled,"time-picker--readonly":this.readonly,"time-picker--error":this.state===K.Error};return r`<div class="${s(t)}" data-theme="${this.currentTheme}" part="wrapper">${this.renderLabel()} ${this.renderInput()} ${this.renderDropdown()} ${this.renderHelperText()}</div>`}open(){this.dropdownController.open(),setTimeout((()=>{this.scrollToSelectedTime()}),50)}close(){this.dropdownController.close()}clear(){this.value="",this.inputValue="",this.selectionController.clearSelection()}setToNow(){const t=ht.getCurrentTime();this.selectionController.selectTime(t),this.updateInputValue(),this.dropdownController.isOpen&&setTimeout((()=>{this.scrollToSelectedTime()}),10)}validate(){const t=this.selectionController.getSelectedTime();return!t||this.validationController.validateConstraints(t)}validateTime(t){return this.validationController.validateConstraints(t)}isHourValid(t,r){const i=Object.assign(Object.assign({},r),{hours:t});return this.validateTime(i)}isMinuteValid(t,r){const i=Object.assign(Object.assign({},r),{minutes:t});return this.validateTime(i)}isSecondValid(t,r){const i=Object.assign(Object.assign({},r),{seconds:t});return this.validateTime(i)}renderLabel(){return this.label?r`<label class="time-picker__label" part="label" for="time-input">${this.label} ${this.required?r`<span class="time-picker__required">*</span>`:i}</label>`:i}renderInput(){const t=this.getFormatPlaceholder();return r`<div class="time-picker__input-wrapper" part="input-wrapper"><nr-input id="time-input" part="input" type="calendar" .value="${this.inputValue}" placeholder="${this.placeholder||t}" ?disabled="${this.disabled}" ?readonly="${!1}" ?required="${this.required}" .state="${this.state===K.Error?"error":"default"}" @click="${this.handleInputClick}" @nr-input="${this.handleInputChange}" @nr-blur="${this.handleInputBlur}"></nr-input></div>`}renderDropdown(){return this.dropdownController.isOpen?r`<div class="time-picker__dropdown time-picker__dropdown--open" part="dropdown" @click="${this.handleDropdownClick}">${this.renderColumnPicker()} ${this.renderActions()}</div>`:i}renderColumnPicker(){const t=this.selectionController.getSelectedTime(),e=this.getConfig();return r`<div class="time-picker__columns" part="columns">${this.renderHourColumn(t,e)} ${this.renderMinuteColumn(t)} ${this.showSeconds?this.renderSecondColumn(t):i}</div>`}renderHourColumn(t,i){const e=i.format===B.TwelveHour?Array.from({length:12},((t,r)=>0===r?12:r)):Array.from({length:24},((t,r)=>r)),a=t&&i.format===B.TwelveHour?this.formattingController.formatHours(t.hours):null==t?void 0:t.hours;return r`<div class="time-picker__column" part="hour-column"><div class="time-picker__column-list">${e.map((e=>{let n=e;if(i.format===B.TwelveHour&&t){const r=this.formattingController.getPeriod(t.hours);n=12===e?r===Y.AM?0:12:r===Y.AM?e:e+12}const o=t||tt,s=this.isHourValid(n,o);return r`<div class="time-picker__column-item ${!!t&&e===a?"time-picker__column-item--selected":""} ${s?"":"time-picker__column-item--disabled"}" @click="${s?()=>this.handleHourSelect(e,i.format):null}">${e.toString().padStart(2,"0")}</div>`}))}</div></div>`}renderMinuteColumn(t){const i=Array.from({length:60},((t,r)=>r));return r`<div class="time-picker__column" part="minute-column"><div class="time-picker__column-list">${i.map((i=>{const e=t||tt,a=this.isMinuteValid(i,e),n=!!t&&i===t.minutes;return r`<div class="time-picker__column-item ${n?"time-picker__column-item--selected":""} ${a?"":"time-picker__column-item--disabled"}" @click="${a?()=>this.handleMinuteSelect(i):null}">${i.toString().padStart(2,"0")}</div>`}))}</div></div>`}renderSecondColumn(t){const i=Array.from({length:60},((t,r)=>r));return r`<div class="time-picker__column" part="second-column"><div class="time-picker__column-list">${i.map((i=>{const e=t||tt,a=this.isSecondValid(i,e),n=!!t&&i===t.seconds;return r`<div class="time-picker__column-item ${n?"time-picker__column-item--selected":""} ${a?"":"time-picker__column-item--disabled"}" @click="${a?()=>this.handleSecondSelect(i):null}">${i.toString().padStart(2,"0")}</div>`}))}</div></div>`}renderActions(){return r`<div class="time-picker__actions"><nr-button type="ghost" size="small" @click="${()=>this.setToNow()}">Now</nr-button><nr-button type="primary" size="small" @click="${this.handleOkClick}">OK</nr-button></div>`}renderHelperText(){const t=this.validationMessage||this.helperText;if(!t)return i;const e=this.state===K.Error||!!this.validationMessage;return r`<div class="time-picker__helper-text ${e?"time-picker__helper-text--error":""}" part="helper-text">${t}</div>`}scrollToSelectedTime(){try{const t=this.selectionController.getSelectedTime();if(!t)return;this.scrollToSelectedHour(t),this.scrollToSelectedMinute(t),this.showSeconds&&this.scrollToSelectedSecond(t)}catch(t){console.warn("Failed to scroll to selected time:",t)}}scrollToSelectedHour(t){var r;const i=this.getConfig(),e=null===(r=this.shadowRoot)||void 0===r?void 0:r.querySelector(".time-picker__column:first-child .time-picker__column-list");if(!e)return;let a;a=i.format===B.TwelveHour?0===t.hours||12===t.hours?12:t.hours>12?t.hours-12:t.hours:t.hours;const n=e.querySelector(`.time-picker__column-item:nth-child(${this.getHourIndex(a,i.format)+1})`);n&&n.scrollIntoView({behavior:this.scrollBehavior,block:"center",inline:"nearest"})}scrollToSelectedMinute(t){var r;const i=null===(r=this.shadowRoot)||void 0===r?void 0:r.querySelector(".time-picker__column:nth-child(2) .time-picker__column-list");if(!i)return;const e=i.querySelector(`.time-picker__column-item:nth-child(${t.minutes+1})`);e&&e.scrollIntoView({behavior:this.scrollBehavior,block:"center",inline:"nearest"})}scrollToSelectedSecond(t){var r;const i=null===(r=this.shadowRoot)||void 0===r?void 0:r.querySelector(".time-picker__column:nth-child(3) .time-picker__column-list");if(!i)return;const e=i.querySelector(`.time-picker__column-item:nth-child(${t.seconds+1})`);e&&e.scrollIntoView({behavior:this.scrollBehavior,block:"center",inline:"nearest"})}getHourIndex(t,r){return r===B.TwelveHour&&12===t?0:t}handleComponentClick(t){t.stopPropagation()}handleDocumentClick(t){var r;if(this.dropdownController.isOpen){const i=t.target;this.contains(i)||(null===(r=this.shadowRoot)||void 0===r?void 0:r.contains(i))||(this.dropdownController.close(),this.dispatchEvent(new CustomEvent(Q.BLUR,{bubbles:!0,composed:!0})))}}handleDropdownClick(t){t.stopPropagation()}handleOkClick(){this.dropdownController.close();const t=this.selectionController.getSelectedTime();t&&this.dispatchEvent(new CustomEvent(Q.TIME_CHANGE,{bubbles:!0,composed:!0,detail:{value:this.value,time:t}})),this.dispatchEvent(new CustomEvent(Q.BLUR,{bubbles:!0,composed:!0}))}handleInputBlur(){setTimeout((()=>{var t;const r=document.activeElement;this.contains(r)||(null===(t=this.shadowRoot)||void 0===t?void 0:t.contains(r))||this.dispatchEvent(new CustomEvent(Q.BLUR,{bubbles:!0,composed:!0}))}),150)}handleInputClick(t){t.preventDefault(),t.stopPropagation(),this.disabled||this.dropdownController.isOpen||(this.dropdownController.open(),setTimeout((()=>{this.scrollToSelectedTime()}),50),this.dispatchEvent(new CustomEvent(Q.FOCUS,{bubbles:!0,composed:!0})))}handleInputChange(t){var r;if(this.disabled)return;const i=(null===(r=t.detail)||void 0===r?void 0:r.value)||"";this.inputValue=i;const e=this.formattingController.parseInputValue(i);e?this.validateTime(e)?(this.selectionController.selectTime(e),this.value=this.formattingController.formatForInput(e),this.state=K.Default,this.dropdownController.isOpen&&setTimeout((()=>{this.scrollToSelectedTime()}),10),this.dispatchEvent(new CustomEvent(Q.TIME_CHANGE,{bubbles:!0,composed:!0,detail:{value:this.value,time:e}}))):this.state=K.Error:""===i?(this.selectionController.clearSelection(),this.value="",this.state=K.Default,this.dispatchEvent(new CustomEvent(Q.TIME_CHANGE,{bubbles:!0,composed:!0,detail:{value:"",time:null}}))):this.state=K.Error,this.requestUpdate()}handleHourSelect(t,r){const i=this.selectionController.getSelectedTime()||ht.getCurrentTime();let e=t;if(r===B.TwelveHour){const r=this.formattingController.getPeriod(i.hours);e=12===t?r===Y.AM?0:12:r===Y.AM?t:t+12}const a=Object.assign(Object.assign({},i),{hours:e});this.validateTime(a)&&(this.selectionController.selectTime(a),this.updateInputValue())}handleMinuteSelect(t){const r=this.selectionController.getSelectedTime()||ht.getCurrentTime(),i=Object.assign(Object.assign({},r),{minutes:t});this.validateTime(i)&&(this.selectionController.selectTime(i),this.updateInputValue())}handleSecondSelect(t){const r=this.selectionController.getSelectedTime()||ht.getCurrentTime(),i=Object.assign(Object.assign({},r),{seconds:t});this.validateTime(i)&&(this.selectionController.selectTime(i),this.updateInputValue())}shouldUpdateConstraints(t){return t.has("minTime")||t.has("maxTime")||t.has("disabledTimes")||t.has("enabledTimes")}updateConstraints(){const t={minTime:this.minTime,maxTime:this.maxTime,disabledTimes:this.disabledTimes||[],enabledTimes:this.enabledTimes};this.validationController.setConstraints(t)}setTimeFromValue(t){this.selectionController.setTimeFromString(t)&&(this.inputValue=t,this.requestUpdate(),this.dropdownController.isOpen&&setTimeout((()=>{this.scrollToSelectedTime()}),50))}updateInputValue(){const t=this.selectionController.getSelectedTime();if(t){const r=this.formattingController.formatForDisplay(t);this.inputValue=r,this.value=r,this.dispatchEvent(new CustomEvent(Q.TIME_CHANGE,{detail:{value:r,time:t},bubbles:!0,composed:!0}))}}getConfig(){return{format:this.format,showSeconds:this.showSeconds,step:{hours:Z.One,minutes:Z.One,seconds:Z.One},use12HourClock:this.format===B.TwelveHour,minuteInterval:1,secondInterval:1}}getCurrentTime(){return this.selectionController.getSelectedTime()||tt}setTime(t){this.selectionController.selectTime(t),this.updateInputValue(),this.dropdownController.isOpen&&setTimeout((()=>{this.scrollToSelectedTime()}),10)}formatTime(t){return this.formattingController.formatForDisplay(t)}getFormatPlaceholder(){return this.format===B.TwelveHour?this.showSeconds?"HH:MM:SS AM/PM":"HH:MM AM/PM":this.showSeconds?"HH:MM:SS":"HH:MM"}parseTime(t){return this.formattingController.parseInputValue(t)}};ft.styles=[yt],gt([a({type:String})],ft.prototype,"value",void 0),gt([a({type:String})],ft.prototype,"name",void 0),gt([a({type:String})],ft.prototype,"placeholder",void 0),gt([a({type:String})],ft.prototype,"format",void 0),gt([a({type:Boolean,attribute:"show-seconds"})],ft.prototype,"showSeconds",void 0),gt([a({type:Boolean})],ft.prototype,"disabled",void 0),gt([a({type:Boolean})],ft.prototype,"readonly",void 0),gt([a({type:Boolean})],ft.prototype,"required",void 0),gt([a({type:String,attribute:"min-time"})],ft.prototype,"minTime",void 0),gt([a({type:String,attribute:"max-time"})],ft.prototype,"maxTime",void 0),gt([a({type:Array,attribute:"disabled-times"})],ft.prototype,"disabledTimes",void 0),gt([a({type:Array,attribute:"enabled-times"})],ft.prototype,"enabledTimes",void 0),gt([a({type:String,attribute:"helper-text"})],ft.prototype,"helperText",void 0),gt([a({type:String})],ft.prototype,"label",void 0),gt([a({type:String})],ft.prototype,"size",void 0),gt([a({type:String})],ft.prototype,"variant",void 0),gt([a({type:String})],ft.prototype,"placement",void 0),gt([a({type:String,attribute:"scroll-behavior"})],ft.prototype,"scrollBehavior",void 0),gt([n()],ft.prototype,"inputValue",void 0),gt([n()],ft.prototype,"state",void 0),gt([n()],ft.prototype,"validationMessage",void 0),ft=gt([o("nr-timepicker")],ft);export{st as CLOCK_CONTAINER_CLASS,pt as CLOCK_FACE,at as DEFAULT_12H_TIME_FORMAT,nt as DEFAULT_12H_TIME_FORMAT_WITH_SECONDS,ut as DEFAULT_STEPS,rt as DEFAULT_TIME_CONFIG,it as DEFAULT_TIME_FORMAT,X as DEFAULT_TIME_FORMATS,G as DEFAULT_TIME_FORMATS_WITH_SECONDS,et as DEFAULT_TIME_FORMAT_WITH_SECONDS,tt as EMPTY_TIME_VALUE,ft as NrTimePickerElement,ct as TIME_BOUNDARIES,ot as TIME_INPUT_FIELD_ID,dt as TIME_PICKER_CLASSES,J as TIME_PICKER_CONSTANTS,Q as TIME_PICKER_EVENTS,lt as TIME_VALIDATION_PATTERNS,B as TimeFormat,Y as TimePeriod,bt as TimePickerFormattingController,L as TimePickerMode,W as TimePickerPlacement,mt as TimePickerSelectionController,F as TimePickerSize,K as TimePickerState,vt as TimePickerValidationController,q as TimePickerVariant,Z as TimeStep,ht as TimeUtils};
|
|
152
|
+
*/}
|
|
153
|
+
:host {
|
|
154
|
+
display: block;
|
|
155
|
+
font-family: var(--nuraly-timepicker-local-font-family);
|
|
156
|
+
font-size: var(--nuraly-timepicker-local-font-size);
|
|
157
|
+
font-weight: var(--nuraly-timepicker-local-font-weight);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
/* Host attribute selectors for configuration */
|
|
161
|
+
:host([disabled]) {
|
|
162
|
+
opacity: var(--nuraly-timepicker-local-disabled-opacity);
|
|
163
|
+
pointer-events: none;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.time-picker {
|
|
167
|
+
position: relative;
|
|
168
|
+
display: inline-block;
|
|
169
|
+
width: 100%;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/* Input wrapper hover and focus states matching select component */
|
|
173
|
+
.time-picker__input-wrapper:hover:not(.time-picker--disabled) nr-input {
|
|
174
|
+
--nuraly-input-border-color: var(--nuraly-timepicker-local-border-color-hover);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.time-picker__input-wrapper:focus-within nr-input,
|
|
178
|
+
.time-picker--open .time-picker__input-wrapper nr-input,
|
|
179
|
+
.time-picker__input-wrapper nr-input:focus {
|
|
180
|
+
--nuraly-input-border-color: var(--nuraly-timepicker-local-focus-color);
|
|
181
|
+
--nuraly-input-box-shadow: 0 0 0 2px var(--nuraly-timepicker-local-focus-color)33;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
/* Disabled state styling */
|
|
185
|
+
.time-picker--disabled .time-picker__input-wrapper nr-input {
|
|
186
|
+
--nuraly-input-background-color: var(--nuraly-timepicker-local-disabled-bg);
|
|
187
|
+
--nuraly-input-border-color: var(--nuraly-timepicker-local-border-color);
|
|
188
|
+
--nuraly-input-text-color: var(--nuraly-timepicker-local-text-color-disabled);
|
|
189
|
+
cursor: not-allowed;
|
|
190
|
+
opacity: 0.6;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.time-picker__input-wrapper {
|
|
194
|
+
position: relative;
|
|
195
|
+
width: 100%;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
/* Style the nr-input component */
|
|
199
|
+
.time-picker__input-wrapper nr-input {
|
|
200
|
+
width: 100%;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
/* Style the trigger button inside nr-input */
|
|
204
|
+
.time-picker__trigger {
|
|
205
|
+
padding: 4px !important;
|
|
206
|
+
min-width: auto !important;
|
|
207
|
+
width: 24px !important;
|
|
208
|
+
height: 24px !important;
|
|
209
|
+
border-radius: var(--nuraly-timepicker-local-border-radius-sm) !important;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.time-picker__trigger svg {
|
|
213
|
+
width: 16px;
|
|
214
|
+
height: 16px;
|
|
215
|
+
color: var(--nuraly-timepicker-local-text-color-secondary);
|
|
216
|
+
transition: color 0.2s ease;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.time-picker__trigger:hover svg {
|
|
220
|
+
color: var(--nuraly-timepicker-local-primary-color);
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.time-picker__trigger:hover {
|
|
224
|
+
color: var(--nuraly-timepicker-local-primary-color);
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.time-picker__trigger:disabled {
|
|
228
|
+
color: var(--nuraly-timepicker-local-text-color-disabled);
|
|
229
|
+
cursor: not-allowed;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.time-picker__trigger svg {
|
|
233
|
+
width: 14px;
|
|
234
|
+
height: 14px;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.time-picker__dropdown {
|
|
238
|
+
position: absolute;
|
|
239
|
+
z-index: 1000;
|
|
240
|
+
background-color: var(--nuraly-timepicker-local-background-color);
|
|
241
|
+
backdrop-filter: blur(12px);
|
|
242
|
+
-webkit-backdrop-filter: blur(12px);
|
|
243
|
+
border: 1px solid var(--nuraly-timepicker-local-border-color);
|
|
244
|
+
border-radius: var(--nuraly-timepicker-local-border-radius);
|
|
245
|
+
box-shadow: var(--nuraly-timepicker-local-box-shadow);
|
|
246
|
+
width: 100%;
|
|
247
|
+
min-width: 180px;
|
|
248
|
+
/* Animation and positioning - simplified to match select */
|
|
249
|
+
opacity: 1;
|
|
250
|
+
visibility: visible;
|
|
251
|
+
transform: translateY(0);
|
|
252
|
+
transition: all 0.2s ease-in-out;
|
|
253
|
+
/* Create new stacking context to prevent layering issues */
|
|
254
|
+
isolation: isolate;
|
|
255
|
+
/* Ensure solid background to prevent visual bleed-through */
|
|
256
|
+
backdrop-filter: blur(12px);
|
|
257
|
+
-webkit-backdrop-filter: blur(12px);
|
|
258
|
+
/* Force above other elements */
|
|
259
|
+
transform: translateZ(0);
|
|
260
|
+
animation: dropdown-enter 0.15s ease-out;
|
|
261
|
+
overflow: hidden;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.time-picker__dropdown.placement-top {
|
|
265
|
+
animation: dropdown-enter-top 0.15s ease-out;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
@keyframes dropdown-enter {
|
|
269
|
+
from {
|
|
270
|
+
opacity: 0;
|
|
271
|
+
transform: translateY(-8px);
|
|
272
|
+
}
|
|
273
|
+
to {
|
|
274
|
+
opacity: 1;
|
|
275
|
+
transform: translateY(0);
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
@keyframes dropdown-enter-top {
|
|
280
|
+
from {
|
|
281
|
+
opacity: 0;
|
|
282
|
+
transform: translateY(8px);
|
|
283
|
+
}
|
|
284
|
+
to {
|
|
285
|
+
opacity: 1;
|
|
286
|
+
transform: translateY(0);
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.time-picker__columns {
|
|
291
|
+
display: flex;
|
|
292
|
+
max-height: 216px;
|
|
293
|
+
overflow: hidden;
|
|
294
|
+
border-radius: var(--nuraly-timepicker-local-border-radius);
|
|
295
|
+
background: var(--nuraly-timepicker-local-background-color);
|
|
296
|
+
padding: 4px 0;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.time-picker__column {
|
|
300
|
+
flex: 1;
|
|
301
|
+
border-right: 1px solid rgba(0, 0, 0, 0.06);
|
|
302
|
+
background: transparent;
|
|
303
|
+
overflow: hidden;
|
|
304
|
+
position: relative;
|
|
305
|
+
min-width: 60px;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.time-picker__column:last-child {
|
|
309
|
+
border-right: none;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
.time-picker__column-list {
|
|
313
|
+
max-height: 216px;
|
|
314
|
+
overflow-y: scroll;
|
|
315
|
+
overflow-x: hidden;
|
|
316
|
+
scrollbar-width: thin;
|
|
317
|
+
scrollbar-color: rgba(0, 0, 0, 0.06) transparent;
|
|
318
|
+
/* Custom scrollbar styling to match modern design */
|
|
319
|
+
padding: 4px 2px;
|
|
320
|
+
scroll-behavior: smooth;
|
|
321
|
+
/* Force scrollbar to always be visible */
|
|
322
|
+
-webkit-overflow-scrolling: touch;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.time-picker__column-list::-webkit-scrollbar {
|
|
326
|
+
width: 6px;
|
|
327
|
+
/* Always show scrollbar */
|
|
328
|
+
-webkit-appearance: none;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.time-picker__column-list::-webkit-scrollbar-track {
|
|
332
|
+
background: rgba(0, 0, 0, 0.04);
|
|
333
|
+
margin: 8px 0;
|
|
334
|
+
border-radius: var(--nuraly-timepicker-local-border-radius-sm);
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
.time-picker__column-list::-webkit-scrollbar-thumb {
|
|
338
|
+
background-color: rgba(0, 0, 0, 0.2);
|
|
339
|
+
border-radius: var(--nuraly-timepicker-local-border-radius-sm);
|
|
340
|
+
transition: background-color 0.2s ease;
|
|
341
|
+
/* Ensure thumb is always visible */
|
|
342
|
+
min-height: 20px;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.time-picker__column-list::-webkit-scrollbar-thumb:hover {
|
|
346
|
+
background-color: rgba(0, 0, 0, 0.3);
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
.time-picker__column-list {
|
|
350
|
+
scrollbar-width: thin;
|
|
351
|
+
scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.04);
|
|
352
|
+
scroll-behavior: smooth;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
.time-picker__column-item {
|
|
356
|
+
display: flex;
|
|
357
|
+
align-items: center;
|
|
358
|
+
justify-content: center;
|
|
359
|
+
padding: 4px 8px;
|
|
360
|
+
color: var(--nuraly-timepicker-local-text-color);
|
|
361
|
+
font-size: var(--nuraly-timepicker-local-font-size);
|
|
362
|
+
font-weight: var(--nuraly-timepicker-local-font-weight);
|
|
363
|
+
cursor: pointer;
|
|
364
|
+
transition: all 0.2s ease-in-out;
|
|
365
|
+
border-radius: var(--nuraly-timepicker-local-border-radius);
|
|
366
|
+
position: relative;
|
|
367
|
+
user-select: none;
|
|
368
|
+
line-height: var(--nuraly-timepicker-local-line-height);
|
|
369
|
+
min-height: 28px;
|
|
370
|
+
margin: 1px 2px;
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
.time-picker__column-item:hover {
|
|
374
|
+
background-color: var(--nuraly-timepicker-local-control-item-bg-hover);
|
|
375
|
+
color: var(--nuraly-timepicker-local-primary-color);
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.time-picker__column-item:active {
|
|
379
|
+
background-color: var(--nuraly-timepicker-local-control-item-bg-active);
|
|
380
|
+
color: var(--nuraly-timepicker-local-primary-color);
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
.time-picker__column-item--selected {
|
|
384
|
+
background-color: var(--nuraly-timepicker-local-control-item-bg-active);
|
|
385
|
+
color: var(--nuraly-timepicker-local-primary-color);
|
|
386
|
+
font-weight: 600;
|
|
387
|
+
border-radius: var(--nuraly-timepicker-local-border-radius);
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
.time-picker__column-item--selected:hover {
|
|
391
|
+
background-color: var(--nuraly-timepicker-local-control-item-bg-active);
|
|
392
|
+
color: var(--nuraly-timepicker-local-primary-color);
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
.time-picker__column-item--focused {
|
|
396
|
+
background-color: var(--nuraly-timepicker-local-control-item-bg-hover);
|
|
397
|
+
outline: 2px solid var(--nuraly-timepicker-local-focus-color);
|
|
398
|
+
outline-offset: -2px;
|
|
399
|
+
border-radius: var(--nuraly-timepicker-local-border-radius);
|
|
400
|
+
color: var(--nuraly-timepicker-local-primary-color);
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
.time-picker__column-item--disabled {
|
|
404
|
+
opacity: 0.4;
|
|
405
|
+
cursor: not-allowed;
|
|
406
|
+
color: var(--timepicker-text-color-disabled);
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
.time-picker__column-item--disabled:hover {
|
|
410
|
+
background-color: transparent;
|
|
411
|
+
color: var(--timepicker-text-color-disabled);
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
.time-picker__dropdown--top {
|
|
415
|
+
top: auto;
|
|
416
|
+
bottom: 100%;
|
|
417
|
+
margin-top: 0;
|
|
418
|
+
margin-bottom: 4px;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
.time-picker__clock-container {
|
|
422
|
+
padding: 12px;
|
|
423
|
+
display: flex;
|
|
424
|
+
flex-direction: column;
|
|
425
|
+
gap: 12px;
|
|
426
|
+
background: var(--timepicker-background-color);
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
.time-picker__digital-inputs {
|
|
430
|
+
display: flex;
|
|
431
|
+
align-items: center;
|
|
432
|
+
gap: 8px;
|
|
433
|
+
justify-content: center;
|
|
434
|
+
padding: 8px 12px;
|
|
435
|
+
border-bottom: 1px solid var(--timepicker-border-color);
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
.time-picker__time-input {
|
|
439
|
+
width: 56px;
|
|
440
|
+
height: 32px;
|
|
441
|
+
text-align: center;
|
|
442
|
+
padding: 4px 8px;
|
|
443
|
+
border: 1px solid var(--timepicker-border-color);
|
|
444
|
+
border-radius: var(--timepicker-border-radius);
|
|
445
|
+
font-size: 14px;
|
|
446
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
447
|
+
color: var(--timepicker-text-color);
|
|
448
|
+
background-color: var(--timepicker-background-color);
|
|
449
|
+
transition: all 0.3s;
|
|
450
|
+
outline: none;
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
.time-picker__time-input:hover {
|
|
454
|
+
border-color: var(--timepicker-primary-color-hover);
|
|
455
|
+
}
|
|
456
|
+
|
|
457
|
+
.time-picker__time-input:focus {
|
|
458
|
+
border-color: var(--timepicker-primary-color);
|
|
459
|
+
box-shadow: 0 0 0 2px var(--timepicker-primary-color-active);
|
|
460
|
+
}
|
|
461
|
+
|
|
462
|
+
.time-picker__separator {
|
|
463
|
+
font-weight: 600;
|
|
464
|
+
color: var(--timepicker-text-color);
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
.time-picker__period-toggle {
|
|
468
|
+
display: flex;
|
|
469
|
+
flex-direction: column;
|
|
470
|
+
border: 1px solid var(--timepicker-border-color);
|
|
471
|
+
border-radius: var(--timepicker-border-radius);
|
|
472
|
+
overflow: hidden;
|
|
473
|
+
margin-left: 8px;
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
.time-picker__period-button {
|
|
477
|
+
background: var(--timepicker-background-color);
|
|
478
|
+
border: none;
|
|
479
|
+
padding: 6px 12px;
|
|
480
|
+
font-size: 12px;
|
|
481
|
+
color: var(--timepicker-text-color);
|
|
482
|
+
cursor: pointer;
|
|
483
|
+
transition: all 0.3s;
|
|
484
|
+
min-width: 44px;
|
|
485
|
+
height: 24px;
|
|
486
|
+
display: flex;
|
|
487
|
+
align-items: center;
|
|
488
|
+
justify-content: center;
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
.time-picker__period-button:hover {
|
|
492
|
+
background-color: var(--timepicker-item-hover-bg);
|
|
493
|
+
color: var(--timepicker-text-color);
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
.time-picker__period-button--active {
|
|
497
|
+
background-color: var(--timepicker-primary-color);
|
|
498
|
+
color: #fff;
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
.time-picker__period-button + .time-picker__period-button {
|
|
502
|
+
border-top: 1px solid var(--timepicker-border-color);
|
|
503
|
+
}
|
|
504
|
+
|
|
505
|
+
.time-picker__clock {
|
|
506
|
+
width: var(--timepicker-clock-size);
|
|
507
|
+
height: var(--timepicker-clock-size);
|
|
508
|
+
border: 1px solid var(--timepicker-border-color);
|
|
509
|
+
border-radius: 50%;
|
|
510
|
+
background-color: var(--timepicker-background-color);
|
|
511
|
+
position: relative;
|
|
512
|
+
margin: 0 auto;
|
|
513
|
+
user-select: none;
|
|
514
|
+
}
|
|
515
|
+
|
|
516
|
+
.time-picker__clock-face {
|
|
517
|
+
width: 100%;
|
|
518
|
+
height: 100%;
|
|
519
|
+
position: relative;
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
.time-picker__clock-number {
|
|
523
|
+
position: absolute;
|
|
524
|
+
color: var(--timepicker-text-color);
|
|
525
|
+
font-size: 14px;
|
|
526
|
+
font-weight: 400;
|
|
527
|
+
width: 24px;
|
|
528
|
+
height: 24px;
|
|
529
|
+
display: flex;
|
|
530
|
+
align-items: center;
|
|
531
|
+
justify-content: center;
|
|
532
|
+
cursor: pointer;
|
|
533
|
+
border-radius: 50%;
|
|
534
|
+
transition: all 0.3s;
|
|
535
|
+
transform: translate(-50%, -50%);
|
|
536
|
+
}
|
|
537
|
+
|
|
538
|
+
.time-picker__clock-number:hover {
|
|
539
|
+
background-color: var(--timepicker-item-hover-bg);
|
|
540
|
+
color: var(--timepicker-text-color);
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
.time-picker__clock-number--selected {
|
|
544
|
+
background-color: var(--timepicker-primary-color);
|
|
545
|
+
color: #fff;
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
.time-picker__clock-hand {
|
|
549
|
+
position: absolute;
|
|
550
|
+
background-color: var(--timepicker-primary-color);
|
|
551
|
+
transform-origin: bottom center;
|
|
552
|
+
border-radius: 2px 2px 0 0;
|
|
553
|
+
}
|
|
554
|
+
|
|
555
|
+
.time-picker__clock-center {
|
|
556
|
+
position: absolute;
|
|
557
|
+
top: 50%;
|
|
558
|
+
left: 50%;
|
|
559
|
+
transform: translate(-50%, -50%);
|
|
560
|
+
width: 6px;
|
|
561
|
+
height: 6px;
|
|
562
|
+
background-color: var(--timepicker-primary-color);
|
|
563
|
+
border-radius: 50%;
|
|
564
|
+
z-index: 10;
|
|
565
|
+
}
|
|
566
|
+
|
|
567
|
+
.time-picker__mode-buttons {
|
|
568
|
+
display: flex;
|
|
569
|
+
gap: 8px;
|
|
570
|
+
justify-content: center;
|
|
571
|
+
margin-bottom: 8px;
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
.time-picker__mode-button {
|
|
575
|
+
padding: 6px 16px;
|
|
576
|
+
border: 1px solid var(--timepicker-border-color);
|
|
577
|
+
background: var(--timepicker-background-color);
|
|
578
|
+
color: var(--timepicker-text-color);
|
|
579
|
+
border-radius: var(--timepicker-border-radius);
|
|
580
|
+
cursor: pointer;
|
|
581
|
+
font-size: 14px;
|
|
582
|
+
transition: all 0.3s;
|
|
583
|
+
outline: none;
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
.time-picker__mode-button:hover {
|
|
587
|
+
background-color: var(--timepicker-item-hover-bg);
|
|
588
|
+
border-color: var(--timepicker-primary-color-hover);
|
|
589
|
+
}
|
|
590
|
+
|
|
591
|
+
.time-picker__mode-button--active {
|
|
592
|
+
background-color: var(--timepicker-primary-color);
|
|
593
|
+
color: #fff;
|
|
594
|
+
border-color: var(--timepicker-primary-color);
|
|
595
|
+
}
|
|
596
|
+
|
|
597
|
+
.time-picker__actions {
|
|
598
|
+
display: flex;
|
|
599
|
+
gap: 8px;
|
|
600
|
+
justify-content: flex-end;
|
|
601
|
+
padding: 8px 12px;
|
|
602
|
+
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
|
603
|
+
background: var(--timepicker-background-color);
|
|
604
|
+
border-bottom-left-radius: 8px;
|
|
605
|
+
border-bottom-right-radius: 8px;
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
/* Style nr-button components in actions */
|
|
609
|
+
.time-picker__actions nr-button {
|
|
610
|
+
border-radius: var(--nuraly-timepicker-local-border-radius);
|
|
611
|
+
font-weight: 400;
|
|
612
|
+
font-size: 14px;
|
|
613
|
+
height: 28px;
|
|
614
|
+
}
|
|
615
|
+
|
|
616
|
+
|
|
617
|
+
|
|
618
|
+
.time-picker__label {
|
|
619
|
+
display: block;
|
|
620
|
+
margin-bottom: 8px;
|
|
621
|
+
font-weight: 400;
|
|
622
|
+
color: var(--timepicker-text-color);
|
|
623
|
+
font-size: 14px;
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
.time-picker__helper-text {
|
|
627
|
+
font-size: 14px;
|
|
628
|
+
margin-top: 4px;
|
|
629
|
+
color: var(--timepicker-text-color-secondary);
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
.time-picker__helper-text--error {
|
|
633
|
+
color: var(--timepicker-error-color);
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
/* Size variants */
|
|
637
|
+
:host([size="small"]) {
|
|
638
|
+
--timepicker-height: 32px;
|
|
639
|
+
--timepicker-font-size: 12px;
|
|
640
|
+
--timepicker-padding: 4px 8px;
|
|
641
|
+
--timepicker-clock-size: 240px;
|
|
642
|
+
}
|
|
643
|
+
|
|
644
|
+
:host([size="large"]) {
|
|
645
|
+
--timepicker-height: 48px;
|
|
646
|
+
--timepicker-font-size: 16px;
|
|
647
|
+
--timepicker-padding: 12px 16px;
|
|
648
|
+
--timepicker-clock-size: 320px;
|
|
649
|
+
}
|
|
650
|
+
|
|
651
|
+
/* Variant styles */
|
|
652
|
+
:host([variant="outlined"]) .time-picker__input {
|
|
653
|
+
background-color: transparent;
|
|
654
|
+
}
|
|
655
|
+
|
|
656
|
+
:host([variant="filled"]) .time-picker__input {
|
|
657
|
+
border: none;
|
|
658
|
+
background-color: var(--timepicker-border-color)33;
|
|
659
|
+
border-bottom: 2px solid var(--timepicker-border-color);
|
|
660
|
+
border-radius: var(--timepicker-border-radius) var(--timepicker-border-radius) 0 0;
|
|
661
|
+
}
|
|
662
|
+
|
|
663
|
+
:host([variant="filled"]) .time-picker__input:focus {
|
|
664
|
+
border-bottom-color: var(--timepicker-focus-color);
|
|
665
|
+
box-shadow: none;
|
|
666
|
+
}
|
|
667
|
+
|
|
668
|
+
/* Disabled state */
|
|
669
|
+
:host([disabled]) .time-picker {
|
|
670
|
+
pointer-events: none;
|
|
671
|
+
opacity: 0.6;
|
|
672
|
+
}
|
|
673
|
+
|
|
674
|
+
/* Animation classes */
|
|
675
|
+
.time-picker__dropdown {
|
|
676
|
+
opacity: 0;
|
|
677
|
+
transform: translateY(-8px);
|
|
678
|
+
transition: opacity 0.2s, transform 0.2s;
|
|
679
|
+
}
|
|
680
|
+
|
|
681
|
+
.time-picker__dropdown--open {
|
|
682
|
+
opacity: 1;
|
|
683
|
+
transform: translateY(0);
|
|
684
|
+
}
|
|
685
|
+
|
|
686
|
+
/* Hide scrollbars on time inputs */
|
|
687
|
+
.time-picker__time-input::-webkit-outer-spin-button,
|
|
688
|
+
.time-picker__time-input::-webkit-inner-spin-button {
|
|
689
|
+
-webkit-appearance: none;
|
|
690
|
+
margin: 0;
|
|
691
|
+
}
|
|
692
|
+
|
|
693
|
+
.time-picker__time-input[type="number"] {
|
|
694
|
+
-moz-appearance: textfield;
|
|
695
|
+
}
|
|
696
|
+
|
|
697
|
+
/* Responsive adjustments */
|
|
698
|
+
@media (max-width: 480px) {
|
|
699
|
+
.time-picker__clock {
|
|
700
|
+
--timepicker-clock-size: 240px;
|
|
701
|
+
}
|
|
702
|
+
|
|
703
|
+
.time-picker__dropdown {
|
|
704
|
+
left: 50%;
|
|
705
|
+
transform: translateX(-50%);
|
|
706
|
+
width: 90vw;
|
|
707
|
+
max-width: 320px;
|
|
708
|
+
}
|
|
709
|
+
}
|
|
710
|
+
`;var V=function(e,i,t,r){for(var o,a=arguments.length,c=a<3?i:null===r?r=Object.getOwnPropertyDescriptor(i,t):r,l=e.length-1;l>=0;l--)(o=e[l])&&(c=(a<3?o(c):a>3?o(i,t,c):o(i,t))||c);return a>3&&c&&Object.defineProperty(i,t,c),c};let F=class extends(n(i)){constructor(){super(),this.value="",this.name="",this.placeholder="Select time",this.format=p.TwentyFourHour,this.showSeconds=!1,this.disabled=!1,this.readonly=!1,this.required=!1,this.helperText="",this.label="",this.size="medium",this.variant="outlined",this.placement=k.Bottom,this.scrollBehavior="instant",this.inputValue="",this.state=h.Default,this.validationMessage="",this.dropdownController=new s(this),this.selectionController=new D(this),this.validationController=new j(this),this.formattingController=new U(this)}connectedCallback(){super.connectedCallback(),this.updateConstraints(),this.value&&this.setTimeFromValue(this.value),this.addEventListener("click",this.handleComponentClick.bind(this)),document.addEventListener("click",this.handleDocumentClick.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleDocumentClick.bind(this))}updated(e){super.updated(e),e.has("value")&&this.value!==this.inputValue&&(this.setTimeFromValue(this.value),this.dropdownController.isOpen&&setTimeout((()=>{this.scrollToSelectedTime()}),50)),this.shouldUpdateConstraints(e)&&this.updateConstraints(),this.setupDropdownElements()}setupDropdownElements(){var e,i;const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".time-picker__dropdown"),r=null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelector(".time-picker__input-wrapper");t&&r&&this.dropdownController.setElements(t,r)}render(){const e={"time-picker":!0,"time-picker--open":this.dropdownController.isOpen,"time-picker--disabled":this.disabled,"time-picker--readonly":this.readonly,"time-picker--error":this.state===h.Error};return t`
|
|
711
|
+
<div class="${l(e)}" data-theme="${this.currentTheme}" part="wrapper">
|
|
712
|
+
${this.renderLabel()}
|
|
713
|
+
${this.renderInput()}
|
|
714
|
+
${this.renderDropdown()}
|
|
715
|
+
${this.renderHelperText()}
|
|
716
|
+
</div>
|
|
717
|
+
`}open(){this.dropdownController.open(),setTimeout((()=>{this.scrollToSelectedTime()}),50)}close(){this.dropdownController.close()}clear(){this.value="",this.inputValue="",this.selectionController.clearSelection()}setToNow(){const e=N.getCurrentTime();this.selectionController.selectTime(e),this.updateInputValue(),this.dropdownController.isOpen&&setTimeout((()=>{this.scrollToSelectedTime()}),10)}validate(){const e=this.selectionController.getSelectedTime();return!e||this.validationController.validateConstraints(e)}validateTime(e){return this.validationController.validateConstraints(e)}isHourValid(e,i){const t=Object.assign(Object.assign({},i),{hours:e});return this.validateTime(t)}isMinuteValid(e,i){const t=Object.assign(Object.assign({},i),{minutes:e});return this.validateTime(t)}isSecondValid(e,i){const t=Object.assign(Object.assign({},i),{seconds:e});return this.validateTime(t)}renderLabel(){return this.label?t`
|
|
718
|
+
<label class="time-picker__label" part="label" for="time-input">
|
|
719
|
+
${this.label}
|
|
720
|
+
${this.required?t`<span class="time-picker__required">*</span>`:r}
|
|
721
|
+
</label>
|
|
722
|
+
`:r}renderInput(){const e=this.getFormatPlaceholder();return t`
|
|
723
|
+
<div class="time-picker__input-wrapper" part="input-wrapper">
|
|
724
|
+
<nr-input
|
|
725
|
+
id="time-input"
|
|
726
|
+
part="input"
|
|
727
|
+
type="calendar"
|
|
728
|
+
.value="${this.inputValue}"
|
|
729
|
+
placeholder="${this.placeholder||e}"
|
|
730
|
+
?disabled="${this.disabled}"
|
|
731
|
+
?readonly="${!1}"
|
|
732
|
+
?required="${this.required}"
|
|
733
|
+
.state="${this.state===h.Error?"error":"default"}"
|
|
734
|
+
@click="${this.handleInputClick}"
|
|
735
|
+
@nr-input="${this.handleInputChange}"
|
|
736
|
+
@nr-blur="${this.handleInputBlur}"
|
|
737
|
+
>
|
|
738
|
+
</nr-input>
|
|
739
|
+
</div>
|
|
740
|
+
`}renderDropdown(){return this.dropdownController.isOpen?t`
|
|
741
|
+
<div
|
|
742
|
+
class="time-picker__dropdown time-picker__dropdown--open"
|
|
743
|
+
part="dropdown"
|
|
744
|
+
@click="${this.handleDropdownClick}"
|
|
745
|
+
>
|
|
746
|
+
${this.renderColumnPicker()}
|
|
747
|
+
${this.renderActions()}
|
|
748
|
+
</div>
|
|
749
|
+
`:r}renderColumnPicker(){const e=this.selectionController.getSelectedTime(),i=this.getConfig();return t`
|
|
750
|
+
<div class="time-picker__columns" part="columns">
|
|
751
|
+
${this.renderHourColumn(e,i)}
|
|
752
|
+
${this.renderMinuteColumn(e)}
|
|
753
|
+
${this.showSeconds?this.renderSecondColumn(e):r}
|
|
754
|
+
</div>
|
|
755
|
+
`}renderHourColumn(e,i){const r=i.format===p.TwelveHour?Array.from({length:12},((e,i)=>0===i?12:i)):Array.from({length:24},((e,i)=>i)),o=e&&i.format===p.TwelveHour?this.formattingController.formatHours(e.hours):null==e?void 0:e.hours;return t`
|
|
756
|
+
<div class="time-picker__column" part="hour-column">
|
|
757
|
+
<div class="time-picker__column-list">
|
|
758
|
+
${r.map((r=>{let a=r;if(i.format===p.TwelveHour&&e){const i=this.formattingController.getPeriod(e.hours);a=12===r?i===v.AM?0:12:i===v.AM?r:r+12}const c=e||x,l=this.isHourValid(a,c);return t`
|
|
759
|
+
<div
|
|
760
|
+
class="time-picker__column-item ${!!e&&r===o?"time-picker__column-item--selected":""} ${l?"":"time-picker__column-item--disabled"}"
|
|
761
|
+
@click="${l?()=>this.handleHourSelect(r,i.format):null}"
|
|
762
|
+
>
|
|
763
|
+
${r.toString().padStart(2,"0")}
|
|
764
|
+
</div>
|
|
765
|
+
`}))}
|
|
766
|
+
</div>
|
|
767
|
+
</div>
|
|
768
|
+
`}renderMinuteColumn(e){const i=Array.from({length:60},((e,i)=>i));return t`
|
|
769
|
+
<div class="time-picker__column" part="minute-column">
|
|
770
|
+
<div class="time-picker__column-list">
|
|
771
|
+
${i.map((i=>{const r=e||x,o=this.isMinuteValid(i,r),a=!!e&&i===e.minutes;return t`
|
|
772
|
+
<div
|
|
773
|
+
class="time-picker__column-item ${a?"time-picker__column-item--selected":""} ${o?"":"time-picker__column-item--disabled"}"
|
|
774
|
+
@click="${o?()=>this.handleMinuteSelect(i):null}"
|
|
775
|
+
>
|
|
776
|
+
${i.toString().padStart(2,"0")}
|
|
777
|
+
</div>
|
|
778
|
+
`}))}
|
|
779
|
+
</div>
|
|
780
|
+
</div>
|
|
781
|
+
`}renderSecondColumn(e){const i=Array.from({length:60},((e,i)=>i));return t`
|
|
782
|
+
<div class="time-picker__column" part="second-column">
|
|
783
|
+
<div class="time-picker__column-list">
|
|
784
|
+
${i.map((i=>{const r=e||x,o=this.isSecondValid(i,r),a=!!e&&i===e.seconds;return t`
|
|
785
|
+
<div
|
|
786
|
+
class="time-picker__column-item ${a?"time-picker__column-item--selected":""} ${o?"":"time-picker__column-item--disabled"}"
|
|
787
|
+
@click="${o?()=>this.handleSecondSelect(i):null}"
|
|
788
|
+
>
|
|
789
|
+
${i.toString().padStart(2,"0")}
|
|
790
|
+
</div>
|
|
791
|
+
`}))}
|
|
792
|
+
</div>
|
|
793
|
+
</div>
|
|
794
|
+
`}renderActions(){return t`
|
|
795
|
+
<div class="time-picker__actions">
|
|
796
|
+
<nr-button
|
|
797
|
+
type="ghost"
|
|
798
|
+
size="small"
|
|
799
|
+
@click="${()=>this.setToNow()}"
|
|
800
|
+
>
|
|
801
|
+
Now
|
|
802
|
+
</nr-button>
|
|
803
|
+
<nr-button
|
|
804
|
+
type="primary"
|
|
805
|
+
size="small"
|
|
806
|
+
@click="${this.handleOkClick}"
|
|
807
|
+
>
|
|
808
|
+
OK
|
|
809
|
+
</nr-button>
|
|
810
|
+
</div>
|
|
811
|
+
`}renderHelperText(){const e=this.validationMessage||this.helperText;if(!e)return r;const i=this.state===h.Error||!!this.validationMessage;return t`
|
|
812
|
+
<div class="time-picker__helper-text ${i?"time-picker__helper-text--error":""}" part="helper-text">
|
|
813
|
+
${e}
|
|
814
|
+
</div>
|
|
815
|
+
`}scrollToSelectedTime(){try{const e=this.selectionController.getSelectedTime();if(!e)return;this.scrollToSelectedHour(e),this.scrollToSelectedMinute(e),this.showSeconds&&this.scrollToSelectedSecond(e)}catch(e){console.warn("Failed to scroll to selected time:",e)}}scrollToSelectedHour(e){var i;const t=this.getConfig(),r=null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelector(".time-picker__column:first-child .time-picker__column-list");if(!r)return;let o;o=t.format===p.TwelveHour?0===e.hours||12===e.hours?12:e.hours>12?e.hours-12:e.hours:e.hours;const a=r.querySelector(`.time-picker__column-item:nth-child(${this.getHourIndex(o,t.format)+1})`);a&&a.scrollIntoView({behavior:this.scrollBehavior,block:"center",inline:"nearest"})}scrollToSelectedMinute(e){var i;const t=null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelector(".time-picker__column:nth-child(2) .time-picker__column-list");if(!t)return;const r=t.querySelector(`.time-picker__column-item:nth-child(${e.minutes+1})`);r&&r.scrollIntoView({behavior:this.scrollBehavior,block:"center",inline:"nearest"})}scrollToSelectedSecond(e){var i;const t=null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelector(".time-picker__column:nth-child(3) .time-picker__column-list");if(!t)return;const r=t.querySelector(`.time-picker__column-item:nth-child(${e.seconds+1})`);r&&r.scrollIntoView({behavior:this.scrollBehavior,block:"center",inline:"nearest"})}getHourIndex(e,i){return i===p.TwelveHour&&12===e?0:e}handleComponentClick(e){e.stopPropagation()}handleDocumentClick(e){var i;if(this.dropdownController.isOpen){const t=e.target;this.contains(t)||(null===(i=this.shadowRoot)||void 0===i?void 0:i.contains(t))||(this.dropdownController.close(),this.dispatchEvent(new CustomEvent(_.BLUR,{bubbles:!0,composed:!0})))}}handleDropdownClick(e){e.stopPropagation()}handleOkClick(){this.dropdownController.close();const e=this.selectionController.getSelectedTime();e&&this.dispatchEvent(new CustomEvent(_.TIME_CHANGE,{bubbles:!0,composed:!0,detail:{value:this.value,time:e}})),this.dispatchEvent(new CustomEvent(_.BLUR,{bubbles:!0,composed:!0}))}handleInputBlur(){setTimeout((()=>{var e;const i=document.activeElement;this.contains(i)||(null===(e=this.shadowRoot)||void 0===e?void 0:e.contains(i))||this.dispatchEvent(new CustomEvent(_.BLUR,{bubbles:!0,composed:!0}))}),150)}handleInputClick(e){e.preventDefault(),e.stopPropagation(),this.disabled||this.dropdownController.isOpen||(this.dropdownController.open(),setTimeout((()=>{this.scrollToSelectedTime()}),50),this.dispatchEvent(new CustomEvent(_.FOCUS,{bubbles:!0,composed:!0})))}handleInputChange(e){var i;if(this.disabled)return;const t=(null===(i=e.detail)||void 0===i?void 0:i.value)||"";this.inputValue=t;const r=this.formattingController.parseInputValue(t);r?this.validateTime(r)?(this.selectionController.selectTime(r),this.value=this.formattingController.formatForInput(r),this.state=h.Default,this.dropdownController.isOpen&&setTimeout((()=>{this.scrollToSelectedTime()}),10),this.dispatchEvent(new CustomEvent(_.TIME_CHANGE,{bubbles:!0,composed:!0,detail:{value:this.value,time:r}}))):this.state=h.Error:""===t?(this.selectionController.clearSelection(),this.value="",this.state=h.Default,this.dispatchEvent(new CustomEvent(_.TIME_CHANGE,{bubbles:!0,composed:!0,detail:{value:"",time:null}}))):this.state=h.Error,this.requestUpdate()}handleHourSelect(e,i){const t=this.selectionController.getSelectedTime()||N.getCurrentTime();let r=e;if(i===p.TwelveHour){const i=this.formattingController.getPeriod(t.hours);r=12===e?i===v.AM?0:12:i===v.AM?e:e+12}const o=Object.assign(Object.assign({},t),{hours:r});this.validateTime(o)&&(this.selectionController.selectTime(o),this.updateInputValue())}handleMinuteSelect(e){const i=this.selectionController.getSelectedTime()||N.getCurrentTime(),t=Object.assign(Object.assign({},i),{minutes:e});this.validateTime(t)&&(this.selectionController.selectTime(t),this.updateInputValue())}handleSecondSelect(e){const i=this.selectionController.getSelectedTime()||N.getCurrentTime(),t=Object.assign(Object.assign({},i),{seconds:e});this.validateTime(t)&&(this.selectionController.selectTime(t),this.updateInputValue())}shouldUpdateConstraints(e){return e.has("minTime")||e.has("maxTime")||e.has("disabledTimes")||e.has("enabledTimes")}updateConstraints(){const e={minTime:this.minTime,maxTime:this.maxTime,disabledTimes:this.disabledTimes||[],enabledTimes:this.enabledTimes};this.validationController.setConstraints(e)}setTimeFromValue(e){this.selectionController.setTimeFromString(e)&&(this.inputValue=e,this.requestUpdate(),this.dropdownController.isOpen&&setTimeout((()=>{this.scrollToSelectedTime()}),50))}updateInputValue(){const e=this.selectionController.getSelectedTime();if(e){const i=this.formattingController.formatForDisplay(e);this.inputValue=i,this.value=i,this.dispatchEvent(new CustomEvent(_.TIME_CHANGE,{detail:{value:i,time:e},bubbles:!0,composed:!0}))}}getConfig(){return{format:this.format,showSeconds:this.showSeconds,step:{hours:b.One,minutes:b.One,seconds:b.One},use12HourClock:this.format===p.TwelveHour,minuteInterval:1,secondInterval:1}}getCurrentTime(){return this.selectionController.getSelectedTime()||x}setTime(e){this.selectionController.selectTime(e),this.updateInputValue(),this.dropdownController.isOpen&&setTimeout((()=>{this.scrollToSelectedTime()}),10)}formatTime(e){return this.formattingController.formatForDisplay(e)}getFormatPlaceholder(){return this.format===p.TwelveHour?this.showSeconds?"HH:MM:SS AM/PM":"HH:MM AM/PM":this.showSeconds?"HH:MM:SS":"HH:MM"}parseTime(e){return this.formattingController.parseInputValue(e)}};F.styles=[R],V([o({type:String})],F.prototype,"value",void 0),V([o({type:String})],F.prototype,"name",void 0),V([o({type:String})],F.prototype,"placeholder",void 0),V([o({type:String})],F.prototype,"format",void 0),V([o({type:Boolean,attribute:"show-seconds"})],F.prototype,"showSeconds",void 0),V([o({type:Boolean})],F.prototype,"disabled",void 0),V([o({type:Boolean})],F.prototype,"readonly",void 0),V([o({type:Boolean})],F.prototype,"required",void 0),V([o({type:String,attribute:"min-time"})],F.prototype,"minTime",void 0),V([o({type:String,attribute:"max-time"})],F.prototype,"maxTime",void 0),V([o({type:Array,attribute:"disabled-times"})],F.prototype,"disabledTimes",void 0),V([o({type:Array,attribute:"enabled-times"})],F.prototype,"enabledTimes",void 0),V([o({type:String,attribute:"helper-text"})],F.prototype,"helperText",void 0),V([o({type:String})],F.prototype,"label",void 0),V([o({type:String})],F.prototype,"size",void 0),V([o({type:String})],F.prototype,"variant",void 0),V([o({type:String})],F.prototype,"placement",void 0),V([o({type:String,attribute:"scroll-behavior"})],F.prototype,"scrollBehavior",void 0),V([a()],F.prototype,"inputValue",void 0),V([a()],F.prototype,"state",void 0),V([a()],F.prototype,"validationMessage",void 0),F=V([c("nr-timepicker")],F);export{E as CLOCK_CONTAINER_CLASS,A as CLOCK_FACE,$ as DEFAULT_12H_TIME_FORMAT,M as DEFAULT_12H_TIME_FORMAT_WITH_SECONDS,z as DEFAULT_STEPS,w as DEFAULT_TIME_CONFIG,T as DEFAULT_TIME_FORMAT,y as DEFAULT_TIME_FORMATS,f as DEFAULT_TIME_FORMATS_WITH_SECONDS,S as DEFAULT_TIME_FORMAT_WITH_SECONDS,x as EMPTY_TIME_VALUE,F as NrTimePickerElement,H as TIME_BOUNDARIES,C as TIME_INPUT_FIELD_ID,I as TIME_PICKER_CLASSES,g as TIME_PICKER_CONSTANTS,_ as TIME_PICKER_EVENTS,O as TIME_VALIDATION_PATTERNS,p as TimeFormat,v as TimePeriod,U as TimePickerFormattingController,m as TimePickerMode,k as TimePickerPlacement,D as TimePickerSelectionController,u as TimePickerSize,h as TimePickerState,j as TimePickerValidationController,d as TimePickerVariant,b as TimeStep,N as TimeUtils};
|