<eg-org-select
placeholder="{{field.label}}..."
i18n-placeholder
+ labelText = "{{field.label}}"
+ labelClass = "visually-hidden"
domId="{{idPrefix}}-{{field.name}}"
persistKey="{{field.persistKey}}"
[limitPerms]="modePerms[mode]"
</div>
</div>
<div class="pt-2">
- <eg-org-select [applyOrgId]="col.filterValue"
+ <eg-org-select labelClass="visually-hidden" [applyOrgId]="col.filterValue"
(onChange)="col.filterValue = $event; applyFilterCommon(col)"
[disabled]="col.filterInputDisabled || context.dataSource.requestingData"
i18n-placeholder placeholder="Enter library to filter by" #ousel></eg-org-select>
<form class="d-flex align-items-start" [formGroup]="familySelectors">
- <span class="input-group-text">{{labelText}}</span>
- <eg-org-select [domId]="domId"
+ <label for="{{domId}}" class="input-group-text org-unit-select-label" i18n-labelText>{{labelText}}</label>
+ <eg-org-select [domId]="domId" labelSuppressed="true"
(onChange)="orgOnChange($event)"
[limitPerms]="limitPerms"
[applyOrgId]="selectedOrgId">
export class OrgFamilySelectComponent implements ControlValueAccessor, OnInit {
// The label for this input
- @Input() labelText = 'Library';
+ @Input() labelText = $localize `Library`;
// Should the Ancestors checkbox be hidden?
@Input() hideAncestorSelector = false;
</ng-container>
<ng-container *ngIf="!readOnly">
-
+ <label *ngIf="!labelSuppressed" for="{{domId}}" class="org-unit-select-label {{labelClass}}" i18n-labelText>{{labelText}}</label>
<input type="text"
class="form-control"
id="{{domId}}"
// Placeholder text for selector input
@Input() placeholder = '';
+ // <label> contents for selector. Must not be empty.
+ @Input() labelText = $localize `Library`;
+
+ // Class attributes for <label>. Use 'sr-only' to hide the label from display.
+ @Input() labelClass = '';
+
+ // Suppress <label> output (if <label> is defined explicitly elsewhere)
+ @Input() labelSuppressed = false;
+
// ID to display in the DOM for this selector
@Input() domId = 'eg-org-select-' + OrgSelectComponent.domId++;
<div class="flex-1 p-1">
<eg-org-select #owningLibSelect placeholder="Owning Branch..."
i18n-placeholder [readOnly]="fieldIsDisabled('owning_lib')"
+ labelText="Owning Branch" i18n-labelText labelClass="visually-hidden"
[applyOrgId]="copy.owning_lib()"
[limitPerms]="['CREATE_PICKLIST','CREATE_PURCHASE_ORDER']"
(onChange)="valueChange('owning_lib', $event)">
</div>
<div class="col-lg-3">
<eg-org-select
+ labelSuppressed="true"
[applyOrgId]="orderingAgency"
(onChange)="orgOnChange($event)"
[limitPerms]="['CREATE_PICKLIST','CREATE_PURCHASE_ORDER']">
<hr class="p-1" />
</div>
<div class="form-group">
- <label class="form-label" for="order-agency-input" i18n>Ordering Agency</label>
<eg-org-select (onChange)="orgChange($event)" domId="order-agency-input"
- [limitPerms]="['CREATE_PURCHASE_ORDER']">
+ labelText="Ordering Agency" i18n-labelText [limitPerms]="['CREATE_PURCHASE_ORDER']">
</eg-org-select>
</div>
<div class="form-group">
<option i18n value="f">No</option>
</select>
<eg-org-select *ngIf="searchTermDatatypes[t.field] === 'org_unit'"
+ labelClass = "visually-hidden"
[initialOrgId]="t.value1"
(onChange)="setOrgUnitSearchValue($event, t)">
</eg-org-select>
placeholder="Owner..."
i18n-placeholder
domId="formula-owner"
+ labelText="Formula Owner" i18n-labelText
+ labelClass="col-sm-1 col-form-owner"
[applyOrgId]="formula.owner()"
[limitPerms]="['ADMIN_ACQ_DISTRIB_FORMULA']"
(onChange)="formula.owner($event); myForm.form.markAsDirty()">
<div class="row">
<div class="col-lg-12 d-flex">
- <div class="me-2" i18n>Context Org Unit</div>
- <div>
- <eg-org-select (onChange)="orgChanged($event)" [initialOrgId]="contextOrg">
+
+ <eg-org-select labelText="Context Org Unit" i18n-labelText labelClass="mr-2"
+ (onChange)="orgChanged($event)" [initialOrgId]="contextOrg">
</eg-org-select>
- </div>
+
<div class="ms-3">
<button (click)="up()" i18n-title title="Move Selected Location Up"
class="me-2 btn btn-sm btn-outline-dark .mat-icon-shrunk-in-button">
<div class="row mt-2 mb-2">
<div class="col-lg-6 form-inline">
- <span class="pe-2" i18n>Patron Home Library:</span>
- <eg-org-select
+ <eg-org-select labelText="Patron Home Library:" i18n-labelText labelClass="pr-2"
persistKey="admin.local.negative_balances"
(componentLoaded)="contextOrgLoaded = true"
[initialOrg]="contextOrg"
<div class="row mt-3">
<div class="col-md-6">
<div class="input-group">
- <div class="input-group-text" i18n>Context</div>
- <eg-org-select [initialOrg]="entryContext"
- (onChange)="entryContext = $event"></eg-org-select>
+ <div class="input-group-prepend">
+ <eg-org-select labelText="Context" i18n-labelText labelClass="input-group-text"
+ [initialOrg]="entryContext" (onChange)="entryContext = $event"></eg-org-select>
+ </div>
</div>
</div>
</div>
<label for="source_library" class="form-label col-sm-6 col-form-label" i18n>Source Library</label>
<div class="col-sm-6">
<eg-org-select
+ labelSuppressed="true"
placeholder="Source Library..."
domId="source_library"
i18n-placeholder
<label for="target_library" class="form-label col-sm-6 col-form-label" i18n>Target Library</label>
<div class="col-sm-6">
<eg-org-select
+ labelSuppressed="true"
placeholder="Target Library..."
domId="target_library"
i18n-placeholder
</div>
<div class="row">
- <div class="col" i18n>Register a New Workstation For This Browser</div>
+ <div class="col">
+ <label for="workstationSelect" i18n>Register a New Workstation For This Browser</label>
+ </div>
</div>
<div class="row mt-2">
<div class="col-lg-2">
<eg-org-select
+ domId="workstationSelect"
+ labelSuppressed="true"
[applyDefault]="true"
(onChange)="orgOnChange($event)"
[hideOrgs]="hideOrgs"
</div>
</div>
<div class="form-group row">
- <label class="form-label col-lg-4 text-end fw-bold"
- i18n for="create-pickup-library">Reservation location</label>
<eg-org-select domId="create-pickup-library" [applyDefault]="true"
+ labelText="Reservation location" i18n-labelText labelClass="form-label col-lg-4 text-right font-weight-bold"
[disableOrgs]="disableOrgs()" [hideOrgs]="disableOrgs()"
(onChange)="handlePickupLibChange($event)">
</eg-org-select>
<div class="col-md-4">
<div class="input-group">
<label for="ou" class="form-label input-group-text" i18n>Library:</label>
- <eg-org-select domId="ou" [applyDefault]="true"
+ <eg-org-select domId="ou" [applyDefault]="true" labelSuppressed="true"
(onChange)="handleOrgChange($event)"
[disableOrgs]="disableOrgs()" [hideOrgs]="disableOrgs()">
</eg-org-select>
<div class="d-flex mb-3">
<div>
<div class="input-group">
- <span class="input-group-text">Owner</span>
+ <div class="input-group-prepend">
+ <label for="contextOrgSelect" i18n class="input-group-text">Owner</label>
+ </div>
<eg-org-select
+ domId="contextOrgSelect"
+ labelSuppressed="true"
[initialOrg]="contextOrg"
(onChange)="orgOnChange($event)">
</eg-org-select>
<eg-org-select
domId="statcat_filter"
placeholder="Stat Cat Filter..." i18n-placeholder
+ labelSuppressed="true"
[initialOrgId]="volcopy.defaults.values.statcat_filter"
(onChange)="volcopy.defaults.values.statcat_filter = $event ? $event.id() : null">
</eg-org-select>
<ng-template #circLibTemplate>
<eg-org-select
domId="circ_lib-input"
+ labelClass="visually-hidden"
(onChange)="values['circ_lib'] = $event ? $event.id() : null"
[hideOrgs]="volcopy.hideVolOrgs"
[limitPerms]="['UPDATE_COPY']">
<ng-template #owningLibTemplate>
<eg-org-select
domId="owning_lib-input"
+ labelClass="visually-hidden"
(onChange)="values['owning_lib'] = $event ? $event.id() : null"
[hideOrgs]="volcopy.hideVolOrgs"
[limitPerms]="['UPDATE_COPY']">
</div>
<div class="border rounded m-1" *ngIf="displayAttr('statcat_filter')">
- <div class="batch-header fw-bold p-2" i18n>Stat Cat Filter</div>
+ <div class="batch-header font-weight-bold p-2">
+ <label for="statcat_filter-select" i18n>Stat Cat Filter</label>
+ </div>
<div class="p-1">
<eg-org-select
+ labelSuppressed="true"
domId="statcat_filter-select"
placeholder="Stat Cat Filter..." i18n-placeholder
[initialOrgId]="statCatFilter"
<ng-template #addOrgTmpl>
<eg-org-select [limitPerms]="['CREATE_VOLUME']"
placeholder="Select Location..." i18n-placeholder
+ labelText="Select Location" i18n-labelText labelClass="visually-hidden"
[hideOrgs]="volcopy.hideVolOrgs"
(onChange)="addVol($event); addOrgPopover.close()">
</eg-org-select>
<ng-template #editOrgTmpl>
<eg-org-select [limitPerms]="['CREATE_VOLUME']"
placeholder="Select Location..." i18n-placeholder
+ labelText="Select Location" labelClass="visually-hidden"
[hideOrgs]="volcopy.hideVolOrgs"
(onChange)="editVolOwner(volNode, $event); editOrgPopover.close()">
</eg-org-select>
</div>
<div class="row mt-2">
<div class="col-lg-6">
- <label class="form-label" i18n>Pickup Location: </label>
+ <label class="form-label" for="pickupLibSelect" i18n>Pickup Location: </label>
</div>
<div class="col-lg-6">
- <eg-org-select (onChange)="pickupLib = $event ? $event.id() : null"
- [disableOrgs]="disableOrgs" [applyOrgId]="pickupLib"></eg-org-select>
+ <eg-org-select domId="pickupLibSelect" (onChange)="pickupLib = $event ? $event.id() : null"
+ [disableOrgs]="disableOrgs" [applyOrgId]="pickupLib" labelSuppressed="true"></eg-org-select>
</div>
</div>
<div class="row mt-2">
</label>
</div>
<div class="col-lg-2">
- <eg-org-select domId="default-lib-selector"
+ <eg-org-select domId="default-lib-selector" labelSuppressed="true"
(onChange)="orgChanged($event, 'eg.search.search_lib')"
[applyOrgId]="settings['eg.search.search_lib']">
</eg-org-select>
</label>
</div>
<div class="col-lg-2">
- <eg-org-select domId="pref-lib-selector"
+ <eg-org-select domId="pref-lib-selector" labelSuppressed="true"
(onChange)="orgChanged($event, 'eg.search.pref_lib')"
[applyOrgId]="settings['eg.search.pref_lib']">
</eg-org-select>
<div class="row mt-3">
<div class="col-lg-4">
<div class="input-group">
- <div class="input-group-text" i18n>Holdings Maintenance</div>
+ <div class="input-group-prepend">
+ <div class="input-group-text">
+ <label for="contextOrgSelect" class="form-label" i18n>Holdings Maintenance</label>
+ </div>
+ </div>
<eg-org-select [initialOrg]="contextOrg"
+ domId="contextOrgSelect"
+ labelSuppressed = "true"
persistKey="catalog.holdings"
(onChange)="contextOrgChanged($event)"
[orgClassCallback]="orgClassCallback">
<eg-org-select
(onChange)="orgOnChange($event)"
[initialOrg]="context.searchOrg"
- [placeholder]="'Library'" >
+ [placeholder]="'Library'" i18n-placeholder
+ labelText="Library" i18n-labelText labelClass="visually-hidden" >
</eg-org-select>
<button class="btn btn-success me-1 ms-1" type="button"
[disabled]="searchIsActive()"
</div>
<div class="row pt-1 pb-1 mt-1" *ngIf="showField('au.home_ou')">
+ <label for="au-home_ou-input" class="org-unit-select-label visually-hidden">
<ng-container
*ngTemplateOutlet="fieldLabel; context: {args: {field: 'home_ou'}}">
</ng-container>
+ </label>
<div class="col-lg-3">
<eg-org-select
+ labelSuppressed="true"
domId="au-home_ou-input"
fieldName="au-home_ou-input"
[initialOrgId]="patron.home_ou()"
</ng-container>
<div class="col-lg-3">
<eg-org-select
+ labelSuppressed="true"
domId="cust-opac.default_pickup_location-input"
fieldName="cust-opac.default_pickup_location-input"
[initialOrgId]="userSettings['opac.default_pickup_location']"
<button class="btn btn-info" (click)="testToast()">Test Toast Message</button>
</div>
<div class="col-lg-2">
- Org select with limit perms
+ <label for="limitPermsSelect" class="org-unit-select-label" i18n>Org select with limit perms</label>
</div>
<div class="col-lg-2">
- <eg-org-select [limitPerms]="['REGISTER_WORKSTATION']">
+ <eg-org-select
+ domId="limitPermsSelect"
+ labelSuppressed="true"
+ [limitPerms]="['REGISTER_WORKSTATION']">
</eg-org-select>
</div>
</div>
<div class="m-4">
<div class="col-lg-4">
- <h4>Org Unit Selector With Styled Orgs</h4>
- <eg-org-select [orgClassCallback]="orgClassCallback">
+ <h4>
+ <label for="styledOrgSelect" class="org-unit-select-label" i18n>Org Unit Selector With Styled Orgs</label>
+ </h4>
+ <eg-org-select [orgClassCallback]="orgClassCallback" labelSuppressed="true">
</eg-org-select>
</div>
</div>
<div class="row" *ngIf="!hidePickupLibFilter">
<div class="col-lg-5">
<div class="input-group">
- <div class="input-group-text" i18n>Pickup Library</div>
- <eg-org-select [persistKey]="persistKey" [fallbackOrg]="pickupLib"
- (componentLoaded)="plCompLoaded = true" (onChange)="pickupLibChanged($event)">
+ <div class="input-group-text">
+ <label for="pickupLibSelect" class="form-label" i18n>Pickup Library</label>
+ </div>
+ <eg-org-select
+ domId="pickupLibSelect"
+ labelSuppressed="true"
+ [persistKey]="persistKey"
+ [fallbackOrg]="pickupLib"
+ (componentLoaded)="plCompLoaded = true"
+ (onChange)="pickupLibChanged($event)">
</eg-org-select>
</div>
</div>
<div class="row" *ngIf="pullListOrg">
<div class="col-lg-4 mb-2">
<div class="input-group">
- <div class="input-group-text" i18n>View Pull List For:</div>
- <eg-org-select [initialOrgId]="pullListOrg" [limitPerms]="['VIEW_HOLD_PULL_LIST']"
+ <div class="input-group-text">
+ <label for="pullListOrg" class="form-label" i18n>View Pull List For:</label>
+ </div>
+ <eg-org-select
+ domId="pullListOrgSelect"
+ labelSuppressed="true"
+ [initialOrgId]="pullListOrg"
(onChange)="pullListOrgChanged($event)">
</eg-org-select>
</div>
name="active_pickup_lib" [(ngModel)]="activeFields.pickup_lib"/>
</div>
</div>
- <div class="flex-1"><label class="form-label" i18n>Pickup Library:</label></div>
+ <div class="flex-1"><label for="pickupLibSelect" class="form-label" i18n>Pickup Library:</label></div>
</div>
<div class="col-lg-4">
<!-- TODO: filter orgs as needed -->
- <eg-org-select [initialOrgId]="hold.pickup_lib()"
+ <eg-org-select
+ domId="pickupLibSelect"
+ labelSuppressed="true"
+ [initialOrgId]="hold.pickup_lib()"
[disabled]="isBatch() && !activeFields.pickup_lib"
(onChange)="pickupLibChanged($event)">
</eg-org-select>
<eg-org-select (onChange)="searchOrg = $event"
persistKey="patron.search"
[fallbackOrg]="org.root()"
- i18n-placeholder placeholder="Home Library">
+ i18n-placeholder placeholder="Home Library"
+ labelText="Home Library" i18n-labelText labelClass="visually-hidden">
</eg-org-select>
<!-- home org -->
</div>