@ukho/admiralty-core 5.7.0 → 5.7.1--canary.1c83fee.0
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/dist/admiralty/admiralty.esm.js +1 -1
- package/dist/admiralty/p-7a4f7bcf.entry.js +1 -0
- package/dist/cjs/admiralty-input.cjs.entry.js +1 -1
- package/dist/collection/components/input/input.css +72 -0
- package/dist/components/admiralty-input.js +1 -1
- package/dist/esm/admiralty-input.entry.js +1 -1
- package/docs/docs.json +6 -1
- package/package.json +2 -2
- package/themes/default.css +10 -0
- package/dist/admiralty/p-3d31f5fa.entry.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as a}from"./p-uO9JpdnI.js";export{s as setNonce}from"./p-uO9JpdnI.js";import{g as i}from"./p-DQuL1Twl.js";(()=>{const a=import.meta.url,i={};return""!==a&&(i.resourcesUrl=new URL(".",a).href),e(i)})().then((async e=>(await i(),a([["p-c55f0b84",[[2,"admiralty-autocomplete",{autoselect:[4],cssNamespace:[1,"css-namespace"],displayMenu:[1,"display-menu"],minLength:[2,"min-length"],name:[1],placeholder:[1],confirmOnBlur:[4,"confirm-on-blur"],showNoOptionsFound:[4,"show-no-options-found"],showAllValues:[4,"show-all-values"],required:[4],assistiveHint:[1,"assistive-hint"],menuAttributes:[8,"menu-attributes"],inputClasses:[1,"input-classes"],menuClasses:[1,"menu-classes"],iconName:[1,"icon-name"],label:[1],hint:[1],invalid:[4],invalidMessage:[1,"invalid-message"],disabled:[4],value:[1025],filterFunction:[16],focused:[32],hovered:[32],menuOpen:[32],options:[32],option:[32],query:[32],validChoiceMade:[32],selected:[32],ariaHint:[32]},null,{value:[{onValueChange:0}],focused:[{onFocusedChange:0}]}]]],["p-
|
|
1
|
+
import{p as e,b as a}from"./p-uO9JpdnI.js";export{s as setNonce}from"./p-uO9JpdnI.js";import{g as i}from"./p-DQuL1Twl.js";(()=>{const a=import.meta.url,i={};return""!==a&&(i.resourcesUrl=new URL(".",a).href),e(i)})().then((async e=>(await i(),a([["p-c55f0b84",[[2,"admiralty-autocomplete",{autoselect:[4],cssNamespace:[1,"css-namespace"],displayMenu:[1,"display-menu"],minLength:[2,"min-length"],name:[1],placeholder:[1],confirmOnBlur:[4,"confirm-on-blur"],showNoOptionsFound:[4,"show-no-options-found"],showAllValues:[4,"show-all-values"],required:[4],assistiveHint:[1,"assistive-hint"],menuAttributes:[8,"menu-attributes"],inputClasses:[1,"input-classes"],menuClasses:[1,"menu-classes"],iconName:[1,"icon-name"],label:[1],hint:[1],invalid:[4],invalidMessage:[1,"invalid-message"],disabled:[4],value:[1025],filterFunction:[16],focused:[32],hovered:[32],menuOpen:[32],options:[32],option:[32],query:[32],validChoiceMade:[32],selected:[32],ariaHint:[32]},null,{value:[{onValueChange:0}],focused:[{onFocusedChange:0}]}]]],["p-7a4f7bcf",[[2,"admiralty-input",{name:[1],label:[1],hint:[1],disabled:[4],type:[1],placeholder:[1],width:[2],required:[4],invalid:[4],invalidMessage:[1,"invalid-message"],autocomplete:[1],value:[1032]},null,{value:[{valueChanged:0}]}]]],["p-482b572b",[[262,"admiralty-select",{disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],hint:[1],label:[1],width:[2],value:[1032]},null,{value:[{valueChanged:0}]}]]],["p-c4bd7f40",[[2,"admiralty-textarea",{label:[1],hint:[1],width:[2],disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],value:[1032]},null,{value:[{valueChanged:0}]}]]],["p-7ddb717d",[[262,"admiralty-radio-group",{name:[1],label:[1],hint:[1],disabled:[4],value:[1032],displayVertical:[4,"display-vertical"],invalid:[4],invalidMessage:[1,"invalid-message"]},null,{value:[{valueChanged:0}],invalid:[{invalidChanged:0}]}]]],["p-192995ac",[[262,"admiralty-colour-block",{width:[2],height:[2],heading:[1],colour:[1],href:[1],linkText:[1,"link-text"],accessibleLabel:[1,"aria-label"],suppressRedirect:[4,"suppress-redirect"],enableCardEvent:[4,"enable-card-event"],actionText:[1,"action-text"]}]]],["p-20b2151f",[[262,"admiralty-error-summary",{heading:[1]}]]],["p-a39054a1",[[2,"admiralty-file-input",{label:[1],multiple:[4],invalid:[4],invalidMessage:[1,"invalid-message"],files:[32]}]]],["p-ec54cb7a",[[262,"admiralty-filter",{filterTitle:[1,"filter-title"]}]]],["p-04ba8a2d",[[262,"admiralty-filter-group",{groupTitle:[1,"group-title"]}]]],["p-0f9c7b77",[[2,"admiralty-paginator",{pages:[2],currentPage:[2,"current-page"],label:[1]}]]],["p-c52cb40d",[[262,"admiralty-breadcrumb",{active:[4],first:[4],href:[1]}]]],["p-2062b7be",[[262,"admiralty-header",{headerTitle:[1,"header-title"],headerTitleUrl:[1,"header-title-url"],logoLinkUrl:[1,"logo-link-url"],logoImgUrl:[1,"logo-img-url"],logoAltText:[1,"logo-alt-text"],mobileMenuOpen:[32],displayHamburger:[32]}]]],["p-58bca1c3",[[2,"admiralty-icon-side-bar-item",{expanded:[1540],icon:[1],href:[1],itemText:[1,"item-text"],suppressRedirect:[4,"suppress-redirect"],active:[1540]},null,{active:[{handleActiveChange:0}]}]]],["p-db616d14",[[2,"admiralty-pill",{text:[1],number:[1],label:[1],colour:[1],selected:[4]}]]],["p-d5010bfb",[[2,"admiralty-progress-bar",{label:[1],progression:[2],error:[4],progressionValue:[32]},null,{progression:[{progressionChanged:0}]}]]],["p-93a26092",[[262,"admiralty-progress-tracker",{allowBackNavigation:[4,"allow-back-navigation"],allowForwardNavigation:[4,"allow-forward-navigation"],focusedStepIndex:[32],currentSteps:[32]}]]],["p-4e2170cb",[[262,"admiralty-read-more",{heading:[1],expanded:[32]}]]],["p-db29c807",[[262,"admiralty-text-side-bar-item",{variant:[1],expanded:[1540],icon:[1],href:[1],itemText:[1,"item-text"],suppressRedirect:[4,"suppress-redirect"],active:[1540]},null,{active:[{handleActiveChange:0}]}]]],["p-3e5e29cc",[[2,"admiralty-theme-toggle",{theme:[1537],disabled:[516],ariaLabel:[1,"aria-label"]},null,{theme:[{themeChanged:0}]}]]],["p-d6e3e5c5",[[2,"admiralty-autocomplete-option",{value:[8]}]]],["p-d00f1751",[[262,"admiralty-breadcrumbs"]]],["p-90430106",[[262,"admiralty-card",{heading:[1]}]]],["p-a2937f36",[[2,"admiralty-checkbox",{checkboxRight:[4,"checkbox-right"],disabled:[4],name:[1],checked:[1540],value:[8],labelText:[1,"label-text"],labelHidden:[4,"label-hidden"]},null,{checked:[{checkedChanged:0}]}]]],["p-89f763b3",[[262,"admiralty-footer",{variant:[1],imageLink:[1,"image-link"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],text:[1],hasSlotContent:[32]},[[2,"slotchange","handleSlotChange"]]]]],["p-87c27c26",[[262,"admiralty-header-menu-item",{menuTitle:[1,"menu-title"],active:[4]}]]],["p-532749db",[[262,"admiralty-header-menu-link",{menuTitle:[1,"menu-title"],active:[4],href:[1],suppressRedirect:[4,"suppress-redirect"]}]]],["p-686e38b1",[[2,"admiralty-header-profile",{isSignedIn:[4,"is-signed-in"],signedInText:[1,"signed-in-text"],signInOnly:[4,"sign-in-only"]}]]],["p-3658cd6a",[[262,"admiralty-header-sub-menu-item",{menuTitle:[1,"menu-title"],href:[1],suppressRedirect:[4,"suppress-redirect"]}]]],["p-f5a798eb",[[2,"admiralty-hr"]]],["p-c8616e41",[[262,"admiralty-icon-side-bar",{label:[1],showLogo:[4,"show-logo"],logoImgUrl:[1,"logo-img-url"],iconSideBarWidth:[1,"icon-side-bar-width"]}]]],["p-b48b53dc",[[260,"admiralty-icon-side-bar-wrapper",null,[[0,"iconSideBarItemClick","onIconSideBarItemSelected"]]]]],["p-250bab5c",[[262,"admiralty-link",{href:[1],newTab:[4,"new-tab"]}]]],["p-a9145bb7",[[262,"admiralty-modal-dialog",{heading:[1],label:[1],description:[1],show:[4]}]]],["p-18ab59bf",[[260,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["p-1eb11a17",[[2,"admiralty-phase-banner",{phase:[1],link:[1]}]]],["p-1119a9fb",[[262,"admiralty-progress-tracker-step",{stepId:[1,"step-id"],stepTitle:[1,"step-title"],status:[1],summary:[1]}]]],["p-f9250d7c",[[262,"admiralty-radio",{name:[1],value:[1025],disabled:[4],checked:[1028],invalid:[4],buttonTabindex:[32],setButtonTabindex:[64]},null,{value:[{valueChanged:0}]}]]],["p-102034c5",[[262,"admiralty-side-nav",{label:[1]}]]],["p-2be7a680",[[2,"admiralty-side-nav-item",{sideNavItemId:[1,"side-nav-item-id"],headingTitle:[1,"heading-title"],navActive:[4,"nav-active"]}]]],["p-19608026",[[260,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["p-3a04a729",[[2,"admiralty-skeleton",{height:[1],width:[1],radius:[1],noAnimation:[1540,"no-animation"]}]]],["p-2f210e36",[[2,"admiralty-skip-link",{href:[1]}]]],["p-d5f03bc3",[[262,"admiralty-tab",{label:[1],tabLabelId:[1,"tab-label-id"],tabContentId:[1,"tab-content-id"]}]]],["p-a3337198",[[262,"admiralty-tab-group",{selectedIndex:[1026,"selected-index"]}]]],["p-58202d6a",[[262,"admiralty-table",{caption:[1]}]]],["p-0f31fa76",[[262,"admiralty-table-body"]]],["p-2e0dbbb1",[[262,"admiralty-table-cell"]]],["p-cb1a4f5a",[[262,"admiralty-table-header"]]],["p-7f5b8da9",[[262,"admiralty-table-header-cell"]]],["p-644ca5b1",[[262,"admiralty-table-row"]]],["p-8d2f5af2",[[262,"admiralty-text-side-bar",{label:[1],showLogo:[4,"show-logo"],logoImgUrl:[1,"logo-img-url"],textSideBarWidth:[1,"text-side-bar-width"]}]]],["p-bf8ff732",[[260,"admiralty-text-side-bar-wrapper",null,[[0,"textSideBarItemClick","ontextSideBarItemSelected"]]]]],["p-4b7de380",[[262,"admiralty-tooltip",{for:[1],placement:[513],alignment:[513]}]]],["p-7840dfc9",[[1,"admiralty-icon",{name:[1],size:[8]}]]],["p-8b915148",[[262,"admiralty-dialogue",{type:[1],heading:[1],sectionRole:[1,"section-role"]}]]],["p-851bc34c",[[262,"admiralty-expansion",{heading:[1],expanded:[1540],alignHeadingRight:[4,"align-heading-right"],hideBorder:[4,"hide-border"]}]]],["p-ba081c09",[[262,"admiralty-button",{variant:[1],icon:[1],disabled:[516],borderless:[4],type:[1],form:[1],name:[1],value:[1]}]]],["p-2129bcf8",[[262,"admiralty-hint",{disabled:[4]}],[262,"admiralty-label",{disabled:[4],for:[1]}],[262,"admiralty-input-invalid"]]]],e))));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,c as i,h as a,g as n}from"./p-uO9JpdnI.js";const r=class{constructor(a){t(this,a),this.admiraltyInput=i(this,"admiraltyInput"),this.admiraltyFocus=i(this,"admiraltyFocus"),this.admiraltyBlur=i(this,"admiraltyBlur"),this.internalId=++e,this.disabled=!1,this.type="text",this.required=!1,this.invalid=!1,this.autocomplete="off",this.value="",this.onInput=t=>{const i=t.target;i&&(this.value=i.value||"")},this.onBlur=t=>{this.admiraltyBlur.emit(t)},this.onFocus=t=>{this.admiraltyFocus.emit(t)}}valueChanged(){const t=this.nativeInput,i=this.getValue();t&&t.value!==i&&(t.value=i),this.admiraltyInput.emit({value:null==this.value?this.getValue():this.value.toString()})}getValue(){return"number"==typeof this.value?this.value.toString():(this.value||"").toString()}render(){const t=this.getValue(),i=""!=this.el.id?this.el.id:`admiralty-input-${this.internalId}`,n=`${i}-input`,r=`${i}-hint`,e=`${i}-error`;return a("div",{key:"91135c3eff6c04be294f1e46c418abe059a35b50",class:"text-input-container"},this.label?a("admiralty-label",{disabled:this.disabled,for:n},this.label):null,this.hint?a("admiralty-hint",{id:r,disabled:this.disabled},this.hint):null,a("input",Object.assign({key:"e792278ee37785e228fa6ed32c0c9bec12473b72",ref:t=>this.nativeInput=t,class:{disabled:this.disabled,invalid:this.invalid},disabled:this.disabled,id:n,name:this.name,type:this.type,value:t,onInput:this.onInput,onFocus:this.onFocus,onBlur:this.onBlur,placeholder:this.placeholder,autoComplete:this.autocomplete,required:this.required,style:{maxWidth:this.width?`${this.width}px`:null},"aria-invalid":this.invalid?"true":"false"},this.hint?{"aria-describedby":r+(this.invalid?" "+e:"")}:this.invalid?{"aria-describedby":e}:null)),a("admiralty-input-invalid",{key:"612dd61f0248fa5c5268ff72ff9618066e019fa3",id:e,style:Object.assign({},this.invalid&&this.invalidMessage?{}:{display:"none"})},this.invalidMessage))}get el(){return n(this)}static get watchers(){return{value:[{valueChanged:0}]}}};let e=0;r.style=".visually-hidden.sc-admiralty-input:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-input{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-input{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-input{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-input{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-input{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-input{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-input{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-input{display:none}}.text-input-container.sc-admiralty-input{display:flex;flex-direction:column}.text-input-container.sc-admiralty-input .input-wrapper.sc-admiralty-input{position:relative;display:flex;align-items:center}.text-input-container.sc-admiralty-input input.sc-admiralty-input{background-color:var(--admiralty-background-colour);border-color:var(--admiralty-text-colour);border-width:2px;border-style:solid;color:var(--admiralty-text-colour);font-size:var(--admiralty-input-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-input-font-weight, var(--admiralty-font-weight-normal));padding:var(--admiralty-input-padding, var(--admiralty-spacing-3));accent-color:var(--admiralty-text-colour)}.text-input-container.sc-admiralty-input input.sc-admiralty-input:focus{outline-offset:unset;outline:3px solid var(--admiralty-focus-colour);box-shadow:var(--admiralty-text-colour) inset 0 0 0 2px}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input{border-color:var(--admiralty-colour-danger)}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input:focus-visible{border-color:unset;outline:3px solid var(--admiralty-focus-colour)}.text-input-container.sc-admiralty-input input.disabled.sc-admiralty-input{color:var(--admiralty-disabled-colour);border-color:var(--admiralty-disabled-colour);background:var(--admiralty-background-colour)}.text-input-container.sc-admiralty-input input[type=date].sc-admiralty-input::-webkit-calendar-picker-indicator,.text-input-container.sc-admiralty-input input[type=time].sc-admiralty-input::-webkit-calendar-picker-indicator,.text-input-container.sc-admiralty-input input[type=time].sc-admiralty-input::-webkit-clear-button,.text-input-container.sc-admiralty-input input[type=time].sc-admiralty-input::-webkit-inner-spin-button,.text-input-container.sc-admiralty-input input[type=number].sc-admiralty-input::-webkit-inner-spin-button,.text-input-container.sc-admiralty-input input[type=number].sc-admiralty-input::-webkit-outer-spin-button{filter:var(--admiralty-input-native-icon-filter, none)}.text-input-container.sc-admiralty-input .password-toggle.sc-admiralty-input{position:absolute;right:12px;background:none;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;color:var(--admiralty-text-colour);transition:opacity 0.2s ease}.text-input-container.sc-admiralty-input .password-toggle.sc-admiralty-input:hover:not(:disabled){opacity:0.7}.text-input-container.sc-admiralty-input .password-toggle.sc-admiralty-input:focus{outline:2px solid var(--admiralty-focus-colour);outline-offset:2px}.text-input-container.sc-admiralty-input .password-toggle.sc-admiralty-input:disabled{cursor:not-allowed;opacity:0.5}.text-input-container.sc-admiralty-input .password-toggle.sc-admiralty-input admiralty-icon.sc-admiralty-input{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:inherit}.text-input-container body.admiralty-dark-mode.sc-admiralty-input-h input[type=number].sc-admiralty-input,body.admiralty-dark-mode .sc-admiralty-input-h input[type=number].sc-admiralty-input{color-scheme:dark}.text-input-container body.admiralty-dark-mode.sc-admiralty-input-h input[type=password].sc-admiralty-input,body.admiralty-dark-mode .sc-admiralty-input-h input[type=password].sc-admiralty-input{color-scheme:dark}.text-input-container body.admiralty-light-mode.sc-admiralty-input-h input[type=number].sc-admiralty-input,body.admiralty-light-mode .sc-admiralty-input-h input[type=number].sc-admiralty-input{color-scheme:light}.text-input-container body.admiralty-light-mode.sc-admiralty-input-h input[type=password].sc-admiralty-input,body.admiralty-light-mode .sc-admiralty-input-h input[type=password].sc-admiralty-input{color-scheme:light}@media (prefers-color-scheme: dark){.text-input-container body.sc-admiralty-input-h:not(.admiralty-light-mode):not(.admiralty-dark-mode) input[type=number].sc-admiralty-input,body:not(.admiralty-light-mode):not(.admiralty-dark-mode) .sc-admiralty-input-h input[type=number].sc-admiralty-input{color-scheme:dark}.text-input-container body.sc-admiralty-input-h:not(.admiralty-light-mode):not(.admiralty-dark-mode) input[type=password].sc-admiralty-input,body:not(.admiralty-light-mode):not(.admiralty-dark-mode) .sc-admiralty-input-h input[type=password].sc-admiralty-input{color-scheme:dark}}.text-input-container.sc-admiralty-input admiralty-input-invalid.sc-admiralty-input{margin-top:var(--admiralty-input-invalid-margin-top, 6px)}";export{r as admiralty_input}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-B8thWtVm.js');
|
|
4
4
|
|
|
5
|
-
const inputCss = () => `.visually-hidden.sc-admiralty-input:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-input{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-input{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-input{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-input{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-input{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-input{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-input{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-input{display:none}}.text-input-container.sc-admiralty-input{display:flex;flex-direction:column}.text-input-container.sc-admiralty-input input.sc-admiralty-input{background-color:var(--admiralty-background-colour);border-color:var(--admiralty-text-colour);border-width:2px;border-style:solid;color:var(--admiralty-text-colour);font-size:var(--admiralty-input-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-input-font-weight, var(--admiralty-font-weight-normal));padding:var(--admiralty-input-padding, var(--admiralty-spacing-3))}.text-input-container.sc-admiralty-input input.sc-admiralty-input:focus{outline-offset:unset;outline:3px solid var(--admiralty-focus-colour);box-shadow:var(--admiralty-text-colour) inset 0 0 0 2px}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input{border-color:var(--admiralty-colour-danger)}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input:focus-visible{border-color:unset;outline:3px solid var(--admiralty-focus-colour)}.text-input-container.sc-admiralty-input input.disabled.sc-admiralty-input{color:var(--admiralty-disabled-colour);border-color:var(--admiralty-disabled-colour);background:var(--admiralty-background-colour)}.text-input-container.sc-admiralty-input admiralty-input-invalid.sc-admiralty-input{margin-top:var(--admiralty-input-invalid-margin-top, 6px)}`;
|
|
5
|
+
const inputCss = () => `.visually-hidden.sc-admiralty-input:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-input{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-input{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-input{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-input{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-input{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-input{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-input{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-input{display:none}}.text-input-container.sc-admiralty-input{display:flex;flex-direction:column}.text-input-container.sc-admiralty-input .input-wrapper.sc-admiralty-input{position:relative;display:flex;align-items:center}.text-input-container.sc-admiralty-input input.sc-admiralty-input{background-color:var(--admiralty-background-colour);border-color:var(--admiralty-text-colour);border-width:2px;border-style:solid;color:var(--admiralty-text-colour);font-size:var(--admiralty-input-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-input-font-weight, var(--admiralty-font-weight-normal));padding:var(--admiralty-input-padding, var(--admiralty-spacing-3));accent-color:var(--admiralty-text-colour)}.text-input-container.sc-admiralty-input input.sc-admiralty-input:focus{outline-offset:unset;outline:3px solid var(--admiralty-focus-colour);box-shadow:var(--admiralty-text-colour) inset 0 0 0 2px}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input{border-color:var(--admiralty-colour-danger)}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input:focus-visible{border-color:unset;outline:3px solid var(--admiralty-focus-colour)}.text-input-container.sc-admiralty-input input.disabled.sc-admiralty-input{color:var(--admiralty-disabled-colour);border-color:var(--admiralty-disabled-colour);background:var(--admiralty-background-colour)}.text-input-container.sc-admiralty-input input[type=date].sc-admiralty-input::-webkit-calendar-picker-indicator,.text-input-container.sc-admiralty-input input[type=time].sc-admiralty-input::-webkit-calendar-picker-indicator,.text-input-container.sc-admiralty-input input[type=time].sc-admiralty-input::-webkit-clear-button,.text-input-container.sc-admiralty-input input[type=time].sc-admiralty-input::-webkit-inner-spin-button,.text-input-container.sc-admiralty-input input[type=number].sc-admiralty-input::-webkit-inner-spin-button,.text-input-container.sc-admiralty-input input[type=number].sc-admiralty-input::-webkit-outer-spin-button{filter:var(--admiralty-input-native-icon-filter, none)}.text-input-container.sc-admiralty-input .password-toggle.sc-admiralty-input{position:absolute;right:12px;background:none;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;color:var(--admiralty-text-colour);transition:opacity 0.2s ease}.text-input-container.sc-admiralty-input .password-toggle.sc-admiralty-input:hover:not(:disabled){opacity:0.7}.text-input-container.sc-admiralty-input .password-toggle.sc-admiralty-input:focus{outline:2px solid var(--admiralty-focus-colour);outline-offset:2px}.text-input-container.sc-admiralty-input .password-toggle.sc-admiralty-input:disabled{cursor:not-allowed;opacity:0.5}.text-input-container.sc-admiralty-input .password-toggle.sc-admiralty-input admiralty-icon.sc-admiralty-input{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:inherit}.text-input-container body.admiralty-dark-mode.sc-admiralty-input-h input[type=number].sc-admiralty-input,body.admiralty-dark-mode .sc-admiralty-input-h input[type=number].sc-admiralty-input{color-scheme:dark}.text-input-container body.admiralty-dark-mode.sc-admiralty-input-h input[type=password].sc-admiralty-input,body.admiralty-dark-mode .sc-admiralty-input-h input[type=password].sc-admiralty-input{color-scheme:dark}.text-input-container body.admiralty-light-mode.sc-admiralty-input-h input[type=number].sc-admiralty-input,body.admiralty-light-mode .sc-admiralty-input-h input[type=number].sc-admiralty-input{color-scheme:light}.text-input-container body.admiralty-light-mode.sc-admiralty-input-h input[type=password].sc-admiralty-input,body.admiralty-light-mode .sc-admiralty-input-h input[type=password].sc-admiralty-input{color-scheme:light}@media (prefers-color-scheme: dark){.text-input-container body.sc-admiralty-input-h:not(.admiralty-light-mode):not(.admiralty-dark-mode) input[type=number].sc-admiralty-input,body:not(.admiralty-light-mode):not(.admiralty-dark-mode) .sc-admiralty-input-h input[type=number].sc-admiralty-input{color-scheme:dark}.text-input-container body.sc-admiralty-input-h:not(.admiralty-light-mode):not(.admiralty-dark-mode) input[type=password].sc-admiralty-input,body:not(.admiralty-light-mode):not(.admiralty-dark-mode) .sc-admiralty-input-h input[type=password].sc-admiralty-input{color-scheme:dark}}.text-input-container.sc-admiralty-input admiralty-input-invalid.sc-admiralty-input{margin-top:var(--admiralty-input-invalid-margin-top, 6px)}`;
|
|
6
6
|
|
|
7
7
|
const InputComponent = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -65,11 +65,17 @@
|
|
|
65
65
|
|
|
66
66
|
* @prop --admiralty-input-padding: Padding for the input.
|
|
67
67
|
* @prop --admiralty-input-invalid-margin-top: Margin top for invalid input.
|
|
68
|
+
* @prop --admiralty-input-native-icon-filter: Filter applied to native date/time/number input icons.
|
|
68
69
|
**/
|
|
69
70
|
.text-input-container {
|
|
70
71
|
display: flex;
|
|
71
72
|
flex-direction: column;
|
|
72
73
|
}
|
|
74
|
+
.text-input-container .input-wrapper {
|
|
75
|
+
position: relative;
|
|
76
|
+
display: flex;
|
|
77
|
+
align-items: center;
|
|
78
|
+
}
|
|
73
79
|
.text-input-container input {
|
|
74
80
|
background-color: var(--admiralty-background-colour);
|
|
75
81
|
border-color: var(--admiralty-text-colour);
|
|
@@ -80,6 +86,7 @@
|
|
|
80
86
|
line-height: 24px;
|
|
81
87
|
font-weight: var(--admiralty-input-font-weight, var(--admiralty-font-weight-normal));
|
|
82
88
|
padding: var(--admiralty-input-padding, var(--admiralty-spacing-3));
|
|
89
|
+
accent-color: var(--admiralty-text-colour);
|
|
83
90
|
}
|
|
84
91
|
.text-input-container input:focus {
|
|
85
92
|
outline-offset: unset;
|
|
@@ -98,6 +105,71 @@
|
|
|
98
105
|
border-color: var(--admiralty-disabled-colour);
|
|
99
106
|
background: var(--admiralty-background-colour);
|
|
100
107
|
}
|
|
108
|
+
.text-input-container input[type=date]::-webkit-calendar-picker-indicator, .text-input-container input[type=time]::-webkit-calendar-picker-indicator, .text-input-container input[type=time]::-webkit-clear-button, .text-input-container input[type=time]::-webkit-inner-spin-button, .text-input-container input[type=number]::-webkit-inner-spin-button, .text-input-container input[type=number]::-webkit-outer-spin-button {
|
|
109
|
+
filter: var(--admiralty-input-native-icon-filter, none);
|
|
110
|
+
}
|
|
111
|
+
.text-input-container .password-toggle {
|
|
112
|
+
position: absolute;
|
|
113
|
+
right: 12px;
|
|
114
|
+
background: none;
|
|
115
|
+
border: none;
|
|
116
|
+
cursor: pointer;
|
|
117
|
+
padding: 8px;
|
|
118
|
+
display: flex;
|
|
119
|
+
align-items: center;
|
|
120
|
+
justify-content: center;
|
|
121
|
+
color: var(--admiralty-text-colour);
|
|
122
|
+
transition: opacity 0.2s ease;
|
|
123
|
+
}
|
|
124
|
+
.text-input-container .password-toggle:hover:not(:disabled) {
|
|
125
|
+
opacity: 0.7;
|
|
126
|
+
}
|
|
127
|
+
.text-input-container .password-toggle:focus {
|
|
128
|
+
outline: 2px solid var(--admiralty-focus-colour);
|
|
129
|
+
outline-offset: 2px;
|
|
130
|
+
}
|
|
131
|
+
.text-input-container .password-toggle:disabled {
|
|
132
|
+
cursor: not-allowed;
|
|
133
|
+
opacity: 0.5;
|
|
134
|
+
}
|
|
135
|
+
.text-input-container .password-toggle admiralty-icon {
|
|
136
|
+
width: 20px;
|
|
137
|
+
height: 20px;
|
|
138
|
+
display: flex;
|
|
139
|
+
align-items: center;
|
|
140
|
+
justify-content: center;
|
|
141
|
+
color: inherit;
|
|
142
|
+
}
|
|
143
|
+
.text-input-container {
|
|
144
|
+
/* Number spinner arrows use color-scheme (filter has no effect on OS-native spin buttons) */
|
|
145
|
+
/* Manual dark mode */
|
|
146
|
+
}
|
|
147
|
+
.text-input-container :host-context(body.admiralty-dark-mode) input[type=number] {
|
|
148
|
+
color-scheme: dark;
|
|
149
|
+
}
|
|
150
|
+
.text-input-container :host-context(body.admiralty-dark-mode) input[type=password] {
|
|
151
|
+
color-scheme: dark;
|
|
152
|
+
}
|
|
153
|
+
.text-input-container {
|
|
154
|
+
/* Manual light mode */
|
|
155
|
+
}
|
|
156
|
+
.text-input-container :host-context(body.admiralty-light-mode) input[type=number] {
|
|
157
|
+
color-scheme: light;
|
|
158
|
+
}
|
|
159
|
+
.text-input-container :host-context(body.admiralty-light-mode) input[type=password] {
|
|
160
|
+
color-scheme: light;
|
|
161
|
+
}
|
|
162
|
+
.text-input-container {
|
|
163
|
+
/* System dark mode, only when no manual override is set */
|
|
164
|
+
}
|
|
165
|
+
@media (prefers-color-scheme: dark) {
|
|
166
|
+
.text-input-container :host-context(body:not(.admiralty-light-mode):not(.admiralty-dark-mode)) input[type=number] {
|
|
167
|
+
color-scheme: dark;
|
|
168
|
+
}
|
|
169
|
+
.text-input-container :host-context(body:not(.admiralty-light-mode):not(.admiralty-dark-mode)) input[type=password] {
|
|
170
|
+
color-scheme: dark;
|
|
171
|
+
}
|
|
172
|
+
}
|
|
101
173
|
.text-input-container admiralty-input-invalid {
|
|
102
174
|
margin-top: var(--admiralty-input-invalid-margin-top, 6px);
|
|
103
175
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,H as i,c as a,h as n,t as e}from"./index.js";import{d as r}from"./p-Dklk_2EG.js";import{d
|
|
1
|
+
import{p as t,H as i,c as a,h as n,t as e}from"./index.js";import{d as r}from"./p-Dklk_2EG.js";import{d}from"./p-Dqovb5mf.js";import{d as l}from"./p-CYMsBgha.js";import{d as o}from"./p-DpKvOrAy.js";const s=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.admiraltyInput=a(this,"admiraltyInput"),this.admiraltyFocus=a(this,"admiraltyFocus"),this.admiraltyBlur=a(this,"admiraltyBlur"),this.internalId=++p,this.disabled=!1,this.type="text",this.required=!1,this.invalid=!1,this.autocomplete="off",this.value="",this.onInput=t=>{const i=t.target;i&&(this.value=i.value||"")},this.onBlur=t=>{this.admiraltyBlur.emit(t)},this.onFocus=t=>{this.admiraltyFocus.emit(t)}}valueChanged(){const t=this.nativeInput,i=this.getValue();t&&t.value!==i&&(t.value=i),this.admiraltyInput.emit({value:null==this.value?this.getValue():""+this.value})}getValue(){return"number"==typeof this.value?""+this.value:""+(this.value||"")}render(){const t=this.getValue(),i=""!=this.el.id?this.el.id:"admiralty-input-"+this.internalId,a=i+"-input",e=i+"-hint",r=i+"-error";return n("div",{key:"91135c3eff6c04be294f1e46c418abe059a35b50",class:"text-input-container"},this.label?n("admiralty-label",{disabled:this.disabled,for:a},this.label):null,this.hint?n("admiralty-hint",{id:e,disabled:this.disabled},this.hint):null,n("input",Object.assign({key:"e792278ee37785e228fa6ed32c0c9bec12473b72",ref:t=>this.nativeInput=t,class:{disabled:this.disabled,invalid:this.invalid},disabled:this.disabled,id:a,name:this.name,type:this.type,value:t,onInput:this.onInput,onFocus:this.onFocus,onBlur:this.onBlur,placeholder:this.placeholder,autoComplete:this.autocomplete,required:this.required,style:{maxWidth:this.width?this.width+"px":null},"aria-invalid":this.invalid?"true":"false"},this.hint?{"aria-describedby":e+(this.invalid?" "+r:"")}:this.invalid?{"aria-describedby":r}:null)),n("admiralty-input-invalid",{key:"612dd61f0248fa5c5268ff72ff9618066e019fa3",id:r,style:Object.assign({},this.invalid&&this.invalidMessage?{}:{display:"none"})},this.invalidMessage))}get el(){return this}static get watchers(){return{value:[{valueChanged:0}]}}static get style(){return".visually-hidden.sc-admiralty-input:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-input{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-input{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-input{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-input{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-input{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-input{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-input{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-input{display:none}}.text-input-container.sc-admiralty-input{display:flex;flex-direction:column}.text-input-container.sc-admiralty-input .input-wrapper.sc-admiralty-input{position:relative;display:flex;align-items:center}.text-input-container.sc-admiralty-input input.sc-admiralty-input{background-color:var(--admiralty-background-colour);border-color:var(--admiralty-text-colour);border-width:2px;border-style:solid;color:var(--admiralty-text-colour);font-size:var(--admiralty-input-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-input-font-weight, var(--admiralty-font-weight-normal));padding:var(--admiralty-input-padding, var(--admiralty-spacing-3));accent-color:var(--admiralty-text-colour)}.text-input-container.sc-admiralty-input input.sc-admiralty-input:focus{outline-offset:unset;outline:3px solid var(--admiralty-focus-colour);box-shadow:var(--admiralty-text-colour) inset 0 0 0 2px}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input{border-color:var(--admiralty-colour-danger)}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input:focus-visible{border-color:unset;outline:3px solid var(--admiralty-focus-colour)}.text-input-container.sc-admiralty-input input.disabled.sc-admiralty-input{color:var(--admiralty-disabled-colour);border-color:var(--admiralty-disabled-colour);background:var(--admiralty-background-colour)}.text-input-container.sc-admiralty-input input[type=date].sc-admiralty-input::-webkit-calendar-picker-indicator,.text-input-container.sc-admiralty-input input[type=time].sc-admiralty-input::-webkit-calendar-picker-indicator,.text-input-container.sc-admiralty-input input[type=time].sc-admiralty-input::-webkit-clear-button,.text-input-container.sc-admiralty-input input[type=time].sc-admiralty-input::-webkit-inner-spin-button,.text-input-container.sc-admiralty-input input[type=number].sc-admiralty-input::-webkit-inner-spin-button,.text-input-container.sc-admiralty-input input[type=number].sc-admiralty-input::-webkit-outer-spin-button{filter:var(--admiralty-input-native-icon-filter, none)}.text-input-container.sc-admiralty-input .password-toggle.sc-admiralty-input{position:absolute;right:12px;background:none;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;color:var(--admiralty-text-colour);transition:opacity 0.2s ease}.text-input-container.sc-admiralty-input .password-toggle.sc-admiralty-input:hover:not(:disabled){opacity:0.7}.text-input-container.sc-admiralty-input .password-toggle.sc-admiralty-input:focus{outline:2px solid var(--admiralty-focus-colour);outline-offset:2px}.text-input-container.sc-admiralty-input .password-toggle.sc-admiralty-input:disabled{cursor:not-allowed;opacity:0.5}.text-input-container.sc-admiralty-input .password-toggle.sc-admiralty-input admiralty-icon.sc-admiralty-input{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:inherit}.text-input-container body.admiralty-dark-mode.sc-admiralty-input-h input[type=number].sc-admiralty-input,body.admiralty-dark-mode .sc-admiralty-input-h input[type=number].sc-admiralty-input{color-scheme:dark}.text-input-container body.admiralty-dark-mode.sc-admiralty-input-h input[type=password].sc-admiralty-input,body.admiralty-dark-mode .sc-admiralty-input-h input[type=password].sc-admiralty-input{color-scheme:dark}.text-input-container body.admiralty-light-mode.sc-admiralty-input-h input[type=number].sc-admiralty-input,body.admiralty-light-mode .sc-admiralty-input-h input[type=number].sc-admiralty-input{color-scheme:light}.text-input-container body.admiralty-light-mode.sc-admiralty-input-h input[type=password].sc-admiralty-input,body.admiralty-light-mode .sc-admiralty-input-h input[type=password].sc-admiralty-input{color-scheme:light}@media (prefers-color-scheme: dark){.text-input-container body.sc-admiralty-input-h:not(.admiralty-light-mode):not(.admiralty-dark-mode) input[type=number].sc-admiralty-input,body:not(.admiralty-light-mode):not(.admiralty-dark-mode) .sc-admiralty-input-h input[type=number].sc-admiralty-input{color-scheme:dark}.text-input-container body.sc-admiralty-input-h:not(.admiralty-light-mode):not(.admiralty-dark-mode) input[type=password].sc-admiralty-input,body:not(.admiralty-light-mode):not(.admiralty-dark-mode) .sc-admiralty-input-h input[type=password].sc-admiralty-input{color-scheme:dark}}.text-input-container.sc-admiralty-input admiralty-input-invalid.sc-admiralty-input{margin-top:var(--admiralty-input-invalid-margin-top, 6px)}"}},[2,"admiralty-input",{name:[1],label:[1],hint:[1],disabled:[4],type:[1],placeholder:[1],width:[2],required:[4],invalid:[4],invalidMessage:[1,"invalid-message"],autocomplete:[1],value:[1032]},void 0,{value:[{valueChanged:0}]}]);let p=0;const m=s,u=function(){"undefined"!=typeof customElements&&["admiralty-input","admiralty-hint","admiralty-icon","admiralty-input-invalid","admiralty-label"].forEach((t=>{switch(t){case"admiralty-input":customElements.get(e(t))||customElements.define(e(t),s);break;case"admiralty-hint":customElements.get(e(t))||r();break;case"admiralty-icon":customElements.get(e(t))||d();break;case"admiralty-input-invalid":customElements.get(e(t))||l();break;case"admiralty-label":customElements.get(e(t))||o()}}))};export{m as AdmiraltyInput,u as defineCustomElement}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-uO9JpdnI.js';
|
|
2
2
|
|
|
3
|
-
const inputCss = () => `.visually-hidden.sc-admiralty-input:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-input{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-input{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-input{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-input{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-input{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-input{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-input{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-input{display:none}}.text-input-container.sc-admiralty-input{display:flex;flex-direction:column}.text-input-container.sc-admiralty-input input.sc-admiralty-input{background-color:var(--admiralty-background-colour);border-color:var(--admiralty-text-colour);border-width:2px;border-style:solid;color:var(--admiralty-text-colour);font-size:var(--admiralty-input-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-input-font-weight, var(--admiralty-font-weight-normal));padding:var(--admiralty-input-padding, var(--admiralty-spacing-3))}.text-input-container.sc-admiralty-input input.sc-admiralty-input:focus{outline-offset:unset;outline:3px solid var(--admiralty-focus-colour);box-shadow:var(--admiralty-text-colour) inset 0 0 0 2px}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input{border-color:var(--admiralty-colour-danger)}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input:focus-visible{border-color:unset;outline:3px solid var(--admiralty-focus-colour)}.text-input-container.sc-admiralty-input input.disabled.sc-admiralty-input{color:var(--admiralty-disabled-colour);border-color:var(--admiralty-disabled-colour);background:var(--admiralty-background-colour)}.text-input-container.sc-admiralty-input admiralty-input-invalid.sc-admiralty-input{margin-top:var(--admiralty-input-invalid-margin-top, 6px)}`;
|
|
3
|
+
const inputCss = () => `.visually-hidden.sc-admiralty-input:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-input{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-input{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-input{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-input{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-input{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-input{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-input{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-input{display:none}}.text-input-container.sc-admiralty-input{display:flex;flex-direction:column}.text-input-container.sc-admiralty-input .input-wrapper.sc-admiralty-input{position:relative;display:flex;align-items:center}.text-input-container.sc-admiralty-input input.sc-admiralty-input{background-color:var(--admiralty-background-colour);border-color:var(--admiralty-text-colour);border-width:2px;border-style:solid;color:var(--admiralty-text-colour);font-size:var(--admiralty-input-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-input-font-weight, var(--admiralty-font-weight-normal));padding:var(--admiralty-input-padding, var(--admiralty-spacing-3));accent-color:var(--admiralty-text-colour)}.text-input-container.sc-admiralty-input input.sc-admiralty-input:focus{outline-offset:unset;outline:3px solid var(--admiralty-focus-colour);box-shadow:var(--admiralty-text-colour) inset 0 0 0 2px}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input{border-color:var(--admiralty-colour-danger)}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input:focus-visible{border-color:unset;outline:3px solid var(--admiralty-focus-colour)}.text-input-container.sc-admiralty-input input.disabled.sc-admiralty-input{color:var(--admiralty-disabled-colour);border-color:var(--admiralty-disabled-colour);background:var(--admiralty-background-colour)}.text-input-container.sc-admiralty-input input[type=date].sc-admiralty-input::-webkit-calendar-picker-indicator,.text-input-container.sc-admiralty-input input[type=time].sc-admiralty-input::-webkit-calendar-picker-indicator,.text-input-container.sc-admiralty-input input[type=time].sc-admiralty-input::-webkit-clear-button,.text-input-container.sc-admiralty-input input[type=time].sc-admiralty-input::-webkit-inner-spin-button,.text-input-container.sc-admiralty-input input[type=number].sc-admiralty-input::-webkit-inner-spin-button,.text-input-container.sc-admiralty-input input[type=number].sc-admiralty-input::-webkit-outer-spin-button{filter:var(--admiralty-input-native-icon-filter, none)}.text-input-container.sc-admiralty-input .password-toggle.sc-admiralty-input{position:absolute;right:12px;background:none;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;color:var(--admiralty-text-colour);transition:opacity 0.2s ease}.text-input-container.sc-admiralty-input .password-toggle.sc-admiralty-input:hover:not(:disabled){opacity:0.7}.text-input-container.sc-admiralty-input .password-toggle.sc-admiralty-input:focus{outline:2px solid var(--admiralty-focus-colour);outline-offset:2px}.text-input-container.sc-admiralty-input .password-toggle.sc-admiralty-input:disabled{cursor:not-allowed;opacity:0.5}.text-input-container.sc-admiralty-input .password-toggle.sc-admiralty-input admiralty-icon.sc-admiralty-input{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:inherit}.text-input-container body.admiralty-dark-mode.sc-admiralty-input-h input[type=number].sc-admiralty-input,body.admiralty-dark-mode .sc-admiralty-input-h input[type=number].sc-admiralty-input{color-scheme:dark}.text-input-container body.admiralty-dark-mode.sc-admiralty-input-h input[type=password].sc-admiralty-input,body.admiralty-dark-mode .sc-admiralty-input-h input[type=password].sc-admiralty-input{color-scheme:dark}.text-input-container body.admiralty-light-mode.sc-admiralty-input-h input[type=number].sc-admiralty-input,body.admiralty-light-mode .sc-admiralty-input-h input[type=number].sc-admiralty-input{color-scheme:light}.text-input-container body.admiralty-light-mode.sc-admiralty-input-h input[type=password].sc-admiralty-input,body.admiralty-light-mode .sc-admiralty-input-h input[type=password].sc-admiralty-input{color-scheme:light}@media (prefers-color-scheme: dark){.text-input-container body.sc-admiralty-input-h:not(.admiralty-light-mode):not(.admiralty-dark-mode) input[type=number].sc-admiralty-input,body:not(.admiralty-light-mode):not(.admiralty-dark-mode) .sc-admiralty-input-h input[type=number].sc-admiralty-input{color-scheme:dark}.text-input-container body.sc-admiralty-input-h:not(.admiralty-light-mode):not(.admiralty-dark-mode) input[type=password].sc-admiralty-input,body:not(.admiralty-light-mode):not(.admiralty-dark-mode) .sc-admiralty-input-h input[type=password].sc-admiralty-input{color-scheme:dark}}.text-input-container.sc-admiralty-input admiralty-input-invalid.sc-admiralty-input{margin-top:var(--admiralty-input-invalid-margin-top, 6px)}`;
|
|
4
4
|
|
|
5
5
|
const InputComponent = class {
|
|
6
6
|
constructor(hostRef) {
|
package/docs/docs.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2026-06-
|
|
2
|
+
"timestamp": "2026-06-26T10:11:11",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.43.3",
|
|
@@ -5196,6 +5196,11 @@
|
|
|
5196
5196
|
"annotation": "prop",
|
|
5197
5197
|
"docs": "Margin top for invalid input."
|
|
5198
5198
|
},
|
|
5199
|
+
{
|
|
5200
|
+
"name": "--admiralty-input-native-icon-filter",
|
|
5201
|
+
"annotation": "prop",
|
|
5202
|
+
"docs": "Filter applied to native date/time/number input icons."
|
|
5203
|
+
},
|
|
5199
5204
|
{
|
|
5200
5205
|
"name": "--admiralty-input-padding",
|
|
5201
5206
|
"annotation": "prop",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ukho/admiralty-core",
|
|
3
|
-
"version": "5.7.0",
|
|
3
|
+
"version": "5.7.1--canary.1c83fee.0",
|
|
4
4
|
"description": "Stencil Component Starter",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"license": "MIT",
|
|
71
71
|
"url": "https://github.com/UKHO/admiralty-design-system",
|
|
72
72
|
"repository": "git://github.com/UKHO/admiralty-design-system.git",
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "1c83fee1a8e8e3dd601dffb695664cae9f1bc248"
|
|
74
74
|
}
|
package/themes/default.css
CHANGED
|
@@ -97,6 +97,8 @@
|
|
|
97
97
|
--colour-block-blue-text-colour: #ffffff;
|
|
98
98
|
--colour-block-bright-blue-text-colour: #09315b;
|
|
99
99
|
|
|
100
|
+
--admiralty-input-native-icon-filter: none;
|
|
101
|
+
|
|
100
102
|
/** Typographic Scale **/
|
|
101
103
|
--admiralty-font-size--3: 0.688rem;
|
|
102
104
|
--admiralty-font-size--2: 0.75rem;
|
|
@@ -228,6 +230,8 @@
|
|
|
228
230
|
--colour-block-blue-background-colour: #2b323a;
|
|
229
231
|
--colour-block-blue-text-colour: #ffffff;
|
|
230
232
|
--colour-block-bright-blue-text-colour: #ffffff;
|
|
233
|
+
|
|
234
|
+
--admiralty-input-native-icon-filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg);
|
|
231
235
|
}
|
|
232
236
|
}
|
|
233
237
|
|
|
@@ -329,6 +333,8 @@ body.admiralty-light-mode {
|
|
|
329
333
|
--colour-block-blue-background-colour: #09315b;
|
|
330
334
|
--colour-block-blue-text-colour: #ffffff;
|
|
331
335
|
--colour-block-bright-blue-text-colour: #09315b;
|
|
336
|
+
|
|
337
|
+
--admiralty-input-native-icon-filter: none;
|
|
332
338
|
}
|
|
333
339
|
|
|
334
340
|
/** Theme Toggle: Force Dark Mode **/
|
|
@@ -425,6 +431,8 @@ body.admiralty-dark-mode {
|
|
|
425
431
|
--colour-block-blue-background-colour: #2b323a;
|
|
426
432
|
--colour-block-blue-text-colour: #ffffff;
|
|
427
433
|
--colour-block-bright-blue-text-colour: #ffffff;
|
|
434
|
+
|
|
435
|
+
--admiralty-input-native-icon-filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg);
|
|
428
436
|
}
|
|
429
437
|
|
|
430
438
|
/** Theme Toggle: Prevent double dark mode application when theme toggle is in use **/
|
|
@@ -519,6 +527,8 @@ body.admiralty-dark-mode {
|
|
|
519
527
|
--admiralty-card-heading-text-colour: #ffffff;
|
|
520
528
|
--admiralty-card-heading-border-colour: #404040;
|
|
521
529
|
|
|
530
|
+
--admiralty-input-native-icon-filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg);
|
|
531
|
+
|
|
522
532
|
--colour-block-blue-background-colour: #2b323a;
|
|
523
533
|
--colour-block-blue-text-colour: #ffffff;
|
|
524
534
|
--colour-block-bright-blue-text-colour: #ffffff;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,c as i,h as a,g as n}from"./p-uO9JpdnI.js";const r=class{constructor(a){t(this,a),this.admiraltyInput=i(this,"admiraltyInput"),this.admiraltyFocus=i(this,"admiraltyFocus"),this.admiraltyBlur=i(this,"admiraltyBlur"),this.internalId=++s,this.disabled=!1,this.type="text",this.required=!1,this.invalid=!1,this.autocomplete="off",this.value="",this.onInput=t=>{const i=t.target;i&&(this.value=i.value||"")},this.onBlur=t=>{this.admiraltyBlur.emit(t)},this.onFocus=t=>{this.admiraltyFocus.emit(t)}}valueChanged(){const t=this.nativeInput,i=this.getValue();t&&t.value!==i&&(t.value=i),this.admiraltyInput.emit({value:null==this.value?this.getValue():this.value.toString()})}getValue(){return"number"==typeof this.value?this.value.toString():(this.value||"").toString()}render(){const t=this.getValue(),i=""!=this.el.id?this.el.id:`admiralty-input-${this.internalId}`,n=`${i}-input`,r=`${i}-hint`,s=`${i}-error`;return a("div",{key:"91135c3eff6c04be294f1e46c418abe059a35b50",class:"text-input-container"},this.label?a("admiralty-label",{disabled:this.disabled,for:n},this.label):null,this.hint?a("admiralty-hint",{id:r,disabled:this.disabled},this.hint):null,a("input",Object.assign({key:"e792278ee37785e228fa6ed32c0c9bec12473b72",ref:t=>this.nativeInput=t,class:{disabled:this.disabled,invalid:this.invalid},disabled:this.disabled,id:n,name:this.name,type:this.type,value:t,onInput:this.onInput,onFocus:this.onFocus,onBlur:this.onBlur,placeholder:this.placeholder,autoComplete:this.autocomplete,required:this.required,style:{maxWidth:this.width?`${this.width}px`:null},"aria-invalid":this.invalid?"true":"false"},this.hint?{"aria-describedby":r+(this.invalid?" "+s:"")}:this.invalid?{"aria-describedby":s}:null)),a("admiralty-input-invalid",{key:"612dd61f0248fa5c5268ff72ff9618066e019fa3",id:s,style:Object.assign({},this.invalid&&this.invalidMessage?{}:{display:"none"})},this.invalidMessage))}get el(){return n(this)}static get watchers(){return{value:[{valueChanged:0}]}}};let s=0;r.style=".visually-hidden.sc-admiralty-input:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-input{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-input{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-input{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-input{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-input{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-input{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-input{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-input{display:none}}.text-input-container.sc-admiralty-input{display:flex;flex-direction:column}.text-input-container.sc-admiralty-input input.sc-admiralty-input{background-color:var(--admiralty-background-colour);border-color:var(--admiralty-text-colour);border-width:2px;border-style:solid;color:var(--admiralty-text-colour);font-size:var(--admiralty-input-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-input-font-weight, var(--admiralty-font-weight-normal));padding:var(--admiralty-input-padding, var(--admiralty-spacing-3))}.text-input-container.sc-admiralty-input input.sc-admiralty-input:focus{outline-offset:unset;outline:3px solid var(--admiralty-focus-colour);box-shadow:var(--admiralty-text-colour) inset 0 0 0 2px}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input{border-color:var(--admiralty-colour-danger)}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input:focus-visible{border-color:unset;outline:3px solid var(--admiralty-focus-colour)}.text-input-container.sc-admiralty-input input.disabled.sc-admiralty-input{color:var(--admiralty-disabled-colour);border-color:var(--admiralty-disabled-colour);background:var(--admiralty-background-colour)}.text-input-container.sc-admiralty-input admiralty-input-invalid.sc-admiralty-input{margin-top:var(--admiralty-input-invalid-margin-top, 6px)}";export{r as admiralty_input}
|