[{"data":1,"prerenderedAt":1654},["ShallowReactive",2],{"community-assets":3,"community-asset-usage-pcnf-bulk-actions-header":857,"$fntEwaC_vExaUIA5o0zRa9aAB0NaVm3PY0tsQN1i4S1g":858,"$fftzqO3QrAjxB2qDH4BOh8gBnvtpXboO68ISRYA6J_DY":1093,"$fEjZpFH0sX5lf9r5DqHjpE5W7CJ1Rj0Oiu25ygAOvmSk":1319,"edit-url-/community-assets/pcnf-bulk-actions-header":857},[4,34,72,89,113,120,150,177,239,268,310,352,394,411,423,435,442,497,549,561,574,586,609,629,646,678,685,736,755,777,807,827,835],{"name":5,"displayName":6,"description":7,"usageContent":8,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":13},"pcnf-accordion","Accordion","Accordions allow users to expand and collapse sections of content, facilitating efficient information organization.","\u003Cdiv class=\"n-usage n-usage-do\">\n\u003Ch3>Do\u003C/h3>\n\u003Cul>\n\u003Cli>Use accordions to manage lengthy content: Implement accordions to organize extensive information, such as FAQs or detailed guides, allowing users to access specific sections without being overwhelmed by the full content.\u003C/li>\n\u003Cli>Employ accordions for step-by-step processes: Utilize accordions to guide users through sequential tasks, presenting each step individually to maintain focus and reduce cognitive load.\u003C/li>\n\u003Cli>Apply accordions when space is limited: In scenarios with constrained space, such as mobile interfaces, use accordions to present content compactly, enabling users to navigate information efficiently.\u003C/li>\n\u003C/ul>\n\u003C/div>\n\u003Cdiv class=\"n-usage n-usage-dont\">\n\u003Ch3>Don't\u003C/h3>\n\u003Cul>\n\u003Cli>Avoid overcomplicating content areas: Refrain from adding non-essential links, buttons, or additional subsections inside the accordion content, as this can make the interface complicated and challenging to navigate.\u003C/li>\n\u003Cli>Don't neglect hover states: Ensure that interactive elements within the accordion have clear hover states to communicate interactivity effectively.\u003C/li>\n\u003Cli>Avoid inconsistent behavior: Ensure that the accordion's expand/collapse behavior is predictable and consistent to prevent user confusion.\u003C/li>\n\u003C/ul>\n\u003C/div>","Provet","New Frontend","#401197","https://frontend-review.provetcloud.com",[14,19,24,29],{"name":15,"displayName":16,"url":17,"code":18},"basic","Basic","/main/#/922/product-patterns/usage-examples/accordion/basic","\u003Cscript setup lang=\"ts\">\nimport BaseAccordion from '@/components/base/Accordion.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseAccordion header=\"I am an accordion\">\n \u003Cp class=\"n:py-s\">\n Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident\n aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam\n totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit,\n quibusdam?\n \u003C/p>\n \u003C/BaseAccordion>\n\u003C/template>\n",{"name":20,"displayName":21,"url":22,"code":23},"custom-controllers","Custom controllers","/main/#/922/product-patterns/usage-examples/accordion/custom-controllers","\u003Cscript setup lang=\"ts\">\nimport BaseAccordion from '@/components/base/Accordion.vue'\n\nconst isCollapsed = ref(false)\nconst isDisabled = ref(false)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cdiv\n slot=\"header-end\"\n class=\"n:mbs-s n:mbe-l n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\"\n >\n \u003Cnord-button\n type=\"button\"\n size=\"s\"\n :disabled=\"isDisabled\"\n @click=\"isCollapsed = !isCollapsed\"\n >\n {{ isCollapsed ? 'Expand' : 'Collapse' }}\n \u003C/nord-button>\n\n \u003Cnord-button type=\"button\" size=\"s\" @click=\"isDisabled = !isDisabled\">\n {{ isDisabled ? 'Enabled' : 'Disable' }}\n \u003C/nord-button>\n \u003C/div>\n\n \u003CBaseAccordion\n v-model:collapsed=\"isCollapsed\"\n header-gap=\"l\"\n :disabled=\"isDisabled\"\n >\n \u003Ctemplate #header>\n \u003Cspan class=\"n:font-heading\">Some title\u003C/span>\n \u003C/template>\n\n \u003Ctemplate #header-description>\n \u003Cspan class=\"n:font-default n:text-weaker\"> Some description \u003C/span>\n \u003C/template>\n\n \u003Cdiv class=\"n:py-s\">\n It is also possible to add header actions. There will be plenty of cases\n where we'll use a\n \u003Cnord-tag size=\"s\">BaseAccordion\u003C/nord-tag> to wrap forms, in such\n scenarios both the \u003Cb>Submit/Save\u003C/b> and \u003Cb>Cancel\u003C/b> buttons can be\n placed under the card's \u003Ci>header-end\u003C/i> slot.\n \u003Cdl>\n \u003Cdt>\n Additionally, the component expose useful methods to collapse,\n expand and/or toggle the card's state. The methods names are:\n \u003C/dt>\n \u003Cdd>\n \u003Cul>\n \u003Cli>\u003Cpre>collapse\u003C/pre>\u003C/li>\n \u003Cli>\u003Cpre>expand\u003C/pre>\u003C/li>\n \u003Cli>\u003Cpre>toggleAccordion\u003C/pre>\u003C/li>\n \u003C/ul>\n \u003C/dd>\n \u003C/dl>\n \u003C/div>\n \u003C/BaseAccordion>\n \u003C/div>\n\u003C/template>\n",{"name":25,"displayName":26,"url":27,"code":28},"disabled","Disabled","/main/#/922/product-patterns/usage-examples/accordion/disabled","\u003Cscript setup lang=\"ts\">\nimport BaseAccordion from '@/components/base/Accordion.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseAccordion header=\"With disabled\" disabled>\n \u003Cp class=\"n:py-s\">\n The toggle to expand/collapse the card can also be disabled by using the\n \u003Ci>disabled\u003C/i> prop. This becomes handy in cases you want to ensure the\n content of the card is visible, such as an \u003Cb>inline edit\u003C/b> form is\n loaded and while the form is not submitted, you need the card to remain\n expanded so the content is visible.\n \u003C/p>\n \u003C/BaseAccordion>\n\u003C/template>\n",{"name":30,"displayName":31,"url":32,"code":33},"with-initial-state","With initial state","/main/#/922/product-patterns/usage-examples/accordion/with-initial-state","\u003Cscript setup lang=\"ts\">\nimport BaseAccordion from '@/components/base/Accordion.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseAccordion header=\"With collapsed initial state\" collapsed>\n \u003Cdiv class=\"n:py-s\">\n The \u003Cnord-tag size=\"s\">BaseAccordion\u003C/nord-tag> component has two main\n states:\n \u003Cdl>\n \u003Cdt class=\"n:font-heading\">Expanded\u003C/dt>\n \u003Cdd>\n \u003Cul>\n \u003Cli>This is the default state of the component.\u003C/li>\n \u003Cli>\n The card content is fully visible and accessible to the user.\n \u003C/li>\n \u003C/ul>\n \u003C/dd>\n \u003Cdt class=\"n:font-heading\">Collapsed\u003C/dt>\n \u003Cdd>\n \u003Cul>\n \u003Cli>\n To render the card in a collapsed state, you can use the\n \u003Ci>collapsed\u003C/i> prop.\n \u003C/li>\n \u003Cli>\n When collapsed, the card content is hidden, and only the header or\n title is visible.\n \u003C/li>\n \u003Cli>\n This can be useful for conserving space or creating an\n accordion-style layout.\n \u003C/li>\n \u003C/ul>\n \u003C/dd>\n \u003C/dl>\n \u003C/div>\n \u003C/BaseAccordion>\n\u003C/template>\n",{"name":35,"displayName":36,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":37},"pcnf-address","Address",[38,41,46,49,54,59,64,69],{"name":15,"displayName":16,"url":39,"code":40},"/main/#/922/product-patterns/usage-examples/address/basic","\u003Cscript setup lang=\"ts\">\nimport { z } from 'zod'\nimport { useAddressValidation } from '@/composables/address.js'\nimport { useAuth } from '@/composables/useAuth.js'\nimport { useFormValidation } from '@/composables/useFormValidation.js'\nimport FormAddressField from '@/components/form/AddressField.vue'\n\nconst { activeDepartment } = useAuth()\nconst activeDepartmentCountry = computed(\n () => activeDepartment.value.attributes?.country,\n)\n\nconst inlineForm = ref(false)\n\n// Form logic:\nconst formElement = useTemplateRef('formRef')\nconst { handleErrors } = useFormValidation(formElement)\nconst addressValidationchema = useAddressValidation()\nconst formSchema = z.object({\n address: addressValidationchema,\n})\nconst validationSchema = toTypedSchema(formSchema)\nconst initialValues = {\n address: {\n street_address: '',\n street_address_2: '',\n street_address_3: '',\n zip_code: '',\n city: '',\n state: '',\n country: activeDepartmentCountry.value || '',\n },\n}\nconst { handleSubmit } = useForm({\n validationSchema,\n initialValues,\n})\nconst onSubmit = handleSubmit(\n (data) => {\n console.log(data)\n },\n () => handleErrors(),\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cform\n ref=\"formRef\"\n v-data-pc=\"'demo-form'\"\n class=\"form-main\"\n @submit=\"onSubmit\"\n >\n \u003Cnord-card padding=\"l\">\n \u003Ch2 slot=\"header\">Address Form - Standard example\u003C/h2>\n \u003Cdiv slot=\"header-end\">\n \u003Cnord-toggle label=\"Inline forms\" @change=\"inlineForm = !inlineForm\">\n \u003C/nord-toggle>\n \u003C/div>\n\n \u003CFormAddressField\n hide-label\n label=\"Address\"\n name=\"address\"\n :inline-edit=\"inlineForm\"\n />\n\n \u003Cnord-button class=\"n:mbs-l\" variant=\"primary\"> Submit \u003C/nord-button>\n \u003C/nord-card>\n \u003C/form>\n\u003C/template>\n",{"name":42,"displayName":43,"url":44,"code":45},"custom-labels","Custom labels","/main/#/922/product-patterns/usage-examples/address/custom-labels","\u003Cscript setup lang=\"ts\">\nimport { z } from 'zod'\nimport { useAddressValidation } from '@/composables/address.js'\nimport { useAuth } from '@/composables/useAuth.js'\nimport { useFormValidation } from '@/composables/useFormValidation.js'\nimport FormAddressField from '@/components/form/AddressField.vue'\n\nconst { activeDepartment } = useAuth()\nconst activeDepartmentCountry = computed(\n () => activeDepartment.value.attributes?.country,\n)\n\nconst formElement = useTemplateRef('formRef')\nconst { handleErrors } = useFormValidation(formElement)\nconst addressValidationSchema = useAddressValidation()\nconst formSchema = z.object({\n address: addressValidationSchema,\n})\nconst validationSchema = toTypedSchema(formSchema)\nconst initialValues = {\n address: {\n street_address: '',\n street_address_2: '',\n street_address_3: '',\n zip_code: '',\n city: '',\n state: '',\n country: activeDepartmentCountry.value || '',\n },\n}\nconst { handleSubmit } = useForm({\n validationSchema,\n initialValues,\n})\nconst onSubmit = handleSubmit(\n (data) => {\n console.log(data)\n },\n () => handleErrors(),\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cform\n ref=\"formRef\"\n v-data-pc=\"'demo-form'\"\n class=\"form-main\"\n @submit=\"onSubmit\"\n >\n \u003Cnord-card padding=\"l\">\n \u003Ch2 slot=\"header\">Address Form - Custom Labels Example\u003C/h2>\n\n \u003CFormAddressField\n label=\"Address\"\n name=\"address\"\n :field-labels=\"{\n streetAddress: 'Location address',\n streetAddress2: 'Location address 2',\n streetAddress3: 'Location address 3',\n zipCode: 'Postal code',\n state: 'Region',\n }\"\n />\n\n \u003Cnord-button class=\"n:mbs-l\" variant=\"primary\"> Submit \u003C/nord-button>\n \u003C/nord-card>\n \u003C/form>\n\u003C/template>\n",{"name":25,"displayName":26,"url":47,"code":48},"/main/#/922/product-patterns/usage-examples/address/disabled","\u003Cscript setup lang=\"ts\">\nimport { z } from 'zod'\nimport { useAddressValidation } from '@/composables/address.js'\nimport { useAuth } from '@/composables/useAuth.js'\nimport { useFormValidation } from '@/composables/useFormValidation.js'\nimport FormAddressField from '@/components/form/AddressField.vue'\n\nconst { activeDepartment } = useAuth()\nconst activeDepartmentCountry = computed(\n () => activeDepartment.value.attributes?.country,\n)\n\nconst formElement = useTemplateRef('formRef')\nconst { handleErrors } = useFormValidation(formElement)\nconst addressValidationSchema = useAddressValidation()\nconst formSchema = z.object({\n address: addressValidationSchema,\n})\nconst validationSchema = toTypedSchema(formSchema)\nconst initialValues = {\n address: {\n street_address: '',\n street_address_2: '',\n street_address_3: '',\n zip_code: '',\n city: '',\n state: '',\n country: activeDepartmentCountry.value || '',\n },\n}\nconst { handleSubmit } = useForm({\n validationSchema,\n initialValues,\n})\nconst onSubmit = handleSubmit(\n (data) => {\n console.log(data)\n },\n () => handleErrors(),\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cform\n ref=\"formRef\"\n v-data-pc=\"'demo-form'\"\n class=\"form-main\"\n @submit=\"onSubmit\"\n >\n \u003Cnord-card padding=\"l\">\n \u003Ch2 slot=\"header\">Address Form - Disabled Example\u003C/h2>\n\n \u003CFormAddressField label=\"Address\" name=\"address\" disabled />\n\n \u003Cnord-button class=\"n:mbs-l\" variant=\"primary\" disabled>\n Submit\n \u003C/nord-button>\n \u003C/nord-card>\n \u003C/form>\n\u003C/template>\n",{"name":50,"displayName":51,"url":52,"code":53},"hidden-fields","Hidden fields","/main/#/922/product-patterns/usage-examples/address/hidden-fields","\u003Cscript setup lang=\"ts\">\nimport { z } from 'zod'\nimport { useAddressValidation } from '@/composables/address.js'\nimport { useAuth } from '@/composables/useAuth.js'\nimport { useFormValidation } from '@/composables/useFormValidation.js'\nimport FormAddressField from '@/components/form/AddressField.vue'\n\nconst { activeDepartment } = useAuth()\nconst activeDepartmentCountry = computed(\n () => activeDepartment.value.attributes?.country,\n)\n\nconst formElement = useTemplateRef('formRef')\nconst { handleErrors } = useFormValidation(formElement)\nconst addressValidationSchema = useAddressValidation()\nconst formSchema = z.object({\n address: addressValidationSchema,\n})\nconst validationSchema = toTypedSchema(formSchema)\nconst initialValues = {\n address: {\n street_address: '',\n street_address_2: '',\n street_address_3: '',\n zip_code: '',\n city: '',\n state: '',\n country: activeDepartmentCountry.value || '',\n },\n}\nconst { handleSubmit } = useForm({\n validationSchema,\n initialValues,\n})\nconst onSubmit = handleSubmit(\n (data) => {\n console.log(data)\n },\n () => handleErrors(),\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cform\n ref=\"formRef\"\n v-data-pc=\"'demo-form'\"\n class=\"form-main\"\n @submit=\"onSubmit\"\n >\n \u003Cnord-card padding=\"l\">\n \u003Ch2 slot=\"header\">Address Form - Hidden Fields Example\u003C/h2>\n\n \u003CFormAddressField label=\"Address\" name=\"address\" hide-country />\n\n \u003Cnord-button class=\"n:mbs-l\" variant=\"primary\"> Submit \u003C/nord-button>\n \u003C/nord-card>\n \u003C/form>\n\u003C/template>\n",{"name":55,"displayName":56,"url":57,"code":58},"read-only","Read only","/main/#/922/product-patterns/usage-examples/address/read-only","\u003Cscript setup lang=\"ts\">\nimport { useDisplayNames } from '@/composables/intl.js'\nimport type { AddressData } from '@/composables/address.js'\nimport BaseFormattedAddress from '@/components/base/formatted/Address.vue'\nimport BaseReadOnlyField from '@/components/base/read-only/Field.vue'\nimport BaseCardInnerSection from '@/components/base/card/InnerSection.vue'\nconst { regionName } = useDisplayNames()\n\nconst addresses: AddressData[] = [\n {\n country: 'FI',\n streetAddress: 'Kluuvikatu 4',\n city: 'Helsinki',\n zipCode: '00100',\n },\n {\n country: 'NO',\n streetAddress: 'Fridtjof Nansens vei 6',\n city: 'Oslo',\n zipCode: '0369',\n },\n {\n country: 'SE',\n streetAddress: 'Kapellgränd 10',\n city: 'Stockholm',\n zipCode: '116 25',\n },\n {\n country: 'DK',\n streetAddress: 'Dyrlægevej 48',\n city: 'Frederiksberg',\n zipCode: '1870',\n },\n {\n country: 'US',\n streetAddress: '3601 Lyon St',\n city: 'San Francisco',\n state: 'CA',\n zipCode: '94123',\n },\n {\n country: 'GB',\n city: 'London',\n zipCode: 'SW1A 0AA',\n },\n {\n country: 'IT',\n streetAddress: 'Piazza di San Lorenzo, 9',\n city: 'Firenze',\n state: 'FI',\n zipCode: '50123',\n },\n {\n country: 'ES',\n streetAddress: 'Ctra. de Vallvidrera al Tibidabo, 111',\n streetAddress2: 'Sarrià-Sant Gervasi',\n city: 'Barcelona',\n zipCode: '08035',\n },\n {\n country: 'DE',\n streetAddress: 'Pariser Platz 104',\n city: 'Berlin',\n zipCode: '10117',\n },\n {\n country: 'EE',\n streetAddress: 'Raekoja plats 1',\n city: 'Tallinn',\n zipCode: '10146',\n },\n {\n country: 'NL',\n streetAddress: 'Museumplein 6',\n city: 'Amsterdam',\n zipCode: '1071 DJ',\n },\n {\n country: 'PT',\n streetAddress: 'Esplanada Dom Carlos I 23',\n city: 'Lisbon',\n zipCode: '1990-005',\n },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseCardInnerSection>\n \u003CBaseReadOnlyField\n v-for=\"address in addresses\"\n :key=\"address.country\"\n :label=\"address.country ? regionName(address.country) : ''\"\n >\n \u003CBaseFormattedAddress v-bind=\"address\" />\n \u003C/BaseReadOnlyField>\n \u003C/BaseCardInnerSection>\n\u003C/template>\n",{"name":60,"displayName":61,"url":62,"code":63},"with-custom-keys","With custom keys","/main/#/922/product-patterns/usage-examples/address/with-custom-keys","\u003Cscript setup lang=\"ts\">\nimport { z } from 'zod'\nimport { useAddressValidation } from '@/composables/address.js'\nimport { useAuth } from '@/composables/useAuth.js'\nimport { useFormValidation } from '@/composables/useFormValidation.js'\nimport FormAddressField from '@/components/form/AddressField.vue'\n\nconst { activeDepartment } = useAuth()\nconst activeDepartmentCountry = computed(\n () => activeDepartment.value.attributes?.country,\n)\nconst isUSDepartment = computed(() => activeDepartmentCountry.value === 'US')\n\nconst inlineForm = ref(false)\n\nconst formElement = useTemplateRef('formRef')\nconst { handleErrors } = useFormValidation(formElement)\nconst addressValidationchema = useAddressValidation({\n fieldNames: {\n streetAddress: 'home_address',\n streetAddress2: 'home_address_2',\n streetAddress3: 'home_address_3',\n state: activeDepartmentCountry.value === 'US' ? 'state' : 'country_region',\n },\n})\nconst formSchema = z.object({\n address: addressValidationchema,\n})\nconst validationSchema = toTypedSchema(formSchema)\nconst initialValues = {\n address: {\n // Custom key names:\n // - naming `home_address` instead of `street address`.\n // - naming `state` for US and `country_region` for other countries.\n home_address: '',\n home_address_2: '',\n home_address_3: '',\n zip_code: '',\n city: '',\n [activeDepartmentCountry.value === 'US' ? 'state' : 'country_region']: '',\n country: activeDepartmentCountry.value || '',\n },\n}\nconst { handleSubmit } = useForm({\n validationSchema,\n initialValues,\n})\nconst onSubmit = handleSubmit(\n (data) => {\n console.log(data)\n },\n () => handleErrors(),\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cform\n ref=\"formRef\"\n v-data-pc=\"'demo-form'\"\n class=\"form-main\"\n @submit=\"onSubmit\"\n >\n \u003Cnord-card padding=\"l\">\n \u003Ch2 slot=\"header\">Address Form - Custom keys example\u003C/h2>\n \u003Cdiv slot=\"header-end\">\n \u003Cnord-toggle label=\"Inline forms\" @change=\"inlineForm = !inlineForm\">\n \u003C/nord-toggle>\n \u003C/div>\n\n \u003CFormAddressField\n hide-label\n label=\"Address\"\n name=\"address\"\n :field-names=\"{\n streetAddress: 'home_address',\n streetAddress2: 'home_address_2',\n streetAddress3: 'home_address_3',\n state: isUSDepartment ? 'state' : 'country_region',\n }\"\n :inline-edit=\"inlineForm\"\n />\n\n \u003Cnord-button class=\"n:mbs-l\" variant=\"primary\"> Submit \u003C/nord-button>\n \u003C/nord-card>\n \u003C/form>\n\u003C/template>\n",{"name":65,"displayName":66,"url":67,"code":68},"with-form-multiple","With form multiple","/main/#/922/product-patterns/usage-examples/address/with-form-multiple","\u003Cscript setup lang=\"ts\">\nimport { z } from 'zod'\nimport { useAddressValidation } from '@/composables/address.js'\nimport { useAuth } from '@/composables/useAuth.js'\nimport { useFormValidation } from '@/composables/useFormValidation.js'\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport FormAddressField from '@/components/form/AddressField.vue'\n\nconst { activeDepartment } = useAuth()\nconst activeDepartmentCountry = computed(\n () => activeDepartment.value.attributes?.country,\n)\n\nconst inlineForm = ref(false)\n\n// Form logic:\nconst formElement = useTemplateRef('formRef')\nconst { handleErrors: handleErrors } = useFormValidation(formElement)\nconst formSchema = z.object({\n multiple_addresses: useAddressValidation().array(),\n})\nconst validationSchema = toTypedSchema(formSchema)\nconst initialValues = {\n multiple_addresses: [\n {\n street_address: '',\n street_address_2: '',\n street_address_3: '',\n zip_code: '',\n city: '',\n state: '',\n country: activeDepartmentCountry.value || '',\n },\n ],\n}\nconst { handleSubmit } = useForm({\n validationSchema,\n initialValues,\n})\nconst onSubmit = handleSubmit(\n (data) => {\n console.log(data)\n },\n () => handleErrors(),\n)\n\nconst { remove, push, fields } = useFieldArray('multiple_addresses')\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cform\n ref=\"formRef\"\n v-data-pc=\"'demo-form'\"\n class=\"form-main\"\n @submit=\"onSubmit\"\n >\n \u003Cnord-card padding=\"l\">\n \u003Ch2 slot=\"header\">Address - Multiple addresses example\u003C/h2>\n\n \u003CBaseStackDivided>\n \u003Cdiv v-for=\"(field, idx) in fields\" :key=\"field.key\">\n \u003CFormAddressField\n hide-label\n label=\"Multiple Addresses\"\n :name=\"`multiple_addresses[${idx}]`\"\n :inline-edit=\"inlineForm\"\n />\n \u003Cnord-button\n class=\"n:mbs-m\"\n square\n type=\"button\"\n aria-label=\"Delete\"\n @click=\"remove(idx)\"\n >\n \u003Cnord-icon size=\"s\" name=\"interface-delete\">\u003C/nord-icon>\n \u003C/nord-button>\n \u003C/div>\n\n \u003Cnord-button\n class=\"n:mbs-m\"\n type=\"button\"\n @click=\"push(initialValues.multiple_addresses[0])\"\n >\n Add new address\n \u003C/nord-button>\n \u003C/BaseStackDivided>\n\n \u003Cnord-button class=\"n:mbs-l\" variant=\"primary\"> Submit \u003C/nord-button>\n \u003C/nord-card>\n \u003C/form>\n\u003C/template>\n",{"name":30,"displayName":31,"url":70,"code":71},"/main/#/922/product-patterns/usage-examples/address/with-initial-state","\u003Cscript setup lang=\"ts\">\nimport { z } from 'zod'\nimport { useAddressValidation } from '@/composables/address.js'\nimport { useFormValidation } from '@/composables/useFormValidation.js'\nimport FormAddressField from '@/components/form/AddressField.vue'\n\nconst formElement = useTemplateRef('formRef')\nconst { handleErrors } = useFormValidation(formElement)\nconst addressValidationSchema = useAddressValidation()\nconst formSchema = z.object({\n address: addressValidationSchema,\n})\nconst validationSchema = toTypedSchema(formSchema)\nconst initialValues = {\n address: {\n street_address: 'Drottninggatan 50',\n street_address_2: '',\n street_address_3: '',\n zip_code: '11121',\n city: 'Stockholm',\n state: 'SE-AB',\n country: 'SE',\n },\n}\nconst { handleSubmit } = useForm({\n validationSchema,\n initialValues,\n})\nconst onSubmit = handleSubmit(\n (data) => {\n console.log(data)\n },\n () => handleErrors(),\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cform\n ref=\"formRef\"\n v-data-pc=\"'demo-form'\"\n class=\"form-main\"\n @submit=\"onSubmit\"\n >\n \u003Cnord-card padding=\"l\">\n \u003Ch2 slot=\"header\">Address Form - With Initial State Example\u003C/h2>\n\n \u003CFormAddressField label=\"Address\" name=\"address\" />\n\n \u003Cnord-button class=\"n:mbs-l\" variant=\"primary\"> Submit \u003C/nord-button>\n \u003C/nord-card>\n \u003C/form>\n\u003C/template>\n",{"name":73,"displayName":74,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":75},"pcnf-billing-summary","Billing Summary",[76,79,84],{"name":15,"displayName":16,"url":77,"code":78},"/main/#/922/product-patterns/usage-examples/billing-summary/basic","\u003Cscript setup lang=\"ts\">\nimport type { TableSummaryData } from '@/components/BillingSummary.vue'\nimport BillingSummary from '@/components/BillingSummary.vue'\n\nconst summaryData = {\n header: [['Invoice total', '$73.00']],\n body: [['Prepayment balance', '$0.00']],\n footer: ['Amount due', '$73.00'],\n} satisfies TableSummaryData\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBillingSummary :data=\"summaryData\" />\n\u003C/template>\n",{"name":80,"displayName":81,"url":82,"code":83},"with-multiple-body-items","With multiple body items","/main/#/922/product-patterns/usage-examples/billing-summary/with-multiple-body-items","\u003Cscript setup lang=\"ts\">\nimport type { TableSummaryData } from '@/components/BillingSummary.vue'\nimport BillingSummary from '@/components/BillingSummary.vue'\n\nconst summaryData = {\n header: [['Invoice total', '$73.00']],\n body: [\n ['Prepayment balance', '$0.00'],\n ['Cash payment', '$3.00'],\n ['Card payment', '$5.00'],\n ],\n footer: ['Amount due', '$65.00'],\n} satisfies TableSummaryData\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBillingSummary :data=\"summaryData\" />\n\u003C/template>\n",{"name":85,"displayName":86,"url":87,"code":88},"with-multiple-columns","With multiple columns","/main/#/922/product-patterns/usage-examples/billing-summary/with-multiple-columns","\u003Cscript setup lang=\"ts\">\nimport type { TableSummaryData } from '@/components/BillingSummary.vue'\nimport BillingSummary from '@/components/BillingSummary.vue'\n\nconst summaryData = {\n header: [['Invoice total', '', '$73.00']],\n body: [\n ['Card payment', '24/10/2024', '-$400.00'],\n ['Discount', '24/10/2024', '-$100.00'],\n ],\n footer: ['Amount due', '', '$73.00'],\n} satisfies TableSummaryData\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBillingSummary :data=\"summaryData\" />\n\u003C/template>\n",{"name":90,"displayName":91,"description":92,"usageContent":93,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":94},"pcnf-breadcrumbs","Breadcrumbs","Breadcrumbs show the navigation path users followed to arrive at the current page, making it simple to return to earlier sections.","\u003Cdiv class=\"n-usage n-usage-do\">\n\u003Ch3>Do\u003C/h3>\n\u003Cul>\n\u003Cli>Use breadcrumbs to display a hierarchy of pages and improve navigation.\u003C/li>\n\u003Cli>Include breadcrumbs to represent a hierarchy with multiple parent pages.\u003C/li>\n\u003Cli>Show the current page in the breadcrumbs if its title is not visible elsewhere on the page.\u003C/li>\n\u003C/ul>\n\u003C/div>\n\u003Cdiv class=\"n-usage n-usage-dont\">\n\u003Ch3>Don't\u003C/h3>\n\u003Cul>\n\u003Cli>Avoid using breadcrumbs if the page only has a single parent page. Use a Link instead.\u003C/li>\n\u003Cli>Don't use breadcrumbs to indicate progress in a task.\u003C/li>\n\u003Cli>Prevent redundancy. Exclude the current page from breadcrumbs if its title is already displayed on the page.\u003C/li>\n\u003C/ul>\n\u003C/div>",[95,98,103,108],{"name":15,"displayName":16,"url":96,"code":97},"/main/#/922/product-patterns/usage-examples/breadcrumbs/basic","\u003Cscript setup lang=\"ts\">\nimport {\n type BreadcrumbsType,\n useBreadcrumbs,\n} from '@/composables/useBreadcrumbs.js'\nimport AppBreadcrumbs from '@/components/app/Breadcrumbs.vue'\nconst route = useRoute()\nconst breadcrumbs = ref\u003CBreadcrumbsType>({\n category: 'common.breadcrumbs.label',\n items: [\n {\n // @ts-expect-error - translation string\n label: 'Breadcrumbs 1',\n to: {\n path: route.path,\n query: { consultation_id: 1 },\n },\n },\n {\n // @ts-expect-error - translation string\n label: 'Breadcrumbs 2',\n to: {\n path: route.path,\n query: { consultation_id: 2 },\n },\n },\n ],\n})\n\nuseBreadcrumbs().mutate(breadcrumbs.value)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CAppBreadcrumbs />\n\u003C/template>\n",{"name":99,"displayName":100,"url":101,"code":102},"external","External","/main/#/922/product-patterns/usage-examples/breadcrumbs/external","\u003Cscript setup lang=\"ts\">\nimport {\n type BreadcrumbsType,\n useBreadcrumbs,\n} from '@/composables/useBreadcrumbs.js'\nimport AppBreadcrumbs from '@/components/app/Breadcrumbs.vue'\nconst route = useRoute()\nconst breadcrumbs = ref\u003CBreadcrumbsType>({\n category: 'common.breadcrumbs.label',\n items: [\n {\n // @ts-expect-error - translation string\n label: 'Breadcrumbs 1 (external)',\n to: 'https://nordhealth.design',\n external: true,\n target: '_blank',\n },\n {\n // @ts-expect-error - translation string\n label: 'Breadcrumbs 2',\n to: {\n path: route.path,\n query: { consultation_id: 2 },\n },\n },\n ],\n})\n\nuseBreadcrumbs().mutate(breadcrumbs.value)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CAppBreadcrumbs />\n\u003C/template>\n",{"name":104,"displayName":105,"url":106,"code":107},"mutate","Mutate","/main/#/922/product-patterns/usage-examples/breadcrumbs/mutate","\u003Cscript setup lang=\"ts\">\nimport {\n type BreadcrumbsType,\n useBreadcrumbs,\n} from '@/composables/useBreadcrumbs.js'\nimport { pad } from '@/utils/number.js'\nimport AppBreadcrumbs from '@/components/app/Breadcrumbs.vue'\nconst route = useRoute()\nconst maxBreadcrumbs = 5\nconst breadcrumbsCount = ref(2)\nconst breadcrumbs = ref\u003CBreadcrumbsType>({\n category: 'common.breadcrumbs.label',\n items: [],\n})\n\nfunction updateBreadcrumbsCount(event: Event) {\n breadcrumbsCount.value = Number((event.target as HTMLInputElement).value)\n}\n\nwatchEffect(() => {\n // reset the breadcrumbs\n breadcrumbs.value.items = []\n\n for (let step = 0; step \u003C breadcrumbsCount.value; step++) {\n if (breadcrumbsCount.value === 1 || step === breadcrumbsCount.value - 1) {\n /**\n * ! The example below demonstrates how to use interpolation with a translation string\n */\n breadcrumbs.value.items.push({\n // @ts-expect-error - translation string\n label: `Breadcrumbs ${pad(step + 1)}`,\n to: { path: route.path, query: { consultation_id: step } },\n })\n } else {\n breadcrumbs.value.items.push({\n // @ts-expect-error - translation string\n label: `Breadcrumbs ${pad(step + 1)}`,\n to: { path: route.path, query: { consultation_id: pad(step + 1, 9) } },\n })\n }\n }\n\n useBreadcrumbs().mutate(breadcrumbs.value)\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003CAppBreadcrumbs />\n\n \u003Cnord-card padding=\"l\">\n \u003Ch2 slot=\"header\">Breadcrumbs component\u003C/h2>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Cnord-range\n label=\"Breadcrumbs count\"\n :value=\"breadcrumbsCount.toString()\"\n :min=\"1\"\n :max=\"maxBreadcrumbs\"\n @input=\"updateBreadcrumbsCount\"\n />\n\n \u003Cp>See the example below.\u003C/p>\n\n \u003Ccode\n class=\"n:rounded-default n:border n:bg-status-neutral-weak n:p-s n:text-default\"\n >\n useBreadcrumbs().mutate({{ breadcrumbs }})\n \u003C/code>\n \u003C/div>\n \u003C/nord-card>\n \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\ncode {\n white-space: pre-wrap;\n}\n\u003C/style>\n",{"name":109,"displayName":110,"url":111,"code":112},"target-blank","Target blank","/main/#/922/product-patterns/usage-examples/breadcrumbs/target-blank","\u003Cscript setup lang=\"ts\">\nimport {\n type BreadcrumbsType,\n useBreadcrumbs,\n} from '@/composables/useBreadcrumbs.js'\nimport AppBreadcrumbs from '@/components/app/Breadcrumbs.vue'\nconst route = useRoute()\nconst breadcrumbs = ref\u003CBreadcrumbsType>({\n category: 'common.breadcrumbs.label',\n items: [\n {\n // @ts-expect-error - translation string\n label: 'Breadcrumbs 1 (new tab)',\n to: {\n path: route.path,\n query: { consultation_id: 1 },\n },\n target: '_blank',\n },\n {\n // @ts-expect-error - translation string\n label: 'Breadcrumbs 2',\n to: {\n path: route.path,\n query: { consultation_id: 2 },\n },\n },\n ],\n})\n\nuseBreadcrumbs().mutate(breadcrumbs.value)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CAppBreadcrumbs />\n\u003C/template>\n",{"name":114,"displayName":115,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":116},"pcnf-bulk-actions-header","Bulk Actions Header",[117],{"name":15,"displayName":16,"url":118,"code":119},"/main/#/922/product-patterns/usage-examples/bulk-actions-header/basic","\u003Cscript lang=\"ts\" setup>\nimport { createColumnHelper } from '@tanstack/vue-table'\nimport BaseButton from '@/components/base/Button.vue'\nimport BaseCardDataTable from '@/components/base/card/DataTable.vue'\nimport BaseErrorCard from '@/components/base/ErrorCard.vue'\nimport BaseLoadingCard from '@/components/base/LoadingCard.vue'\nimport type { UsersListResponse } from '@/models/users.js'\nimport {\n useDataTableStateWithPagination,\n useDataTableWithState,\n useHasAllPageRowsSelected,\n} from '@/composables/dataTable.js'\nimport {\n ECellType,\n type ColumnSchema,\n useDataTableColumns,\n} from '@/composables/dataTableColumns.js'\nimport { useDataTableUrlState } from '@/composables/dataTableState.js'\nimport { useUserListQuery } from '@/composables/users.js'\nimport useTranslation from '@/composables/useTranslation.js'\n\nconst tPage = useTranslation('pages.users.list')\n\ntype UserRow = UsersListResponse['data'][0]\n\nconst tableState = useDataTableUrlState('list')\nconst query = useUserListQuery(tableState.pagination, tableState.sorting)\n\nconst columnSchema = computed\u003CColumnSchema\u003CUserRow>[]>(() => [\n {\n id: 'id',\n accessorKey: 'id',\n header: tPage('columns.id'),\n cellType: ECellType.SmallId,\n },\n {\n id: 'email',\n accessorKey: 'attributes.email',\n header: tPage('columns.email'),\n cellType: ECellType.Email,\n },\n {\n id: 'first_name',\n accessorKey: 'attributes.first_name',\n header: tPage('columns.firstName'),\n },\n {\n id: 'last_name',\n accessorKey: 'attributes.last_name',\n header: tPage('columns.lastName'),\n },\n])\n\nconst { columns } = useDataTableColumns(\n createColumnHelper\u003CUserRow>(),\n columnSchema,\n)\n\nconst data = computed(() => query.data?.data || [])\nconst { tableStateWithPagination } = useDataTableStateWithPagination({\n tableState,\n query,\n})\nconst table = useDataTableWithState(\n {\n data,\n columns,\n manualPagination: true,\n manualSorting: true,\n enableRowSelection: true,\n getRowId: (row) => row.id,\n },\n tableStateWithPagination,\n)\n\nconst hasAllPageRowsSelected = useHasAllPageRowsSelected(\n tableState.rowSelection,\n data,\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseErrorCard v-if=\"query.isError\" />\n \u003CBaseLoadingCard v-else-if=\"query.isPending\" />\n \u003CBaseCardDataTable\n v-else\n heading=\"Bulk Actions Header\"\n :table\n :row-selection=\"tableState.rowSelection.value\"\n :has-all-page-rows-selected\n :is-loading=\"query.isPlaceholderData\"\n table-caption=\"Bulk actions header example\"\n >\n \u003Ctemplate #bulk-actions>\n \u003CBaseButton size=\"s\"> Export \u003C/BaseButton>\n \u003CBaseButton size=\"s\"> Action 1 \u003C/BaseButton>\n \u003C/template>\n \u003C/BaseCardDataTable>\n\u003C/template>\n",{"name":121,"displayName":122,"description":123,"usageContent":124,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":125},"pcnf-card-collapsible","Card Collapsible","Card collapsible is designed to organize related content in a space-efficient way. It allows users to expand or collapse sections.","\u003Cdiv class=\"n-usage n-usage-do\">\n\u003Ch3>Do\u003C/h3>\n\u003Cul>\n\u003Cli>Use it when users need to view multiple sections simultaneously.\u003C/li>\n\u003Cli>Use it to streamline pages and minimize scrolling, especially for non-essential content that doesn't require immediate interaction.\u003C/li>\n\u003C/ul>\n\u003C/div>\n\u003Cdiv class=\"n-usage n-usage-dont\">\n\u003Ch3>Don't\u003C/h3>\n\u003Cul>\n\u003Cli>Avoid using collapses when users need to switch quickly between sections, as it may push other content down.\u003C/li>\n\u003Cli>Avoid nesting collapses, as multiple layers of hidden content can create a tedious and frustrating user experience.\u003C/li>\n\u003C/ul>\n\u003C/div>",[126,129,132,137,140,145],{"name":15,"displayName":16,"url":127,"code":128},"/main/#/922/product-patterns/usage-examples/card-collapsible/basic","\u003Cscript setup lang=\"ts\">\nimport BaseCardCollapsible from '@/components/base/card/Collapsible.vue'\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseCardCollapsible title=\"I am a collapsible card\">\n Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident\n aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam\n totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit,\n quibusdam?\n \u003C/BaseCardCollapsible>\n\u003C/template>\n",{"name":25,"displayName":26,"url":130,"code":131},"/main/#/922/product-patterns/usage-examples/card-collapsible/disabled","\u003Cscript setup lang=\"ts\">\nimport BaseCardCollapsible from '@/components/base/card/Collapsible.vue'\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseCardCollapsible title=\"With disabled toggle\" disabled>\n The toggle to expand/collapse the card can also be disabled by using the\n \u003Ci>disabled\u003C/i> prop. This becomeshandy in cases you want to ensure the\n content of the card is visible, such as an \u003Cb>inline edit\u003C/b> form is loaded\n and while the form is not submitted, you need the card to remain expanded so\n the content is visible.\n \u003C/BaseCardCollapsible>\n\u003C/template>\n",{"name":133,"displayName":134,"url":135,"code":136},"with-header-actions","With header actions","/main/#/922/product-patterns/usage-examples/card-collapsible/with-header-actions","\u003Cscript setup lang=\"ts\">\nimport BaseCardCollapsible from '@/components/base/card/Collapsible.vue'\n\nconst cardCollapsibleElement =\n useTemplateRef\u003CInstanceType\u003Ctypeof BaseCardCollapsible>>('cardCollapsibleRef')\nconst isCardWithActionsCollapsed = ref(false)\nconst hasCardWithActionsDisabledToggle = ref(false)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseCardCollapsible\n ref=\"cardCollapsibleRef\"\n title=\"With header actions\"\n :disabled=\"hasCardWithActionsDisabledToggle\"\n @card:collapse=\"isCardWithActionsCollapsed = true\"\n @card:expand=\"isCardWithActionsCollapsed = false\"\n @card:toggle-state=\"isCardWithActionsCollapsed = $event\"\n >\n \u003Ctemplate #header-end>\n \u003Cnord-button\n type=\"button\"\n size=\"s\"\n :disabled=\"hasCardWithActionsDisabledToggle\"\n @click=\"cardCollapsibleElement?.toggleCard\"\n >\n Toggle state\n \u003C/nord-button>\n\n \u003Cnord-button\n type=\"button\"\n size=\"s\"\n @click=\"\n hasCardWithActionsDisabledToggle = !hasCardWithActionsDisabledToggle\n \"\n >\n {{\n !hasCardWithActionsDisabledToggle ? 'Disable toggle' : 'Enable toggle'\n }}\n \u003C/nord-button>\n \u003C/template>\n\n It is also possible to add header actions. There will be plenty of cases\n where we'll use a \u003Cnord-tag size=\"s\">CardCollapsible\u003C/nord-tag> to wrap\n forms, in such scenarios both the \u003Cb>Submit/Save\u003C/b> and\n \u003Cb>Cancel\u003C/b> buttons can be placed under the card's \u003Ci>header-end\u003C/i> slot.\n \u003Cdl>\n \u003Cdt>\n Additionally, the component expose useful methods to collapse, expand\n and/or toggle the card's state. The methods names are:\n \u003C/dt>\n \u003Cdd>\n \u003Cul>\n \u003Cli>\u003Cpre>collapse\u003C/pre>\u003C/li>\n \u003Cli>\u003Cpre>expand\u003C/pre>\u003C/li>\n \u003Cli>\u003Cpre>toggleCard\u003C/pre>\u003C/li>\n \u003C/ul>\n \u003C/dd>\n \u003C/dl>\n \u003C/BaseCardCollapsible>\n\u003C/template>\n",{"name":30,"displayName":31,"url":138,"code":139},"/main/#/922/product-patterns/usage-examples/card-collapsible/with-initial-state","\u003Cscript setup lang=\"ts\">\nimport BaseCardCollapsible from '@/components/base/card/Collapsible.vue'\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseCardCollapsible title=\"With collapsed initial state\" collapsed>\n The \u003Cnord-tag size=\"s\">CardCollapsible\u003C/nord-tag> component has two main\n states:\n \u003Cdl>\n \u003Cdt class=\"n:font-heading\">Expanded\u003C/dt>\n \u003Cdd>\n \u003Cul>\n \u003Cli>This is the default state of the component.\u003C/li>\n \u003Cli>The card content is fully visible and accessible to the user.\u003C/li>\n \u003C/ul>\n \u003C/dd>\n \u003Cdt class=\"n:font-heading\">Collapsed\u003C/dt>\n \u003Cdd>\n \u003Cul>\n \u003Cli>\n To render the card in a collapsed state, you can use the\n \u003Ci>collapsed\u003C/i> prop.\n \u003C/li>\n \u003Cli>\n When collapsed, the card content is hidden, and only the header or\n title is visible.\n \u003C/li>\n \u003Cli>\n This can be useful for conserving space or creating an\n accordion-style layout.\n \u003C/li>\n \u003C/ul>\n \u003C/dd>\n \u003C/dl>\n \u003C/BaseCardCollapsible>\n\u003C/template>\n",{"name":141,"displayName":142,"url":143,"code":144},"with-padding-value","With padding value","/main/#/922/product-patterns/usage-examples/card-collapsible/with-padding-value","\u003Cscript setup lang=\"ts\">\nimport BaseCardCollapsible from '@/components/base/card/Collapsible.vue'\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseCardCollapsible title=\"With padding value\" padding=\"m\">\n \u003Cnord-stack>\n \u003Cp>\n The \u003Cnord-tag size=\"s\">CardCollapsible\u003C/nord-tag> component extends the\n Nord Design System\n \u003Ca href=\"https://nordhealth.design/components/card/\" target=\"_blank\">\n Card\n \u003C/a>\n component, which means you get all of the \u003Ci>properties\u003C/i>,\n \u003Ci>slots\u003C/i>, \u003Ci>CSS properties\u003C/i> and their default values.\n \u003C/p>\n \u003Cp>\n Now, in most cases this component will have a padding different than the\n default value \u003Ci>(\"m\")\u003C/i> set in the\n \u003Cnord-tag size=\"s\">nord-card\u003C/nord-tag>, the \u003Ci>padding\u003C/i> prop is\n initialized with the \u003Cnord-tag size=\"s\">\"l\"\u003C/nord-tag> overriding that\n value.\n \u003C/p>\n \u003C/nord-stack>\n \u003C/BaseCardCollapsible>\n\u003C/template>\n",{"name":146,"displayName":147,"url":148,"code":149},"with-tooltip","With tooltip","/main/#/922/product-patterns/usage-examples/card-collapsible/with-tooltip","\u003Cscript setup lang=\"ts\">\nimport BaseCardCollapsible from '@/components/base/card/Collapsible.vue'\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseCardCollapsible title=\"I am a collapsible card\">\n \u003Ctemplate #header-title-end>\n \u003Cspan\n aria-describedby=\"info-tooltip\"\n tabindex=\"0\"\n class=\"square-icon-wrapper\"\n >\n \u003Cnord-icon\n slot=\"end\"\n name=\"interface-info\"\n size=\"s\"\n class=\"n:text-weaker\"\n />\n \u003C/span>\n \u003Cnord-tooltip id=\"info-tooltip\" class=\"n:font-default\">\n This is a tooltip\n \u003C/nord-tooltip>\n \u003C/template>\n Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident\n aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam\n totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit,\n quibusdam?\n \u003C/BaseCardCollapsible>\n\u003C/template>\n",{"name":151,"displayName":152,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":153},"pcnf-card-data","Card Data",[154,157,162,167,172],{"name":15,"displayName":16,"url":155,"code":156},"/main/#/922/product-patterns/usage-examples/card-data/basic","\u003Cscript setup lang=\"ts\">\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport BaseButton from '@/components/base/Button.vue'\nimport BaseCardData from '@/components/base/card/Data.vue'\n\nconst items = [\n { id: 1, name: 'Fluffy', species: 'Cat', status: 'Active' },\n { id: 2, name: 'Buddy', species: 'Dog', status: 'Active' },\n { id: 3, name: 'Charlie', species: 'Bird', status: 'Inactive' },\n { id: 4, name: 'Max', species: 'Dog', status: 'Active' },\n { id: 5, name: 'Luna', species: 'Cat', status: 'Active' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseCardData class=\"n:mbe-xxl\" heading=\"Pet List\">\n \u003Ctemplate #header-end>\n \u003CBaseButton size=\"s\">Add Pet\u003C/BaseButton>\n \u003C/template>\n\n \u003Ctemplate #content>\n \u003CBaseStackDivided gap=\"none\">\n \u003Cdiv v-for=\"item in items\" :key=\"item.id\" class=\"n:p-m n:inline-full\">\n \u003Cdiv\n class=\"n:flex n:flex-row n:flex-nowrap n:items-start n:justify-between n:gap-xl\"\n >\n \u003Cdiv>\n \u003Ch4>{{ item.name }}\u003C/h4>\n \u003Cp class=\"n:text-weaker\">{{ item.species }}\u003C/p>\n \u003C/div>\n\n \u003Cdiv>\n \u003Cnord-badge\n :variant=\"item.status === 'Active' ? 'success' : 'neutral'\"\n >\n {{ item.status }}\n \u003C/nord-badge>\n \u003C/div>\n \u003C/div>\n \u003C/div>\n \u003C/BaseStackDivided>\n \u003C/template>\n\n \u003Ctemplate #footer>\n \u003Cp class=\"n:text-weaker\">Total: {{ items.length }} pets\u003C/p>\n \u003C/template>\n \u003C/BaseCardData>\n\u003C/template>\n",{"name":158,"displayName":159,"url":160,"code":161},"with-pagination","With pagination","/main/#/922/product-patterns/usage-examples/card-data/with-pagination","\u003Cscript setup lang=\"ts\">\nimport type { PaginationState } from '@tanstack/vue-table'\nimport type { QueryPaginationMeta } from '@/utils/jsonapi.js'\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport BasePagination from '@/components/base/Pagination.vue'\nimport BaseCardData from '@/components/base/card/Data.vue'\nimport InputSearch from '@/components/input/Search.vue'\n\n// Mock data\nconst allItems = Array.from({ length: 50 }, (_, i) => ({\n id: i + 1,\n name: `Pet ${i + 1}`,\n species: ['Cat', 'Dog', 'Bird', 'Rabbit'][i % 4],\n status: i % 3 === 0 ? 'Inactive' : 'Active',\n description: `This is a description for pet ${i + 1}`,\n}))\n\nconst searchQuery = ref('')\nconst paginationState = ref\u003CPaginationState>({\n pageIndex: 0,\n pageSize: 30,\n})\n\n// Filter items based on search\nconst filteredItems = computed(() => {\n if (!searchQuery.value) {\n return allItems\n }\n return allItems.filter(\n (item) =>\n item.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||\n item.species.toLowerCase().includes(searchQuery.value.toLowerCase()),\n )\n})\n\n// Paginate filtered items\nconst paginatedItems = computed(() => {\n const start = paginationState.value.pageIndex * paginationState.value.pageSize\n const end = start + paginationState.value.pageSize\n return filteredItems.value.slice(start, end)\n})\n\nconst paginationMeta = computed\u003CQueryPaginationMeta>(() => ({\n count: filteredItems.value.length,\n page: paginationState.value.pageIndex + 1,\n pages: Math.ceil(filteredItems.value.length / paginationState.value.pageSize),\n}))\n\nconst handlePageChange = (newPagination: PaginationState) => {\n paginationState.value = newPagination\n}\n\n// Reset to first page when search changes\nwatch(searchQuery, () => {\n paginationState.value.pageIndex = 0\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseCardData class=\"n:mbe-xxl\">\n \u003Ctemplate #header>\n \u003Cnord-stack gap=\"s\">\n \u003Ch2>Pet Directory (Pagination)\u003C/h2>\n \u003Cp class=\"n:font-default n:text-weaker\">\n This demo shows how to apply pagination to a card data component.\n \u003C/p>\n \u003C/nord-stack>\n \u003C/template>\n\n \u003Ctemplate #before-content>\n \u003Cdiv class=\"n:p-m\">\n \u003CInputSearch\n v-model=\"searchQuery\"\n placeholder=\"Search pets...\"\n label=\"Search pets...\"\n hide-label\n size=\"s\"\n />\n \u003C/div>\n \u003C/template>\n\n \u003Ctemplate #content>\n \u003CBaseStackDivided gap=\"none\">\n \u003Cdiv\n v-for=\"item in paginatedItems\"\n :key=\"item.id\"\n class=\"n:p-m n:inline-full\"\n >\n \u003Cdiv\n class=\"n:flex n:flex-row n:flex-nowrap n:items-start n:justify-between n:gap-xl\"\n >\n \u003Cdiv>\n \u003Ch4>{{ item.name }}\u003C/h4>\n \u003Cp class=\"n:text-weaker\">{{ item.species }}\u003C/p>\n \u003Cp class=\"n:mbs-s n:text-weak\">\n {{ item.description }}\n \u003C/p>\n \u003C/div>\n\n \u003Cdiv>\n \u003Cnord-badge\n :variant=\"item.status === 'Active' ? 'success' : 'neutral'\"\n >\n {{ item.status }}\n \u003C/nord-badge>\n \u003C/div>\n \u003C/div>\n \u003C/div>\n\n \u003Cdiv v-if=\"!paginatedItems?.length\" class=\"n:p-l n:text-center\">\n \u003Cp class=\"n:text-weaker\">No pets found matching your search.\u003C/p>\n \u003C/div>\n \u003C/BaseStackDivided>\n \u003C/template>\n\n \u003Ctemplate #footer>\n \u003CBasePagination\n v-model:page-index=\"paginationState.pageIndex\"\n v-model:page-size=\"paginationState.pageSize\"\n :pagination-meta\n @page-change=\"handlePageChange\"\n />\n \u003C/template>\n \u003C/BaseCardData>\n\u003C/template>\n",{"name":163,"displayName":164,"url":165,"code":166},"with-pagination-url-sync","With pagination url sync","/main/#/922/product-patterns/usage-examples/card-data/with-pagination-url-sync","\u003Cscript setup lang=\"ts\">\nimport { toNumber } from '@/utils/number.js'\nimport type { QueryPaginationMeta } from '@/utils/jsonapi.js'\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport BasePagination from '@/components/base/Pagination.vue'\nimport BaseCardData from '@/components/base/card/Data.vue'\nimport InputSearch from '@/components/input/Search.vue'\nconst route = useRoute()\n\n// Mock data\nconst allItems = Array.from({ length: 50 }, (_, i) => ({\n id: i + 1,\n name: `Pet ${i + 1}`,\n species: ['Cat', 'Dog', 'Bird', 'Rabbit'][i % 4],\n status: i % 3 === 0 ? 'Inactive' : 'Active',\n description: `This is a description for pet ${i + 1}`,\n}))\n\nconst searchQuery = computed({\n get: () => (route.query.search as string) || '',\n set: async (value: string) => {\n await navigateTo({\n query: {\n ...route.query,\n search: value || undefined,\n page: undefined, // Reset page when search changes\n },\n })\n },\n})\n\n// Filter items based on search\nconst filteredItems = computed(() => {\n if (!searchQuery.value) {\n return allItems\n }\n return allItems.filter(\n (item) =>\n item.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||\n item.species.toLowerCase().includes(searchQuery.value.toLowerCase()),\n )\n})\n\n// Paginate filtered items\nconst currentPage = computed(() => toNumber(route.query.page) || 1)\nconst pageSize = computed(() => toNumber(route.query.pageSize) || 10)\n\nconst paginatedItems = computed(() => {\n const start = (currentPage.value - 1) * pageSize.value\n const end = start + pageSize.value\n return filteredItems.value.slice(start, end)\n})\n\nconst paginationMeta = computed\u003CQueryPaginationMeta>(() => ({\n count: filteredItems.value.length,\n page: currentPage.value,\n pages: Math.ceil(filteredItems.value.length / pageSize.value),\n}))\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseCardData class=\"n:mbe-xxl\">\n \u003Ctemplate #header>\n \u003Cnord-stack gap=\"s\">\n \u003Ch2>Pet Directory (URL Sync)\u003C/h2>\n \u003Cp class=\"n:font-default n:text-weaker\">\n This demo shows URL synchronization. Search and pagination state is\n reflected in the URL.\n \u003C/p>\n \u003C/nord-stack>\n \u003C/template>\n\n \u003Ctemplate #before-content>\n \u003Cdiv class=\"n:p-m\">\n \u003CInputSearch\n :model-value=\"searchQuery\"\n placeholder=\"Search pets...\"\n label=\"Search pets...\"\n hide-label\n size=\"s\"\n @update:model-value=\"searchQuery = $event\"\n />\n \u003C/div>\n \u003C/template>\n\n \u003Ctemplate #content>\n \u003CBaseStackDivided gap=\"none\">\n \u003Cdiv\n v-for=\"item in paginatedItems\"\n :key=\"item.id\"\n class=\"n:p-m n:inline-full\"\n >\n \u003Cdiv\n class=\"n:flex n:flex-row n:flex-nowrap n:items-start n:justify-between n:gap-xl\"\n >\n \u003Cdiv>\n \u003Ch4>{{ item.name }}\u003C/h4>\n \u003Cp class=\"n:text-weaker\">{{ item.species }}\u003C/p>\n \u003Cp class=\"n:mbs-s n:text-weak\">\n {{ item.description }}\n \u003C/p>\n \u003C/div>\n\n \u003Cdiv>\n \u003Cnord-badge\n :variant=\"item.status === 'Active' ? 'success' : 'neutral'\"\n >\n {{ item.status }}\n \u003C/nord-badge>\n \u003C/div>\n \u003C/div>\n \u003C/div>\n\n \u003Cdiv v-if=\"!paginatedItems?.length\" class=\"n:p-l n:text-center\">\n \u003Cp class=\"n:text-weaker\">No pets found matching your search.\u003C/p>\n \u003C/div>\n \u003C/BaseStackDivided>\n \u003C/template>\n\n \u003Ctemplate #footer>\n \u003CBasePagination\n v-if=\"Boolean(paginationMeta?.count)\"\n :pagination-meta\n use-url-sync\n />\n \u003C/template>\n \u003C/BaseCardData>\n\u003C/template>\n",{"name":168,"displayName":169,"url":170,"code":171},"with-pagination-url-sync-and-filter-id","With pagination url sync and filter id","/main/#/922/product-patterns/usage-examples/card-data/with-pagination-url-sync-and-filter-id","\u003Cscript setup lang=\"ts\">\nimport { toNumber } from '@/utils/number.js'\nimport type { QueryPaginationMeta } from '@/utils/jsonapi.js'\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport BasePagination from '@/components/base/Pagination.vue'\nimport BaseCardData from '@/components/base/card/Data.vue'\nimport InputSearch from '@/components/input/Search.vue'\nconst route = useRoute()\n\n// Mock data\nconst allItems = Array.from({ length: 50 }, (_, i) => ({\n id: i + 1,\n name: `Pet ${i + 1}`,\n species: ['Cat', 'Dog', 'Bird', 'Rabbit'][i % 4],\n status: i % 3 === 0 ? 'Inactive' : 'Active',\n description: `This is a description for pet ${i + 1}`,\n}))\n\nconst searchQuery = computed({\n get: () => (route.query['list-search'] as string) || '',\n set: async (value: string) => {\n await navigateTo({\n query: {\n ...route.query,\n 'list-search': value || undefined,\n 'list-page': undefined, // Reset page when search changes\n },\n })\n },\n})\n\n// Filter items based on search\nconst filteredItems = computed(() => {\n if (!searchQuery.value) {\n return allItems\n }\n return allItems.filter(\n (item) =>\n item.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||\n item.species.toLowerCase().includes(searchQuery.value.toLowerCase()),\n )\n})\n\n// Paginate filtered items\nconst currentPage = computed(() => toNumber(route.query['list-page']) || 1)\nconst pageSize = computed(() => toNumber(route.query['list-pageSize']) || 10)\n\nconst paginatedItems = computed(() => {\n const start = (currentPage.value - 1) * pageSize.value\n const end = start + pageSize.value\n return filteredItems.value.slice(start, end)\n})\n\nconst paginationMeta = computed(\n (): QueryPaginationMeta => ({\n count: filteredItems.value.length,\n page: currentPage.value,\n pages: Math.ceil(filteredItems.value.length / pageSize.value),\n }),\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseCardData class=\"n:mbe-xxl\">\n \u003Ctemplate #header>\n \u003Cnord-stack gap=\"s\">\n \u003Ch2>Pet Directory (URL Sync + Filter ID)\u003C/h2>\n \u003Cp class=\"n:font-default n:text-weaker\">\n This demo shows URL synchronization with filter ID prefix. All URL\n parameters are prefixed with \"list-\" due to the filterId prop.\n \u003C/p>\n \u003C/nord-stack>\n \u003C/template>\n\n \u003Ctemplate #before-content>\n \u003Cdiv class=\"n:p-m\">\n \u003CInputSearch\n :model-value=\"searchQuery\"\n placeholder=\"Search pets...\"\n label=\"Search pets...\"\n hide-label\n size=\"s\"\n @update:model-value=\"searchQuery = $event\"\n />\n \u003C/div>\n \u003C/template>\n\n \u003Ctemplate #content>\n \u003CBaseStackDivided gap=\"none\">\n \u003Cdiv\n v-for=\"item in paginatedItems\"\n :key=\"item.id\"\n class=\"n:p-m n:inline-full\"\n >\n \u003Cdiv\n class=\"n:flex n:flex-row n:flex-nowrap n:items-start n:justify-between n:gap-xl\"\n >\n \u003Cdiv>\n \u003Ch4>{{ item.name }}\u003C/h4>\n \u003Cp class=\"n:text-weaker\">{{ item.species }}\u003C/p>\n \u003Cp class=\"n:mbs-s n:text-weak\">\n {{ item.description }}\n \u003C/p>\n \u003C/div>\n\n \u003Cdiv>\n \u003Cnord-badge\n :variant=\"item.status === 'Active' ? 'success' : 'neutral'\"\n >\n {{ item.status }}\n \u003C/nord-badge>\n \u003C/div>\n \u003C/div>\n \u003C/div>\n\n \u003Cdiv v-if=\"!paginatedItems?.length\" class=\"n:p-l n:text-center\">\n \u003Cp class=\"n:text-weaker\">No pets found matching your search.\u003C/p>\n \u003C/div>\n \u003C/BaseStackDivided>\n \u003C/template>\n\n \u003Ctemplate #footer>\n \u003CBasePagination\n v-if=\"Boolean(paginationMeta?.count)\"\n :pagination-meta\n use-url-sync\n filter-id=\"list\"\n />\n \u003C/template>\n \u003C/BaseCardData>\n\u003C/template>\n",{"name":173,"displayName":174,"url":175,"code":176},"with-sticky-scrolling","With sticky scrolling","/main/#/922/product-patterns/usage-examples/card-data/with-sticky-scrolling","\u003Cscript setup lang=\"ts\">\nimport { safeMathRandom } from '@/utils/number.js'\nimport {\n getCurrentTimestamp,\n getDateTimeISOFromTimestamp,\n} from '@/utils/date/getter.js'\nimport { formatToDateTimeISODate } from '@/utils/date/conversion.js'\nimport type { PaginationState } from '@tanstack/vue-table'\nimport type { QueryPaginationMeta } from '@/utils/jsonapi.js'\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport BasePagination from '@/components/base/Pagination.vue'\nimport BaseCardData from '@/components/base/card/Data.vue'\nimport InputSearch from '@/components/input/Search.vue'\n\n// Mock data with many items to demonstrate scrolling\nconst allItems = Array.from({ length: 100 }, (_, i) => ({\n id: i + 1,\n name: `Pet ${i + 1}`,\n species: ['Cat', 'Dog', 'Bird', 'Rabbit', 'Fish', 'Hamster'][i % 6],\n status: i % 4 === 0 ? 'Inactive' : 'Active',\n description: `This is pet ${i + 1} with some details about their care and status.`,\n lastVisit: formatToDateTimeISODate(\n getDateTimeISOFromTimestamp(\n getCurrentTimestamp() - safeMathRandom() * 30 * 24 * 60 * 60 * 1000,\n ),\n ),\n}))\n\nconst searchQuery = ref('')\nconst paginationState = ref\u003CPaginationState>({\n pageIndex: 0,\n pageSize: 15,\n})\n\n// Filter items based on search\nconst filteredItems = computed(() => {\n if (!searchQuery.value) {\n return allItems\n }\n return allItems.filter(\n (item) =>\n item.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||\n item.species.toLowerCase().includes(searchQuery.value.toLowerCase()),\n )\n})\n\n// Paginate filtered items\nconst paginatedItems = computed(() => {\n const start = paginationState.value.pageIndex * paginationState.value.pageSize\n const end = start + paginationState.value.pageSize\n return filteredItems.value.slice(start, end)\n})\n\nconst paginationMeta = computed(\n (): QueryPaginationMeta => ({\n count: filteredItems.value.length,\n page: paginationState.value.pageIndex + 1,\n pages: Math.ceil(\n filteredItems.value.length / paginationState.value.pageSize,\n ),\n }),\n)\n\nconst handlePageChange = (newPagination: PaginationState) => {\n paginationState.value = newPagination\n}\n\n// Reset to first page when search changes\nwatch(searchQuery, () => {\n paginationState.value.pageIndex = 0\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseCardData class=\"n:mbe-xxl\" sticky-before-content>\n \u003Ctemplate #header>\n \u003Cnord-stack gap=\"s\">\n \u003Ch2>Pet Directory (Sticky Scrolling)\u003C/h2>\n \u003Cp class=\"n:font-default n:text-weaker\">\n This card has a fixed height with sticky scrolling. The header and\n footer remain visible while content scrolls.\n \u003C/p>\n \u003C/nord-stack>\n \u003C/template>\n\n \u003Ctemplate #before-content>\n \u003Cdiv class=\"n:p-m\">\n \u003CInputSearch\n v-model=\"searchQuery\"\n placeholder=\"Search pets...\"\n label=\"Search pets...\"\n hide-label\n size=\"s\"\n />\n \u003C/div>\n \u003C/template>\n\n \u003Ctemplate #content>\n \u003CBaseStackDivided gap=\"none\">\n \u003Cdiv\n v-for=\"item in paginatedItems\"\n :key=\"item.id\"\n class=\"n:p-m n:inline-full\"\n >\n \u003Cdiv\n class=\"n:flex n:flex-row n:flex-nowrap n:items-start n:justify-between n:gap-xl\"\n >\n \u003Cdiv>\n \u003Ch4>{{ item.name }}\u003C/h4>\n \u003Cp class=\"n:text-weaker\">{{ item.species }}\u003C/p>\n \u003Cp class=\"n:mbs-s n:text-weak\">\n {{ item.description }}\n \u003C/p>\n \u003Cp class=\"n:text-weaker\">Last visit: {{ item.lastVisit }}\u003C/p>\n \u003C/div>\n\n \u003Cdiv>\n \u003Cnord-badge\n :variant=\"item.status === 'Active' ? 'success' : 'neutral'\"\n >\n {{ item.status }}\n \u003C/nord-badge>\n \u003C/div>\n \u003C/div>\n \u003C/div>\n\n \u003Cdiv v-if=\"!paginatedItems?.length\" class=\"n:p-l n:text-center\">\n \u003Cp class=\"n:text-weaker\">No pets found matching your search.\u003C/p>\n \u003C/div>\n \u003C/BaseStackDivided>\n \u003C/template>\n\n \u003Ctemplate #footer>\n \u003CBasePagination\n v-model:page-index=\"paginationState.pageIndex\"\n v-model:page-size=\"paginationState.pageSize\"\n :pagination-meta\n :page-size-options=\"[10, 15, 25]\"\n @page-change=\"handlePageChange\"\n />\n \u003C/template>\n \u003C/BaseCardData>\n\u003C/template>\n",{"name":178,"displayName":179,"description":180,"usageContent":181,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":182},"pcnf-combobox","Combobox","Combobox is an autocomplete input that allows users to filter a list of options and select one or more values.","\u003Cdiv class=\"n-usage n-usage-do\">\n\u003Ch3>Do\u003C/h3>\n\u003Cul>\n\u003Cli>Use when you want to help users select an item from a large list of options.\u003C/li>\n\u003Cli>Combobox is useful for presenting options when the screen real estate is limited.\u003C/li>\n\u003Cli>Label combobox clearly so that the user knows what kind of options will be available.\u003C/li>\n\u003Cli>Order options in an intentional way so it's easier for the user to find a specific value.\u003C/li>\n\u003C/ul>\n\u003C/div>\n\u003Cdiv class=\"n-usage n-usage-dont\">\n\u003Ch3>Don't\u003C/h3>\n\u003Cul>\n\u003Cli>Don't use a combobox if you have less than 6 options to choose from. Consider using \u003Ca href=\"/components/select/\">select\u003C/a>, \u003Ca href=\"/components/segmented-control/\">segmented control\u003C/a> or \u003Ca href=\"/components/radio/\">radio components\u003C/a> instead.\u003C/li>\n\u003C/ul>\n\u003C/div>",[183,186,191,196,199,204,209,214,219,224,229,234],{"name":15,"displayName":16,"url":184,"code":185},"/main/#/922/product-patterns/usage-examples/combobox/basic","\u003Cscript lang=\"ts\" setup>\nimport InputComboboxSingle from '@/components/input/ComboboxSingle.vue'\nconst value = ref\u003Cstring | undefined>(undefined)\nconst options = ref([\n { label: 'Amphibian', value: 'AMPHIBIAN' },\n { label: 'Canine', value: 'CANINE' },\n { label: 'Feline', value: 'FELINE' },\n { label: 'Rodents', value: 'RODENTS' },\n])\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputComboboxSingle v-model=\"value\" label=\"Species\" :options />\n\u003C/template>\n",{"name":187,"displayName":188,"url":189,"code":190},"async-multi-select","Async multi select","/main/#/922/product-patterns/usage-examples/combobox/async-multi-select","\u003Cscript lang=\"ts\" setup>\nimport type { Option } from '@/components/base/Combobox.vue'\nimport InputComboboxMultiple from '@/components/input/ComboboxMultiple.vue'\n\nconst value = ref\u003COption[]>([\n { value: 'Java', label: 'Java' },\n { value: 'JavaScript', label: 'JavaScript' },\n])\n\nconst asyncOptions = async (query: string) => {\n return await fetchLanguages(query)\n}\n\ntype DataResponseItem = {\n objectId: string\n ProgrammingLanguage: string\n createdAt: string\n updatedAt: string\n}\n\nconst fetchLanguages = async (query: string) => {\n // From: https://www.back4app.com/database/paul-datasets/list-of-all-programming-languages/get-started/javascript/rest-api/fetch?objectClassSlug=dataset\n\n let where = ''\n\n if (query) {\n where =\n '&where=' +\n encodeURIComponent(\n JSON.stringify({\n ProgrammingLanguage: {\n $regex: `${query}|${query.toUpperCase()}|${\n query[0].toUpperCase() + query.slice(1)\n }`,\n },\n }),\n )\n }\n\n const response = await fetch(\n 'https://parseapi.back4app.com/classes/All_Programming_Languages?limit=9999&order=ProgrammingLanguage&keys=ProgrammingLanguage' +\n where,\n {\n headers: {\n 'X-Parse-Application-Id': 'XpRShKqJcxlqE5EQKs4bmSkozac44osKifZvLXCL', // This is the fake app's application id\n 'X-Parse-Master-Key': 'Mr2UIBiCImScFbbCLndBv8qPRUKwBAq27plwXVuv', // This is the fake app's readonly master key\n },\n },\n )\n\n const data = await response.json() // Here you have the data that you need\n\n return data.results.map((item: DataResponseItem) => ({\n value: item.ProgrammingLanguage,\n label: item.ProgrammingLanguage,\n }))\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-stack>\n \u003CInputComboboxMultiple\n v-model=\"value\"\n async\n label=\"Programming language\"\n :min-chars=\"0\"\n :resolve-on-load=\"false\"\n resolve-on-open\n :delay=\"0\"\n :max-displayed-options=\"10\"\n :options=\"asyncOptions\"\n value-as-object\n infinite-scroll\n expand\n />\n \u003C/nord-stack>\n\u003C/template>\n",{"name":192,"displayName":193,"url":194,"code":195},"async-single-select","Async single select","/main/#/922/product-patterns/usage-examples/combobox/async-single-select","\u003Cscript lang=\"ts\" setup>\nimport type { Option } from '@/components/base/Combobox.vue'\nimport InputComboboxSingle from '@/components/input/ComboboxSingle.vue'\n\nconst value = ref\u003COption | undefined>({\n value: 'Java',\n label: 'Java',\n})\n\nconst asyncOptions = async (query: string) => {\n return await fetchLanguages(query)\n}\n\ntype DataResponseItem = {\n objectId: string\n ProgrammingLanguage: string\n createdAt: string\n updatedAt: string\n}\n\nconst fetchLanguages = async (query: string) => {\n // From: https://www.back4app.com/database/paul-datasets/list-of-all-programming-languages/get-started/javascript/rest-api/fetch?objectClassSlug=dataset\n\n let where = ''\n\n if (query) {\n where =\n '&where=' +\n encodeURIComponent(\n JSON.stringify({\n ProgrammingLanguage: {\n $regex: `${query}|${query.toUpperCase()}|${\n query[0].toUpperCase() + query.slice(1)\n }`,\n },\n }),\n )\n }\n\n const response = await fetch(\n 'https://parseapi.back4app.com/classes/All_Programming_Languages?limit=9999&order=ProgrammingLanguage&keys=ProgrammingLanguage' +\n where,\n {\n headers: {\n 'X-Parse-Application-Id': 'XpRShKqJcxlqE5EQKs4bmSkozac44osKifZvLXCL', // This is the fake app's application id\n 'X-Parse-Master-Key': 'Mr2UIBiCImScFbbCLndBv8qPRUKwBAq27plwXVuv', // This is the fake app's readonly master key\n },\n },\n )\n\n const data = await response.json() // Here you have the data that you need\n\n return data.results.map((item: DataResponseItem) => ({\n value: item.ProgrammingLanguage,\n label: item.ProgrammingLanguage,\n }))\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputComboboxSingle\n v-model=\"value\"\n async\n label=\"Programming language\"\n :min-chars=\"1\"\n :resolve-on-load=\"false\"\n resolve-on-open\n :delay=\"0\"\n :max-displayed-options=\"10\"\n :options=\"asyncOptions\"\n value-as-object\n infinite-scroll\n />\n\u003C/template>\n",{"name":25,"displayName":26,"url":197,"code":198},"/main/#/922/product-patterns/usage-examples/combobox/disabled","\u003Cscript lang=\"ts\" setup>\nimport InputComboboxMultiple from '@/components/input/ComboboxMultiple.vue'\nconst value = ref\u003Cstring[]>(['FELINE'])\nconst options = ref([\n { label: 'Amphibian', value: 'AMPHIBIAN' },\n { label: 'Canine', value: 'CANINE' },\n { label: 'Feline', value: 'FELINE' },\n { label: 'Rodents', value: 'RODENTS' },\n])\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputComboboxMultiple v-model=\"value\" label=\"Species\" :options disabled />\n\u003C/template>\n",{"name":200,"displayName":201,"url":202,"code":203},"expanded","Expanded","/main/#/922/product-patterns/usage-examples/combobox/expanded","\u003Cscript lang=\"ts\" setup>\nimport InputComboboxMultiple from '@/components/input/ComboboxMultiple.vue'\nconst value = ref\u003Cstring[]>(['FELINE'])\nconst options = ref([\n { label: 'Amphibian', value: 'AMPHIBIAN' },\n { label: 'Canine', value: 'CANINE' },\n { label: 'Feline', value: 'FELINE' },\n { label: 'Rodents', value: 'RODENTS' },\n])\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputComboboxMultiple v-model=\"value\" label=\"Species\" :options expand />\n\u003C/template>\n",{"name":205,"displayName":206,"url":207,"code":208},"multi-select","Multi select","/main/#/922/product-patterns/usage-examples/combobox/multi-select","\u003Cscript lang=\"ts\" setup>\nimport InputComboboxMultiple from '@/components/input/ComboboxMultiple.vue'\nconst value = ref\u003Cstring[]>(['FELINE'])\nconst options = ref([\n { label: 'Amphibian', value: 'AMPHIBIAN' },\n { label: 'Canine', value: 'CANINE' },\n { label: 'Feline', value: 'FELINE' },\n { label: 'Rodents', value: 'RODENTS' },\n])\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputComboboxMultiple v-model=\"value\" label=\"Species\" :options />\n\u003C/template>\n",{"name":210,"displayName":211,"url":212,"code":213},"open-on-focus","Open on focus","/main/#/922/product-patterns/usage-examples/combobox/open-on-focus","\u003Cscript lang=\"ts\" setup>\nimport InputComboboxMultiple from '@/components/input/ComboboxMultiple.vue'\nconst value = ref\u003Cstring[]>(['FELINE'])\nconst options = ref([\n { label: 'Amphibian', value: 'AMPHIBIAN' },\n { label: 'Canine', value: 'CANINE' },\n { label: 'Feline', value: 'FELINE' },\n { label: 'Rodents', value: 'RODENTS' },\n])\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputComboboxMultiple\n v-model=\"value\"\n label=\"Species\"\n :options\n open-on-focus\n />\n\u003C/template>\n",{"name":215,"displayName":216,"url":217,"code":218},"required","Required","/main/#/922/product-patterns/usage-examples/combobox/required","\u003Cscript lang=\"ts\" setup>\nimport InputComboboxSingle from '@/components/input/ComboboxSingle.vue'\nconst value = ref\u003Cstring | undefined>(undefined)\nconst options = ref([\n { label: 'Amphibian', value: 'AMPHIBIAN' },\n { label: 'Canine', value: 'CANINE' },\n { label: 'Feline', value: 'FELINE' },\n { label: 'Rodents', value: 'RODENTS' },\n])\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputComboboxSingle v-model=\"value\" label=\"Species\" :options required />\n\u003C/template>\n",{"name":220,"displayName":221,"url":222,"code":223},"with-a-hint","With a hint","/main/#/922/product-patterns/usage-examples/combobox/with-a-hint","\u003Cscript lang=\"ts\" setup>\nimport InputComboboxSingle from '@/components/input/ComboboxSingle.vue'\nconst value = ref\u003Cstring | undefined>(undefined)\nconst options = ref([\n { label: 'Amphibian', value: 'AMPHIBIAN' },\n { label: 'Canine', value: 'CANINE' },\n { label: 'Feline', value: 'FELINE' },\n { label: 'Rodents', value: 'RODENTS' },\n])\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputComboboxSingle\n v-model=\"value\"\n label=\"Species\"\n :options\n hint=\"Hint is an accessible way to provide additional information that might help the user\"\n />\n\u003C/template>\n",{"name":225,"displayName":226,"url":227,"code":228},"with-a-placeholder","With a placeholder","/main/#/922/product-patterns/usage-examples/combobox/with-a-placeholder","\u003Cscript lang=\"ts\" setup>\nimport InputComboboxMultiple from '@/components/input/ComboboxMultiple.vue'\nconst value = ref\u003Cstring[]>([])\nconst options = ref([\n { label: 'Amphibian', value: 'AMPHIBIAN' },\n { label: 'Canine', value: 'CANINE' },\n { label: 'Feline', value: 'FELINE' },\n { label: 'Rodents', value: 'RODENTS' },\n])\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputComboboxMultiple\n v-model=\"value\"\n label=\"Species\"\n :options\n placeholder=\"Please select\"\n />\n\u003C/template>\n",{"name":230,"displayName":231,"url":232,"code":233},"with-create-option","With create option","/main/#/922/product-patterns/usage-examples/combobox/with-create-option","\u003Cscript lang=\"ts\" setup>\nimport InputComboboxMultiple from '@/components/input/ComboboxMultiple.vue'\nconst value = ref\u003Cstring[]>(['FELINE'])\nconst options = ref([\n { label: 'Amphibian', value: 'AMPHIBIAN' },\n { label: 'Canine', value: 'CANINE' },\n { label: 'Feline', value: 'FELINE' },\n { label: 'Rodents', value: 'RODENTS' },\n])\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputComboboxMultiple\n v-model=\"value\"\n label=\"Species\"\n :options\n create-option\n />\n\u003C/template>\n",{"name":235,"displayName":236,"url":237,"code":238},"with-error","With error","/main/#/922/product-patterns/usage-examples/combobox/with-error","\u003Cscript lang=\"ts\" setup>\nimport InputComboboxSingle from '@/components/input/ComboboxSingle.vue'\nconst value = ref\u003Cstring | undefined>(undefined)\nconst options = ref([\n { label: 'Amphibian', value: 'AMPHIBIAN' },\n { label: 'Canine', value: 'CANINE' },\n { label: 'Feline', value: 'FELINE' },\n { label: 'Rodents', value: 'RODENTS' },\n])\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputComboboxSingle\n v-model=\"value\"\n label=\"Species\"\n :options\n :error=\"value ? undefined : 'Select an option'\"\n />\n\u003C/template>\n",{"name":240,"displayName":241,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":242},"pcnf-communication-preferences","Communication Preferences",[243,248,253,258,263],{"name":244,"displayName":245,"url":246,"code":247},"agreed","Agreed","/main/#/922/product-patterns/usage-examples/communication-preferences/agreed","\u003Cscript setup lang=\"ts\">\nimport { Status } from '@/models/communicationPreferences.js'\nimport ClientCommunicationPreferences from '@/components/ClientCommunicationPreferences.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003CClientCommunicationPreferences\n :status=\"Status.Agreed\"\n valid-to=\"2026/01/31\"\n />\n\u003C/template>\n",{"name":249,"displayName":250,"url":251,"code":252},"declined","Declined","/main/#/922/product-patterns/usage-examples/communication-preferences/declined","\u003Cscript setup lang=\"ts\">\nimport { Status } from '@/models/communicationPreferences.js'\nimport ClientCommunicationPreferences from '@/components/ClientCommunicationPreferences.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003CClientCommunicationPreferences\n :status=\"Status.Declined\"\n valid-to=\"2026/01/31\"\n />\n\u003C/template>\n",{"name":254,"displayName":255,"url":256,"code":257},"default","Default","/main/#/922/product-patterns/usage-examples/communication-preferences/default","\u003Cscript setup lang=\"ts\">\nimport ClientCommunicationPreferences from '@/components/ClientCommunicationPreferences.vue'\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003CClientCommunicationPreferences />\n\u003C/template>\n",{"name":259,"displayName":260,"url":261,"code":262},"expired","Expired","/main/#/922/product-patterns/usage-examples/communication-preferences/expired","\u003Cscript setup lang=\"ts\">\nimport { Status } from '@/models/communicationPreferences.js'\nimport ClientCommunicationPreferences from '@/components/ClientCommunicationPreferences.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003CClientCommunicationPreferences\n :status=\"Status.Expired\"\n valid-to=\"2025/01/31\"\n />\n\u003C/template>\n",{"name":264,"displayName":265,"url":266,"code":267},"expiring-soon","Expiring soon","/main/#/922/product-patterns/usage-examples/communication-preferences/expiring-soon","\u003Cscript setup lang=\"ts\">\nimport { Status } from '@/models/communicationPreferences.js'\nimport ClientCommunicationPreferences from '@/components/ClientCommunicationPreferences.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003CClientCommunicationPreferences\n :status=\"Status.ExpiredSoon\"\n valid-to=\"2025/01/31\"\n />\n\u003C/template>\n",{"name":269,"displayName":270,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":271},"pcnf-container","Container",[272,275,280,285,290,295,300,305],{"name":15,"displayName":16,"url":273,"code":274},"/main/#/922/product-patterns/usage-examples/container/basic","\u003Cscript setup lang=\"ts\">\nconst breakpoints = [\n { name: 'xl', value: '2400px' },\n { name: 'l', value: '1000px' },\n { name: 'm', value: '840px' },\n { name: 's', value: '620px' },\n { name: 'xs', value: '500px' },\n { name: 'xxs', value: '400px' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cul>\n \u003Cli\n v-for=\"({ name, value }, key) in breakpoints\"\n :key\n :class=\"[\n `n-container-${name}`,\n 'n:mbe-m n:p-s',\n 'n:bg-accent n:text-m n:text-on-accent',\n ]\"\n >\n {{ name }} / {{ value }}\n \u003C/li>\n \u003C/ul>\n\u003C/template>\n",{"name":276,"displayName":277,"url":278,"code":279},"default-three-columns-layout","Default three columns layout","/main/#/922/product-patterns/usage-examples/container/default-three-columns-layout","\u003Cscript setup lang=\"ts\">\nimport BaseContainer from '@/components/base/Container.vue'\nimport BaseCardInnerSection from '@/components/base/card/InnerSection.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseContainer>\n \u003CBaseCardInnerSection>\n \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Lorem\u003C/div>\n \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Ipsum\u003C/div>\n \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Dolor\u003C/div>\n \u003C/BaseCardInnerSection>\n \u003C/BaseContainer>\n\u003C/template>\n",{"name":281,"displayName":282,"url":283,"code":284},"form-container","Form container","/main/#/922/product-patterns/usage-examples/container/form-container","\u003Cscript setup lang=\"ts\">\nimport { z } from 'zod'\nimport { useFormValidation } from '@/composables/useFormValidation.js'\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport BaseContainer from '@/components/base/Container.vue'\nimport BaseCardInnerSection from '@/components/base/card/InnerSection.vue'\nimport BaseDropdown from '@/components/base/dropdown/Dropdown.vue'\nimport FormNordField from '@/components/form/NordField.vue'\n\nconst containerElement = useTemplateRef('containerRef')\nconst formElement = useTemplateRef('formRef')\nconst formSchema = z.object(\n Array.from({ length: 12 }, (_, i) => `test${i + 1}`).reduce(\n (acc, key) => {\n acc[key] = z.string().optional()\n return acc\n },\n {} as Record\u003Cstring, z.ZodOptional\u003Cz.ZodString>>,\n ),\n)\n\nconst { handleErrors } = useFormValidation(formElement)\nconst { handleSubmit } = useForm({\n validationSchema: toTypedSchema(formSchema),\n})\nconst containerSizes = useElementSize(containerElement)\n\nconst onSubmit = handleSubmit(\n (data) => console.log(data),\n () => handleErrors(),\n)\n\nconst resolveWidthToBreakpoint = (width: number) => {\n if (width \u003C 500) {\n return 'xs'\n }\n if (width \u003C 620) {\n return 's'\n }\n if (width \u003C 840) {\n return 'm'\n }\n if (width \u003C 1000) {\n return 'l'\n }\n return 'xl'\n}\n\nconst getPlaygroundDetails = computed(() => ({\n breakpoint: resolveWidthToBreakpoint(containerSizes.width.value),\n containerSizes,\n}))\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"n:mbe-xxl n:flex n:flex-col n:flex-wrap n:gap-l\">\n \u003Ch2 slot=\"header\">Container sizes\u003C/h2>\n\n \u003Cpre>{{ getPlaygroundDetails }}\u003C/pre>\n\n \u003CBaseContainer ref=\"containerRef\" mode=\"form\">\n \u003Cnord-card padding=\"l\">\n \u003Ch2 slot=\"header\">Form container\u003C/h2>\n\n \u003Cform ref=\"formRef\" @submit=\"onSubmit\">\n \u003Cdiv class=\"n:flex n:flex-col n:gap-l\">\n \u003CBaseCardInnerSection :cols=\"1\">\n \u003CFormNordField label=\"Full width input\" name=\"test\" expand />\n\n \u003Cdiv\n class=\"n:grid n:grid-cols-1 n:gap-y-m n:@xs:grid-cols-2 n:@xs:gap-x-m\"\n >\n \u003CFormNordField label=\"First name\" name=\"test2\" expand />\n \u003CFormNordField label=\"Last name\" name=\"test3\" expand />\n \u003C/div>\n\n \u003Cdiv\n class=\"n:grid n:grid-cols-1 n:gap-y-m n:@xs:grid-cols-2 n:@xs:gap-x-m n:@s:grid-cols-3\"\n >\n \u003CFormNordField label=\"1/3\" name=\"test4\" expand />\n \u003CFormNordField label=\"2/3\" name=\"test5\" expand />\n \u003CFormNordField label=\"3/3\" name=\"test6\" expand />\n \u003C/div>\n\n \u003CBaseStackDivided>\n \u003Cdiv\n class=\"n:grid n:grid-cols-1 n:gap-y-m n:@xs:grid-cols-2 n:@xs:gap-x-m\"\n >\n \u003CFormNordField\n label=\"Small\"\n name=\"test7\"\n inline-size=\"160px\"\n />\n\n \u003CFormNordField label=\"XS\" name=\"test8\" inline-size=\"104px\" />\n \u003C/div>\n\n \u003Cdiv\n class=\"n:flex n:flex-col n:gap-y-m n:@xs:flex-row n:@xs:gap-x-m\"\n >\n \u003CFormNordField\n label=\"Small\"\n name=\"test9\"\n inline-size=\"160px\"\n />\n\n \u003CFormNordField label=\"Fluid\" name=\"test10\" expand />\n \u003C/div>\n\n \u003Cdiv\n class=\"n:flex n:flex-col n:gap-y-m n:@xs:flex-row n:@xs:gap-x-m\"\n >\n \u003CFormNordField label=\"XS\" name=\"test11\" inline-size=\"104px\" />\n\n \u003CFormNordField label=\"Fluid\" name=\"test12\" expand />\n \u003C/div>\n\n \u003CBaseCardInnerSection>\n \u003CBaseDropdown\n title=\"Lorem\"\n :options=\"[\n {\n label: 'Ipsum',\n clickHandler: () =>\n console.log(\n 'Nam et cursus nisi, ac malesuada risus.',\n ),\n },\n ]\"\n />\n \u003C/BaseCardInnerSection>\n \u003C/BaseStackDivided>\n \u003C/BaseCardInnerSection>\n \u003C/div>\n \u003C/form>\n \u003C/nord-card>\n \u003C/BaseContainer>\n \u003C/div>\n\u003C/template>\n",{"name":286,"displayName":287,"url":288,"code":289},"inline-fluid-layout","Inline fluid layout","/main/#/922/product-patterns/usage-examples/container/inline-fluid-layout","\u003Cscript setup lang=\"ts\">\nimport { useComponentUI } from '@/composables/useComponentUI.js'\nimport BaseContainer from '@/components/base/Container.vue'\nimport BaseCardInnerSection from '@/components/base/card/InnerSection.vue'\nimport FormNordField from '@/components/form/NordField.vue'\n\nconst { getSizeConfig } = useComponentUI()\n\nconst inlineSize = computed(\n () =>\n getSizeConfig('nord-input', {\n size: 's',\n }).maxInlineSize,\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseContainer>\n \u003CBaseCardInnerSection class=\"n:mbe-xxl\">\n \u003Cdiv class=\"n:flex n:flex-col n:gap-y-m n:@xs:gap-x-m n:@s:flex-row\">\n \u003CFormNordField label=\"Field A\" name=\"field1\" :inline-size />\n\n \u003Cdiv\n class=\"n:grid n:flex-1 n:grid-cols-1 n:gap-y-m n:@xs:grid-cols-2 n:@xs:gap-x-m\"\n >\n \u003CFormNordField label=\"Field B\" name=\"field2\" expand />\n \u003CFormNordField label=\"Field C\" name=\"field3\" expand />\n \u003C/div>\n \u003C/div>\n \u003C/BaseCardInnerSection>\n\n \u003CBaseCardInnerSection>\n \u003Cdiv class=\"n:flex n:flex-col n:gap-y-m n:@xs:gap-x-m n:@s:flex-row\">\n \u003CFormNordField label=\"Field D\" name=\"field4\" :inline-size />\n \u003CFormNordField label=\"Field E\" name=\"field5\" expand />\n \u003C/div>\n \u003C/BaseCardInnerSection>\n \u003C/BaseContainer>\n\u003C/template>\n",{"name":291,"displayName":292,"url":293,"code":294},"one-column-layout","One column layout","/main/#/922/product-patterns/usage-examples/container/one-column-layout","\u003Cscript setup lang=\"ts\">\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport BaseContainer from '@/components/base/Container.vue'\nimport BaseCardInnerSection from '@/components/base/card/InnerSection.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseContainer>\n \u003CBaseStackDivided>\n \u003C!-- When only child -->\n \u003CBaseCardInnerSection>\n \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Lorem\u003C/div>\n \u003C/BaseCardInnerSection>\n\n \u003C!-- If you want to keep it as 1 column -->\n \u003CBaseCardInnerSection :cols=\"1\">\n \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Lorem\u003C/div>\n \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Ipsum\u003C/div>\n \u003C/BaseCardInnerSection>\n \u003C/BaseStackDivided>\n \u003C/BaseContainer>\n\u003C/template>\n",{"name":296,"displayName":297,"url":298,"code":299},"pair-columns","Pair columns","/main/#/922/product-patterns/usage-examples/container/pair-columns","\u003Cscript setup lang=\"ts\">\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport BaseContainer from '@/components/base/Container.vue'\nimport BaseCardInnerSection from '@/components/base/card/InnerSection.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseContainer class=\"n:flex n:flex-col n:flex-wrap n:gap-l\">\n \u003CBaseStackDivided>\n \u003CBaseCardInnerSection>\n \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Lorem\u003C/div>\n \u003Cdiv\n class=\"n:bg-accent n:p-s n:text-m n:text-on-accent n:@xs:col-span-2\"\n >\n Ipsum\n \u003C/div>\n \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Dolor\u003C/div>\n \u003C/BaseCardInnerSection>\n\n \u003C!-- More complex example with nested two-column span usage -->\n \u003CBaseCardInnerSection :cols=\"1\">\n \u003Cdiv\n class=\"n:grid n:grid-cols-1 n:gap-y-m n:@xs:grid-cols-2 n:@xs:gap-x-m n:@s:grid-cols-3\"\n >\n \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Lorem\u003C/div>\n \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Ipsum\u003C/div>\n \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Dolor\u003C/div>\n \u003C/div>\n\n \u003Cdiv\n class=\"n:grid n:grid-cols-1 n:gap-y-m n:@xs:grid-cols-2 n:@xs:gap-x-m n:@s:grid-cols-3\"\n >\n \u003Cdiv\n class=\"n:grid n:grid-cols-1 n:gap-y-m n:@xs:col-span-2 n:@xs:grid-cols-2 n:@xs:gap-x-m\"\n >\n \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Sit\u003C/div>\n \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Amet\u003C/div>\n \u003C/div>\n \u003C/div>\n \u003C/BaseCardInnerSection>\n \u003C/BaseStackDivided>\n \u003C/BaseContainer>\n\u003C/template>\n",{"name":301,"displayName":302,"url":303,"code":304},"readonly-container","Readonly container","/main/#/922/product-patterns/usage-examples/container/readonly-container","\u003Cscript setup lang=\"ts\">\nimport BaseContainer from '@/components/base/Container.vue'\nimport BaseFormattedAddress from '@/components/base/formatted/Address.vue'\nimport BaseReadOnlyField from '@/components/base/read-only/Field.vue'\nimport BaseCardInnerSection from '@/components/base/card/InnerSection.vue'\n\nconst containerElement = useTemplateRef('containerRef')\nconst containerSizes = useElementSize(containerElement)\n\nconst resolveWidthToBreakpoint = (width: number) => {\n if (width \u003C 500) {\n return 'xs'\n }\n if (width \u003C 620) {\n return 's'\n }\n if (width \u003C 840) {\n return 'm'\n }\n if (width \u003C 1000) {\n return 'l'\n }\n return 'xl'\n}\n\nconst getPlaygroundDetails = computed(() => ({\n breakpoint: resolveWidthToBreakpoint(containerSizes.width.value),\n containerSizes,\n}))\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"n:mbe-xxl n:flex n:flex-col n:flex-wrap n:gap-l\">\n \u003Ch2 slot=\"header\">Container sizes\u003C/h2>\n\n \u003Cpre>{{ getPlaygroundDetails }}\u003C/pre>\n\n \u003CBaseContainer ref=\"containerRef\">\n \u003Cnord-card padding=\"l\">\n \u003Ch2 slot=\"header\">Readonly container\u003C/h2>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n \u003Cdiv class=\"n:rounded-s n:bg-default n:p-m\">\n \u003CBaseCardInnerSection>\n \u003CBaseReadOnlyField\n label=\"Holding place number\"\n value=\"Lorem 12345\"\n />\n \u003CBaseReadOnlyField\n label=\"Description\"\n value=\"Ipsum dolor sit amet\"\n />\n \u003CBaseReadOnlyField label=\"Address\">\n \u003Cspan class=\"n:text-weaker\">(Same as farm)\u003C/span>\n \u003C/BaseReadOnlyField>\n \u003C/BaseCardInnerSection>\n \u003C/div>\n \u003Cdiv class=\"n:rounded-s n:bg-default n:p-m\">\n \u003CBaseCardInnerSection>\n \u003CBaseReadOnlyField\n label=\"Holding place number\"\n value=\"Consectetur\"\n />\n \u003CBaseReadOnlyField\n label=\"Description\"\n value=\"Adipiscing elit sed eiusmod tempor incididunt\"\n />\n \u003CBaseReadOnlyField label=\"Address\">\n \u003CBaseFormattedAddress\n country=\"NO\"\n zip-code=\"0042\"\n city=\"Oslo\"\n street-address=\"Gård vei 404\"\n />\n \u003C/BaseReadOnlyField>\n \u003C/BaseCardInnerSection>\n \u003C/div>\n \u003C/div>\n \u003C/nord-card>\n \u003C/BaseContainer>\n \u003C/div>\n\u003C/template>\n",{"name":306,"displayName":307,"url":308,"code":309},"two-columns-layout","Two columns layout","/main/#/922/product-patterns/usage-examples/container/two-columns-layout","\u003Cscript setup lang=\"ts\">\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport BaseContainer from '@/components/base/Container.vue'\nimport BaseCardInnerSection from '@/components/base/card/InnerSection.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseContainer>\n \u003CBaseStackDivided>\n \u003CBaseCardInnerSection>\n \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Lorem\u003C/div>\n \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Ipsum\u003C/div>\n \u003C/BaseCardInnerSection>\n\n \u003CBaseCardInnerSection :cols=\"2\">\n \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Lorem\u003C/div>\n \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Ipsum\u003C/div>\n \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Dolor\u003C/div>\n \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Sit\u003C/div>\n \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Amet\u003C/div>\n \u003C/BaseCardInnerSection>\n \u003C/BaseStackDivided>\n \u003C/BaseContainer>\n\u003C/template>\n",{"name":311,"displayName":312,"description":313,"usageContent":314,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":315},"pcnf-cta-and-links","Cta And Links","CTAs (call-to-actions) and Links enable users to navigate between pages or trigger specific actions within an application. CTA is based on the existing Button component.","\u003Ch3>CTA\u003C/h3>\n\u003Cp>Call-to-actions are used for action-oriented tasks like submitting, creating, or navigating within an app.\u003C/p>\n\u003Cdiv class=\"n-usage n-usage-do\">\n\u003Ch3>Do\u003C/h3>\n\u003Cul>\n\u003Cli>Use for primary actions that you want users to take, such as \"Save\", \"Create new\", \"Cancel\", and \"Back\".\u003C/li>\n\u003Cli>Label buttons clearly and concisely using action-oriented text.\u003C/li>\n\u003Cli>Avoid using buttons for inline navigation.\u003C/li>\n\u003Cli>Use clear and accurate labels. For example, use \"Save\" instead of \"Submit\".\u003C/li>\n\u003Cli>Prioritize the most important actions. Too many CTAs will cause confusion.\u003C/li>\n\u003Cli>Be consistent with positioning of CTAs in the user interface.\u003C/li>\n\u003Cli>Use strong, actionable verbs in labels such as \"Add\", \"Close\", \"Cancel\", or \"Save\".\u003C/li>\n\u003C/ul>\n\u003C/div>\n\u003Cdiv class=\"n-usage n-usage-dont\">\n\u003Ch3>Don't\u003C/h3>\n\u003Cul>\n\u003Cli>Don't use CTAs within text content.\u003C/li>\n\u003Cli>Don't use a primary CTA in every row of a table.\u003C/li>\n\u003Cli>Don't use labels such as \"Read more\", \"Click here\" or \"More\".\u003C/li>\n\u003Cli>Avoid using CTAs for linking to other pages. Use a Link instead where necessary.\u003C/li>\n\u003C/ul>\n\u003C/div>\n\u003Ch3>Link\u003C/h3>\n\u003Cp>Links are used for navigation and linking text-based content. They can either redirect users to internal or external pages.\u003C/p>\n\u003Cdiv class=\"n-usage n-usage-do\">\n\u003Ch3>Do\u003C/h3>\n\u003Cul>\n\u003Cli>Use links for inline navigation within text content.\u003C/li>\n\u003Cli>Keep link text clear and descriptive of the destination.\u003C/li>\n\u003Cli>Ensure links are visually distinguishable from regular text.\u003C/li>\n\u003C/ul>\n\u003C/div>\n\u003Cdiv class=\"n-usage n-usage-dont\">\n\u003Ch3>Don't\u003C/h3>\n\u003Cul>\n\u003Cli>Don't style links to look like buttons (e.g. filled backgrounds or excessive padding).\u003C/li>\n\u003Cli>Don't use for interface actions that aren't links to other views in the app. Use CTA instead.\u003C/li>\n\u003Cli>Don't use for form submit, cancel, edit, save and opening a modal. Use button instead.\u003C/li>\n\u003C/ul>\n\u003C/div>",[316,319,324,329,334,337,342,347],{"name":15,"displayName":16,"url":317,"code":318},"/main/#/922/product-patterns/usage-examples/cta-and-links/basic","\u003Cscript lang=\"ts\" setup>\nimport BaseButton from '@/components/base/Button.vue'\n\nconst handleClick = () => {\n alert('This button was clicked')\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Cdiv class=\"cta-row n:flex n:flex-row n:flex-wrap n:items-center n:gap-xxl\">\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Ch3>CTA (Action)\u003C/h3>\n \u003Cdiv>\n \u003CBaseButton @click.stop=\"handleClick\">Cancel\u003C/BaseButton>\n \u003C/div>\n \u003Cdiv>\n \u003CBaseButton variant=\"primary\" @click.stop=\"handleClick\">\n \u003Cnord-icon slot=\"start\" name=\"interface-add\">\u003C/nord-icon>\n Create new\n \u003C/BaseButton>\n \u003C/div>\n \u003Cdiv>\n \u003CBaseButton variant=\"plain\" @click.stop=\"handleClick\">\n \u003Cnord-icon slot=\"start\" name=\"arrow-left-long\">\u003C/nord-icon>\n Back\n \u003C/BaseButton>\n \u003C/div>\n \u003C/div>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Ch3>CTA (Text)\u003C/h3>\n \u003Cdiv>\n \u003CBaseButton variant=\"text\" @click.stop=\"handleClick\">\n Show more\n \u003C/BaseButton>\n \u003C/div>\n\n \u003Cdiv>\n \u003CBaseButton variant=\"text\" @click.stop=\"handleClick\">\n \u003Cnord-icon slot=\"start\" name=\"interface-add\">\u003C/nord-icon>\n Add more tags\n \u003C/BaseButton>\n \u003C/div>\n \u003C/div>\n \u003C/div>\n\n \u003Cnord-divider>\u003C/nord-divider>\n\n \u003Cdiv\n class=\"cta-row n:mbs-s n:flex n:flex-row n:flex-wrap n:items-center n:gap-xxl\"\n >\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Ch3 class=\"n:mbe-xs n:font-heading\">Text Link (Internal)\u003C/h3>\n \u003CBaseButton is-link to=\"#\">John Dorian\u003C/BaseButton>\n \u003C/div>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Ch3 class=\"n:mbe-xs n:font-heading\">Text Link (External)\u003C/h3>\n \u003CBaseButton\n is-link\n to=\"https://nordhealth.design\"\n external\n target=\"_blank\"\n >\n Nord Design System page\n \u003C/BaseButton>\n \u003C/div>\n \u003C/div>\n \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.cta-row {\n flex-flow: row;\n justify-content: flex-start;\n align-items: flex-start;\n}\n\u003C/style>\n",{"name":320,"displayName":321,"url":322,"code":323},"cta-action","Cta action","/main/#/922/product-patterns/usage-examples/cta-and-links/cta-action","\u003Cscript lang=\"ts\" setup>\nimport BaseButton from '@/components/base/Button.vue'\n\nconst handleClick = () => {\n alert('This button was clicked')\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-l\">\n \u003CBaseButton @click.stop=\"handleClick\">Cancel\u003C/BaseButton>\n\n \u003CBaseButton variant=\"primary\" @click.stop=\"handleClick\">\n \u003Cnord-icon slot=\"start\" name=\"interface-add\">\u003C/nord-icon>\n Create new\n \u003C/BaseButton>\n\n \u003CBaseButton variant=\"plain\" @click.stop=\"handleClick\">\n \u003Cnord-icon slot=\"start\" name=\"arrow-left-long\">\u003C/nord-icon>\n Back\n \u003C/BaseButton>\n \u003C/div>\n\u003C/template>\n",{"name":325,"displayName":326,"url":327,"code":328},"cta-as-link","Cta as link","/main/#/922/product-patterns/usage-examples/cta-and-links/cta-as-link","\u003Cscript lang=\"ts\" setup>\nimport BaseButton from '@/components/base/Button.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-l\">\n \u003CBaseButton to=\"#\">Cancel\u003C/BaseButton>\n\n \u003CBaseButton variant=\"primary\" to=\"#\">\n \u003Cnord-icon slot=\"start\" name=\"interface-add\">\u003C/nord-icon>\n Create new\n \u003C/BaseButton>\n\n \u003CBaseButton variant=\"plain\" to=\"#\">\n \u003Cnord-icon slot=\"start\" name=\"arrow-left-long\">\u003C/nord-icon>\n Back\n \u003C/BaseButton>\n\n \u003CBaseButton variant=\"text\" to=\"#\">Show more\u003C/BaseButton>\n\n \u003CBaseButton variant=\"text\" to=\"#\">\n \u003Cnord-icon slot=\"start\" name=\"interface-add\">\u003C/nord-icon>\n Add more tags\n \u003C/BaseButton>\n \u003C/div>\n\u003C/template>\n",{"name":330,"displayName":331,"url":332,"code":333},"cta-text","Cta text","/main/#/922/product-patterns/usage-examples/cta-and-links/cta-text","\u003Cscript lang=\"ts\" setup>\nimport BaseButton from '@/components/base/Button.vue'\n\nconst handleClick = () => {\n alert('This button was clicked')\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-l\">\n \u003CBaseButton variant=\"text\" @click.stop=\"handleClick\">\n Show more\n \u003C/BaseButton>\n\n \u003CBaseButton variant=\"text\" @click.stop=\"handleClick\">\n \u003Cnord-icon slot=\"start\" name=\"interface-add\">\u003C/nord-icon>\n Add more tags\n \u003C/BaseButton>\n \u003C/div>\n\u003C/template>\n",{"name":25,"displayName":26,"url":335,"code":336},"/main/#/922/product-patterns/usage-examples/cta-and-links/disabled","\u003Cscript lang=\"ts\" setup>\nimport BaseButton from '@/components/base/Button.vue'\n\nconst handleClick = () => {\n alert('This button was clicked')\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Cdiv class=\"cta-row n:flex n:flex-row n:flex-wrap n:items-center n:gap-xxl\">\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Ch3>CTA (Action)\u003C/h3>\n \u003Cdiv>\n \u003CBaseButton disabled @click.stop=\"handleClick\">Cancel\u003C/BaseButton>\n \u003C/div>\n \u003Cdiv>\n \u003CBaseButton variant=\"primary\" disabled @click.stop=\"handleClick\">\n \u003Cnord-icon slot=\"start\" name=\"interface-add\">\u003C/nord-icon>\n Create new\n \u003C/BaseButton>\n \u003C/div>\n \u003Cdiv>\n \u003CBaseButton variant=\"plain\" disabled @click.stop=\"handleClick\">\n \u003Cnord-icon slot=\"start\" name=\"arrow-left-long\">\u003C/nord-icon>\n Back\n \u003C/BaseButton>\n \u003C/div>\n \u003C/div>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Ch3>CTA (Text)\u003C/h3>\n \u003Cdiv>\n \u003CBaseButton variant=\"text\" disabled @click.stop=\"handleClick\">\n Show more\n \u003C/BaseButton>\n \u003C/div>\n\n \u003Cdiv>\n \u003CBaseButton variant=\"text\" disabled @click.stop=\"handleClick\">\n \u003Cnord-icon slot=\"start\" name=\"interface-add\">\u003C/nord-icon>\n Add more tags\n \u003C/BaseButton>\n \u003C/div>\n \u003C/div>\n \u003C/div>\n\n \u003Cnord-divider>\u003C/nord-divider>\n\n \u003Cdiv\n class=\"cta-row n:mbs-s n:flex n:flex-row n:flex-wrap n:items-center n:gap-xxl\"\n >\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Ch3 class=\"n:mbe-xs n:font-heading\">Text Link (Internal)\u003C/h3>\n \u003CBaseButton is-link to=\"#\" disabled>John Dorian\u003C/BaseButton>\n \u003C/div>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Ch3 class=\"n:mbe-xs n:font-heading\">Text Link (External)\u003C/h3>\n \u003CBaseButton\n is-link\n to=\"https://nordhealth.design\"\n external\n target=\"_blank\"\n disabled\n >\n Nord Design System page\n \u003C/BaseButton>\n \u003C/div>\n \u003C/div>\n \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.cta-row {\n flex-flow: row;\n justify-content: flex-start;\n align-items: flex-start;\n}\n\u003C/style>\n",{"name":338,"displayName":339,"url":340,"code":341},"link","Link","/main/#/922/product-patterns/usage-examples/cta-and-links/link","\u003Cscript lang=\"ts\" setup>\nimport BaseButton from '@/components/base/Button.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseButton to=\"#\">Cancel\u003C/BaseButton>\n\u003C/template>\n",{"name":343,"displayName":344,"url":345,"code":346},"link-as-cta","Link as cta","/main/#/922/product-patterns/usage-examples/cta-and-links/link-as-cta","\u003Cscript lang=\"ts\" setup>\nimport BaseButton from '@/components/base/Button.vue'\n\nconst handleClick = () => {\n alert('This button was clicked')\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseButton is-link @click.stop=\"handleClick\">Click me\u003C/BaseButton>\n\u003C/template>\n",{"name":348,"displayName":349,"url":350,"code":351},"link-external","Link external","/main/#/922/product-patterns/usage-examples/cta-and-links/link-external","\u003Cscript lang=\"ts\" setup>\nimport BaseButton from '@/components/base/Button.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseButton to=\"https://nordhealth.design\" is-link external target=\"_blank\">\n Open Nord Design System page\n \u003C/BaseButton>\n\u003C/template>\n",{"name":353,"displayName":354,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":355},"pcnf-date-range-picker","Date Range Picker",[356,359,364,369,374,379,384,389],{"name":15,"displayName":16,"url":357,"code":358},"/main/#/922/product-patterns/usage-examples/date-range-picker/basic","\u003Cscript setup lang=\"ts\">\nimport type { ModelValue as DateRangePickerModelValue } from '@/components/input/date-range-picker/DateRangePicker.vue'\nimport InputDateRangePicker from '@/components/input/date-range-picker/DateRangePicker.vue'\n\nconst selectedRange = ref\u003CDateRangePickerModelValue>(null)\nconst isOpen = ref(false)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-card padding=\"l\">\n \u003Ch2 slot=\"header\">Basic DateRangePicker\u003C/h2>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Cdiv v-if=\"selectedRange\" class=\"n:text-s\">\n \u003Cspan class=\"n:font-active\">Selected:\u003C/span>\n {{ selectedRange?.[0] || 'N/A' }} - {{ selectedRange?.[1] || 'N/A' }}\n \u003C/div>\n\n \u003Cdiv>\n \u003Cnord-button\n aria-haspopup=\"true\"\n aria-controls=\"date-range-picker-basic\"\n @click=\"isOpen = true\"\n >\n Open Date Range Picker\n \u003C/nord-button>\n\n \u003CInputDateRangePicker\n id=\"date-range-picker-basic\"\n v-model=\"selectedRange\"\n v-model:is-open=\"isOpen\"\n />\n \u003C/div>\n \u003C/div>\n \u003C/nord-card>\n\u003C/template>\n",{"name":360,"displayName":361,"url":362,"code":363},"default-preset","Default preset","/main/#/922/product-patterns/usage-examples/date-range-picker/default-preset","\u003Cscript setup lang=\"ts\">\nimport type { ModelValue as DateRangePickerModelValue } from '@/components/input/date-range-picker/DateRangePicker.vue'\nimport { DateRangeOption } from '@/composables/useDateRange.js'\nimport InputDateRangePicker from '@/components/input/date-range-picker/DateRangePicker.vue'\n\nconst range1 = ref\u003CDateRangePickerModelValue>(null)\nconst range2 = ref\u003CDateRangePickerModelValue>(null)\nconst range3 = ref\u003CDateRangePickerModelValue>(null)\nconst range4 = ref\u003CDateRangePickerModelValue>(null)\n\nconst isOpen1 = ref(false)\nconst isOpen2 = ref(false)\nconst isOpen3 = ref(false)\nconst isOpen4 = ref(false)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-card padding=\"l\">\n \u003Ch2 slot=\"header\">Default Preset\u003C/h2>\n\n \u003Cdiv class=\"n:grid n:grid-cols-2 n:items-start n:gap-l\">\n \u003Cnord-fieldset label=\"Default Preset: Today\">\n \u003Cnord-button\n aria-haspopup=\"true\"\n aria-controls=\"date-range-picker-today\"\n @click=\"isOpen1 = true\"\n >\n Open\n \u003C/nord-button>\n \u003Cdiv v-if=\"range1\" class=\"n:mbs-s n:text-s\">\n {{ range1[0] }} - {{ range1[1] }}\n \u003C/div>\n \u003CInputDateRangePicker\n id=\"date-range-picker-today\"\n v-model=\"range1\"\n v-model:is-open=\"isOpen1\"\n :default-preset=\"DateRangeOption.Today\"\n />\n \u003C/nord-fieldset>\n\n \u003Cnord-fieldset label=\"Default Preset: Last 7 Days\">\n \u003Cnord-button\n aria-haspopup=\"true\"\n aria-controls=\"date-range-picker-last7days\"\n @click=\"isOpen2 = true\"\n >\n Open\n \u003C/nord-button>\n \u003Cdiv v-if=\"range2\" class=\"n:mbs-s n:text-s\">\n {{ range2[0] }} - {{ range2[1] }}\n \u003C/div>\n \u003CInputDateRangePicker\n id=\"date-range-picker-last7days\"\n v-model=\"range2\"\n v-model:is-open=\"isOpen2\"\n :default-preset=\"DateRangeOption.Last7Days\"\n />\n \u003C/nord-fieldset>\n\n \u003Cnord-fieldset label=\"Default Preset: Last 30 Days\">\n \u003Cnord-button\n aria-haspopup=\"true\"\n aria-controls=\"date-range-picker-last30days\"\n @click=\"isOpen3 = true\"\n >\n Open\n \u003C/nord-button>\n \u003Cdiv v-if=\"range3\" class=\"n:mbs-s n:text-s\">\n {{ range3[0] }} - {{ range3[1] }}\n \u003C/div>\n \u003CInputDateRangePicker\n id=\"date-range-picker-last30days\"\n v-model=\"range3\"\n v-model:is-open=\"isOpen3\"\n :default-preset=\"DateRangeOption.Last30Days\"\n />\n \u003C/nord-fieldset>\n\n \u003Cnord-fieldset label=\"Default Preset: Current Month\">\n \u003Cnord-button\n aria-haspopup=\"true\"\n aria-controls=\"date-range-picker-currentmonth\"\n @click=\"isOpen4 = true\"\n >\n Open\n \u003C/nord-button>\n \u003Cdiv v-if=\"range4\" class=\"n:mbs-s n:text-s\">\n {{ range4[0] }} - {{ range4[1] }}\n \u003C/div>\n \u003CInputDateRangePicker\n id=\"date-range-picker-currentmonth\"\n v-model=\"range4\"\n v-model:is-open=\"isOpen4\"\n :default-preset=\"DateRangeOption.CurrentMonth\"\n />\n \u003C/nord-fieldset>\n \u003C/div>\n \u003C/nord-card>\n\u003C/template>\n",{"name":365,"displayName":366,"url":367,"code":368},"disabled-dates","Disabled dates","/main/#/922/product-patterns/usage-examples/date-range-picker/disabled-dates","\u003Cscript setup lang=\"ts\">\nimport { isOddDay, isWeekend } from '@/utils/date/validation.js'\nimport type { ModelValue as DateRangePickerModelValue } from '@/components/input/date-range-picker/DateRangePicker.vue'\nimport { DateRangeOption } from '@/composables/useDateRange.js'\nimport InputDateRangePicker from '@/components/input/date-range-picker/DateRangePicker.vue'\n\nconst range1 = ref\u003CDateRangePickerModelValue>(null)\nconst range3 = ref\u003CDateRangePickerModelValue>(null)\n\nconst isOpen1 = ref(false)\nconst isOpen3 = ref(false)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-card padding=\"l\">\n \u003Ch2 slot=\"header\">Disabled Dates\u003C/h2>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-l\">\n \u003Cnord-fieldset label=\"Disable Weekends\">\n \u003Cnord-button\n aria-haspopup=\"true\"\n aria-controls=\"date-range-picker-weekends\"\n @click=\"isOpen1 = true\"\n >\n Open\n \u003C/nord-button>\n \u003Cdiv v-if=\"range1\" class=\"n:mbs-s n:text-s\">\n {{ range1[0] }} - {{ range1[1] }}\n \u003C/div>\n \u003CInputDateRangePicker\n id=\"date-range-picker-weekends\"\n v-model=\"range1\"\n v-model:is-open=\"isOpen1\"\n :is-date-disabled=\"isWeekend\"\n :default-preset=\"DateRangeOption.Last7Days\"\n />\n \u003C/nord-fieldset>\n\n \u003Cnord-fieldset label=\"Disable Odd Days\">\n \u003Cnord-button\n aria-haspopup=\"true\"\n aria-controls=\"date-range-picker-odddays\"\n @click=\"isOpen3 = true\"\n >\n Open\n \u003C/nord-button>\n \u003Cdiv v-if=\"range3\" class=\"n:mbs-s n:text-s\">\n {{ range3[0] }} - {{ range3[1] }}\n \u003C/div>\n \u003CInputDateRangePicker\n id=\"date-range-picker-odddays\"\n v-model=\"range3\"\n v-model:is-open=\"isOpen3\"\n :is-date-disabled=\"isOddDay\"\n :default-preset=\"DateRangeOption.Last30Days\"\n />\n \u003C/nord-fieldset>\n \u003C/div>\n \u003C/nord-card>\n\u003C/template>\n",{"name":370,"displayName":371,"url":372,"code":373},"filter","Filter","/main/#/922/product-patterns/usage-examples/date-range-picker/filter","\u003Cscript setup lang=\"ts\">\nimport type { ModelValue as DateRangePickerModelValue } from '@/components/input/date-range-picker/DateRangePicker.vue'\nimport BaseFilterDateRangePicker from '@/components/base/filter/DateRangePicker.vue'\n\nconst range1 = ref\u003CDateRangePickerModelValue>(null)\nconst range2 = ref\u003CDateRangePickerModelValue>(['2024-01-01', '2024-12-31'])\nconst range3 = ref\u003CDateRangePickerModelValue>(null)\nconst range4 = ref\u003CDateRangePickerModelValue>(null)\n\nconst displayRange3 = ref(true)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-card padding=\"l\">\n \u003Ch2 slot=\"header\">Filter Date Range Picker\u003C/h2>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-l\">\n \u003Cnord-fieldset label=\"Default (clearable)\">\n \u003CBaseFilterDateRangePicker\n v-model=\"range1\"\n label=\"Date of Birth\"\n name=\"dateOfBirth\"\n />\n \u003C/nord-fieldset>\n\n \u003Cnord-fieldset label=\"With pre-selected value\">\n \u003CBaseFilterDateRangePicker\n v-model=\"range2\"\n label=\"Created Date\"\n name=\"createdDate\"\n />\n \u003C/nord-fieldset>\n\n \u003Cnord-fieldset v-if=\"displayRange3\" label=\"Removable\">\n \u003CBaseFilterDateRangePicker\n v-model=\"range3\"\n label=\"Last Modified\"\n name=\"lastModified\"\n removable\n @remove=\"displayRange3 = false\"\n />\n \u003C/nord-fieldset>\n\n \u003Cnord-fieldset label=\"Non-clearable\">\n \u003CBaseFilterDateRangePicker\n v-model=\"range4\"\n label=\"Registration Date\"\n name=\"registrationDate\"\n :clearable=\"false\"\n />\n \u003C/nord-fieldset>\n \u003C/div>\n \u003C/nord-card>\n\u003C/template>\n",{"name":375,"displayName":376,"url":377,"code":378},"min-max-dates","Min max dates","/main/#/922/product-patterns/usage-examples/date-range-picker/min-max-dates","\u003Cscript setup lang=\"ts\">\nimport { formatToDateTimeISODate } from '@/utils/date/conversion.js'\nimport {\n getEndOfPeriod,\n getStartOfPeriod,\n getTodayDateTimeISO,\n} from '@/utils/date/getter.js'\nimport type { ModelValue as DateRangePickerModelValue } from '@/components/input/date-range-picker/DateRangePicker.vue'\nimport { DateRangeOption } from '@/composables/useDateRange.js'\nimport InputDateRangePicker from '@/components/input/date-range-picker/DateRangePicker.vue'\n\nconst range1 = ref\u003CDateRangePickerModelValue>(null)\nconst range2 = ref\u003CDateRangePickerModelValue>(null)\nconst range3 = ref\u003CDateRangePickerModelValue>(null)\n\nconst isOpen1 = ref(false)\nconst isOpen2 = ref(false)\nconst isOpen3 = ref(false)\n\nconst todayDate = getTodayDateTimeISO()\n\nconst currentMonthStart = formatToDateTimeISODate(\n getStartOfPeriod(todayDate, 'month'),\n)\nconst currentMonthEnd = formatToDateTimeISODate(\n getEndOfPeriod(todayDate, 'month'),\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-card padding=\"l\">\n \u003Ch2 slot=\"header\">Min/Max Dates\u003C/h2>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-l\">\n \u003Cnord-fieldset label=\"Min Date: Current Year Only\">\n \u003Cnord-button\n aria-haspopup=\"true\"\n aria-controls=\"date-range-picker-mindate\"\n :aria-expanded=\"isOpen1\"\n @click=\"isOpen1 = true\"\n >\n Open\n \u003C/nord-button>\n \u003Cdiv v-if=\"range1\" class=\"n:mbs-s n:text-s\">\n {{ range1[0] }} - {{ range1[1] }}\n \u003C/div>\n \u003CInputDateRangePicker\n id=\"date-range-picker-mindate\"\n v-model=\"range1\"\n v-model:is-open=\"isOpen1\"\n :min-date=\"todayDate\"\n :default-preset=\"DateRangeOption.Last30Days\"\n />\n \u003C/nord-fieldset>\n\n \u003Cnord-fieldset label=\"Max Date: Today\">\n \u003Cnord-button\n aria-haspopup=\"true\"\n aria-controls=\"date-range-picker-maxdate\"\n :aria-expanded=\"isOpen2\"\n @click=\"isOpen2 = true\"\n >\n Open\n \u003C/nord-button>\n \u003Cdiv v-if=\"range2\" class=\"n:mbs-s n:text-s\">\n {{ range2[0] }} - {{ range2[1] }}\n \u003C/div>\n \u003CInputDateRangePicker\n id=\"date-range-picker-maxdate\"\n v-model=\"range2\"\n v-model:is-open=\"isOpen2\"\n :max-date=\"todayDate\"\n :default-preset=\"DateRangeOption.Last7Days\"\n />\n \u003C/nord-fieldset>\n\n \u003Cnord-fieldset label=\"Both Min and Max Dates: Current Month Only\">\n \u003Cnord-button\n aria-haspopup=\"true\"\n aria-controls=\"date-range-picker-both\"\n :aria-expanded=\"isOpen3\"\n @click=\"isOpen3 = true\"\n >\n Open\n \u003C/nord-button>\n \u003Cdiv v-if=\"range3\" class=\"n:mbs-s n:text-s\">\n {{ range3[0] }} - {{ range3[1] }}\n \u003C/div>\n \u003CInputDateRangePicker\n id=\"date-range-picker-both\"\n v-model=\"range3\"\n v-model:is-open=\"isOpen3\"\n :min-date=\"currentMonthStart\"\n :max-date=\"currentMonthEnd\"\n :default-preset=\"DateRangeOption.Today\"\n />\n \u003C/nord-fieldset>\n \u003C/div>\n \u003C/nord-card>\n\u003C/template>\n",{"name":380,"displayName":381,"url":382,"code":383},"presets","Presets","/main/#/922/product-patterns/usage-examples/date-range-picker/presets","\u003Cscript setup lang=\"ts\">\nimport type { ModelValue as DateRangePickerModelValue } from '@/components/input/date-range-picker/DateRangePicker.vue'\nimport { DateRangeOption } from '@/composables/useDateRange.js'\nimport InputDateRangePicker from '@/components/input/date-range-picker/DateRangePicker.vue'\n\nconst range1 = ref\u003CDateRangePickerModelValue>(null)\nconst range2 = ref\u003CDateRangePickerModelValue>(null)\nconst range3 = ref\u003CDateRangePickerModelValue>(null)\nconst range4 = ref\u003CDateRangePickerModelValue>(null)\n\nconst isOpen1 = ref(false)\nconst isOpen2 = ref(false)\nconst isOpen3 = ref(false)\nconst isOpen4 = ref(false)\n\nconst basicPresets = [\n DateRangeOption.Today,\n DateRangeOption.Last7Days,\n DateRangeOption.Last30Days,\n]\n\nconst quarterlyPresets = [\n DateRangeOption.CurrentQuarter,\n DateRangeOption.LastQuarter,\n DateRangeOption.Q1CurrentYear,\n DateRangeOption.Q2CurrentYear,\n DateRangeOption.Q3CurrentYear,\n DateRangeOption.Q4CurrentYear,\n DateRangeOption.Q4LastYear,\n DateRangeOption.Q3LastYear,\n DateRangeOption.Q2LastYear,\n DateRangeOption.Q1LastYear,\n]\n\nconst monthlyPresets = [\n DateRangeOption.CurrentMonth,\n DateRangeOption.LastMonth,\n DateRangeOption.Last30Days,\n DateRangeOption.Last60Days,\n DateRangeOption.Last90Days,\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-card padding=\"l\">\n \u003Ch2 slot=\"header\">Custom Presets\u003C/h2>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-l\">\n \u003Cnord-fieldset label=\"Basic Presets\">\n \u003Cnord-button\n aria-haspopup=\"true\"\n aria-controls=\"date-range-picker-basic-presets\"\n :aria-expanded=\"isOpen1\"\n @click=\"isOpen1 = true\"\n >\n Open\n \u003C/nord-button>\n \u003Cdiv v-if=\"range1\" class=\"n:mbs-s n:text-s\">\n {{ range1[0] }} - {{ range1[1] }}\n \u003C/div>\n \u003CInputDateRangePicker\n id=\"date-range-picker-basic-presets\"\n v-model=\"range1\"\n v-model:is-open=\"isOpen1\"\n :presets=\"basicPresets\"\n :default-preset=\"DateRangeOption.Last7Days\"\n />\n \u003C/nord-fieldset>\n\n \u003Cnord-fieldset label=\"Quarterly Presets\">\n \u003Cnord-button\n aria-haspopup=\"true\"\n aria-controls=\"date-range-picker-quarterly-presets\"\n :aria-expanded=\"isOpen2\"\n @click=\"isOpen2 = true\"\n >\n Open\n \u003C/nord-button>\n \u003Cdiv v-if=\"range2\" class=\"n:mbs-s n:text-s\">\n {{ range2[0] }} - {{ range2[1] }}\n \u003C/div>\n \u003CInputDateRangePicker\n id=\"date-range-picker-quarterly-presets\"\n v-model=\"range2\"\n v-model:is-open=\"isOpen2\"\n :presets=\"quarterlyPresets\"\n :default-preset=\"DateRangeOption.CurrentQuarter\"\n />\n \u003C/nord-fieldset>\n\n \u003Cnord-fieldset label=\"Monthly Presets\">\n \u003Cnord-button\n aria-haspopup=\"true\"\n aria-controls=\"date-range-picker-monthly-presets\"\n :aria-expanded=\"isOpen3\"\n @click=\"isOpen3 = true\"\n >\n Open\n \u003C/nord-button>\n \u003Cdiv v-if=\"range3\" class=\"n:mbs-s n:text-s\">\n {{ range3[0] }} - {{ range3[1] }}\n \u003C/div>\n \u003CInputDateRangePicker\n id=\"date-range-picker-monthly-presets\"\n v-model=\"range3\"\n v-model:is-open=\"isOpen3\"\n :presets=\"monthlyPresets\"\n :default-preset=\"DateRangeOption.CurrentMonth\"\n />\n \u003C/nord-fieldset>\n\n \u003Cnord-fieldset label=\"No Presets\">\n \u003Cnord-button\n aria-haspopup=\"true\"\n aria-controls=\"date-range-picker-no-presets\"\n :aria-expanded=\"isOpen4\"\n @click=\"isOpen4 = true\"\n >\n Open\n \u003C/nord-button>\n \u003Cdiv v-if=\"range4\" class=\"n:mbs-s n:text-s\">\n {{ range4[0] }} - {{ range4[1] }}\n \u003C/div>\n \u003CInputDateRangePicker\n id=\"date-range-picker-no-presets\"\n v-model=\"range4\"\n v-model:is-open=\"isOpen4\"\n :presets=\"[]\"\n :default-preset=\"DateRangeOption.Today\"\n />\n \u003C/nord-fieldset>\n \u003C/div>\n \u003C/nord-card>\n\u003C/template>\n",{"name":385,"displayName":386,"url":387,"code":388},"presets-with-min-max","Presets with min max","/main/#/922/product-patterns/usage-examples/date-range-picker/presets-with-min-max","\u003Cscript setup lang=\"ts\">\nimport { getTodayDateTimeISO } from '@/utils/date/getter.js'\nimport { formatDate } from '@/utils/date/conversion.js'\nimport { subtractToDate } from '@/utils/date/calculation.js'\nimport type { ModelValue as DateRangePickerModelValue } from '@/components/input/date-range-picker/DateRangePicker.vue'\nimport { DateRangeOption } from '@/composables/useDateRange.js'\nimport InputDateRangePicker from '@/components/input/date-range-picker/DateRangePicker.vue'\n\nconst range1 = ref\u003CDateRangePickerModelValue>(null)\nconst range2 = ref\u003CDateRangePickerModelValue>(null)\n\nconst isOpen1 = ref(false)\nconst isOpen2 = ref(false)\n\nconst year2024Start = '2024-01-01'\nconst year2024End = '2024-12-31'\n\nconst sixMonthsAgo = formatDate(\n subtractToDate(getTodayDateTimeISO(), { months: 6 }),\n 'yyyy-MM-dd',\n)\nconst today = getTodayDateTimeISO()\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-card padding=\"l\">\n \u003Ch2 slot=\"header\">Presets with Min/Max\u003C/h2>\n\n \u003Cnord-banner variant=\"info\" class=\"n:mbe-l\">\n Presets outside the min/max date range are automatically filtered out.\n \u003C/nord-banner>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-l\">\n \u003Cnord-fieldset label=\"Year 2024 only\">\n \u003Cnord-button\n aria-haspopup=\"true\"\n aria-controls=\"date-range-picker-year2024\"\n :aria-expanded=\"isOpen1\"\n @click=\"isOpen1 = true\"\n >\n Open\n \u003C/nord-button>\n \u003Cdiv v-if=\"range1\" class=\"n:mbs-s n:text-s\">\n {{ range1[0] }} - {{ range1[1] }}\n \u003C/div>\n \u003CInputDateRangePicker\n id=\"date-range-picker-year2024\"\n v-model=\"range1\"\n v-model:is-open=\"isOpen1\"\n :min-date=\"year2024Start\"\n :max-date=\"year2024End\"\n :default-preset=\"DateRangeOption.Q1CurrentYear\"\n />\n \u003C/nord-fieldset>\n\n \u003Cnord-fieldset label=\"Recent 6 months\">\n \u003Cnord-button\n aria-haspopup=\"true\"\n aria-controls=\"date-range-picker-6months\"\n :aria-expanded=\"isOpen2\"\n @click=\"isOpen2 = true\"\n >\n Open\n \u003C/nord-button>\n \u003Cdiv v-if=\"range2\" class=\"n:mbs-s n:text-s\">\n {{ range2[0] }} - {{ range2[1] }}\n \u003C/div>\n \u003CInputDateRangePicker\n id=\"date-range-picker-6months\"\n v-model=\"range2\"\n v-model:is-open=\"isOpen2\"\n :min-date=\"sixMonthsAgo\"\n :max-date=\"today\"\n :default-preset=\"DateRangeOption.Last30Days\"\n />\n \u003C/nord-fieldset>\n \u003C/div>\n \u003C/nord-card>\n\u003C/template>\n",{"name":390,"displayName":391,"url":392,"code":393},"programmatic-control","Programmatic control","/main/#/922/product-patterns/usage-examples/date-range-picker/programmatic-control","\u003Cscript setup lang=\"ts\">\nimport { safeMathRandom } from '@/utils/number.js'\nimport { getTodayDateTimeISODate } from '@/utils/date/getter.js'\nimport { formatToDateTimeISODate } from '@/utils/date/conversion.js'\nimport { subtractToDate } from '@/utils/date/calculation.js'\nimport type { ModelValue as DateRangePickerModelValue } from '@/components/input/date-range-picker/DateRangePicker.vue'\nimport { DateRangeOption, useDateRange } from '@/composables/useDateRange.js'\nimport InputDateRangePicker from '@/components/input/date-range-picker/DateRangePicker.vue'\n\nconst { getPredefinedDateRange } = useDateRange()\nconst selectedRange = ref\u003CDateRangePickerModelValue>(null)\nconst isOpen = ref(false)\n\nconst handleOpen = () => {\n isOpen.value = true\n}\n\nconst handleClose = () => {\n isOpen.value = false\n}\n\nconst handleClearSelection = () => {\n selectedRange.value = null\n isOpen.value = false\n}\n\nconst handleSelectToday = () => {\n const { startDate, endDate } = getPredefinedDateRange(DateRangeOption.Today)\n selectedRange.value = [startDate, endDate]\n\n // Close datepicker\n isOpen.value = false\n}\n\nconst handleSelectLast7Days = () => {\n const { startDate, endDate } = getPredefinedDateRange(\n DateRangeOption.Last7Days,\n )\n selectedRange.value = [startDate, endDate]\n\n // Close datepicker\n isOpen.value = false\n}\n\nconst handleSetRandomCustomRange = () => {\n const today = getTodayDateTimeISODate()\n const randomDaysAgo = Math.floor(safeMathRandom() * 90) + 1\n const startDate = formatToDateTimeISODate(\n subtractToDate(today, { days: randomDaysAgo }),\n )\n const randomDaysFromStart = Math.floor(safeMathRandom() * randomDaysAgo)\n const endDate = formatToDateTimeISODate(\n subtractToDate(today, { days: randomDaysFromStart }),\n )\n selectedRange.value = [startDate!, endDate!]\n isOpen.value = false\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-card padding=\"l\">\n \u003Ch2 slot=\"header\">Programmatic Control\u003C/h2>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-xl\">\n \u003Cdiv class=\"n:text-s\">\n \u003Cspan class=\"n:font-active\">Selected:\u003C/span>\n {{ selectedRange?.[0] || 'N/A' }} - {{ selectedRange?.[1] || 'N/A' }}\n \u003C/div>\n\n \u003Cnord-fieldset label=\"Open/Close Control\">\n \u003Cnord-button-group>\n \u003Cnord-button @click=\"handleOpen\">Open\u003C/nord-button>\n \u003Cnord-button @click=\"handleClose\">Close\u003C/nord-button>\n \u003C/nord-button-group>\n \u003C/nord-fieldset>\n\n \u003Cnord-fieldset label=\"Preset Selection\">\n \u003Cnord-button-group>\n \u003Cnord-button @click=\"handleSelectToday\">Select Today\u003C/nord-button>\n \u003Cnord-button @click=\"handleSelectLast7Days\">\n Select Last 7 Days\n \u003C/nord-button>\n \u003C/nord-button-group>\n \u003C/nord-fieldset>\n\n \u003Cnord-fieldset label=\"Direct Value Control\">\n \u003Cnord-button-group>\n \u003Cnord-button @click=\"handleSetRandomCustomRange\">\n Set Random Range\n \u003C/nord-button>\n \u003Cnord-button @click=\"handleClearSelection\">Clear\u003C/nord-button>\n \u003C/nord-button-group>\n \u003C/nord-fieldset>\n \u003C/div>\n\n \u003CInputDateRangePicker\n id=\"date-range-picker-programmatic\"\n v-model=\"selectedRange\"\n v-model:is-open=\"isOpen\"\n class=\"n:mbs-m\"\n />\n \u003C/nord-card>\n\u003C/template>\n",{"name":395,"displayName":396,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":397},"pcnf-divided-stack","Divided Stack",[398,401,406],{"name":15,"displayName":16,"url":399,"code":400},"/main/#/922/product-patterns/usage-examples/divided-stack/basic","\u003Cscript setup lang=\"ts\">\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport BaseReadOnlyField from '@/components/base/read-only/Field.vue'\nconst range = ref('7')\nconst toggleVisibility = ref(true)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-l\">\n \u003CBaseStackDivided>\n \u003C!-- Web components -->\n \u003Cnord-banner>\n \u003Cp class=\"n:pbe-s\">\n Use the toggle below to see how the dividers are reactively added and\n removed.\n \u003C/p>\n\n \u003Cnord-tag\n size=\"s\"\n variant=\"selectable\"\n :checked=\"toggleVisibility\"\n @change=\"toggleVisibility = !toggleVisibility\"\n >\n Toggle visibility\n \u003C/nord-tag>\n \u003C/nord-banner>\n \u003Cnord-range\n label=\"Select rate\"\n hint=\"Choose `0` value to reactively hide the field below\"\n :value=\"range\"\n :min=\"0\"\n :max=\"10\"\n @input=\"range = ($event.target as HTMLInputElement).value\"\n >\u003C/nord-range>\n\n \u003C!-- Vue components -->\n \u003CBaseReadOnlyField\n v-if=\"range !== '0'\"\n :label=\"`Field with value ${range}`\"\n :value=\"range !== '0' ? range : undefined\"\n />\n \u003CBaseReadOnlyField label=\"Field without value\" />\n \u003CBaseReadOnlyField\n label=\"Flat field with content\"\n value=\"This is a string\"\n />\n\n \u003C!-- HTML tags -->\n \u003Cp>This a standard paragraph\u003C/p>\n \u003Cp v-if=\"toggleVisibility\">\n This a paragraph with \u003Cb>v-if\u003C/b> directive based on the toggle\n \u003C/p>\n \u003C!-- eslint-disable-next-line vue/no-static-inline-styles -->\n \u003Cp style=\"display: none\">\n This a paragraph with \u003Cb>display: none\u003C/b>, should not be visible\n \u003C/p>\n \u003Cp v-show=\"toggleVisibility\">\n This paragraph has a \u003Cb>v-show\u003C/b> based on the toggle\n \u003C/p>\n \u003Cp :style=\"!toggleVisibility ? 'visibility: hidden' : undefined\">\n This paragraph has \u003Cb>visibility: hidden\u003C/b> based on the toggle\n \u003C/p>\n \u003Cp :style=\"!toggleVisibility ? 'opacity: 0' : undefined\">\n This paragraph has \u003Cb>opacity: 0\u003C/b> based on the toggle\n \u003C/p>\n \u003C/BaseStackDivided>\n \u003C/div>\n\u003C/template>\n",{"name":402,"displayName":403,"url":404,"code":405},"custom-divider","Custom divider","/main/#/922/product-patterns/usage-examples/divided-stack/custom-divider","\u003Cscript lang=\"ts\" setup>\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseStackDivided gap=\"l\">\n \u003Ctemplate #separator>\n \u003Cnord-icon name=\"interface-add\" />\n \u003C/template>\n\n \u003CBaseStackDivided direction=\"horizontal\" align-items=\"center\">\n \u003Ctemplate #separator>\n \u003Cnord-icon name=\"arrow-right-double\" />\n \u003C/template>\n\n \u003Cspan>With\u003C/span>\n \u003Cspan>custom\u003C/span>\n \u003Cspan>\n \u003Ccode class=\"n:rounded-default n:bg-surface-lowered n:p-xs\"\n >nord-icon\u003C/code\n >\n divider\n \u003C/span>\n \u003C/BaseStackDivided>\n\n \u003CBaseStackDivided direction=\"horizontal\" align-items=\"center\">\n \u003Ctemplate #separator>\n \u003Cnord-icon\n label=\"Separator\"\n name=\"arrow-right-long\"\n color=\"var(--n-color-accent)\"\n aria-hidden=\"true\"\n >\u003C/nord-icon>\n \u003C/template>\n\n \u003Cspan>With\u003C/span>\n \u003Cspan>custom color\u003C/span>\n \u003Cspan>\n \u003Ccode class=\"n:rounded-default n:bg-surface-lowered n:p-xs\"\n >nord-icon\u003C/code\n >\n divider\n \u003C/span>\n \u003C/BaseStackDivided>\n\n \u003CBaseStackDivided direction=\"horizontal\" gap=\"xs\">\n \u003Ctemplate #separator>–\u003C/template>\n \u003Cspan>2025-09-08\u003C/span>\n \u003Cspan>2025-09-09\u003C/span>\n \u003C/BaseStackDivided>\n \u003C/BaseStackDivided>\n\u003C/template>\n",{"name":407,"displayName":408,"url":409,"code":410},"direction","Direction","/main/#/922/product-patterns/usage-examples/divided-stack/direction","\u003Cscript lang=\"ts\" setup>\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-xl\">\n \u003Cdetails\n open\n class=\"n:flex n:flex-col n:flex-wrap n:gap-s n:rounded-default n:bg-default n:p-m\"\n >\n \u003Csummary class=\"n:font-heading\">\n Horizontal direction (default divider)\n \u003C/summary>\n \u003CBaseStackDivided direction=\"horizontal\" align-items=\"center\">\n \u003Cspan>A\u003C/span>\n \u003Cspan>B\u003C/span>\n \u003Cspan>C\u003C/span>\n \u003C/BaseStackDivided>\n \u003C/details>\n\n \u003Cdetails\n open\n class=\"n:flex n:flex-col n:flex-wrap n:gap-s n:rounded-default n:bg-default n:p-m\"\n >\n \u003Csummary class=\"n:font-heading\">\n Vertical direction (default divider)\n \u003C/summary>\n \u003CBaseStackDivided direction=\"vertical\">\n \u003Cspan>A\u003C/span>\n \u003Cspan>B\u003C/span>\n \u003Cspan>C\u003C/span>\n \u003C/BaseStackDivided>\n \u003C/details>\n\n \u003Cdetails\n open\n class=\"n:flex n:flex-col n:flex-wrap n:gap-s n:rounded-default n:bg-default n:p-m\"\n >\n \u003Csummary class=\"n:font-heading\">\n Horizontal direction (custom divider)\n \u003C/summary>\n \u003CBaseStackDivided direction=\"horizontal\" align-items=\"center\">\n \u003Ctemplate #separator>\n \u003Cnord-icon name=\"arrow-right-small\" size=\"s\" />\n \u003C/template>\n \u003Cspan>A\u003C/span>\n \u003Cspan>B\u003C/span>\n \u003Cspan>C\u003C/span>\n \u003C/BaseStackDivided>\n \u003C/details>\n\n \u003Cdetails\n open\n class=\"n:flex n:flex-col n:flex-wrap n:gap-s n:rounded-default n:bg-default n:p-m\"\n >\n \u003Csummary class=\"n:font-heading\">\n Vertical direction (custom divider)\n \u003C/summary>\n \u003CBaseStackDivided>\n \u003Ctemplate #separator>\n \u003Cnord-icon name=\"arrow-down-small\" size=\"s\" />\n \u003C/template>\n \u003Cspan>A\u003C/span>\n \u003Cspan>B\u003C/span>\n \u003Cspan>C\u003C/span>\n \u003C/BaseStackDivided>\n \u003C/details>\n \u003C/div>\n\u003C/template>\n",{"name":412,"displayName":413,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":414},"pcnf-export-popout","Export Popout",[415,418],{"name":15,"displayName":16,"url":416,"code":417},"/main/#/922/product-patterns/usage-examples/export-popout/basic","\u003Cscript lang=\"ts\" setup>\nimport type { FileFormatType } from '@/models/fileFormat.js'\nimport BasePopoutExport from '@/components/base/popout/Export.vue'\n\nfunction handleExport(filename: string, format: FileFormatType) {\n alert(`Exporting ${filename} in ${format.toUpperCase()} format`)\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Cp class=\"n:text-s\">\n This example demonstrates the basic usage of the ExportPopout component.\n It shows how to configure available export formats and handle export\n events.\n \u003C/p>\n\n \u003Cdiv>\n \u003CBasePopoutExport @export=\"handleExport\" />\n \u003C/div>\n \u003C/div>\n\u003C/template>\n",{"name":419,"displayName":420,"url":421,"code":422},"advanced","Advanced","/main/#/922/product-patterns/usage-examples/export-popout/advanced","\u003Cscript lang=\"ts\" setup>\nimport { FileFormat, type FileFormatType } from '@/models/fileFormat.js'\nimport BasePopoutExport from '@/components/base/popout/Export.vue'\n\nconst formats = [FileFormat.CSV, FileFormat.XLSX]\nconst filename = 'custom-export'\n\nfunction handleExport(filename: string, format: FileFormatType) {\n alert(`Exporting ${filename} in ${format.toUpperCase()} format`)\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Cp class=\"n:text-s\">\n This example shows how to customize the ExportPopout component with\n formats, filename, and toggle label.\n \u003C/p>\n\n \u003Cdiv>\n \u003CBasePopoutExport\n :formats\n :filename\n label=\"Download Report\"\n @export=\"handleExport\"\n />\n \u003C/div>\n \u003C/div>\n\u003C/template>\n",{"name":424,"displayName":425,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":426},"pcnf-filter-add-button","Filter Add Button",[427,430],{"name":15,"displayName":16,"url":428,"code":429},"/main/#/922/product-patterns/usage-examples/filter-add-button/basic","\u003Cscript lang=\"ts\" setup>\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\nimport BaseFilterAddButton from '@/components/base/filter/AddButton.vue'\n\n// Additional Filters\ntype AdditionalFilter = {\n id: string\n label: string\n value: Ref\u003Cstring | Array\u003Cstring>>\n options: Array\u003C{ label: string; value: string }>\n}\n\nconst additionalFilters: AdditionalFilter[] = [\n {\n id: 'client',\n label: 'Client',\n value: ref([]),\n options: [\n { label: 'Donald Johnson', value: '17' },\n { label: 'Claudia Olson', value: '32' },\n { label: 'Jesse Wheeler', value: '123' },\n ],\n },\n {\n id: 'patient',\n label: 'Patient',\n value: ref([]),\n options: [\n { label: 'Pixie', value: '3' },\n { label: 'Nimba', value: '33' },\n { label: 'Bink', value: '77' },\n { label: 'Luna', value: '99' },\n ],\n },\n {\n id: 'veterinarian',\n label: 'Veterinarian',\n value: ref([]),\n options: [\n { label: 'Dr. John Doe', value: '23' },\n { label: 'Dr. Jane Smith', value: '34' },\n { label: 'Dr. Jim Beam', value: '45' },\n ],\n },\n]\n\n// -- LOGIC FOR ADDING/REMOVING FILTERS\nfunction getLabelForAddedFilter(filterId: string) {\n return additionalFilters.find((filter) => filter.id === filterId)?.label ?? ''\n}\n\nfunction getOptionsForAddedFilter(filterId: string) {\n return (\n additionalFilters.find((filter) => filter.id === filterId)?.options ?? []\n )\n}\n\nfunction getValueForAddedFilter(filterId: string) {\n return additionalFilters.find((filter) => filter.id === filterId)?.value\n}\n\nfunction updateValueForAddedFilter(filterId: string, value: string | string[]) {\n const filter = additionalFilters.find((filter) => filter.id === filterId)\n\n if (filter) {\n filter.value.value = value\n }\n}\n\nconst addedFilterIds = ref\u003Cstring[]>([])\n\nconst availableFiltersToAdd = computed(() =>\n additionalFilters.filter((filter) => {\n return !addedFilterIds.value.some(\n (addedFilterId) => addedFilterId === filter.id,\n )\n }),\n)\n\nasync function addFilter(filterId: string) {\n addedFilterIds.value.push(filterId)\n\n await nextTick()\n\n if (addedFilterDropdownRefs.value.length) {\n addedFilterDropdownRefs.value[\n addedFilterDropdownRefs.value.length - 1\n ].open()\n }\n}\n\nfunction removeFilter(filterId: string) {\n addedFilterIds.value = addedFilterIds.value.filter(\n (addedFilterId) => addedFilterId !== filterId,\n )\n}\n\nconst addedFilterDropdownRefs = ref\u003CInstanceType\u003Ctypeof BaseFilterDropdown>[]>(\n [],\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-stack direction=\"horizontal\" gap=\"s\" wrap>\n \u003Ctemplate v-for=\"filterId in addedFilterIds\" :key=\"filterId\">\n \u003CBaseFilterDropdown\n ref=\"addedFilterDropdownRefs\"\n name=\"add-filter\"\n :model-value=\"getValueForAddedFilter(filterId)?.value\"\n :label=\"getLabelForAddedFilter(filterId)\"\n :options=\"getOptionsForAddedFilter(filterId)\"\n multiple\n removable\n @remove=\"removeFilter(filterId)\"\n @update:model-value=\"updateValueForAddedFilter(filterId, $event || '')\"\n />\n \u003C/template>\n\n \u003CBaseFilterAddButton\n v-if=\"availableFiltersToAdd?.length\"\n :options=\"availableFiltersToAdd\"\n @select=\"addFilter\"\n />\n \u003C/nord-stack>\n\u003C/template>\n",{"name":431,"displayName":432,"url":433,"code":434},"grouped","Grouped","/main/#/922/product-patterns/usage-examples/filter-add-button/grouped","\u003Cscript lang=\"ts\" setup>\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\nimport type { GroupedOption } from '@/components/base/filter/AddButton.vue'\nimport BaseFilterAddButton from '@/components/base/filter/AddButton.vue'\n\n// Additional Filters\ntype AdditionalFilter = {\n id: string\n label: string\n value: Ref\u003Cstring | Array\u003Cstring>>\n options: Array\u003C{ label: string; value: string }>\n}\n\n// -- FILTERS DATA --\nconst additionalFilters: AdditionalFilter[] = [\n {\n id: 'client',\n label: 'Client',\n value: ref([]),\n options: [\n { label: 'Donald Johnson', value: '17' },\n { label: 'Claudia Olson', value: '32' },\n { label: 'Jesse Wheeler', value: '123' },\n ],\n },\n {\n id: 'patient',\n label: 'Patient',\n value: ref([]),\n options: [\n { label: 'Pixie', value: '3' },\n { label: 'Nimba', value: '33' },\n { label: 'Bink', value: '77' },\n { label: 'Luna', value: '99' },\n ],\n },\n {\n id: 'veterinarian',\n label: 'Veterinarian',\n value: ref([]),\n options: [\n { label: 'Dr. John Doe', value: '23' },\n { label: 'Dr. Jane Smith', value: '34' },\n { label: 'Dr. Jim Beam', value: '45' },\n ],\n },\n]\n\n// -- LOGIC FOR GROUPING FILTERS --\n// In this demo, we group the filters so they display grouped options with dividers between categories\nconst additionalFiltersOptions = computed(\n () =>\n [\n {\n heading: 'Group A',\n options: availableFiltersToAdd.value\n .filter((filter) => ['client'].includes(filter.id))\n .map((filter) => ({\n id: filter.id,\n label: filter.label,\n })),\n },\n {\n heading: 'Group 3',\n options: availableFiltersToAdd.value\n .filter((filter) => ['patient'].includes(filter.id))\n .map((filter) => ({\n id: filter.id,\n label: filter.label,\n })),\n },\n {\n // Group without label heading\n options: availableFiltersToAdd.value\n .filter((filter) => ['veterinarian'].includes(filter.id))\n .map((filter) => ({\n id: filter.id,\n label: filter.label,\n })),\n },\n ] satisfies GroupedOption[],\n)\n\n// 👇 Rest of the code is the same as the basic example\n// -- LOGIC FOR ADDING/REMOVING FILTERS\nfunction getLabelForAddedFilter(filterId: string) {\n return additionalFilters.find((filter) => filter.id === filterId)?.label ?? ''\n}\n\nfunction getOptionsForAddedFilter(filterId: string) {\n return (\n additionalFilters.find((filter) => filter.id === filterId)?.options ?? []\n )\n}\n\nfunction getValueForAddedFilter(filterId: string) {\n return additionalFilters.find((filter) => filter.id === filterId)?.value\n}\n\nfunction updateValueForAddedFilter(filterId: string, value: string | string[]) {\n const filter = additionalFilters.find((filter) => filter.id === filterId)\n\n if (filter) {\n filter.value.value = value\n }\n}\n\nconst addedFilterIds = ref\u003Cstring[]>([])\n\nconst availableFiltersToAdd = computed(() =>\n additionalFilters.filter((filter) => {\n return !addedFilterIds.value.some(\n (addedFilterId) => addedFilterId === filter.id,\n )\n }),\n)\n\nasync function addFilter(filterId: string) {\n addedFilterIds.value.push(filterId)\n\n await nextTick()\n\n if (addedFilterDropdownRefs.value.length) {\n addedFilterDropdownRefs.value[\n addedFilterDropdownRefs.value.length - 1\n ].open()\n }\n}\n\nfunction removeFilter(filterId: string) {\n addedFilterIds.value = addedFilterIds.value.filter(\n (addedFilterId) => addedFilterId !== filterId,\n )\n}\n\nconst addedFilterDropdownRefs = ref\u003CInstanceType\u003Ctypeof BaseFilterDropdown>[]>(\n [],\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-stack direction=\"horizontal\" gap=\"s\" wrap>\n \u003Ctemplate v-for=\"filterId in addedFilterIds\" :key=\"filterId\">\n \u003CBaseFilterDropdown\n ref=\"addedFilterDropdownRefs\"\n name=\"add-filter\"\n :model-value=\"getValueForAddedFilter(filterId)?.value\"\n :label=\"getLabelForAddedFilter(filterId)\"\n :options=\"getOptionsForAddedFilter(filterId)\"\n multiple\n removable\n @remove=\"removeFilter(filterId)\"\n @update:model-value=\"updateValueForAddedFilter(filterId, $event || '')\"\n />\n \u003C/template>\n\n \u003CBaseFilterAddButton\n v-if=\"availableFiltersToAdd?.length\"\n :options=\"additionalFiltersOptions\"\n @select=\"addFilter\"\n />\n \u003C/nord-stack>\n\u003C/template>\n",{"name":436,"displayName":437,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":438},"pcnf-filter-bar","Filter Bar",[439],{"name":15,"displayName":16,"url":440,"code":441},"/main/#/922/product-patterns/usage-examples/filter-bar/basic","\u003Cscript lang=\"ts\" setup>\nimport { z } from 'zod'\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\nimport type { Stack } from '@nordhealth/components'\nimport { useFiltersURLState } from '@/composables/useFiltersURLState.js'\nimport { usePatientDetailsFormFieldOptions } from '@/composables/usePatientDetails.js'\nimport BaseFilterAddButton from '@/components/base/filter/AddButton.vue'\nimport BaseFilterResetButton from '@/components/base/filter/ResetButton.vue'\n\nconst { speciesOptions } = usePatientDetailsFormFieldOptions()\n\n// Additional Filters\ntype AdditionalFilter = {\n id: string\n label: string\n value: Ref\u003Cstring | Array\u003Cstring>>\n options: Array\u003C{ label: string; value: string }>\n}\nconst additionalFilters: AdditionalFilter[] = [\n {\n id: 'client',\n label: 'Client',\n value: ref([]),\n options: [\n { label: 'Donald Johnson', value: '17' },\n { label: 'Claudia Olson', value: '32' },\n { label: 'Jesse Wheeler', value: '123' },\n ],\n },\n {\n id: 'patient',\n label: 'Patient',\n value: ref([]),\n options: [\n { label: 'Pixie', value: '3' },\n { label: 'Nimba', value: '33' },\n { label: 'Bink', value: '77' },\n { label: 'Luna', value: '99' },\n ],\n },\n]\n\nfunction getLabelForAddedFilter(filterId: string) {\n return additionalFilters.find((filter) => filter.id === filterId)?.label ?? ''\n}\n\nfunction getOptionsForAddedFilter(filterId: string) {\n return (\n additionalFilters.find((filter) => filter.id === filterId)?.options ?? []\n )\n}\n\nfunction getValueForAddedFilter(filterId: string) {\n return additionalFilters.find((filter) => filter.id === filterId)?.value\n}\n\nfunction updateValueForAddedFilter(filterId: string, value: string | string[]) {\n const filter = additionalFilters.find((filter) => filter.id === filterId)\n\n if (filter) {\n filter.value.value = value\n }\n}\n\nconst addedFilterIds = ref\u003Cstring[]>([])\n\nconst availableFiltersToAdd = computed(() =>\n additionalFilters.filter((filter) => {\n return !addedFilterIds.value.some(\n (addedFilterId) => addedFilterId === filter.id,\n )\n }),\n)\n\nasync function addFilter(filterId: string) {\n addedFilterIds.value.push(filterId)\n\n await nextTick()\n\n if (addedFilterDropdownRefs.value.length) {\n addedFilterDropdownRefs.value[\n addedFilterDropdownRefs.value.length - 1\n ].open()\n }\n}\n\nfunction removeFilter(filterId: string) {\n addedFilterIds.value = addedFilterIds.value.filter(\n (addedFilterId) => addedFilterId !== filterId,\n )\n}\n\nconst addedFilterDropdownRefs = ref\u003CInstanceType\u003Ctypeof BaseFilterDropdown>[]>(\n [],\n)\n\n// Filters Schema\nconst filterSchema = z.object({\n search: z.string().default(''),\n statusIn: z.array(z.string()).default([]),\n speciesIn: z.array(z.string()).default([]),\n clientIn: z.array(z.string()).default([]),\n patientIn: z.array(z.string()).default([]),\n addedFilters: z.array(z.string()).default([]),\n})\n\nconst { filters, isInitialFilters, onFiltersChange, onResetFilters } =\n useFiltersURLState(filterSchema)\n\n// Search Filter\nconst search = ref(filters?.value?.search)\nconst searchDebounced = refDebounced(search)\n\n// Status Filter\nconst statusIn = ref(filters?.value?.statusIn || [])\nconst status = ['ACTIVE', 'ARRIVED', 'CONSULTATION', 'DISCHARGED'] as const\ntype Status = (typeof status)[number]\nconst statusTranslations = {\n ACTIVE: 'Active',\n ARRIVED: 'Arrived',\n CONSULTATION: 'Consultation',\n DISCHARGED: 'Discharged',\n}\n\nconst statusOptions = Object.entries(statusTranslations).map(\n ([value, label]) => ({\n value,\n label,\n }),\n)\nfunction toggleStatus(toggled: Status) {\n const set = new Set(statusIn.value)\n\n if (set.has(toggled)) {\n set.delete(toggled)\n } else {\n set.add(toggled)\n }\n\n statusIn.value = [...set]\n}\n\n// Species Filter\nconst speciesIn = ref(filters?.value?.speciesIn || [])\n\n// If filters URL state changes, update internal values accordingly\nwatchDebounced(\n () => filters?.value,\n (newFilters) => {\n search.value = newFilters?.search\n statusIn.value = newFilters?.statusIn\n speciesIn.value = newFilters?.speciesIn\n updateValueForAddedFilter('client', newFilters?.clientIn)\n updateValueForAddedFilter('patient', newFilters?.patientIn)\n addedFilterIds.value = newFilters?.addedFilters\n },\n { deep: true, immediate: true },\n)\n\n// If any of the internal values change, update filters URL changes accordingly\nwatch(\n [\n searchDebounced,\n statusIn,\n speciesIn,\n getValueForAddedFilter('client'),\n getValueForAddedFilter('patient'),\n addedFilterIds,\n ],\n () => {\n return onFiltersChange({\n search: search.value,\n statusIn: statusIn.value,\n speciesIn: speciesIn.value,\n clientIn: getValueForAddedFilter('client')?.value,\n patientIn: getValueForAddedFilter('patient')?.value,\n addedFilters: addedFilterIds.value,\n })\n },\n { deep: true, immediate: true },\n)\n\n// Narrow breakpoint\nconst stackElement = useTemplateRef\u003CStack>('stackElementRef')\nconst { width } = useElementSize(stackElement)\n// based the breakpoint on some manual testing\nconst isNarrow = computed(() => width.value \u003C= 1090)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-stack ref=\"stackElementRef\" direction=\"horizontal\" gap=\"s\" wrap>\n \u003Cnord-input v-model=\"search\" size=\"s\" label=\"Search items\" hide-label>\n \u003Cnord-icon slot=\"start\" name=\"navigation-search\" size=\"xs\">\u003C/nord-icon>\n \u003C/nord-input>\n\n \u003C!-- Render a filter dropdown for the status filter at narrow widths... -->\n \u003CBaseFilterDropdown\n v-if=\"isNarrow\"\n v-model=\"statusIn\"\n name=\"status\"\n label=\"Status\"\n :options=\"statusOptions\"\n multiple\n />\n\n \u003C!-- ...or a tag group if space allows -->\n \u003Ctemplate v-else>\n \u003Cnord-visually-hidden id=\"status-label\">\n Time frame\n \u003C/nord-visually-hidden>\n \u003Cnord-tag-group aria-labelledby=\"status-label\">\n \u003Cnord-tag\n v-for=\"value in status\"\n :key=\"value\"\n size=\"s\"\n variant=\"selectable\"\n :checked=\"statusIn.includes(value)\"\n @change=\"toggleStatus(value)\"\n >\n {{ statusTranslations[value] }}\n \u003C/nord-tag>\n \u003C/nord-tag-group>\n \u003C/template>\n\n \u003CBaseFilterDropdown\n v-model=\"speciesIn\"\n name=\"species\"\n label=\"Species\"\n :options=\"speciesOptions\"\n multiple\n />\n \u003Cnord-divider direction=\"vertical\">\u003C/nord-divider>\n \u003Ctemplate v-for=\"filterId in addedFilterIds\" :key=\"filterId\">\n \u003CBaseFilterDropdown\n ref=\"addedFilterDropdownRefs\"\n name=\"add-filter\"\n :model-value=\"getValueForAddedFilter(filterId)?.value\"\n :label=\"getLabelForAddedFilter(filterId)\"\n :options=\"getOptionsForAddedFilter(filterId)\"\n multiple\n removable\n @remove=\"removeFilter(filterId)\"\n @update:model-value=\"updateValueForAddedFilter(filterId, $event || '')\"\n />\n \u003C/template>\n\n \u003CBaseFilterAddButton\n v-if=\"availableFiltersToAdd.length\"\n :options=\"availableFiltersToAdd\"\n @select=\"addFilter\"\n />\n\n \u003CBaseFilterResetButton\n :disabled=\"isInitialFilters\"\n @click=\"onResetFilters\"\n />\n \u003C/nord-stack>\n\u003C/template>\n",{"name":443,"displayName":444,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":445},"pcnf-filter-dropdown","Filter Dropdown",[446,449,454,457,462,467,472,477,482,487,492],{"name":15,"displayName":16,"url":447,"code":448},"/main/#/922/product-patterns/usage-examples/filter-dropdown/basic","\u003Cscript lang=\"ts\" setup>\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\nconst value = ref()\n\nconst options = [\n { label: 'Amphibian', value: 'AMPHIBIAN' },\n { label: 'Canine', value: 'CANINE' },\n { label: 'Feline', value: 'FELINE' },\n { label: 'Rodents', value: 'RODENTS' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-stack direction=\"horizontal\" gap=\"s\" wrap>\n \u003CBaseFilterDropdown\n v-model=\"value\"\n name=\"species\"\n label=\"Species\"\n :options\n />\n \u003C/nord-stack>\n\u003C/template>\n",{"name":450,"displayName":451,"url":452,"code":453},"infinite-scroll","Infinite scroll","/main/#/922/product-patterns/usage-examples/filter-dropdown/infinite-scroll","\u003Cscript lang=\"ts\" setup>\nimport type { SelectableOption } from '@/components/base/filter/Dropdown.vue'\nimport { useDevPlaygroundPatientsInfiniteListQuery } from '@/composables/useDevPlaygroundDataTable.js'\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\n\nconst value = ref\u003Cstring[]>([])\n\nconst searchQuery = ref('')\nconst paginationState = ref({ pageIndex: 0, pageSize: 20 })\n\nconst patientsInfiniteQuery = useDevPlaygroundPatientsInfiniteListQuery(\n paginationState,\n ref([]), // no sorting needed\n {\n search: searchQuery,\n },\n)\n\n// Flatten all pages of patients into options\nconst options = computed\u003CSelectableOption[]>(() => {\n if (!patientsInfiniteQuery.data?.pages) {\n return []\n }\n\n return patientsInfiniteQuery.data.pages.flatMap((page) =>\n (page.data || [])\n .filter((patient) => patient?.id && patient?.attributes?.name)\n .map((patient) => ({\n value: patient.id,\n label: patient?.attributes?.name || '',\n })),\n )\n})\n\nconst handleSearchChange = (query: string) => {\n searchQuery.value = query\n paginationState.value.pageIndex = 0\n}\n\nconst handleLoadMore = () => {\n if (patientsInfiniteQuery.hasNextPage && !patientsInfiniteQuery.isFetching) {\n patientsInfiniteQuery.fetchNextPage()\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-stack direction=\"horizontal\" gap=\"s\" wrap>\n \u003CBaseFilterDropdown\n v-model=\"value\"\n name=\"patient\"\n label=\"Patient\"\n multiple\n searchable\n :options\n :loading=\"\n patientsInfiniteQuery.isPending ||\n patientsInfiniteQuery.isFetchingNextPage\n \"\n :internal-search=\"false\"\n @search-change=\"handleSearchChange\"\n @load-more=\"handleLoadMore\"\n />\n \u003C/nord-stack>\n\u003C/template>\n",{"name":205,"displayName":206,"url":455,"code":456},"/main/#/922/product-patterns/usage-examples/filter-dropdown/multi-select","\u003Cscript lang=\"ts\" setup>\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\nconst value = ref([])\n\nconst options = [\n { label: 'Amphibian', value: 'AMPHIBIAN' },\n { label: 'Canine', value: 'CANINE' },\n { label: 'Feline', value: 'FELINE' },\n { label: 'Rodents', value: 'RODENTS' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-stack direction=\"horizontal\" gap=\"s\" wrap>\n \u003CBaseFilterDropdown\n v-model=\"value\"\n name=\"species\"\n label=\"Species\"\n :options\n multiple\n />\n \u003C/nord-stack>\n\u003C/template>\n",{"name":458,"displayName":459,"url":460,"code":461},"multi-select-grouped-tree","Multi select grouped tree","/main/#/922/product-patterns/usage-examples/filter-dropdown/multi-select-grouped-tree","\u003Cscript lang=\"ts\" setup>\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\nconst value = ref([])\n\nconst options = [\n {\n heading: 'Canine',\n children: [\n { label: 'German Shepherd', value: 'GERMAN_SHEPHERD' },\n { label: 'Siberian Husky', value: 'SIBERIAN_HUSKY' },\n ],\n },\n {\n heading: 'Feline',\n children: [\n { label: 'Siamese', value: 'SIAMESE' },\n { label: 'Persian', value: 'PERSIAN' },\n ],\n },\n { label: 'Amphibian', value: 'AMPHIBIAN' },\n { label: 'Rodents', value: 'RODENTS' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-stack direction=\"horizontal\" gap=\"s\" wrap>\n \u003CBaseFilterDropdown\n v-model=\"value\"\n name=\"species\"\n label=\"Species\"\n :options\n multiple\n />\n \u003C/nord-stack>\n\u003C/template>\n",{"name":463,"displayName":464,"url":465,"code":466},"multi-select-tree","Multi select tree","/main/#/922/product-patterns/usage-examples/filter-dropdown/multi-select-tree","\u003Cscript lang=\"ts\" setup>\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\nconst value = ref([])\n\nconst options = [\n { label: 'Amphibian', value: 'AMPHIBIAN' },\n {\n label: 'Canine',\n value: 'CANINE',\n children: [\n {\n label: 'German Shepherd',\n value: 'GERMAN_SHEPHERD',\n },\n {\n label: 'Siberian Husky',\n value: 'SIBERIAN_HUSKY',\n },\n {\n label: 'Golden Retriever',\n value: 'GOLDEN_RETRIEVER',\n },\n ],\n },\n {\n label: 'Feline',\n value: 'FELINE',\n children: [\n {\n label: 'Maine Coon',\n value: 'MAINE_COON',\n },\n { label: 'Siamese', value: 'SIAMESE' },\n {\n label: 'British Shorthair',\n value: 'BRITISH_SHORTHAIR',\n },\n ],\n },\n {\n label: 'Option 1 with no children',\n value: 'OPTION_1',\n },\n {\n label: 'Option 2 with no children',\n value: 'OPTION_2',\n },\n {\n label: 'Others',\n value: 'OTHERS',\n },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-stack direction=\"horizontal\" gap=\"s\" wrap>\n \u003CBaseFilterDropdown\n v-model=\"value\"\n name=\"species-and-breeds\"\n label=\"Species & Breeds\"\n :options\n multiple\n />\n \u003C/nord-stack>\n\u003C/template>\n",{"name":468,"displayName":469,"url":470,"code":471},"option-label-slot","Option label slot","/main/#/922/product-patterns/usage-examples/filter-dropdown/option-label-slot","\u003Cscript lang=\"ts\" setup>\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\nconst value = ref([])\n\nconst options = [\n { label: 'Amphibian', value: 'AMPHIBIAN' },\n { label: 'Feline', value: 'FELINE' },\n { label: 'Rodents', value: 'RODENTS' },\n {\n heading: 'Canine',\n children: [\n { label: 'German Shepherd', value: 'GERMAN_SHEPHERD' },\n { label: 'Siberian Husky', value: 'SIBERIAN_HUSKY' },\n ],\n },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-stack direction=\"horizontal\" gap=\"s\" wrap>\n \u003CBaseFilterDropdown\n v-model=\"value\"\n name=\"species\"\n label=\"Species\"\n :options\n multiple\n >\n \u003Ctemplate #option-label=\"{ option }\">\n \u003Cdiv class=\"custom-option-label\">\n \u003Cnord-icon name=\"user-single\" size=\"s\">\u003C/nord-icon>\n \u003Cdiv class=\"label\">\n {{ 'label' in option ? option.label : option.heading }}\n \u003C/div>\n \u003Cdiv class=\"suffix\">\n Suffix\n \u003Cnord-icon name=\"interface-star\" size=\"s\">\u003C/nord-icon>\n \u003C/div>\n \u003C/div>\n \u003C/template>\n \u003C/BaseFilterDropdown>\n \u003C/nord-stack>\n\u003C/template>\n\n\u003Cstyle scoped>\n.custom-option-label {\n flex: 1;\n display: flex;\n gap: var(--n-space-s);\n justify-content: space-between;\n align-items: center;\n}\n\n.custom-option-label .label {\n margin-inline-end: auto;\n}\n\n.custom-option-label .suffix {\n font-size: var(--n-font-size-s);\n display: flex;\n align-items: center;\n gap: var(--n-space-s);\n}\n\n.custom-option-label :is(.suffix, nord-icon) {\n color: var(--n-color-text-weaker);\n}\n\u003C/style>\n",{"name":473,"displayName":474,"url":475,"code":476},"removable","Removable","/main/#/922/product-patterns/usage-examples/filter-dropdown/removable","\u003Cscript lang=\"ts\" setup>\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\nconst value = ref([])\n\nconst options = [\n { label: 'Amphibian', value: 'AMPHIBIAN' },\n { label: 'Canine', value: 'CANINE' },\n { label: 'Feline', value: 'FELINE' },\n { label: 'Rodents', value: 'RODENTS' },\n]\n\nconst displayFilterDropdown = ref(true)\n\n/**\n * Example of how to remove the filter dropdown, will display it again after a second for demonstration purposes\n */\nfunction removeFilterDropdown() {\n displayFilterDropdown.value = false\n\n setTimeout(() => {\n displayFilterDropdown.value = true\n }, 1000)\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-stack direction=\"horizontal\" gap=\"s\" wrap>\n \u003CBaseFilterDropdown\n v-if=\"displayFilterDropdown\"\n v-model=\"value\"\n name=\"species\"\n label=\"Species\"\n :options\n multiple\n removable\n @remove=\"removeFilterDropdown()\"\n />\n \u003C/nord-stack>\n\u003C/template>\n",{"name":478,"displayName":479,"url":480,"code":481},"searchable","Searchable","/main/#/922/product-patterns/usage-examples/filter-dropdown/searchable","\u003Cscript lang=\"ts\" setup>\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\nconst value = ref([])\n\nconst options = [\n { label: 'Amphibian', value: 'AMPHIBIAN' },\n { label: 'Canine', value: 'CANINE' },\n { label: 'Feline', value: 'FELINE' },\n { label: 'Rodents', value: 'RODENTS' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-stack direction=\"horizontal\" gap=\"s\" wrap>\n \u003CBaseFilterDropdown\n v-model=\"value\"\n name=\"species\"\n label=\"Species\"\n :options\n multiple\n searchable\n />\n \u003C/nord-stack>\n\u003C/template>\n",{"name":483,"displayName":484,"url":485,"code":486},"searchable-with-asynchronous-data","Searchable with asynchronous data","/main/#/922/product-patterns/usage-examples/filter-dropdown/searchable-with-asynchronous-data","\u003Cscript lang=\"ts\" setup>\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\nconst value = ref([])\n\nconst options = ref([])\n\nconst isFetchingLanguages = ref(false)\n\nconst fetchLanguages = async (query: string) => {\n // From: https://www.back4app.com/database/paul-datasets/list-of-all-programming-languages/get-started/javascript/rest-api/fetch?objectClassSlug=dataset\n\n isFetchingLanguages.value = true\n\n let where = ''\n\n if (query) {\n where =\n '&where=' +\n encodeURIComponent(\n JSON.stringify({\n ProgrammingLanguage: {\n $regex: `${query}|${query.toUpperCase()}|${\n query[0].toUpperCase() + query.slice(1)\n }`,\n },\n }),\n )\n }\n\n const response = await fetch(\n 'https://parseapi.back4app.com/classes/All_Programming_Languages?limit=9999&order=ProgrammingLanguage&keys=ProgrammingLanguage' +\n where,\n {\n headers: {\n 'X-Parse-Application-Id': 'XpRShKqJcxlqE5EQKs4bmSkozac44osKifZvLXCL', // This is the fake app's application id\n 'X-Parse-Master-Key': 'Mr2UIBiCImScFbbCLndBv8qPRUKwBAq27plwXVuv', // This is the fake app's readonly master key\n },\n },\n )\n\n const data = await response.json() // Here you have the data that you need\n\n options.value = data.results.map(\n (item: { objectId: string; ProgrammingLanguage: string }) => {\n return { value: item.objectId, label: item.ProgrammingLanguage }\n },\n )\n\n isFetchingLanguages.value = false\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-stack direction=\"horizontal\" gap=\"s\" wrap>\n \u003CBaseFilterDropdown\n v-model=\"value\"\n name=\"programming-language\"\n label=\"Programming language\"\n :options\n multiple\n searchable\n :loading=\"isFetchingLanguages\"\n :internal-search=\"false\"\n @search-change=\"fetchLanguages($event)\"\n @open=\"fetchLanguages('')\"\n />\n \u003C/nord-stack>\n\u003C/template>\n",{"name":488,"displayName":489,"url":490,"code":491},"searchable-with-tree","Searchable with tree","/main/#/922/product-patterns/usage-examples/filter-dropdown/searchable-with-tree","\u003Cscript lang=\"ts\" setup>\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\nconst value = ref([])\n\nconst options = [\n { label: 'Amphibian', value: 'AMPHIBIAN' },\n {\n label: 'Canine',\n value: 'CANINE',\n children: [\n {\n label: 'German Shepherd',\n value: 'GERMAN_SHEPHERD',\n },\n {\n label: 'Siberian Husky',\n value: 'SIBERIAN_HUSKY',\n },\n {\n label: 'Golden Retriever',\n value: 'GOLDEN_RETRIEVER',\n },\n ],\n },\n {\n label: 'Feline',\n value: 'FELINE',\n children: [\n {\n label: 'Maine Coon',\n value: 'MAINE_COON',\n },\n { label: 'Siamese', value: 'SIAMESE' },\n {\n label: 'British Shorthair',\n value: 'BRITISH_SHORTHAIR',\n },\n ],\n },\n {\n label: 'Option 1 with no children',\n value: 'OPTION_1',\n },\n {\n label: 'Option 2 with no children',\n value: 'OPTION_2',\n },\n {\n label: 'Others',\n value: 'OTHERS',\n },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-stack direction=\"horizontal\" gap=\"s\" wrap>\n \u003CBaseFilterDropdown\n v-model=\"value\"\n name=\"species-and-breeds\"\n label=\"Species & Breeds\"\n :options\n multiple\n searchable\n />\n \u003C/nord-stack>\n\u003C/template>\n",{"name":493,"displayName":494,"url":495,"code":496},"size","Size","/main/#/922/product-patterns/usage-examples/filter-dropdown/size","\u003Cscript lang=\"ts\" setup>\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\nconst value = ref([])\n\nconst options = [\n { label: 'Amphibian', value: 'AMPHIBIAN' },\n { label: 'Canine', value: 'CANINE' },\n { label: 'Feline', value: 'FELINE' },\n { label: 'Rodents', value: 'RODENTS' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-stack direction=\"horizontal\" gap=\"s\" wrap>\n \u003Cnord-fieldset label=\"Small\">\n \u003CBaseFilterDropdown\n v-model=\"value\"\n name=\"species-size-s\"\n label=\"Species\"\n :options\n multiple\n size=\"s\"\n />\n \u003C/nord-fieldset>\n\n \u003Cnord-fieldset label=\"Medium\">\n \u003CBaseFilterDropdown\n v-model=\"value\"\n name=\"species-size-m\"\n label=\"Species\"\n :options\n multiple\n size=\"m\"\n />\n \u003C/nord-fieldset>\n\n \u003Cnord-fieldset label=\"Large\">\n \u003CBaseFilterDropdown\n v-model=\"value\"\n name=\"species-size-l\"\n label=\"Species\"\n :options\n multiple\n size=\"l\"\n />\n \u003C/nord-fieldset>\n \u003C/nord-stack>\n\u003C/template>\n",{"name":498,"displayName":499,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":500},"pcnf-input-number","Input Number",[501,504,509,514,519,524,529,534,539,544],{"name":15,"displayName":16,"url":502,"code":503},"/main/#/922/product-patterns/usage-examples/input-number/basic","\u003Cscript setup lang=\"ts\">\nimport InputNumber from '@/components/input/Number.vue'\nconst moneyAmount = ref\u003Cnumber>()\nconst percentageValue = ref\u003Cnumber>()\nconst unitaryWeight = ref\u003Cnumber>()\nconst fullNumber = ref\u003Cnumber>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-stack gap=\"l\">\n \u003Ch2 class=\"n:text-l n:font-active\">Basic Usage\u003C/h2>\n \u003Cp class=\"n:text-weaker\">\n The InputNumber component with default props. Each type uses sensible\n defaults for decimal places and formatting.\n \u003C/p>\n\n \u003CInputNumber\n v-model=\"moneyAmount\"\n type=\"money\"\n label=\"Money amount\"\n hint=\"2 decimal places, currency symbol\"\n />\n\n \u003CInputNumber\n v-model=\"percentageValue\"\n type=\"percentage\"\n label=\"Percentage value\"\n hint=\"0-100 range, percent symbol\"\n />\n\n \u003CInputNumber\n v-model=\"unitaryWeight\"\n type=\"unitary\"\n unit-label=\"kg\"\n label=\"Weight\"\n hint=\"With custom unit label\"\n />\n\n \u003CInputNumber\n v-model=\"fullNumber\"\n type=\"full\"\n label=\"Quantity\"\n hint=\"Integer only, no decimals\"\n />\n\n \u003Cnord-card padding=\"m\" color=\"neutral\">\n \u003Cnord-stack gap=\"s\">\n \u003Ch3 class=\"n:text-m n:font-active\">Values:\u003C/h3>\n \u003Cp>\u003Cstrong>moneyAmount:\u003C/strong> {{ moneyAmount }}\u003C/p>\n \u003Cp>\u003Cstrong>percentageValue:\u003C/strong> {{ percentageValue }}\u003C/p>\n \u003Cp>\u003Cstrong>unitaryWeight:\u003C/strong> {{ unitaryWeight }}\u003C/p>\n \u003Cp>\u003Cstrong>fullNumber:\u003C/strong> {{ fullNumber }}\u003C/p>\n \u003C/nord-stack>\n \u003C/nord-card>\n \u003C/nord-stack>\n\u003C/template>\n",{"name":505,"displayName":506,"url":507,"code":508},"form-validation","Form validation","/main/#/922/product-patterns/usage-examples/input-number/form-validation","\u003Cscript setup lang=\"ts\">\nimport { useForm } from 'vee-validate'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { z } from 'zod'\nimport InputNumber from '@/components/input/Number.vue'\n\nconst schema = toTypedSchema(\n z.object({\n price: z.number().positive('Price must be greater than 0'),\n }),\n)\n\nconst { defineField, errors } = useForm({\n validationSchema: schema,\n})\n\nconst [price] = defineField('price')\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-stack gap=\"l\">\n \u003CInputNumber\n v-model=\"price\"\n type=\"money\"\n label=\"Price\"\n :error=\"errors.price\"\n />\n\n \u003Cnord-card padding=\"m\" color=\"neutral\">\n \u003Cp>\u003Cstrong>price:\u003C/strong> {{ price }}\u003C/p>\n \u003C/nord-card>\n \u003C/nord-stack>\n\u003C/template>\n",{"name":510,"displayName":511,"url":512,"code":513},"format-rules","Format rules","/main/#/922/product-patterns/usage-examples/input-number/format-rules","\u003Cscript setup lang=\"ts\">\nimport InputNumber from '@/components/input/Number.vue'\nconst price3Decimals = ref\u003Cnumber>()\nconst percentage1Decimal = ref\u003Cnumber>()\nconst weight4Decimals = ref\u003Cnumber>()\nconst rangeConstrained = ref\u003Cnumber>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-stack gap=\"l\">\n \u003CInputNumber\n v-model=\"price3Decimals\"\n type=\"money\"\n label=\"Price (3 decimals)\"\n :format-rules=\"{ maximumFractionDigits: 3 }\"\n />\n\n \u003CInputNumber\n v-model=\"percentage1Decimal\"\n type=\"percentage\"\n label=\"Percentage (1 decimal)\"\n :format-rules=\"{ maximumFractionDigits: 1 }\"\n />\n\n \u003CInputNumber\n v-model=\"weight4Decimals\"\n type=\"unitary\"\n unit-label=\"kg\"\n label=\"Weight (4 decimals)\"\n :format-rules=\"{ maximumFractionDigits: 4 }\"\n />\n\n \u003CInputNumber\n v-model=\"rangeConstrained\"\n type=\"money\"\n label=\"Amount (min: 10, max: 1000)\"\n :format-rules=\"{ min: 10, max: 1000 }\"\n />\n\n \u003Cnord-card padding=\"m\" color=\"neutral\">\n \u003Cp>\u003Cstrong>price3Decimals:\u003C/strong> {{ price3Decimals }}\u003C/p>\n \u003Cp>\u003Cstrong>percentage1Decimal:\u003C/strong> {{ percentage1Decimal }}\u003C/p>\n \u003Cp>\u003Cstrong>weight4Decimals:\u003C/strong> {{ weight4Decimals }}\u003C/p>\n \u003Cp>\u003Cstrong>rangeConstrained:\u003C/strong> {{ rangeConstrained }}\u003C/p>\n \u003C/nord-card>\n \u003C/nord-stack>\n\u003C/template>\n",{"name":515,"displayName":516,"url":517,"code":518},"full","Full","/main/#/922/product-patterns/usage-examples/input-number/full","\u003Cscript setup lang=\"ts\">\nimport InputNumber from '@/components/input/Number.vue'\nconst quantity = ref\u003Cnumber>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-stack gap=\"l\">\n \u003CInputNumber v-model=\"quantity\" type=\"full\" label=\"Quantity\" />\n\n \u003Cnord-card padding=\"m\" color=\"neutral\">\n \u003Cp>\u003Cstrong>quantity:\u003C/strong> {{ quantity }}\u003C/p>\n \u003C/nord-card>\n \u003C/nord-stack>\n\u003C/template>\n",{"name":520,"displayName":521,"url":522,"code":523},"money","Money","/main/#/922/product-patterns/usage-examples/input-number/money","\u003Cscript setup lang=\"ts\">\nimport InputNumber from '@/components/input/Number.vue'\nconst amount = ref\u003Cnumber>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-stack gap=\"l\">\n \u003CInputNumber v-model=\"amount\" type=\"money\" label=\"Money amount\" />\n\n \u003Cnord-card padding=\"m\" color=\"neutral\">\n \u003Cp>\u003Cstrong>amount:\u003C/strong> {{ amount }}\u003C/p>\n \u003C/nord-card>\n \u003C/nord-stack>\n\u003C/template>\n",{"name":525,"displayName":526,"url":527,"code":528},"percentage","Percentage","/main/#/922/product-patterns/usage-examples/input-number/percentage","\u003Cscript setup lang=\"ts\">\nimport InputNumber from '@/components/input/Number.vue'\nconst value = ref\u003Cnumber>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-stack gap=\"l\">\n \u003CInputNumber v-model=\"value\" type=\"percentage\" label=\"Percentage value\" />\n\n \u003Cnord-card padding=\"m\" color=\"neutral\">\n \u003Cp>\u003Cstrong>value:\u003C/strong> {{ value }}\u003C/p>\n \u003C/nord-card>\n \u003C/nord-stack>\n\u003C/template>\n",{"name":530,"displayName":531,"url":532,"code":533},"positive-negative","Positive negative","/main/#/922/product-patterns/usage-examples/input-number/positive-negative","\u003Cscript setup lang=\"ts\">\nimport InputNumber from '@/components/input/Number.vue'\nconst positiveOnly = ref\u003Cnumber>()\nconst negativeOnly = ref\u003Cnumber>()\nconst anyValue = ref\u003Cnumber>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-stack gap=\"l\">\n \u003CInputNumber v-model=\"positiveOnly\" type=\"positive\" label=\"Positive only\" />\n\n \u003CInputNumber v-model=\"negativeOnly\" type=\"negative\" label=\"Negative only\" />\n\n \u003CInputNumber\n v-model=\"anyValue\"\n type=\"money\"\n label=\"Any value (positive or negative)\"\n />\n\n \u003Cnord-card padding=\"m\" color=\"neutral\">\n \u003Cp>\u003Cstrong>positiveOnly:\u003C/strong> {{ positiveOnly }}\u003C/p>\n \u003Cp>\u003Cstrong>negativeOnly:\u003C/strong> {{ negativeOnly }}\u003C/p>\n \u003Cp>\u003Cstrong>anyValue:\u003C/strong> {{ anyValue }}\u003C/p>\n \u003C/nord-card>\n \u003C/nord-stack>\n\u003C/template>\n",{"name":535,"displayName":536,"url":537,"code":538},"select-on-focus","Select on focus","/main/#/922/product-patterns/usage-examples/input-number/select-on-focus","\u003Cscript setup lang=\"ts\">\nimport InputNumber from '@/components/input/Number.vue'\nconst amount = ref(123.45)\nconst selectOnFocus = ref\u003C'always' | 'zero' | 'never'>('zero')\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-stack gap=\"l\">\n \u003Cnord-select v-model=\"selectOnFocus\" label=\"selectOnFocus\">\n \u003Coption value=\"always\">always\u003C/option>\n \u003Coption value=\"zero\">zero\u003C/option>\n \u003Coption value=\"never\">never\u003C/option>\n \u003C/nord-select>\n\n \u003CInputNumber\n v-model=\"amount\"\n type=\"money\"\n label=\"Amount\"\n :select-on-focus\n />\n\n \u003Cnord-card padding=\"m\" color=\"neutral\">\n \u003Cp>\u003Cstrong>amount:\u003C/strong> {{ amount }}\u003C/p>\n \u003C/nord-card>\n \u003C/nord-stack>\n\u003C/template>\n",{"name":540,"displayName":541,"url":542,"code":543},"unitary","Unitary","/main/#/922/product-patterns/usage-examples/input-number/unitary","\u003Cscript setup lang=\"ts\">\nimport InputNumber from '@/components/input/Number.vue'\nconst weight = ref\u003Cnumber>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-stack gap=\"l\">\n \u003CInputNumber\n v-model=\"weight\"\n type=\"unitary\"\n unit-label=\"kg\"\n label=\"Weight\"\n />\n\n \u003Cnord-card padding=\"m\" color=\"neutral\">\n \u003Cp>\u003Cstrong>weight:\u003C/strong> {{ weight }}\u003C/p>\n \u003C/nord-card>\n \u003C/nord-stack>\n\u003C/template>\n",{"name":545,"displayName":546,"url":547,"code":548},"zero-on-nullish","Zero on nullish","/main/#/922/product-patterns/usage-examples/input-number/zero-on-nullish","\u003Cscript setup lang=\"ts\">\nimport InputNumber from '@/components/input/Number.vue'\nconst amount = ref\u003Cnumber>()\nconst zeroOnNullish = ref(true)\n\nconst onCheckboxChange = (event: Event) => {\n const eventTarget = event?.target as unknown as HTMLInputElement\n zeroOnNullish.value = eventTarget?.checked\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-stack gap=\"l\">\n \u003Cnord-checkbox\n v-model=\"zeroOnNullish\"\n :checked=\"zeroOnNullish\"\n label=\"Activate Zero on Nullish\"\n @change=\"onCheckboxChange\"\n />\n\n \u003Cp>\n After checking or unchecking the input, delete all the text in the input.\n \u003C/p>\n\n \u003CInputNumber\n v-model=\"amount\"\n type=\"money\"\n label=\"Amount\"\n :zero-on-nullish\n />\n\n \u003Cnord-card padding=\"m\" color=\"neutral\">\n \u003Cp>\u003Cstrong>amount:\u003C/strong> {{ amount }}\u003C/p>\n \u003C/nord-card>\n \u003C/nord-stack>\n\u003C/template>\n",{"name":550,"displayName":551,"description":552,"usageContent":553,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":554},"pcnf-legend-counter","Legend Counter","Legend counter is used to display a set of counters with labels and corresponding values, styled according to their status. It supports translation for labels and offers size customization.","\u003Cdiv class=\"n-usage n-usage-do\">\n\u003Ch3>Do\u003C/h3>\n\u003Cul>\n\u003Cli>Use this component to display counters (auxiliary information) for distinct categories or statuses.\u003C/li>\n\u003Cli>Ensure the label corresponds to one of the predefined statuses: notStarted, processing, submitted, or incorrectAmount.\u003C/li>\n\u003Cli>Provide meaningful numeric values or default to 0 if no value is available.\u003C/li>\n\u003Cli>Use the size prop to adjust the size of the counters to fit the design requirements.\u003C/li>\n\u003C/ul>\n\u003C/div>\n\u003Cdiv class=\"n-usage n-usage-dont\">\n\u003Ch3>Don't\u003C/h3>\n\u003Cul>\n\u003Cli>Don't use this component for non-status-related counters; it is designed specifically for predefined statuses.\u003C/li>\n\u003Cli>Avoid providing excessively large or negative numbers as value, as it may break visual consistency.\u003C/li>\n\u003Cli>Don't use this component if translations for label are unavailable or unclear.\u003C/li>\n\u003Cli>Use counters sparingly as you can overwhelm users and reduce the effectiveness of the feedback. Instead, balance the need for each section and display the strictly necessary.\u003C/li>\n\u003C/ul>\n\u003C/div>",[555,558],{"name":15,"displayName":16,"url":556,"code":557},"/main/#/922/product-patterns/usage-examples/legend-counter/basic","\u003Cscript setup lang=\"ts\">\nimport type { Counter } from '@/components/base/LegendCounter.vue'\nimport BaseLegendCounter from '@/components/base/LegendCounter.vue'\n\nconst counters = ref\u003CCounter[]>([\n { label: 'notStarted', value: 45 },\n { label: 'processing', value: 6 },\n { label: 'submitted', value: 100 },\n { label: 'incorrectAmount', value: 0 },\n])\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseLegendCounter :counters />\n\u003C/template>\n",{"name":493,"displayName":494,"url":559,"code":560},"/main/#/922/product-patterns/usage-examples/legend-counter/size","\u003Cscript setup lang=\"ts\">\nimport type { Counter } from '@/components/base/LegendCounter.vue'\nimport BaseLegendCounter from '@/components/base/LegendCounter.vue'\n\nconst counters = ref\u003CCounter[]>([\n { label: 'notStarted', value: 45 },\n { label: 'processing', value: 6 },\n { label: 'submitted', value: 100 },\n { label: 'incorrectAmount', value: 0 },\n])\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-stack>\n \u003CBaseLegendCounter size=\"s\" :counters />\n \u003CBaseLegendCounter :counters />\n \u003C/nord-stack>\n\u003C/template>\n",{"name":562,"displayName":521,"description":563,"usageContent":564,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":565},"pcnf-money","Money is a composable that converts monetary values from integers to various monetary string formats and vice versa, ensuring proper formatting for both display and JSON:API interactions.","\u003Cdiv class=\"n-usage n-usage-do\">\n\u003Ch3>Do\u003C/h3>\n\u003Cul>\n\u003Cli>Use the composable to handle the conversion of monetary values between major and minor units, ensuring proper formatting for display and JSON:API interactions.\u003C/li>\n\u003Cli>Leverage the example implementation to allow users to input monetary values in the major format and preview various formatted results.\u003C/li>\n\u003Cli>Use computed properties to dynamically create a money instance and provide preformatted values like minor, major, and various formatting options such as currency2dps and number4dps.\u003C/li>\n\u003Cli>Add input validation to restrict users to entering only valid numeric formats with a single decimal point for accurate conversion.\u003C/li>\n\u003Cli>Use the toFormat method to display formatted monetary values in a table or UI component, ensuring clarity for the user.\u003C/li>\n\u003Cli>Provide intuitive labels and use helpers like formatNumberValue to display fallback values (e.g., '-') for invalid or undefined inputs.\u003C/li>\n\u003C/ul>\n\u003C/div>\n\u003Cdiv class=\"n-usage n-usage-dont\">\n\u003Ch3>Don't\u003C/h3>\n\u003Cul>\n\u003Cli>Don't bypass the composable's formatting methods (toFormat) to create custom formats, as this can lead to inconsistencies with other monetary displays.\u003C/li>\n\u003Cli>Avoid allowing users to enter invalid numeric strings with multiple decimal points or non-numeric characters; implement input validation as shown in the example.\u003C/li>\n\u003Cli>Don't rely solely on raw minor or major values for display purposes; always use formatting for a user-friendly experience.\u003C/li>\n\u003Cli>Avoid using this composable in scenarios where unsupported decimal precision or exotic currency formats are required.\u003C/li>\n\u003Cli>Don't hardcode output formatting or values in the UI; ensure values are dynamically computed and formatted using the provided methods.\u003C/li>\n\u003Cli>Avoid using the composable outside of monetary-related contexts, as it is designed specifically for handling monetary units and formatting.\u003C/li>\n\u003C/ul>\n\u003C/div>",[566,569],{"name":15,"displayName":16,"url":567,"code":568},"/main/#/922/product-patterns/usage-examples/money/basic","\u003Cscript setup lang=\"ts\">\nimport { useMoney } from '@/composables/useMoney.js'\nconst numberValue = ref('12345.6789')\n\nconst moneyInstance = computed(() => {\n const value = Number(numberValue.value)\n return Number.isFinite(value) ? useMoney(value) : undefined\n})\n\nconst formatNumberValue = (value?: number | string) =>\n Number.isFinite(Number.parseFloat(String(value))) ? value : '-'\n\nconst data = computed(() => [\n {\n title: 'Minor unit',\n value: moneyInstance.value?.minor,\n },\n {\n title: 'Major unit',\n value: moneyInstance.value?.major,\n },\n {\n title: 'Formatted (default)',\n value: moneyInstance.value?.toFormat(),\n },\n {\n title: 'Formatted (numberFull)',\n value: moneyInstance.value?.toFormat('numberFull'),\n },\n {\n title: 'Formatted (number2dps)',\n value: moneyInstance.value?.toFormat('number2dps'),\n },\n {\n title: 'Formatted (number4dps)',\n value: moneyInstance.value?.toFormat('number4dps'),\n },\n {\n title: 'Formatted (currencyFull)',\n value: moneyInstance.value?.toFormat('currencyFull'),\n },\n {\n title: 'Formatted (currency2dps)',\n value: moneyInstance.value?.toFormat('currency2dps'),\n },\n {\n title: 'Formatted (currency4dps)',\n value: moneyInstance.value?.toFormat('currency4dps'),\n },\n])\n\n// Watcher to only allow typing numbers in JavaScript's `Number` format with . as decimal separator\nwatch(numberValue, (newValue, oldValue) => {\n // Count the number of decimal points in the new value\n const decimalPointCount = (newValue.match(/\\./g) || []).length\n\n // If there are more than one decimal point, revert to old value\n if (decimalPointCount > 1) {\n numberValue.value = oldValue\n return // Early return to avoid unnecessary processing\n }\n\n // Remove any non-numeric characters except for decimal points\n numberValue.value = newValue.replace(/[^0-9.]/g, '')\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-card padding=\"l\">\n \u003Ch4 slot=\"header\">Money formatting\u003C/h4>\n\n \u003Cnord-stack\n direction=\"horizontal\"\n justify-content=\"space-between\"\n class=\"n:mbe-l\"\n >\n \u003Cnord-input\n v-model=\"numberValue\"\n disallow-pattern=\"[^0-9.]\"\n type=\"unit\"\n class=\"n:mbe-l\"\n label=\"Conversion from major unit\"\n :style=\"`--n-input-text-align: start`\"\n >\n \u003Cdiv slot=\"start\">major\u003C/div>\n \u003C/nord-input>\n \u003C/nord-stack>\n\n \u003Cnord-table>\n \u003Ctable>\n \u003Cthead>\n \u003Ctr>\n \u003Cth>Conversion\u003C/th>\n \u003Cth :style=\"`text-align: right`\">Result\u003C/th>\n \u003C/tr>\n \u003C/thead>\n \u003Ctbody>\n \u003Ctr v-for=\"({ title, value }, key) in data\" :key>\n \u003Ctd>{{ title }}\u003C/td>\n \u003Ctd :style=\"`text-align: right`\">\n {{ formatNumberValue(value) }}\n \u003C/td>\n \u003C/tr>\n \u003C/tbody>\n \u003C/table>\n \u003C/nord-table>\n \u003C/nord-card>\n\u003C/template>\n",{"name":570,"displayName":571,"url":572,"code":573},"monetary-string","Monetary string","/main/#/922/product-patterns/usage-examples/money/monetary-string","\u003Cscript setup lang=\"ts\">\nimport vNumberInput from '@/directives/number-input-mask/index.js'\nimport {\n useMajorUnitToNumericString,\n useNumericStringToMajorUnit,\n} from '@/composables/number.js'\nimport { useMoney } from '@/composables/useMoney.js'\n\nconst majorUnit = ref(12345.6789)\nconst monetaryString = ref(useMajorUnitToNumericString(majorUnit.value))\n\nconst moneyInstance = computed(() => {\n const val = useNumericStringToMajorUnit(monetaryString.value)\n return Number.isFinite(val) ? useMoney(val) : undefined\n})\n\nconst formatNumberValue = (value?: number | string) =>\n Number.isFinite(Number.parseFloat(String(value))) ? value : '-'\n\nconst data = computed(() => [\n {\n title: 'Minor unit',\n value: moneyInstance.value?.minor,\n },\n {\n title: 'Major unit',\n value: moneyInstance.value?.major,\n },\n {\n title: 'Formatted (default)',\n value: moneyInstance.value?.toFormat(),\n },\n {\n title: 'Formatted (numberFull)',\n value: moneyInstance.value?.toFormat('numberFull'),\n },\n {\n title: 'Formatted (number2dps)',\n value: moneyInstance.value?.toFormat('number2dps'),\n },\n {\n title: 'Formatted (number4dps)',\n value: moneyInstance.value?.toFormat('number4dps'),\n },\n {\n title: 'Formatted (currencyFull)',\n value: moneyInstance.value?.toFormat('currencyFull'),\n },\n {\n title: 'Formatted (currency2dps)',\n value: moneyInstance.value?.toFormat('currency2dps'),\n },\n {\n title: 'Formatted (currency4dps)',\n value: moneyInstance.value?.toFormat('currency4dps'),\n },\n])\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-card padding=\"l\">\n \u003Ch4 slot=\"header\">Money formatting\u003C/h4>\n\n \u003Cnord-stack\n direction=\"horizontal\"\n justify-content=\"space-between\"\n class=\"n:mbe-l\"\n >\n \u003Cnord-input\n v-model=\"monetaryString\"\n v-number-input\n type=\"unit\"\n class=\"n:mbe-l\"\n label=\"Conversion from monetary string\"\n :style=\"`--n-input-text-align: start`\"\n >\n \u003Cdiv slot=\"start\">monetary\u003C/div>\n \u003C/nord-input>\n \u003C/nord-stack>\n\n \u003Cnord-table>\n \u003Ctable>\n \u003Cthead>\n \u003Ctr>\n \u003Cth>Conversion\u003C/th>\n \u003Cth :style=\"`text-align: right`\">Result\u003C/th>\n \u003C/tr>\n \u003C/thead>\n \u003Ctbody>\n \u003Ctr v-for=\"({ title, value }, key) in data\" :key>\n \u003Ctd>{{ title }}\u003C/td>\n \u003Ctd :style=\"`text-align: right`\">\n {{ formatNumberValue(value) }}\n \u003C/td>\n \u003C/tr>\n \u003C/tbody>\n \u003C/table>\n \u003C/nord-table>\n \u003C/nord-card>\n\u003C/template>\n",{"name":575,"displayName":576,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":577},"pcnf-number-stepper","Number Stepper",[578,581],{"name":15,"displayName":16,"url":579,"code":580},"/main/#/922/product-patterns/usage-examples/number-stepper/basic","\u003Cscript setup lang=\"ts\">\nimport InputStepper from '@/components/input/Stepper.vue'\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputStepper label=\"Number Stepper\" size=\"m\" inline-size=\"200px\" />\n\u003C/template>\n",{"name":582,"displayName":583,"url":584,"code":585},"positive-numbers","Positive numbers","/main/#/922/product-patterns/usage-examples/number-stepper/positive-numbers","\u003Cscript setup lang=\"ts\">\nimport InputStepper from '@/components/input/Stepper.vue'\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputStepper\n label=\"Number Stepper\"\n size=\"m\"\n inline-size=\"200px\"\n disallow-pattern=\"[^0-9]\"\n />\n\u003C/template>\n",{"name":587,"displayName":588,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":589},"pcnf-overflow-inline-list","Overflow Inline List",[590,593,596,599,604],{"name":15,"displayName":16,"url":591,"code":592},"/main/#/922/product-patterns/usage-examples/overflow-inline-list/basic","\u003Cscript setup lang=\"ts\">\nimport BaseOverflowInlineList from '@/components/base/overflow/InlineList.vue'\nconst shortList = ['Apple', 'Banana', 'Orange']\nconst longList = [\n 'Apple',\n 'Banana',\n 'Orange',\n 'Grape',\n 'Mango',\n 'Pineapple',\n 'Peach',\n 'Plum',\n 'Kiwi',\n 'Strawberry',\n 'Blueberry',\n 'Raspberry',\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv\n class=\"n:flex n:flex-col n:flex-wrap n:gap-l n:text-center n:container-m\"\n >\n \u003Cnord-card>\n \u003Ch2 slot=\"header\">Basic Usage\u003C/h2>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n \u003Ch3 class=\"n:text-m n:font-heading\">Short list (no overflow)\u003C/h3>\n \u003CBaseOverflowInlineList class=\"n:text-s\" :items=\"shortList\" />\n \u003C/div>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n \u003Ch3 class=\"n:text-m n:font-heading\">Long list (will overflow)\u003C/h3>\n \u003CBaseOverflowInlineList class=\"n:text-s\" :items=\"longList\" />\n \u003C/div>\n \u003C/div>\n \u003C/nord-card>\n \u003C/div>\n\u003C/template>\n",{"name":419,"displayName":420,"url":594,"code":595},"/main/#/922/product-patterns/usage-examples/overflow-inline-list/advanced","\u003Cscript setup lang=\"ts\">\nimport BaseOverflowInlineList from '@/components/base/overflow/InlineList.vue'\nconst users = [\n { id: 1, name: 'John Doe', email: 'john@example.com' },\n { id: 2, name: 'Jane Smith', email: 'jane@example.com' },\n { id: 3, name: 'Bob Wilson', email: 'bob@example.com' },\n { id: 4, name: 'Alice Brown', email: 'alice@example.com' },\n { id: 5, name: 'Charlie Davis', email: 'charlie@example.com' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv\n class=\"n:flex n:flex-col n:flex-wrap n:gap-l n:text-center n:container-m\"\n >\n \u003Cnord-card>\n \u003Ch2 slot=\"header\">\n Advanced Example – with custom item and custom divider\n \u003C/h2>\n\n \u003CBaseOverflowInlineList class=\"n:text-l\" :items=\"users\">\n \u003C!-- Custom rendering for visible items -->\n \u003Ctemplate #item=\"{ item }\">\n \u003Cspan\n class=\"user-item whitespace-nowrap n:flex n:flex-row n:flex-nowrap n:items-center n:justify-center n:gap-s\"\n >\n \u003Cnord-avatar size=\"s\" :name=\"item.name\" />\n \u003Cspan>{{ item.name }}\u003C/span>\n \u003C/span>\n \u003C/template>\n\n \u003C!-- Custom rendering for overflow items -->\n \u003Ctemplate #overflow-item=\"{ item }\">\n \u003Cspan class=\"user-item\">\n \u003Cnord-avatar size=\"s\" :name=\"item.name\" />\n \u003Cspan>{{ item.name }}\u003C/span>\n \u003Cspan class=\"user-email\">{{ item.email }}\u003C/span>\n \u003C/span>\n \u003C/template>\n\n \u003C!-- Custom divider -->\n \u003Ctemplate #divider>\n \u003Cnord-divider direction=\"vertical\" class=\"n:mx-m\" />\n \u003C/template>\n \u003C/BaseOverflowInlineList>\n \u003C/nord-card>\n \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.user-item {\n white-space: nowrap;\n}\n\n.user-email {\n color: var(--n-color-text-weaker);\n font-size: var(--n-font-size-s);\n}\n\nnord-divider {\n block-size: var(--n-size-icon-m);\n}\n\n:deep(.list-item-more-trigger) {\n --n-button-font-size: var(--n-font-size-l);\n}\n\u003C/style>\n",{"name":402,"displayName":403,"url":597,"code":598},"/main/#/922/product-patterns/usage-examples/overflow-inline-list/custom-divider","\u003Cscript setup lang=\"ts\">\nimport BaseOverflowInlineList from '@/components/base/overflow/InlineList.vue'\nconst items = [\n 'Red',\n 'Blue',\n 'Green',\n 'Yellow',\n 'Purple',\n 'Orange',\n 'Pink',\n 'Brown',\n 'Gray',\n 'Black',\n 'White',\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv\n class=\"n:flex n:flex-col n:flex-wrap n:gap-l n:text-center n:container-m\"\n >\n \u003Cnord-card>\n \u003Ch2 slot=\"header\">Custom Divider\u003C/h2>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n \u003Ch3 class=\"n:text-m n:font-heading\">Using bullet points\u003C/h3>\n \u003CBaseOverflowInlineList class=\"n:text-s\" :items>\n \u003Ctemplate #divider>\n \u003Cspan class=\"n:mx-s\">•\u003C/span>\n \u003C/template>\n \u003C/BaseOverflowInlineList>\n \u003C/div>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n \u003Ch3 class=\"n:text-m n:font-heading\">Using divider\u003C/h3>\n \u003CBaseOverflowInlineList class=\"n:text-s\" :items>\n \u003Ctemplate #divider>\n \u003Cnord-divider direction=\"vertical\" class=\"n:mx-s\" />\n \u003C/template>\n \u003C/BaseOverflowInlineList>\n \u003C/div>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n \u003Ch3 class=\"n:text-m n:font-heading\">Using arrows\u003C/h3>\n \u003CBaseOverflowInlineList class=\"n:text-s\" :items>\n \u003Ctemplate #divider>\n \u003Cspan class=\"n:mx-s\">→\u003C/span>\n \u003C/template>\n \u003C/BaseOverflowInlineList>\n \u003C/div>\n \u003C/div>\n \u003C/nord-card>\n \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\nnord-divider {\n block-size: var(--n-size-icon-m);\n}\n\u003C/style>\n",{"name":600,"displayName":601,"url":602,"code":603},"custom-item","Custom item","/main/#/922/product-patterns/usage-examples/overflow-inline-list/custom-item","\u003Cscript setup lang=\"ts\">\nimport BaseOverflowInlineList from '@/components/base/overflow/InlineList.vue'\nconst colors = [\n { name: 'Red', hex: '#FF0000' },\n { name: 'Blue', hex: '#0000FF' },\n { name: 'Green', hex: '#00FF00' },\n { name: 'Yellow', hex: '#FFFF00' },\n { name: 'Purple', hex: '#800080' },\n { name: 'Orange', hex: '#FFA500' },\n { name: 'Pink', hex: '#FFC0CB' },\n { name: 'Brown', hex: '#A52A2A' },\n { name: 'Gray', hex: '#808080' },\n { name: 'Black', hex: '#000000' },\n { name: 'White', hex: '#FFFFFF' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv\n class=\"n:flex n:flex-col n:flex-wrap n:gap-l n:text-center n:container-m\"\n >\n \u003Cnord-card>\n \u003Ch2 slot=\"header\">Custom Item\u003C/h2>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n \u003CBaseOverflowInlineList class=\"n:text-s\" :items=\"colors\">\n \u003Ctemplate #item=\"{ item }\">\n \u003Cspan class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-xs\">\n \u003Cspan\n class=\"color-swatch\"\n :style=\"{ backgroundColor: item.hex }\"\n />\n \u003Cspan>{{ item.name }}\u003C/span>\n \u003C/span>\n \u003C/template>\n \u003C/BaseOverflowInlineList>\n \u003C/div>\n \u003C/nord-card>\n \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.color-swatch {\n display: inline-block;\n inline-size: var(--n-size-icon-s);\n block-size: var(--n-size-icon-s);\n border-radius: var(--n-border-radius-s);\n border: 1px solid var(--n-color-border);\n}\n\u003C/style>\n",{"name":605,"displayName":606,"url":607,"code":608},"empty-state","Empty state","/main/#/922/product-patterns/usage-examples/overflow-inline-list/empty-state","\u003Cscript setup lang=\"ts\">\nimport BaseOverflowInlineList from '@/components/base/overflow/InlineList.vue'\nconst emptyList: string[] = []\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv\n class=\"n:flex n:flex-col n:flex-wrap n:gap-l n:text-center n:container-m\"\n >\n \u003Cnord-card>\n \u003Ch2 slot=\"header\">Empty State\u003C/h2>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n \u003Ch3 class=\"n:text-m n:font-heading\">Default empty state\u003C/h3>\n \u003CBaseOverflowInlineList class=\"n:text-s\" :items=\"emptyList\" />\n \u003C/div>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n \u003Ch3 class=\"n:text-m n:font-heading\">Custom empty state text\u003C/h3>\n \u003CBaseOverflowInlineList\n class=\"n:text-s\"\n :items=\"emptyList\"\n empty-text=\"No items available\"\n />\n \u003C/div>\n \u003C/div>\n \u003C/nord-card>\n \u003C/div>\n\u003C/template>\n",{"name":610,"displayName":611,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":612},"pcnf-overflow-list","Overflow List",[613,616,619,624],{"name":15,"displayName":16,"url":614,"code":615},"/main/#/922/product-patterns/usage-examples/overflow-list/basic","\u003Cscript setup lang=\"ts\">\nimport BaseOverflowList from '@/components/base/overflow/List.vue'\nconst shortList = [\n { id: 1, name: 'Apple' },\n { id: 2, name: 'Banana' },\n { id: 3, name: 'Orange' },\n]\n\nconst longList = [\n { id: 1, name: 'Apple' },\n { id: 2, name: 'Banana' },\n { id: 3, name: 'Orange' },\n { id: 4, name: 'Grape' },\n { id: 5, name: 'Mango' },\n { id: 6, name: 'Pineapple' },\n { id: 7, name: 'Peach' },\n { id: 8, name: 'Plum' },\n { id: 9, name: 'Kiwi' },\n { id: 10, name: 'Strawberry' },\n { id: 11, name: 'Blueberry' },\n { id: 12, name: 'Raspberry' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv\n class=\"n:flex n:flex-col n:flex-wrap n:gap-l n:text-center n:container-m\"\n >\n \u003Cnord-card>\n \u003Ch2 slot=\"header\">Basic Usage\u003C/h2>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n \u003Ch3 class=\"n:text-m n:font-heading\">Short list (no overflow)\u003C/h3>\n \u003CBaseOverflowList :items=\"shortList\" item-key=\"id\">\n \u003Ctemplate #item=\"{ item }\">\n \u003Cspan>{{ item.name }}\u003C/span>\n \u003C/template>\n \u003C/BaseOverflowList>\n \u003C/div>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n \u003Ch3 class=\"n:text-m n:font-heading\">\n Long list (will overflow after 5 items)\n \u003C/h3>\n \u003CBaseOverflowList :items=\"longList\" item-key=\"id\">\n \u003Ctemplate #item=\"{ item }\">\n \u003Cspan>{{ item.name }}\u003C/span>\n \u003C/template>\n \u003C/BaseOverflowList>\n \u003C/div>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n \u003Ch3 class=\"n:text-m n:font-heading\">Custom maxVisible (3 items)\u003C/h3>\n \u003CBaseOverflowList :items=\"longList\" item-key=\"id\" :max-visible=\"3\">\n \u003Ctemplate #item=\"{ item }\">\n \u003Cspan>{{ item.name }}\u003C/span>\n \u003C/template>\n \u003C/BaseOverflowList>\n \u003C/div>\n \u003C/div>\n \u003C/nord-card>\n \u003C/div>\n\u003C/template>\n",{"name":600,"displayName":601,"url":617,"code":618},"/main/#/922/product-patterns/usage-examples/overflow-list/custom-item","\u003Cscript setup lang=\"ts\">\nimport BaseOverflowList from '@/components/base/overflow/List.vue'\nconst colors = [\n { id: 1, name: 'Red', hex: '#FF0000' },\n { id: 2, name: 'Blue', hex: '#0000FF' },\n { id: 3, name: 'Green', hex: '#00FF00' },\n { id: 4, name: 'Yellow', hex: '#FFFF00' },\n { id: 5, name: 'Purple', hex: '#800080' },\n { id: 6, name: 'Orange', hex: '#FFA500' },\n { id: 7, name: 'Pink', hex: '#FFC0CB' },\n { id: 8, name: 'Brown', hex: '#A52A2A' },\n { id: 9, name: 'Gray', hex: '#808080' },\n { id: 10, name: 'Black', hex: '#000000' },\n { id: 11, name: 'White', hex: '#FFFFFF' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv\n class=\"n:flex n:flex-col n:flex-wrap n:gap-l n:text-center n:container-m\"\n >\n \u003Cnord-card>\n \u003Ch2 slot=\"header\">Custom Item\u003C/h2>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n \u003CBaseOverflowList :items=\"colors\" item-key=\"id\" :max-visible=\"4\">\n \u003Ctemplate #item=\"{ item }\">\n \u003Cspan class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-xs\">\n \u003Cspan\n class=\"color-swatch\"\n :style=\"{ backgroundColor: item.hex }\"\n />\n \u003Cspan>{{ item.name }}\u003C/span>\n \u003C/span>\n \u003C/template>\n \u003C/BaseOverflowList>\n \u003C/div>\n \u003C/nord-card>\n \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.color-swatch {\n display: inline-block;\n inline-size: var(--n-size-icon-s);\n block-size: var(--n-size-icon-s);\n border-radius: var(--n-border-radius-s);\n border: 1px solid var(--n-color-border);\n}\n\u003C/style>\n",{"name":620,"displayName":621,"url":622,"code":623},"custom-overflow-item","Custom overflow item","/main/#/922/product-patterns/usage-examples/overflow-list/custom-overflow-item","\u003Cscript setup lang=\"ts\">\nimport BaseOverflowList from '@/components/base/overflow/List.vue'\nconst users = [\n { id: 1, name: 'John Doe', email: 'john@example.com' },\n { id: 2, name: 'Jane Smith', email: 'jane@example.com' },\n { id: 3, name: 'Bob Wilson', email: 'bob@example.com' },\n { id: 4, name: 'Alice Brown', email: 'alice@example.com' },\n { id: 5, name: 'Charlie Davis', email: 'charlie@example.com' },\n { id: 6, name: 'Diana Evans', email: 'diana@example.com' },\n { id: 7, name: 'Edward Fox', email: 'edward@example.com' },\n { id: 8, name: 'Fiona Green', email: 'fiona@example.com' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv\n class=\"n:flex n:flex-col n:flex-wrap n:gap-l n:text-center n:container-m\"\n >\n \u003Cnord-card>\n \u003Ch2 slot=\"header\">Custom Overflow Item\u003C/h2>\n \u003Cp class=\"n:mbe-m n:text-weaker\">\n The overflow popout can show different content than the inline items\n using the \u003Ccode>overflowItem\u003C/code> slot.\n \u003C/p>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n \u003CBaseOverflowList :items=\"users\" item-key=\"id\" :max-visible=\"3\">\n \u003C!-- Inline: just show name -->\n \u003Ctemplate #item=\"{ item }\">\n \u003Cspan class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-xs\">\n \u003Cnord-avatar size=\"s\" :name=\"item.name\" />\n \u003Cspan>{{ item.name }}\u003C/span>\n \u003C/span>\n \u003C/template>\n\n \u003C!-- Popout: show name and email -->\n \u003Ctemplate #overflow-item=\"{ item }\">\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-s\">\n \u003Cnord-avatar size=\"s\" :name=\"item.name\" />\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-0\">\n \u003Cspan>{{ item.name }}\u003C/span>\n \u003Cspan class=\"n:text-xs n:text-weaker\">\n {{ item.email }}\n \u003C/span>\n \u003C/div>\n \u003C/div>\n \u003C/template>\n \u003C/BaseOverflowList>\n \u003C/div>\n \u003C/nord-card>\n \u003C/div>\n\u003C/template>\n",{"name":625,"displayName":626,"url":627,"code":628},"stacked","Stacked","/main/#/922/product-patterns/usage-examples/overflow-list/stacked","\u003Cscript setup lang=\"ts\">\nimport BaseOverflowList from '@/components/base/overflow/List.vue'\nconst users = [\n { id: 1, name: 'John Doe', role: 'Admin' },\n { id: 2, name: 'Jane Smith', role: 'Editor' },\n { id: 3, name: 'Bob Wilson', role: 'Viewer' },\n { id: 4, name: 'Alice Brown', role: 'Editor' },\n { id: 5, name: 'Charlie Davis', role: 'Viewer' },\n { id: 6, name: 'Diana Evans', role: 'Admin' },\n { id: 7, name: 'Edward Fox', role: 'Viewer' },\n { id: 8, name: 'Fiona Green', role: 'Editor' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv\n class=\"n:flex n:flex-col n:flex-wrap n:gap-l n:text-center n:container-m\"\n >\n \u003Cnord-card>\n \u003Ch2 slot=\"header\">Stacked Variant\u003C/h2>\n \u003Cp class=\"n:mbe-m n:text-weaker\">\n Use \u003Ccode>variant=\"stack\"\u003C/code> to display items vertically without\n separators.\n \u003C/p>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-l\">\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n \u003Ch3 class=\"n:text-m n:font-heading\">Inline (default)\u003C/h3>\n \u003CBaseOverflowList :items=\"users\" item-key=\"id\" :max-visible=\"3\">\n \u003Ctemplate #item=\"{ item }\">\n \u003Cspan>{{ item.name }}\u003C/span>\n \u003C/template>\n \u003C/BaseOverflowList>\n \u003C/div>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n \u003Ch3 class=\"n:text-m n:font-heading\">Stacked\u003C/h3>\n \u003CBaseOverflowList\n variant=\"stack\"\n item-key=\"id\"\n :items=\"users\"\n :max-visible=\"3\"\n >\n \u003Ctemplate #item=\"{ item }\">\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-s\">\n \u003Cnord-avatar size=\"s\" :name=\"item.name\" />\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-0\">\n \u003Cspan>{{ item.name }}\u003C/span>\n \u003Cspan class=\"n:text-xs n:text-weaker\">\n {{ item.role }}\n \u003C/span>\n \u003C/div>\n \u003C/div>\n \u003C/template>\n \u003C/BaseOverflowList>\n \u003C/div>\n \u003C/div>\n \u003C/nord-card>\n \u003C/div>\n\u003C/template>\n",{"name":630,"displayName":631,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":632},"pcnf-pagination","Pagination",[633,636,641],{"name":15,"displayName":16,"url":634,"code":635},"/main/#/922/product-patterns/usage-examples/pagination/basic","\u003Cscript setup lang=\"ts\">\nimport type { PaginationState } from '@tanstack/vue-table'\nimport type { QueryPaginationMeta } from '@/utils/jsonapi.js'\nimport BasePagination from '@/components/base/Pagination.vue'\n\nconst paginationState = ref\u003CPaginationState>({\n pageIndex: 0,\n pageSize: 30,\n})\n\nconst paginationMeta = computed(\n (): QueryPaginationMeta => ({\n count: 157, // Total items\n page: paginationState.value.pageIndex + 1, // Convert to 1-based\n pages: Math.ceil(157 / paginationState.value.pageSize),\n }),\n)\n\nconst handlePageChange = (newPagination: PaginationState) => {\n paginationState.value = newPagination\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-card padding=\"l\">\n \u003Ch4 slot=\"header\">Basic Pagination\u003C/h4>\n\n \u003Cdiv class=\"n:mbe-l\">\n \u003Cp>Current pagination state:\u003C/p>\n \u003Cpre>{{ JSON.stringify(paginationState, null, 2) }}\u003C/pre>\n \u003C/div>\n\n \u003CBasePagination\n v-model:page-index=\"paginationState.pageIndex\"\n v-model:page-size=\"paginationState.pageSize\"\n :pagination-meta\n @page-change=\"handlePageChange\"\n />\n \u003C/nord-card>\n\u003C/template>\n",{"name":637,"displayName":638,"url":639,"code":640},"url-sync","Url sync","/main/#/922/product-patterns/usage-examples/pagination/url-sync","\u003Cscript setup lang=\"ts\">\nimport { toNumber } from '@/utils/number.js'\nimport type { QueryPaginationMeta } from '@/utils/jsonapi.js'\nimport BasePagination from '@/components/base/Pagination.vue'\nconst route = useRoute()\n\nconst paginationMeta = computed(\n (): QueryPaginationMeta => ({\n count: 157, // Total items\n page: toNumber(route.query.page) || 1,\n pages: Math.ceil(157 / (toNumber(route.query.pageSize) || 10)),\n }),\n)\n\n// Show current URL parameters\nconst urlParams = computed(() => ({\n page: route.query.page || '1',\n pageSize: route.query.pageSize || '10',\n}))\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-card padding=\"l\">\n \u003Ch4 slot=\"header\">Pagination with URL Sync\u003C/h4>\n\n \u003Cdiv class=\"n:mbe-l\">\n \u003Cp>Current URL parameters:\u003C/p>\n \u003Cpre>{{ JSON.stringify(urlParams, null, 2) }}\u003C/pre>\n \u003Cp class=\"n:text-weaker\">\n Try changing the pagination and notice how the URL updates\n automatically.\n \u003C/p>\n \u003C/div>\n\n \u003CBasePagination :pagination-meta use-url-sync />\n \u003C/nord-card>\n\u003C/template>\n",{"name":642,"displayName":643,"url":644,"code":645},"url-sync-filter-id","Url sync filter id","/main/#/922/product-patterns/usage-examples/pagination/url-sync-filter-id","\u003Cscript setup lang=\"ts\">\nimport { toNumber } from '@/utils/number.js'\nimport type { QueryPaginationMeta } from '@/utils/jsonapi.js'\nimport BasePagination from '@/components/base/Pagination.vue'\nconst route = useRoute()\n\nconst paginationMeta = computed(\n (): QueryPaginationMeta => ({\n count: 157, // Total items\n page: toNumber(route.query['list-page']) || 1,\n pages: Math.ceil(157 / (toNumber(route.query['list-pageSize']) || 10)),\n }),\n)\n\n// Show current URL parameters\nconst urlParams = computed(() => ({\n 'list-page': route.query['list-page'] || '1',\n 'list-pageSize': route.query['list-pageSize'] || '10',\n}))\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnord-card padding=\"l\">\n \u003Ch4 slot=\"header\">Pagination with URL Sync + Filter ID\u003C/h4>\n\n \u003Cdiv class=\"n:mbe-l\">\n \u003Cp>Current URL parameters with \"list\" prefix:\u003C/p>\n \u003Cpre>{{ JSON.stringify(urlParams, null, 2) }}\u003C/pre>\n \u003Cp class=\"n:text-weaker\">\n Notice how the URL parameters are prefixed with \"list-\" to avoid\n conflicts with other pagination instances.\n \u003C/p>\n \u003C/div>\n\n \u003CBasePagination\n :pagination-meta\n :page-size-options=\"[5, 10, 20, 50]\"\n use-url-sync\n filter-id=\"list\"\n set-links-href\n />\n \u003C/nord-card>\n\u003C/template>\n",{"name":647,"displayName":648,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":649},"pcnf-popup","Popup",[650,653,658,663,668,673],{"name":15,"displayName":16,"url":651,"code":652},"/main/#/922/product-patterns/usage-examples/popup/basic","\u003Cscript setup lang=\"ts\">\nimport BaseEditableStack from '@/components/base/editable/Stack.vue'\nimport BaseFieldPlaceholder from '@/components/base/FieldPlaceholder.vue'\nimport BaseButton from '@/components/base/Button.vue'\nimport BaseReadOnlyField from '@/components/base/read-only/Field.vue'\nimport BasePopout from '@/components/base/popout/Popout.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseButton aria-controls=\"popout\" aria-haspopup=\"true\"> Text \u003C/BaseButton>\n \u003CBasePopout id=\"popout\">Just a popout with plain content\u003C/BasePopout>\n\n \u003CBaseButton aria-controls=\"read-only\" aria-haspopup=\"true\">\n Read only\n \u003C/BaseButton>\n \u003CBasePopout id=\"read-only\">\n \u003CBaseReadOnlyField label=\"Label\" value=\"Input data\" />\n \u003C/BasePopout>\n\n \u003CBaseButton aria-controls=\"field-placeholder\" aria-haspopup=\"true\">\n Field placeholder\n \u003C/BaseButton>\n \u003CBasePopout id=\"field-placeholder\">\n \u003CBaseFieldPlaceholder\n name=\"field-placeholder\"\n label=\"Label\"\n button-text=\"Add label\"\n inline-edit\n @show-content=\"console.log('show content')\"\n />\n \u003C/BasePopout>\n\n \u003CBaseButton aria-controls=\"edit-info\" aria-haspopup=\"true\">\n Edit info\n \u003C/BaseButton>\n \u003CBasePopout id=\"edit-info\">\n \u003CBaseEditableStack\n label=\"Edit\"\n @edit=\"console.log('Edit button clicked')\"\n >\n \u003CBaseReadOnlyField label=\"Label\" value=\"Input data\" />\n \u003C/BaseEditableStack>\n \u003C/BasePopout>\n \u003C/div>\n\u003C/template>\n",{"name":654,"displayName":655,"url":656,"code":657},"finances","Finances","/main/#/922/product-patterns/usage-examples/popup/finances","\u003Cscript setup lang=\"ts\">\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport BaseButton from '@/components/base/Button.vue'\nimport BasePopout from '@/components/base/popout/Popout.vue'\nimport PaymentSummaryRow from '@/components/PaymentSummaryRow.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseButton\n aria-controls=\"payment-summary\"\n aria-haspopup=\"true\"\n variant=\"plain\"\n size=\"s\"\n class=\"balance-info-button\"\n >\n \u003Cspan class=\"n:text-m n:font-active n:text-danger\"> $126.00 \u003C/span>\n \u003Cnord-icon slot=\"end\" name=\"interface-dropdown-small\">\u003C/nord-icon>\n \u003C/BaseButton>\n \u003CBasePopout id=\"payment-summary\">\n \u003CBaseStackDivided>\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-xs\">\n \u003CPaymentSummaryRow label=\"Unpaid invoices\" value=\"$178.00\" is-total />\n \u003CPaymentSummaryRow\n label=\"Finalized invoices\"\n value=\"$138.00\"\n is-child\n />\n \u003CPaymentSummaryRow label=\"Draft invoices\" value=\"$40.00\" is-child />\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-xs\">\n \u003CPaymentSummaryRow\n label=\"Available credit\"\n value=\"-$52.00\"\n is-total\n negative-value\n />\n \u003CPaymentSummaryRow label=\"Prepayments\" value=\"-$20.00\" is-child />\n \u003CPaymentSummaryRow label=\"Credit notes\" value=\"-$30.00\" is-child />\n \u003CPaymentSummaryRow\n label=\"Finalized credit notes\"\n value=\"-$20.00\"\n is-child\n />\n \u003C/div>\n \u003C/BaseStackDivided>\n \u003C/BasePopout>\n\n \u003CBaseButton\n aria-controls=\"payment-summary-icon\"\n aria-haspopup=\"true\"\n variant=\"plain\"\n size=\"s\"\n square\n >\n \u003Cnord-icon\n label=\"Show payment details\"\n name=\"file-invoice\"\n size=\"m\"\n class=\"n:text-danger\"\n >\u003C/nord-icon>\n \u003C/BaseButton>\n \u003CBasePopout id=\"payment-summary-icon\">\n \u003Ctemplate #header>\n \u003CPaymentSummaryRow\n label=\"Client balance\"\n value=\"$126.00\"\n is-total\n is-header\n />\n \u003C/template>\n \u003CBaseStackDivided>\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-xs\">\n \u003CPaymentSummaryRow label=\"Unpaid invoices\" value=\"$178.00\" is-total />\n \u003CPaymentSummaryRow\n label=\"Finalized invoices\"\n value=\"$138.00\"\n is-child\n />\n \u003CPaymentSummaryRow label=\"Draft invoices\" value=\"$40.00\" is-child />\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-xs\">\n \u003CPaymentSummaryRow\n label=\"Available credit\"\n value=\"-$52.00\"\n is-total\n negative-value\n />\n \u003CPaymentSummaryRow label=\"Prepayments\" value=\"-$20.00\" is-child />\n \u003CPaymentSummaryRow label=\"Credit notes\" value=\"-$30.00\" is-child />\n \u003CPaymentSummaryRow\n label=\"Finalized credit notes\"\n value=\"-$20.00\"\n is-child\n />\n \u003C/div>\n \u003C/BaseStackDivided>\n \u003C/BasePopout>\n\n \u003CBaseButton\n aria-controls=\"all-info\"\n aria-haspopup=\"true\"\n variant=\"plain\"\n size=\"s\"\n square\n >\n \u003Cnord-icon\n label=\"Show all info\"\n name=\"interface-menu-small\"\n size=\"m\"\n >\u003C/nord-icon>\n \u003C/BaseButton>\n \u003CBasePopout id=\"all-info\">\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-s\">\n \u003Cnord-icon\n name=\"generic-telephone\"\n size=\"s\"\n class=\"n:text-icon\"\n >\u003C/nord-icon>\n 314 159 2653\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-s\">\n \u003Cnord-icon\n name=\"file-invoice\"\n size=\"s\"\n class=\"n:text-icon\"\n >\u003C/nord-icon>\n \u003Cspan class=\"n:font-active n:text-danger\"> $126.00 \u003C/span>\n \u003C/div>\n \u003C/div>\n \u003C/BasePopout>\n \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.balance-info-button:hover nord-icon {\n color: var(--n-color-icon-hover);\n}\n\u003C/style>\n",{"name":659,"displayName":660,"url":661,"code":662},"with-complex-content","With complex content","/main/#/922/product-patterns/usage-examples/popup/with-complex-content","\u003Cscript setup lang=\"ts\">\nimport BaseEditableStack from '@/components/base/editable/Stack.vue'\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport BaseButton from '@/components/base/Button.vue'\nimport BaseReadOnlyField from '@/components/base/read-only/Field.vue'\nimport BasePopout from '@/components/base/popout/Popout.vue'\nimport FormComboboxMultiple from '@/components/form/ComboboxMultiple.vue'\nimport FormDatePicker from '@/components/form/DatePicker.vue'\nimport FormNordField from '@/components/form/NordField.vue'\n\nconst comboboxOptions = ref([\n { label: 'Amphibian', value: 'AMPHIBIAN' },\n { label: 'Canine', value: 'CANINE' },\n { label: 'Feline', value: 'FELINE' },\n { label: 'Rodents', value: 'RODENTS' },\n])\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseButton aria-controls=\"popout\" aria-haspopup=\"true\">\n View patient location #1000\n \u003C/BaseButton>\n\n \u003CBasePopout id=\"popout\" heading=\"Patient location #1000\">\n \u003CBaseStackDivided class=\"n:container-m\">\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003CBaseReadOnlyField label=\"Status\">\n \u003Cnord-badge>Occupied\u003C/nord-badge>\n \u003C/BaseReadOnlyField>\n\n \u003CBaseReadOnlyField label=\"Patients\">\n \u003Ca>Florian (1000)\u003C/a>, Dog, American Bullnese\n \u003C/BaseReadOnlyField>\n\n \u003CBaseReadOnlyField label=\"Capacity\" />\n \u003C/div>\n\n \u003CBaseReadOnlyField\n label=\"Remarks\"\n value=\"Lorem ipsum dolor sit amet consectetur adipiscing elit\"\n />\n \u003C/BaseStackDivided>\n \u003C/BasePopout>\n\n \u003CBaseButton aria-controls=\"form\" aria-haspopup=\"true\">Form\u003C/BaseButton>\n \u003CBasePopout id=\"form\">\n \u003Cform class=\"n:flex n:flex-col n:flex-wrap n:gap-l\">\n \u003CFormNordField name=\"text\" label=\"Text input\" inline-edit />\n \u003CFormDatePicker name=\"date\" label=\"Date\" inline-edit />\n \u003CFormComboboxMultiple\n name=\"species\"\n label=\"Species\"\n :options=\"comboboxOptions\"\n placeholder=\"Select species\"\n inline-edit\n />\n \u003C/form>\n \u003Ctemplate #footer>\n \u003CBaseButton size=\"s\">Update\u003C/BaseButton>\n \u003C/template>\n \u003C/BasePopout>\n\n \u003CBaseButton\n aria-controls=\"information-type-simple-value\"\n aria-haspopup=\"true\"\n >\n Readonly\n \u003C/BaseButton>\n \u003CBasePopout id=\"information-type-simple-value\">\n \u003CBaseStackDivided>\n \u003CBaseReadOnlyField label=\"Label\" value=\"Value\" />\n \u003CBaseEditableStack\n label=\"Edit\"\n @edit=\"console.log('Edit button clicked')\"\n >\n \u003CBaseReadOnlyField label=\"Label\" value=\"Input data\" />\n \u003C/BaseEditableStack>\n \u003CBaseReadOnlyField\n label=\"Notes\"\n value=\"Long value: lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\"\n />\n \u003CBaseReadOnlyField\n label=\"Tags\"\n :value=\"['Aggresive', 'Diabetic']\"\n display-as=\"tags\"\n />\n \u003CBaseEditableStack\n label=\"Edit\"\n @edit=\"console.log('Edit button clicked')\"\n >\n \u003CBaseReadOnlyField\n label=\"Editable tags\"\n :value=\"[\n 'Aggresive',\n 'Diabetic',\n 'Oxygen',\n 'Soft walls (padded)',\n 'With windows',\n ]\"\n display-as=\"tags\"\n />\n \u003C/BaseEditableStack>\n \u003C/BaseStackDivided>\n \u003C/BasePopout>\n \u003C/div>\n\u003C/template>\n",{"name":664,"displayName":665,"url":666,"code":667},"with-header-and-footer","With header and footer","/main/#/922/product-patterns/usage-examples/popup/with-header-and-footer","\u003Cscript setup lang=\"ts\">\nimport BaseEditableStack from '@/components/base/editable/Stack.vue'\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport BaseButton from '@/components/base/Button.vue'\nimport BaseFormattedAddress from '@/components/base/formatted/Address.vue'\nimport BaseReadOnlyField from '@/components/base/read-only/Field.vue'\nimport BaseCardInnerSection from '@/components/base/card/InnerSection.vue'\nimport BasePopout from '@/components/base/popout/Popout.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseButton aria-controls=\"popout\" aria-haspopup=\"true\">\n Simple\n \u003C/BaseButton>\n \u003CBasePopout id=\"popout\">\n \u003Ctemplate #header>The header\u003C/template>\n This text is intentionally long so we can see how it wraps and the popout\n doesn't grow larger than the \u003Cb>max-inline-size\u003C/b> value.\n \u003Ctemplate #footer>\n \u003CBaseButton size=\"s\">Close\u003C/BaseButton>\n \u003C/template>\n \u003C/BasePopout>\n\n \u003CBaseButton aria-controls=\"cards-with-header\" aria-haspopup=\"true\">\n Read only\n \u003C/BaseButton>\n \u003CBasePopout id=\"cards-with-header\" expand>\n \u003Ctemplate #header>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-s\">\n \u003Cnord-avatar>JD\u003C/nord-avatar>\n \u003Ch2 class=\"n:text-m n:font-active\">John Dorian (2468)\u003C/h2>\n \u003C/div>\n \u003C/template>\n \u003CBaseStackDivided>\n \u003CBaseCardInnerSection>\n \u003CBaseReadOnlyField label=\"Phone\" value=\"123 45 6789\" />\n \u003CBaseReadOnlyField label=\"Enail\" value=\"john.dorian@gmail.com\" />\n \u003CBaseReadOnlyField label=\"Address\">\n \u003CBaseFormattedAddress\n country=\"NO\"\n zip-code=\"11 0154\"\n city=\"Oslo\"\n street-address=\"Karl Johans gate\"\n />\n \u003C/BaseReadOnlyField>\n \u003C/BaseCardInnerSection>\n \u003CBaseCardInnerSection>\n \u003CBaseReadOnlyField\n label=\"Tags\"\n :value=\"['Aggresive', 'Diabetic']\"\n display-as=\"tags\"\n />\n \u003CBaseReadOnlyField\n label=\"General remarks\"\n value=\"Lorem ipsum dolor sit amet.\"\n />\n \u003C/BaseCardInnerSection>\n \u003C/BaseStackDivided>\n \u003Ctemplate #footer>\n \u003Cnord-button size=\"s\">Pin to side\u003C/nord-button>\n \u003Cnord-button size=\"s\">Open client page\u003C/nord-button>\n \u003C/template>\n \u003C/BasePopout>\n\n \u003CBaseButton aria-controls=\"cards-with-header-2\" aria-haspopup=\"true\">\n Long content\n \u003C/BaseButton>\n \u003CBasePopout id=\"cards-with-header-2\" max-width>\n \u003Ctemplate #header>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-s\">\n \u003Cnord-avatar\n src=\"https://i.giphy.com/KL5rlX6dGjwJO.webp\"\n name=\"Garfield\"\n >\u003C/nord-avatar>\n \u003Ch2 class=\"n:text-m n:font-active\">Garfield (1357)\u003C/h2>\n \u003C/div>\n \u003C/template>\n \u003CBaseStackDivided>\n \u003CBaseCardInnerSection>\n \u003CBaseReadOnlyField\n label=\"Species, breed\"\n value=\"Cat (Feline - Domestic), Orange tabby\"\n />\n \u003CBaseReadOnlyField label=\"Sex\" value=\"Male, neutered\" />\n \u003CBaseReadOnlyField label=\"Age\" value=\"5 years 3 months\" />\n \u003CBaseEditableStack\n label=\"Edit\"\n @edit=\"console.log('Edit button clicked')\"\n >\n \u003CBaseReadOnlyField label=\"Weight\" value=\"5,24 kg\" />\n \u003C/BaseEditableStack>\n \u003C/BaseCardInnerSection>\n \u003CBaseCardInnerSection>\n \u003CBaseReadOnlyField\n label=\"Tags\"\n :value=\"['Aggresive', 'Diabetic']\"\n display-as=\"tags\"\n />\n \u003CBaseReadOnlyField\n label=\"Critical remarks\"\n value=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, ut enim ad minim veniam, quis nostrud Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, ut enim ad minim veniam, quis nostrud exercitation. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, ut enim ad minim veniam, quis nostrud exercitation.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, ut enim ad minim veniam, quis nostrud exercitation. exercitation.\"\n />\n \u003C/BaseCardInnerSection>\n \u003C/BaseStackDivided>\n \u003Ctemplate #footer>\n \u003Cnord-button size=\"s\">Pin to side\u003C/nord-button>\n \u003Cnord-button size=\"s\">Open client page\u003C/nord-button>\n \u003C/template>\n \u003C/BasePopout>\n\n \u003CBaseButton aria-controls=\"pin-to-side\" aria-haspopup=\"true\">\n Pin to side\n \u003C/BaseButton>\n \u003CBasePopout id=\"pin-to-side\" heading=\"Consultation 2468\">\n \u003CBaseStackDivided>\n \u003CBaseCardInnerSection>\n \u003CBaseReadOnlyField label=\"Label 1\" value=\"Lorem ipsum\" />\n \u003CBaseReadOnlyField label=\"Label 2\" value=\"Nostrud exercitation\" />\n \u003C/BaseCardInnerSection>\n \u003C/BaseStackDivided>\n \u003Ctemplate #footer>\n \u003Cnord-button size=\"s\">Pin to side\u003C/nord-button>\n \u003C/template>\n \u003C/BasePopout>\n\n \u003CBaseButton aria-controls=\"go-to-page\" aria-haspopup=\"true\">\n Go to page\n \u003C/BaseButton>\n \u003CBasePopout id=\"go-to-page\" expand heading=\"Consultation 2468\">\n \u003CBaseStackDivided>\n \u003CBaseCardInnerSection>\n \u003CBaseReadOnlyField\n label=\"Reason type\"\n value=\"Lorem ipsum dolor\"\n display-as=\"tags\"\n />\n \u003CBaseReadOnlyField\n label=\"Reason\"\n value=\"Excepteur sint occaecat cupidatat\"\n />\n \u003C/BaseCardInnerSection>\n \u003CBaseCardInnerSection>\n \u003CBaseReadOnlyField label=\"Veterinarian\" value=\"Elliot Reid\" />\n \u003CBaseReadOnlyField\n label=\"Department\"\n value=\"Sunt culpa - Qui officia\"\n />\n \u003C/BaseCardInnerSection>\n \u003C/BaseStackDivided>\n \u003Ctemplate #footer>\n \u003Cnord-button size=\"s\">Open consultation\u003C/nord-button>\n \u003C/template>\n \u003C/BasePopout>\n\n \u003CBaseButton aria-controls=\"pin-go-to-page\" aria-haspopup=\"true\">\n Pin + Go to page\n \u003C/BaseButton>\n \u003CBasePopout id=\"pin-go-to-page\" expand>\n \u003Ctemplate #header>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-s\">\n \u003Cnord-avatar>JD\u003C/nord-avatar>\n \u003Ch2 class=\"n:text-m n:font-active\">John Dorian (2468)\u003C/h2>\n \u003C/div>\n \u003C/template>\n \u003CBaseStackDivided>\n \u003CBaseCardInnerSection>\n \u003CBaseReadOnlyField label=\"Reason type\" value=\"Lorem ipsum\" />\n \u003CBaseReadOnlyField\n label=\"Reason\"\n value=\"Excepteur sint occaecat cupidatat\"\n />\n \u003C/BaseCardInnerSection>\n \u003CBaseCardInnerSection>\n \u003CBaseReadOnlyField\n label=\"Tags\"\n value=\"English only\"\n display-as=\"tags\"\n />\n \u003CBaseReadOnlyField\n label=\"General remarks\"\n value=\"Lorem ipsum dolor sit amet.\"\n />\n \u003C/BaseCardInnerSection>\n \u003C/BaseStackDivided>\n \u003Ctemplate #footer>\n \u003Cnord-button size=\"s\">Pin to side\u003C/nord-button>\n \u003Cnord-button size=\"s\">Open client page\u003C/nord-button>\n \u003C/template>\n \u003C/BasePopout>\n \u003C/div>\n\u003C/template>\n",{"name":669,"displayName":670,"url":671,"code":672},"with-heading-prop","With heading prop","/main/#/922/product-patterns/usage-examples/popup/with-heading-prop","\u003Cscript setup lang=\"ts\">\nimport BaseButton from '@/components/base/Button.vue'\nimport BasePopout from '@/components/base/popout/Popout.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003CBaseButton aria-controls=\"popout\" aria-haspopup=\"true\">\n Toggle popout\n \u003C/BaseButton>\n\n \u003CBasePopout id=\"popout\" heading=\"The heading\">\n Popout with heading and content\n \u003C/BasePopout>\n \u003C/div>\n\u003C/template>\n",{"name":674,"displayName":675,"url":676,"code":677},"with-slots","With slots","/main/#/922/product-patterns/usage-examples/popup/with-slots","\u003Cscript setup lang=\"ts\">\nimport BaseButton from '@/components/base/Button.vue'\nimport BasePopout from '@/components/base/popout/Popout.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003CBaseButton aria-controls=\"popout\" aria-haspopup=\"true\">\n Toggle popout\n \u003C/BaseButton>\n\n \u003CBasePopout id=\"popout\">\n \u003Ctemplate #header>The header\u003C/template>\n\n \u003Ctemplate #header-end>\n \u003Cnord-button size=\"s\" square>\n \u003Cnord-icon name=\"interface-edit\">\u003C/nord-icon>\n \u003C/nord-button>\n \u003Cnord-button size=\"s\" square>\n \u003Cnord-icon name=\"interface-delete\">\u003C/nord-icon>\n \u003C/nord-button>\n \u003C/template>\n\n This text is intentionally long so we can see how it wraps and the popout\n doesn't grow larger than the \u003Cb>max-inline-size\u003C/b> value.\n\n \u003Ctemplate #footer>\n \u003CBaseButton size=\"s\">Close\u003C/BaseButton>\n \u003C/template>\n \u003C/BasePopout>\n \u003C/div>\n\u003C/template>\n",{"name":679,"displayName":680,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":681},"pcnf-result-range-visualizer","Result Range Visualizer",[682],{"name":15,"displayName":16,"url":683,"code":684},"/main/#/922/product-patterns/usage-examples/result-range-visualizer/basic","\u003Cscript setup lang=\"ts\">\nimport { isNil as _isNil } from 'lodash-es'\nimport BaseResultRangeVisualizer from '@/components/base/ResultRangeVisualizer.vue'\n\nconst interactiveLow = ref(0)\nconst interactiveHigh = ref(10)\nconst interactiveValue = ref(5)\n\nconst rangeDisplay = computed(() => {\n const low = interactiveLow.value\n const high = interactiveHigh.value\n\n const isLowEmpty = _isNil(low) || isNaN(low)\n const isHighEmpty = _isNil(high) || isNaN(high)\n\n if (isLowEmpty && isHighEmpty) {\n return 'No range'\n }\n if (isLowEmpty) {\n return `Below ${high}`\n }\n if (isHighEmpty) {\n return `Above ${low}`\n }\n return `${low} - ${high}`\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Ch3>Interactive Example\u003C/h3>\n \u003Cdiv\n class=\"n:flex n:flex-col n:flex-wrap n:gap-m n:rounded-default n:border n:p-m\"\n >\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseResultRangeVisualizer\n :low=\"!isNaN(interactiveLow) ? interactiveLow : undefined\"\n :high=\"!isNaN(interactiveHigh) ? interactiveHigh : undefined\"\n :value=\"interactiveValue\"\n />\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n \u003Cdiv>Range: {{ rangeDisplay }}\u003C/div>\n \u003Cdiv>Value: {{ interactiveValue }}\u003C/div>\n \u003C/div>\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n \u003Clabel for=\"low-input\">Low:\u003C/label>\n \u003Cinput\n id=\"low-input\"\n v-model.number=\"interactiveLow\"\n type=\"number\"\n min=\"0\"\n class=\"n:input\"\n step=\"0.1\"\n placeholder=\"Leave empty for 'Below'\"\n />\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n \u003Clabel for=\"high-input\">High:\u003C/label>\n \u003Cinput\n id=\"high-input\"\n v-model.number=\"interactiveHigh\"\n type=\"number\"\n min=\"0\"\n class=\"n:input\"\n step=\"0.1\"\n placeholder=\"Leave empty for 'Above'\"\n />\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n \u003Clabel for=\"value-input\">Value:\u003C/label>\n \u003Cinput\n id=\"value-input\"\n v-model.number=\"interactiveValue\"\n type=\"number\"\n min=\"0\"\n class=\"n:input\"\n step=\"0.1\"\n />\n \u003C/div>\n \u003C/div>\n \u003C/div>\n\n \u003Ch3>Safe Zone Examples\u003C/h3>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseResultRangeVisualizer :low=\"5\" :high=\"15\" :value=\"10\" />\n \u003Cdiv>\n \u003Cdiv>Range: 5 - 15\u003C/div>\n \u003Cdiv>Value: 10 (in the middle)\u003C/div>\n \u003C/div>\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseResultRangeVisualizer :low=\"5.5\" :high=\"8.5\" :value=\"6.2\" />\n \u003Cdiv>\n \u003Cdiv>Range: 5.5 - 8.5\u003C/div>\n \u003Cdiv>Value: 6.2\u003C/div>\n \u003C/div>\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseResultRangeVisualizer :low=\"6\" :high=\"17\" :value=\"17\" />\n \u003Cdiv>\n \u003Cdiv>Range: 6 - 17\u003C/div>\n \u003Cdiv>Value: 17 (on the edge high)\u003C/div>\n \u003C/div>\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseResultRangeVisualizer :low=\"10\" :high=\"20\" :value=\"10\" />\n \u003Cdiv>\n \u003Cdiv>Range: 10 - 20\u003C/div>\n \u003Cdiv>Value: 10 (on the edge low)\u003C/div>\n \u003C/div>\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseResultRangeVisualizer :low=\"8\" :high=\"8\" :value=\"8\" />\n \u003Cdiv>\n \u003Cdiv>Range: 8 - 8\u003C/div>\n \u003Cdiv>Value: 8 (exactly on both bounds)\u003C/div>\n \u003C/div>\n \u003C/div>\n\n \u003Ch3>Danger Zone Examples\u003C/h3>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseResultRangeVisualizer :low=\"37\" :high=\"55\" :value=\"23\" />\n \u003Cdiv>\n \u003Cdiv>Range: 37 - 55\u003C/div>\n \u003Cdiv>Value: 23 (below low)\u003C/div>\n \u003C/div>\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseResultRangeVisualizer :low=\"37\" :high=\"55\" :value=\"62\" />\n \u003Cdiv>\n \u003Cdiv>Range: 37 - 55\u003C/div>\n \u003Cdiv>Value: 62 (above high)\u003C/div>\n \u003C/div>\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseResultRangeVisualizer :low=\"20\" :high=\"30\" :value=\"5\" />\n \u003Cdiv>\n \u003Cdiv>Range: 20 - 30\u003C/div>\n \u003Cdiv>Value: 5 (far below low)\u003C/div>\n \u003C/div>\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseResultRangeVisualizer :low=\"8\" :high=\"8\" :value=\"12\" />\n \u003Cdiv>\n \u003Cdiv>Range: 8 - 8\u003C/div>\n \u003Cdiv>Value: 12 (above high)\u003C/div>\n \u003C/div>\n \u003C/div>\n\n \u003Ch3>Single Bound Examples\u003C/h3>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseResultRangeVisualizer :low=\"4\" :value=\"18\" />\n \u003Cdiv>\n \u003Cdiv>Range: above 4\u003C/div>\n \u003Cdiv>Value: 18 (normal - above low)\u003C/div>\n \u003C/div>\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseResultRangeVisualizer :low=\"4\" :value=\"2\" />\n \u003Cdiv>\n \u003Cdiv>Range: above 4\u003C/div>\n \u003Cdiv>Value: 2 (below low)\u003C/div>\n \u003C/div>\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseResultRangeVisualizer :high=\"20\" :value=\"7\" />\n \u003Cdiv>\n \u003Cdiv>Range: below 20\u003C/div>\n \u003Cdiv>Value: 7 (normal - below high)\u003C/div>\n \u003C/div>\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseResultRangeVisualizer :high=\"20\" :value=\"25\" />\n \u003Cdiv>\n \u003Cdiv>Range: below 20\u003C/div>\n \u003Cdiv>Value: 25 (above high)\u003C/div>\n \u003C/div>\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseResultRangeVisualizer :low=\"3.5\" :value=\"7.2\" />\n \u003Cdiv>\n \u003Cdiv>Range: above 3.5\u003C/div>\n \u003Cdiv>Value: 7.2 (normal - above low)\u003C/div>\n \u003C/div>\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseResultRangeVisualizer :low=\"3.5\" :value=\"2.1\" />\n \u003Cdiv>\n \u003Cdiv>Range: above 3.5\u003C/div>\n \u003Cdiv>Value: 2.1 (below low)\u003C/div>\n \u003C/div>\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseResultRangeVisualizer :high=\"15.8\" :value=\"12.3\" />\n \u003Cdiv>\n \u003Cdiv>Range: below 15.8\u003C/div>\n \u003Cdiv>Value: 12.3 (normal - below high)\u003C/div>\n \u003C/div>\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseResultRangeVisualizer :high=\"15.8\" :value=\"18.7\" />\n \u003Cdiv>\n \u003Cdiv>Range: below 15.8\u003C/div>\n \u003Cdiv>Value: 18.7 (above high)\u003C/div>\n \u003C/div>\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseResultRangeVisualizer :low=\"0.5\" :value=\"0.5\" />\n \u003Cdiv>\n \u003Cdiv>Range: above 0.5\u003C/div>\n \u003Cdiv>Value: 0.5 (exactly on the lower bound)\u003C/div>\n \u003C/div>\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseResultRangeVisualizer :high=\"100\" :value=\"100\" />\n \u003Cdiv>\n \u003Cdiv>Range: below 100\u003C/div>\n \u003Cdiv>Value: 100 (exactly on the upper bound)\u003C/div>\n \u003C/div>\n \u003C/div>\n\n \u003Ch3>Zero Lower Bound Examples\u003C/h3>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseResultRangeVisualizer :low=\"0\" :high=\"10\" :value=\"5\" />\n \u003Cdiv>\n \u003Cdiv>Range: 0 - 10\u003C/div>\n \u003Cdiv>Value: 5 (normal range with low=0)\u003C/div>\n \u003C/div>\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseResultRangeVisualizer :low=\"0\" :high=\"10\" :value=\"1\" />\n \u003Cdiv>\n \u003Cdiv>Range: 0 - 10\u003C/div>\n \u003Cdiv>Value: 1 (normal - above lower bound of 0)\u003C/div>\n \u003C/div>\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseResultRangeVisualizer :low=\"0\" :high=\"10\" :value=\"3\" />\n \u003Cdiv>\n \u003Cdiv>Range: 0 - 10\u003C/div>\n \u003Cdiv>Value: 3 (normal - above lower bound of 0)\u003C/div>\n \u003C/div>\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseResultRangeVisualizer :low=\"0\" :high=\"10\" :value=\"7\" />\n \u003Cdiv>\n \u003Cdiv>Range: 0 - 10\u003C/div>\n \u003Cdiv>Value: 7 (normal - above lower bound of 0)\u003C/div>\n \u003C/div>\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseResultRangeVisualizer :low=\"0\" :high=\"10\" :value=\"13\" />\n \u003Cdiv>\n \u003Cdiv>Range: 0 - 10\u003C/div>\n \u003Cdiv>Value: 13 (above high)\u003C/div>\n \u003C/div>\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseResultRangeVisualizer :low=\"0\" :high=\"10\" :value=\"50\" />\n \u003Cdiv>\n \u003Cdiv>Range: 0 - 10\u003C/div>\n \u003Cdiv>Value: 50 (far above high)\u003C/div>\n \u003C/div>\n \u003C/div>\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003CBaseResultRangeVisualizer :low=\"0\" :value=\"3\" />\n \u003Cdiv>\n \u003Cdiv>Range: above 0\u003C/div>\n \u003Cdiv>Value: 3 (normal - above lower bound of 0)\u003C/div>\n \u003C/div>\n \u003C/div>\n \u003C/div>\n\u003C/template>\n",{"name":686,"displayName":687,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":688},"pcnf-rich-text-editor","Rich Text Editor",[689,692,697,702,707,712,715,720,723,726,731],{"name":15,"displayName":16,"url":690,"code":691},"/main/#/922/product-patterns/usage-examples/rich-text-editor/basic","\u003Cscript lang=\"ts\" setup>\nimport InputRichTextEditor from '@/components/input/RichTextEditor.vue'\nconst value = ref(\n `\u003Ch1>Heading 1\u003C/h1>\u003Ch2>Heading 2\u003C/h2>\u003Ch3>Heading 3\u003C/h3>\u003Cp>Paragraph 1\u003C/p>\u003Cp>Paragraph 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>\u003Cul>\u003Cli>\u003Cp>Ordered 1\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 2\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 3\u003C/p>\u003C/li>\u003C/ul>\u003Cp>Paragraph 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>\u003Cblockquote>\u003Cp>Grown-ups never understand anything by themselves, and it is tiresome for children to be always and forever explaining things to them.\u003C/p>\u003C/blockquote>\u003Col>\u003Cli>\u003Cp>Point one - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Point two\u003C/p>\u003C/li>\u003Cli>\u003Cp>Point three\u003C/p>\u003C/li>\u003C/ol>\u003Cp>Below is an example of a relation having three named attributes: 'ID' from the domain of integers, and 'Name' and 'Address' from the domain of strings:\u003C/p>\u003Ctable>\u003Ctr>\u003Cth>ID\u003C/th>\u003Cth>Name\u003C/th>\u003Cth>City\u003C/th>\u003Cth>Country\u003C/th>\u003Cth>Age\u003C/th>\u003Cth>Occupation\u003C/th>\u003Cth>Favorite Food\u003C/th>\u003Cth>Hobby\u003C/th>\u003Cth>Email\u003C/th>\u003Cth>Status\u003C/th>\u003C/tr>\u003Ctr>\u003Ctd>102\u003C/td>\u003Ctd>Yonezawa Akinori\u003C/td>\u003Ctd>Naha\u003C/td>\u003Ctd>Japan\u003C/td>\u003Ctd>29\u003C/td>\u003Ctd>Designer\u003C/td>\u003Ctd>Sushi\u003C/td>\u003Ctd>Painting\u003C/td>\u003Ctd>yonezawa@email.jp\u003C/td>\u003Ctd>Active\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>202\u003C/td>\u003Ctd>Nilay Patel\u003C/td>\u003Ctd>Sendai\u003C/td>\u003Ctd>Japan\u003C/td>\u003Ctd>34\u003C/td>\u003Ctd>Engineer\u003C/td>\u003Ctd>Pizza\u003C/td>\u003Ctd>Cycling\u003C/td>\u003Ctd>nilay@email.jp\u003C/td>\u003Ctd>On Leave\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>104\u003C/td>\u003Ctd>Murata Makoto\u003C/td>\u003Ctd>Kumamoto\u003C/td>\u003Ctd>Japan\u003C/td>\u003Ctd>27\u003C/td>\u003Ctd>Teacher\u003C/td>\u003Ctd>Paella\u003C/td>\u003Ctd>Reading\u003C/td>\u003Ctd>murata@email.jp\u003C/td>\u003Ctd>Active\u003C/td>\u003C/tr>\u003C/table>\u003Cp>A predicate for \u003Cu>this\u003C/u> relation, using the attribute names to denote free variables, might be \"Employee number ID is known as Name and lives at Address\". Examination of the relation tells us that there are just four tuples for which the predicate holds true. So, for example, employee 102 is known only by that name, Yonezawa Akinori, and does not live anywhere else but in Naha, Okinawa. Also, apart from the four employees shown, there is no other employee who has both a name and an address.\u003C/p>`,\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputRichTextEditor v-model=\"value\" label=\"Label\" />\n\u003C/template>\n",{"name":693,"displayName":694,"url":695,"code":696},"min-size-for-resizable","Min size for resizable","/main/#/922/product-patterns/usage-examples/rich-text-editor/min-size-for-resizable","\u003Cscript lang=\"ts\" setup>\nimport InputRichTextEditor from '@/components/input/RichTextEditor.vue'\nconst value = ref(\n `\u003Ch1>Heading 1\u003C/h1>\u003Ch2>Heading 2\u003C/h2>\u003Ch3>Heading 3\u003C/h3>\u003Cp>Paragraph 1\u003C/p>\u003Cp>Paragraph 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>\u003Cul>\u003Cli>\u003Cp>Ordered 1\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 2\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 3\u003C/p>\u003C/li>\u003C/ul>\u003Cp>Paragraph 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>`,\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputRichTextEditor v-model=\"value\" label=\"Label\" min-size=\"m\" size=\"l\" />\n\u003C/template>\n",{"name":698,"displayName":699,"url":700,"code":701},"min-size-m","Min size m","/main/#/922/product-patterns/usage-examples/rich-text-editor/min-size-m","\u003Cscript lang=\"ts\" setup>\nimport InputRichTextEditor from '@/components/input/RichTextEditor.vue'\nconst value = ref(\n `\u003Ch1>Heading 1\u003C/h1>\u003Ch2>Heading 2\u003C/h2>\u003Ch3>Heading 3\u003C/h3>\u003Cp>Paragraph 1\u003C/p>\u003Cp>Paragraph 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>\u003Cul>\u003Cli>\u003Cp>Ordered 1\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 2\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 3\u003C/p>\u003C/li>\u003C/ul>\u003Cp>Paragraph 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>`,\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputRichTextEditor v-model=\"value\" label=\"Label\" min-size=\"m\" />\n\u003C/template>\n",{"name":703,"displayName":704,"url":705,"code":706},"optional","Optional","/main/#/922/product-patterns/usage-examples/rich-text-editor/optional","\u003Cscript lang=\"ts\" setup>\nimport InputRichTextEditor from '@/components/input/RichTextEditor.vue'\nconst value = ref('')\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputRichTextEditor v-model=\"value\" label=\"Label\" :required=\"false\" />\n\u003C/template>\n",{"name":708,"displayName":709,"url":710,"code":711},"size-m","Size m","/main/#/922/product-patterns/usage-examples/rich-text-editor/size-m","\u003Cscript lang=\"ts\" setup>\nimport InputRichTextEditor from '@/components/input/RichTextEditor.vue'\nconst value = ref(\n `\u003Ch1>Heading 1\u003C/h1>\u003Ch2>Heading 2\u003C/h2>\u003Ch3>Heading 3\u003C/h3>\u003Cp>Paragraph 1\u003C/p>\u003Cp>Paragraph 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>\u003Cul>\u003Cli>\u003Cp>Ordered 1\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 2\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 3\u003C/p>\u003C/li>\u003C/ul>\u003Cp>Paragraph 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>`,\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputRichTextEditor v-model=\"value\" label=\"Label\" size=\"m\" />\n\u003C/template>\n",{"name":220,"displayName":221,"url":713,"code":714},"/main/#/922/product-patterns/usage-examples/rich-text-editor/with-a-hint","\u003Cscript lang=\"ts\" setup>\nimport InputRichTextEditor from '@/components/input/RichTextEditor.vue'\n\nconst value = ref('')\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputRichTextEditor\n v-model=\"value\"\n label=\"Label\"\n hint=\"Hint is an accessible way to provide additional information that might help the user\"\n />\n\u003C/template>\n",{"name":716,"displayName":717,"url":718,"code":719},"with-counter","With counter","/main/#/922/product-patterns/usage-examples/rich-text-editor/with-counter","\u003Cscript lang=\"ts\" setup>\nimport InputRichTextEditor from '@/components/input/RichTextEditor.vue'\nconst value = ref(\n `\u003Ch1>Heading 1\u003C/h1>\u003Ch2>Heading 2\u003C/h2>\u003Ch3>Heading 3\u003C/h3>\u003Cp>Paragraph 1\u003C/p>\u003Cp>Paragraph 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>\u003Cul>\u003Cli>\u003Cp>Ordered 1\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 2\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 3\u003C/p>\u003C/li>\u003C/ul>\u003Cp>Paragraph 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>\u003Cblockquote>\u003Cp>Grown-ups never understand anything by themselves, and it is tiresome for children to be always and forever explaining things to them.\u003C/p>\u003C/blockquote>\u003Col>\u003Cli>\u003Cp>Point one - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Point two\u003C/p>\u003C/li>\u003Cli>\u003Cp>Point three\u003C/p>\u003C/li>\u003C/ol>\u003Cp>Below is an example of a relation having three named attributes: 'ID' from the domain of integers, and 'Name' and 'Address' from the domain of strings:\u003C/p>\u003Ctable>\u003Ctr>\u003Cth>ID\u003C/th>\u003Cth>Name\u003C/th>\u003Cth>City\u003C/th>\u003Cth>Country\u003C/th>\u003Cth>Age\u003C/th>\u003Cth>Occupation\u003C/th>\u003Cth>Favorite Food\u003C/th>\u003Cth>Hobby\u003C/th>\u003Cth>Email\u003C/th>\u003Cth>Status\u003C/th>\u003C/tr>\u003Ctr>\u003Ctd>102\u003C/td>\u003Ctd>Yonezawa Akinori\u003C/td>\u003Ctd>Naha\u003C/td>\u003Ctd>Japan\u003C/td>\u003Ctd>29\u003C/td>\u003Ctd>Designer\u003C/td>\u003Ctd>Sushi\u003C/td>\u003Ctd>Painting\u003C/td>\u003Ctd>yonezawa@email.jp\u003C/td>\u003Ctd>Active\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>202\u003C/td>\u003Ctd>Nilay Patel\u003C/td>\u003Ctd>Sendai\u003C/td>\u003Ctd>Japan\u003C/td>\u003Ctd>34\u003C/td>\u003Ctd>Engineer\u003C/td>\u003Ctd>Pizza\u003C/td>\u003Ctd>Cycling\u003C/td>\u003Ctd>nilay@email.jp\u003C/td>\u003Ctd>On Leave\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>104\u003C/td>\u003Ctd>Murata Makoto\u003C/td>\u003Ctd>Kumamoto\u003C/td>\u003Ctd>Japan\u003C/td>\u003Ctd>27\u003C/td>\u003Ctd>Teacher\u003C/td>\u003Ctd>Paella\u003C/td>\u003Ctd>Reading\u003C/td>\u003Ctd>murata@email.jp\u003C/td>\u003Ctd>Active\u003C/td>\u003C/tr>\u003C/table>\u003Cp>A predicate for \u003Cu>this\u003C/u> relation, using the attribute names to denote free variables, might be \"Employee number ID is known as Name and lives at Address\". Examination of the relation tells us that there are just four tuples for which the predicate holds true. So, for example, employee 102 is known only by that name, Yonezawa Akinori, and does not live anywhere else but in Naha, Okinawa. Also, apart from the four employees shown, there is no other employee who has both a name and an address.\u003C/p>`,\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputRichTextEditor v-model=\"value\" label=\"Label\" :character-limit=\"2000\" />\n\u003C/template>\n",{"name":235,"displayName":236,"url":721,"code":722},"/main/#/922/product-patterns/usage-examples/rich-text-editor/with-error","\u003Cscript lang=\"ts\" setup>\nimport InputRichTextEditor from '@/components/input/RichTextEditor.vue'\n\nconst value = ref('')\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputRichTextEditor\n v-model=\"value\"\n label=\"Label\"\n error=\"This is an error message\"\n />\n\u003C/template>\n",{"name":674,"displayName":675,"url":724,"code":725},"/main/#/922/product-patterns/usage-examples/rich-text-editor/with-slots","\u003Cscript lang=\"ts\" setup>\nimport BaseAutoSave from '@/components/base/AutoSave.vue'\nimport BaseButton from '@/components/base/Button.vue'\nimport InputComboboxMultiple from '@/components/input/ComboboxMultiple.vue'\nimport InputRichTextEditor from '@/components/input/RichTextEditor.vue'\n\nconst value = ref(\n `\u003Ch1>Heading 1\u003C/h1>\u003Ch2>Heading 2\u003C/h2>\u003Ch3>Heading 3\u003C/h3>\u003Cp>Paragraph 1\u003C/p>\u003Cp>Paragraph 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>\u003Cul>\u003Cli>\u003Cp>Ordered 1\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 2\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 3\u003C/p>\u003C/li>\u003C/ul>\u003Cp>Paragraph 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>\u003Cblockquote>\u003Cp>Grown-ups never understand anything by themselves, and it is tiresome for children to be always and forever explaining things to them.\u003C/p>\u003C/blockquote>\u003Col>\u003Cli>\u003Cp>Point one - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Point two\u003C/p>\u003C/li>\u003Cli>\u003Cp>Point three\u003C/p>\u003C/li>\u003C/ol>\u003Cp>Below is an example of a relation having three named attributes: 'ID' from the domain of integers, and 'Name' and 'Address' from the domain of strings:\u003C/p>\u003Ctable>\u003Ctr>\u003Cth>ID\u003C/th>\u003Cth>Name\u003C/th>\u003Cth>City\u003C/th>\u003Cth>Country\u003C/th>\u003Cth>Age\u003C/th>\u003Cth>Occupation\u003C/th>\u003Cth>Favorite Food\u003C/th>\u003Cth>Hobby\u003C/th>\u003Cth>Email\u003C/th>\u003Cth>Status\u003C/th>\u003C/tr>\u003Ctr>\u003Ctd>102\u003C/td>\u003Ctd>Yonezawa Akinori\u003C/td>\u003Ctd>Naha\u003C/td>\u003Ctd>Japan\u003C/td>\u003Ctd>29\u003C/td>\u003Ctd>Designer\u003C/td>\u003Ctd>Sushi\u003C/td>\u003Ctd>Painting\u003C/td>\u003Ctd>yonezawa@email.jp\u003C/td>\u003Ctd>Active\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>202\u003C/td>\u003Ctd>Nilay Patel\u003C/td>\u003Ctd>Sendai\u003C/td>\u003Ctd>Japan\u003C/td>\u003Ctd>34\u003C/td>\u003Ctd>Engineer\u003C/td>\u003Ctd>Pizza\u003C/td>\u003Ctd>Cycling\u003C/td>\u003Ctd>nilay@email.jp\u003C/td>\u003Ctd>On Leave\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>104\u003C/td>\u003Ctd>Murata Makoto\u003C/td>\u003Ctd>Kumamoto\u003C/td>\u003Ctd>Japan\u003C/td>\u003Ctd>27\u003C/td>\u003Ctd>Teacher\u003C/td>\u003Ctd>Paella\u003C/td>\u003Ctd>Reading\u003C/td>\u003Ctd>murata@email.jp\u003C/td>\u003Ctd>Active\u003C/td>\u003C/tr>\u003C/table>\u003Cp>A predicate for \u003Cu>this\u003C/u> relation, using the attribute names to denote free variables, might be \"Employee number ID is known as Name and lives at Address\". Examination of the relation tells us that there are just four tuples for which the predicate holds true. So, for example, employee 102 is known only by that name, Yonezawa Akinori, and does not live anywhere else but in Naha, Okinawa. Also, apart from the four employees shown, there is no other employee who has both a name and an address.\u003C/p>`,\n)\nconst comboboxValue = ref(['history'])\nconst comboboxOptions = ref([\n { value: 'history', label: 'History' },\n { value: 'batman', label: 'Batman' },\n { value: 'robin', label: 'Robin' },\n { value: 'joker', label: 'Joker' },\n])\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputRichTextEditor\n v-model=\"value\"\n label=\"Example label\"\n hint=\"Example hint\"\n min-size=\"s\"\n >\n \u003Ctemplate #header>\n \u003Cdiv class=\"n:pbe-xs\">\n \u003Cdiv class=\"n:mbe-s n:text-l n:font-heading n:text-weak\">\n Edit clinical note\n \u003C/div>\n \u003CInputComboboxMultiple\n v-model=\"comboboxValue\"\n class=\"n:mbe-xs\"\n name=\"rich-text-editor-select\"\n label=\"Clinical note type\"\n :options=\"comboboxOptions\"\n hide-label\n expand\n create-option\n />\n \u003C/div>\n \u003C/template>\n \u003Ctemplate #additional-controls>\n \u003CBaseButton size=\"s\" variant=\"plain\">\n \u003Cnord-icon slot=\"start\" name=\"interface-add\">\u003C/nord-icon>\n Add template\n \u003C/BaseButton>\n \u003Cnord-dropdown>\n \u003Cnord-button slot=\"toggle\" variant=\"plain\" size=\"s\">\n Today, 16:15\n \u003C/nord-button>\n \u003Cnord-dropdown-item>View profile\u003C/nord-dropdown-item>\n \u003Cnord-dropdown-item>Settings\u003C/nord-dropdown-item>\n \u003Cnord-dropdown-item>Show keyboard shortcuts\u003C/nord-dropdown-item>\n \u003C/nord-dropdown>\n \u003CBaseAutoSave />\n \u003C/template>\n \u003Ctemplate #footer>\n \u003Cnord-button-group\n variant=\"spaced\"\n class=\"n:flex n:flex-row n:flex-wrap n:items-center n:justify-end n:gap-m\"\n >\n \u003Cnord-button>Discard note\u003C/nord-button>\n \u003Cnord-button variant=\"primary\">Add note\u003C/nord-button>\n \u003C/nord-button-group>\n \u003C/template>\n \u003C/InputRichTextEditor>\n\u003C/template>\n",{"name":727,"displayName":728,"url":729,"code":730},"with-slots-complex","With slots complex","/main/#/922/product-patterns/usage-examples/rich-text-editor/with-slots-complex","\u003Cscript lang=\"ts\" setup>\nimport BaseAutoSave from '@/components/base/AutoSave.vue'\nimport BaseButton from '@/components/base/Button.vue'\nimport InputComboboxMultiple from '@/components/input/ComboboxMultiple.vue'\nimport InputRichTextEditor from '@/components/input/RichTextEditor.vue'\n\nconst value = ref(\n `\u003Ch1>Heading 1\u003C/h1>\u003Ch2>Heading 2\u003C/h2>\u003Ch3>Heading 3\u003C/h3>\u003Cp>Paragraph 1\u003C/p>\u003Cp>Paragraph 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>\u003Cul>\u003Cli>\u003Cp>Ordered 1\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 2\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 3\u003C/p>\u003C/li>\u003C/ul>\u003Cp>Paragraph 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>\u003Cblockquote>\u003Cp>Grown-ups never understand anything by themselves, and it is tiresome for children to be always and forever explaining things to them.\u003C/p>\u003C/blockquote>\u003Col>\u003Cli>\u003Cp>Point one - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Point two\u003C/p>\u003C/li>\u003Cli>\u003Cp>Point three\u003C/p>\u003C/li>\u003C/ol>\u003Cp>Below is an example of a relation having three named attributes: 'ID' from the domain of integers, and 'Name' and 'Address' from the domain of strings:\u003C/p>\u003Ctable>\u003Ctr>\u003Cth>ID\u003C/th>\u003Cth>Name\u003C/th>\u003Cth>City\u003C/th>\u003Cth>Country\u003C/th>\u003Cth>Age\u003C/th>\u003Cth>Occupation\u003C/th>\u003Cth>Favorite Food\u003C/th>\u003Cth>Hobby\u003C/th>\u003Cth>Email\u003C/th>\u003Cth>Status\u003C/th>\u003C/tr>\u003Ctr>\u003Ctd>102\u003C/td>\u003Ctd>Yonezawa Akinori\u003C/td>\u003Ctd>Naha\u003C/td>\u003Ctd>Japan\u003C/td>\u003Ctd>29\u003C/td>\u003Ctd>Designer\u003C/td>\u003Ctd>Sushi\u003C/td>\u003Ctd>Painting\u003C/td>\u003Ctd>yonezawa@email.jp\u003C/td>\u003Ctd>Active\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>202\u003C/td>\u003Ctd>Nilay Patel\u003C/td>\u003Ctd>Sendai\u003C/td>\u003Ctd>Japan\u003C/td>\u003Ctd>34\u003C/td>\u003Ctd>Engineer\u003C/td>\u003Ctd>Pizza\u003C/td>\u003Ctd>Cycling\u003C/td>\u003Ctd>nilay@email.jp\u003C/td>\u003Ctd>On Leave\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>104\u003C/td>\u003Ctd>Murata Makoto\u003C/td>\u003Ctd>Kumamoto\u003C/td>\u003Ctd>Japan\u003C/td>\u003Ctd>27\u003C/td>\u003Ctd>Teacher\u003C/td>\u003Ctd>Paella\u003C/td>\u003Ctd>Reading\u003C/td>\u003Ctd>murata@email.jp\u003C/td>\u003Ctd>Active\u003C/td>\u003C/tr>\u003C/table>\u003Cp>A predicate for \u003Cu>this\u003C/u> relation, using the attribute names to denote free variables, might be \"Employee number ID is known as Name and lives at Address\". Examination of the relation tells us that there are just four tuples for which the predicate holds true. So, for example, employee 102 is known only by that name, Yonezawa Akinori, and does not live anywhere else but in Naha, Okinawa. Also, apart from the four employees shown, there is no other employee who has both a name and an address.\u003C/p>`,\n)\nconst comboboxValue = ref(['history'])\nconst comboboxOptions = ref([\n { value: 'history', label: 'History' },\n { value: 'batman', label: 'Batman' },\n { value: 'robin', label: 'Robin' },\n { value: 'joker', label: 'Joker' },\n])\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputRichTextEditor\n v-model=\"value\"\n label=\"Example label\"\n hint=\"Example hint\"\n min-size=\"s\"\n error=\"This is an error message\"\n :character-limit=\"2000\"\n >\n \u003Ctemplate #header>\n \u003Cdiv class=\"n:pbe-xs\">\n \u003Cdiv class=\"n:mbe-s n:text-l n:font-heading n:text-weak\">\n Edit clinical note\n \u003C/div>\n \u003CInputComboboxMultiple\n v-model=\"comboboxValue\"\n class=\"n:mbe-xs\"\n name=\"rich-text-editor-select\"\n label=\"Clinical note type\"\n :options=\"comboboxOptions\"\n hide-label\n expand\n create-option\n />\n \u003C/div>\n \u003C/template>\n \u003Ctemplate #additional-controls>\n \u003CBaseButton size=\"s\" variant=\"plain\">\n \u003Cnord-icon slot=\"start\" name=\"interface-add\">\u003C/nord-icon>\n Add template\n \u003C/BaseButton>\n \u003Cnord-dropdown>\n \u003Cnord-button slot=\"toggle\" variant=\"plain\" size=\"s\">\n Today, 16:15\n \u003C/nord-button>\n \u003Cnord-dropdown-item>View profile\u003C/nord-dropdown-item>\n \u003Cnord-dropdown-item>Settings\u003C/nord-dropdown-item>\n \u003Cnord-dropdown-item>Show keyboard shortcuts\u003C/nord-dropdown-item>\n \u003C/nord-dropdown>\n \u003CBaseAutoSave />\n \u003C/template>\n \u003Ctemplate #footer>\n \u003Cnord-button-group\n variant=\"spaced\"\n class=\"n:flex n:flex-row n:flex-wrap n:items-center n:justify-end n:gap-m\"\n >\n \u003Cnord-button>Discard note\u003C/nord-button>\n \u003Cnord-button variant=\"primary\">Add note\u003C/nord-button>\n \u003C/nord-button-group>\n \u003C/template>\n \u003C/InputRichTextEditor>\n\u003C/template>\n",{"name":732,"displayName":733,"url":734,"code":735},"without-table","Without table","/main/#/922/product-patterns/usage-examples/rich-text-editor/without-table","\u003Cscript lang=\"ts\" setup>\nimport InputRichTextEditor from '@/components/input/RichTextEditor.vue'\nconst value = ref(\n `\u003Ch1>Heading 1\u003C/h1>\u003Ch2>Heading 2\u003C/h2>\u003Ch3>Heading 3\u003C/h3>\u003Cp>Paragraph 1\u003C/p>\u003Cp>Paragraph 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>\u003Cul>\u003Cli>\u003Cp>Ordered 1\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 2\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 3\u003C/p>\u003C/li>\u003C/ul>\u003Cp>Paragraph 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>\u003Cblockquote>\u003Cp>Grown-ups never understand anything by themselves, and it is tiresome for children to be always and forever explaining things to them.\u003C/p>\u003C/blockquote>\u003Col>\u003Cli>\u003Cp>Point one - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Point two\u003C/p>\u003C/li>\u003Cli>\u003Cp>Point three\u003C/p>\u003C/li>\u003C/ol>`,\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputRichTextEditor v-model=\"value\" label=\"Label\" disable-table />\n\u003C/template>\n",{"name":737,"displayName":738,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":739},"pcnf-selection-popout","Selection Popout",[740,745,750],{"name":741,"displayName":742,"url":743,"code":744},"variants","Variants","/main/#/922/product-patterns/usage-examples/selection-popout/variants","\u003Cscript setup lang=\"ts\">\nimport type { Option } from '@/components/base/popout/Selection.vue'\nimport BasePopoutSelection from '@/components/base/popout/Selection.vue'\n\nconst selectedOptions = ref\u003CRecord\u003Cstring, Option | null>>({\n default: null,\n primary: null,\n danger: null,\n dashed: null,\n plain: null,\n})\n\nconst searchModels = ref\u003CRecord\u003Cstring, string>>({\n default: '',\n primary: '',\n danger: '',\n dashed: '',\n plain: '',\n})\n\nconst basicOptions: Option[] = [\n { value: '1', label: 'Apple' },\n { value: '2', label: 'Banana' },\n { value: '3', label: 'Cherry' },\n { value: '4', label: 'Date' },\n { value: '5', label: 'Elderberry' },\n { value: '6', label: 'Fig' },\n { value: '7', label: 'Grape' },\n { value: '8', label: 'Honeydew' },\n { value: '9', label: 'Kiwi' },\n { value: '10', label: 'Lemon' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Ch3>Default Variant\u003C/h3>\n \u003CBasePopoutSelection\n v-model=\"searchModels.default\"\n label=\"Add Item (Default)\"\n :options=\"basicOptions\"\n parent-id=\"variant-default-example\"\n variant=\"default\"\n is-searchable\n @select=\"selectedOptions.default = $event\"\n />\n \u003Cdiv v-if=\"selectedOptions.default\" class=\"n:text-s n:text-weaker\">\n Selected: {{ selectedOptions.default.label }}\n \u003C/div>\n\n \u003Ch3>Primary Variant\u003C/h3>\n \u003CBasePopoutSelection\n v-model=\"searchModels.primary\"\n label=\"Add Item (Primary)\"\n :options=\"basicOptions\"\n parent-id=\"variant-primary-example\"\n variant=\"primary\"\n is-searchable\n @select=\"selectedOptions.primary = $event\"\n />\n \u003Cdiv v-if=\"selectedOptions.primary\" class=\"n:text-s n:text-weaker\">\n Selected: {{ selectedOptions.primary.label }}\n \u003C/div>\n\n \u003Ch3>Danger Variant\u003C/h3>\n \u003CBasePopoutSelection\n v-model=\"searchModels.danger\"\n label=\"Add Item (Danger)\"\n :options=\"basicOptions\"\n parent-id=\"variant-danger-example\"\n variant=\"danger\"\n is-searchable\n @select=\"selectedOptions.danger = $event\"\n />\n \u003Cdiv v-if=\"selectedOptions.danger\" class=\"n:text-s n:text-weaker\">\n Selected: {{ selectedOptions.danger.label }}\n \u003C/div>\n\n \u003Ch3>Dashed Variant\u003C/h3>\n \u003CBasePopoutSelection\n v-model=\"searchModels.dashed\"\n label=\"Add Item (Dashed)\"\n :options=\"basicOptions\"\n parent-id=\"variant-dashed-example\"\n variant=\"dashed\"\n is-searchable\n @select=\"selectedOptions.dashed = $event\"\n />\n \u003Cdiv v-if=\"selectedOptions.dashed\" class=\"n:text-s n:text-weaker\">\n Selected: {{ selectedOptions.dashed.label }}\n \u003C/div>\n\n \u003Ch3>Plain Variant\u003C/h3>\n \u003CBasePopoutSelection\n v-model=\"searchModels.plain\"\n label=\"Add Item (Plain)\"\n :options=\"basicOptions\"\n parent-id=\"variant-plain-example\"\n variant=\"plain\"\n is-searchable\n @select=\"selectedOptions.plain = $event\"\n />\n \u003Cdiv v-if=\"selectedOptions.plain\" class=\"n:text-s n:text-weaker\">\n Selected: {{ selectedOptions.plain.label }}\n \u003C/div>\n \u003C/div>\n\u003C/template>\n",{"name":746,"displayName":747,"url":748,"code":749},"with-search-keys","With search keys","/main/#/922/product-patterns/usage-examples/selection-popout/with-search-keys","\u003Cscript setup lang=\"ts\">\nimport type { Option } from '@/components/base/popout/Selection.vue'\nimport BasePopoutSelection from '@/components/base/popout/Selection.vue'\n\nconst selectedOption = ref\u003COption | null>(null)\nconst searchModel = ref('')\n\nconst optionsWithExtraData: Option[] = [\n {\n value: 'dog-1',\n label: 'German Shepherd',\n extraData: {\n breed: 'German Shepherd',\n code: 'GSD001',\n type: 'Large',\n origin: 'Germany',\n },\n },\n {\n value: 'dog-2',\n label: 'Golden Retriever',\n extraData: {\n breed: 'Golden Retriever',\n code: 'GRT002',\n type: 'Large',\n origin: 'Scotland',\n },\n },\n {\n value: 'dog-3',\n label: 'French Bulldog',\n extraData: {\n breed: 'French Bulldog',\n code: 'FBD003',\n type: 'Small',\n origin: 'France',\n },\n },\n {\n value: 'dog-4',\n label: 'Labrador Retriever',\n extraData: {\n breed: 'Labrador Retriever',\n code: 'LAB004',\n type: 'Large',\n origin: 'Canada',\n },\n },\n {\n value: 'dog-5',\n label: 'Beagle',\n extraData: {\n breed: 'Beagle',\n code: 'BGL005',\n type: 'Medium',\n origin: 'England',\n },\n },\n]\n\nconst handleSelect = (option: Option) => {\n selectedOption.value = option\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cdiv class=\"n:py-m\">\n \u003CBasePopoutSelection\n v-model=\"searchModel\"\n label=\"Add Dog Breed\"\n :options=\"optionsWithExtraData\"\n parent-id=\"search-keys-example\"\n is-searchable\n :search-keys=\"['code', 'type']\"\n @select=\"handleSelect\"\n >\n \u003Ctemplate #default=\"{ option, highlightProps }\">\n \u003Cdiv\n class=\"n:flex n:flex-row n:flex-wrap n:items-center n:justify-between n:gap-m\"\n >\n \u003Cspan v-text-highlight=\"highlightProps\" class=\"option-label\">\n {{ option.label }}\n \u003C/span>\n \u003Cspan\n v-if=\"option.extraData?.code\"\n v-text-highlight=\"highlightProps\"\n class=\"n:text-weaker\"\n >\n {{ option.extraData.code }}\n \u003C/span>\n \u003C/div>\n \u003Cdiv class=\"n:text-s n:text-weaker\">\n \u003Cspan v-text-highlight=\"highlightProps\">\n {{ option.extraData?.type }}\n \u003C/span>\n \u003C/div>\n \u003C/template>\n \u003C/BasePopoutSelection>\n \u003C/div>\n\n \u003Cdiv v-if=\"selectedOption\" class=\"n:pbs-m\">\n \u003Cnord-card>\n \u003Ch3>Selected Option:\u003C/h3>\n \u003Cp>\u003Cstrong>Value:\u003C/strong> {{ selectedOption.value }}\u003C/p>\n \u003Cp>\u003Cstrong>Label:\u003C/strong> {{ selectedOption.label }}\u003C/p>\n \u003Cdiv v-if=\"selectedOption.extraData\">\n \u003Ch4>Extra Data:\u003C/h4>\n \u003Cul>\n \u003Cli v-for=\"(value, key) in selectedOption.extraData\" :key>\n \u003Cstrong>{{ key }}:\u003C/strong> {{ value }}\n \u003C/li>\n \u003C/ul>\n \u003C/div>\n \u003C/nord-card>\n \u003C/div>\n \u003C/div>\n\u003C/template>\n",{"name":751,"displayName":752,"url":753,"code":754},"without-search","Without search","/main/#/922/product-patterns/usage-examples/selection-popout/without-search","\u003Cscript setup lang=\"ts\">\nimport type { Option } from '@/components/base/popout/Selection.vue'\nimport BasePopoutSelection from '@/components/base/popout/Selection.vue'\n\nconst selectedOption = ref\u003COption | null>(null)\n\nconst basicOptions: Option[] = [\n { value: '1', label: 'Option 1' },\n { value: '2', label: 'Option 2' },\n { value: '3', label: 'Option 3' },\n { value: '4', label: 'Option 4' },\n { value: '5', label: 'Option 5' },\n]\n\nconst handleSelect = (option: Option) => {\n selectedOption.value = option\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cdiv class=\"n:py-m\">\n \u003CBasePopoutSelection\n label=\"Add Item\"\n :options=\"basicOptions\"\n parent-id=\"basic-example\"\n @select=\"handleSelect\"\n />\n \u003C/div>\n\n \u003Cdiv v-if=\"selectedOption\" class=\"n:py-m\">\n \u003Cnord-card>\n \u003Ch3>Selected Option:\u003C/h3>\n \u003Cp>\u003Cstrong>Value:\u003C/strong> {{ selectedOption.value }}\u003C/p>\n \u003Cp>\u003Cstrong>Label:\u003C/strong> {{ selectedOption.label }}\u003C/p>\n \u003C/nord-card>\n \u003C/div>\n \u003C/div>\n\u003C/template>\n",{"name":756,"displayName":757,"description":758,"usageContent":759,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":760},"pcnf-tab-menu","Tab Menu","Tab Menu is a navigational menu designed to display a list of links with customizable labels.","\u003Cdiv class=\"n-usage n-usage-do\">\n\u003Ch3>Do\u003C/h3>\n\u003Cul>\n\u003Cli>Use short and easily scannable labels for navigation items.\u003C/li>\n\u003Cli>Use links to navigate between pages or to external destinations.\u003C/li>\n\u003Cli>Ensure link text is descriptive and meaningful on its own.\u003C/li>\n\u003C/ul>\n\u003C/div>\n\u003Cdiv class=\"n-usage n-usage-dont\">\n\u003Ch3>Don't\u003C/h3>\n\u003Cul>\n\u003Cli>Avoid using long labels, truncated text negatively impacts usability.\u003C/li>\n\u003Cli>Don't use links to perform actions like save, add, or edit. Use a button for such actions instead.\u003C/li>\n\u003Cli>Avoid generic phrases like \"read more\" or \"click here\" that lack context and clarity.\u003C/li>\n\u003C/ul>\n\u003C/div>",[761,764,769,772],{"name":15,"displayName":16,"url":762,"code":763},"/main/#/922/product-patterns/usage-examples/tab-menu/basic","\u003Cscript setup lang=\"ts\">\nimport BaseTabMenu from '@/components/base/tab-menu/TabMenu.vue'\nimport type { TabMenuItem } from '@/components/base/tab-menu/TabMenu.vue'\n\nconst route = useRoute()\nconst items = computed(\n () =>\n [\n {\n id: 'overview',\n label: 'Overview',\n to: '#',\n isActive: !route.hash || route.hash === '#',\n },\n {\n id: 'provet-cloud',\n label: 'Provet',\n to: '#provet-cloud',\n isActive: route.hash === '#provet-cloud',\n },\n {\n id: 'nordhealth',\n label: 'Nord Design System',\n to: '#nordhealth',\n target: '_blank',\n },\n ] satisfies TabMenuItem[],\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseTabMenu :items />\n\u003C/template>\n",{"name":765,"displayName":766,"url":767,"code":768},"click-events","Click events","/main/#/922/product-patterns/usage-examples/tab-menu/click-events","\u003Cscript setup lang=\"ts\">\nimport BaseTabMenu from '@/components/base/tab-menu/TabMenu.vue'\nimport type { TabMenuItem } from '@/components/base/tab-menu/TabMenu.vue'\n\nconst activeTab = ref('dashboard')\n\nconst handleTabClick = (tabId: string) => {\n activeTab.value = tabId\n}\n\nconst items = computed(\n () =>\n [\n {\n id: 'dashboard',\n label: 'Dashboard',\n isActive: activeTab.value === 'dashboard',\n clickHandler: () => handleTabClick('dashboard'),\n },\n {\n id: 'notifications',\n label: `Notifications`,\n isActive: activeTab.value === 'notifications',\n clickHandler: () => handleTabClick('notifications'),\n },\n {\n id: 'settings',\n label: 'Settings',\n isActive: activeTab.value === 'settings',\n clickHandler: () => handleTabClick('settings'),\n },\n {\n id: 'logout',\n label: 'Logout',\n isActive: activeTab.value === 'logout',\n clickHandler: () => handleTabClick('logout'),\n },\n ] satisfies TabMenuItem[],\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003CBaseTabMenu :items />\n\n \u003Cdiv class=\"n:p-m\">\n \u003Cp>\u003Cstrong>Active Tab:\u003C/strong> {{ activeTab || 'None' }}\u003C/p>\n \u003Cp class=\"n:text-weak\">\n Click on the tabs above to see the click events in action.\n \u003C/p>\n \u003C/div>\n \u003C/div>\n\u003C/template>\n",{"name":99,"displayName":100,"url":770,"code":771},"/main/#/922/product-patterns/usage-examples/tab-menu/external","\u003Cscript setup lang=\"ts\">\nimport BaseTabMenu from '@/components/base/tab-menu/TabMenu.vue'\nimport type { TabMenuItem } from '@/components/base/tab-menu/TabMenu.vue'\n\nconst items = ref([\n {\n id: 'local-page',\n label: 'Local Page',\n to: '#',\n },\n {\n id: 'provet-cloud',\n label: 'Provet (External)',\n to: 'https://www.provet.cloud/',\n external: true,\n },\n {\n id: 'nord-design-system',\n label: 'Nord Design System (External)',\n to: 'https://nordhealth.design/',\n external: true,\n },\n {\n id: 'provet-support',\n label: 'Support Portal (External and Target Blank)',\n to: 'https://support.provet.cloud/',\n external: true,\n target: '_blank',\n },\n] satisfies TabMenuItem[])\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseTabMenu :items />\n\u003C/template>\n",{"name":773,"displayName":774,"url":775,"code":776},"target","Target","/main/#/922/product-patterns/usage-examples/tab-menu/target","\u003Cscript setup lang=\"ts\">\nimport BaseTabMenu from '@/components/base/tab-menu/TabMenu.vue'\nimport type { TabMenuItem } from '@/components/base/tab-menu/TabMenu.vue'\n\nconst items = ref([\n {\n id: 'same-tab',\n label: 'Same Tab',\n to: '#',\n },\n {\n id: 'new-tab-provet',\n label: 'Provet (New Tab)',\n to: 'https://www.provet.cloud/',\n external: true,\n target: '_blank',\n },\n {\n id: 'new-tab-nord',\n label: 'Nord Design (New Tab)',\n to: 'https://nordhealth.design/',\n external: true,\n target: '_blank',\n },\n {\n id: 'new-tab-docs',\n label: 'Documentation (New Tab)',\n to: 'https://docs.provet.cloud/',\n external: true,\n target: '_blank',\n },\n] satisfies TabMenuItem[])\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseTabMenu :items />\n\u003C/template>\n",{"name":778,"displayName":779,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":780},"pcnf-tags","Tags",[781,784,789,794,799,804],{"name":15,"displayName":16,"url":782,"code":783},"/main/#/922/product-patterns/usage-examples/tags/basic","\u003Cscript setup lang=\"ts\">\nimport BaseEditableField from '@/components/base/editable/Field.vue'\nimport InputComboboxMultiple from '@/components/input/ComboboxMultiple.vue'\nimport BaseTags from '@/components/base/Tags.vue'\ntype TagsExampleData = {\n vowels: string[]\n consonant: string[]\n}\n\nconst alphabet = Array.from({ length: 26 }, (_, i) =>\n String.fromCharCode(65 + i),\n)\nconst vowels: TagsExampleData['vowels'] = ['A', 'E', 'I', 'O', 'U']\nconst consonant: TagsExampleData['consonant'] = alphabet.filter(\n (char) => !vowels.includes(char),\n)\n\nconst isEditing = ref\u003Cboolean>(false)\nconst inlineEdit = ref\u003Cboolean>(false)\nconst expand = ref\u003Cboolean>(true)\nconst selectedTags = ref\u003Cstring[]>([])\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003Cnord-toggle\n label=\"Edit mode\"\n :checked=\"isEditing\"\n @change=\"isEditing = !isEditing\"\n />\n\n \u003Cnord-toggle label=\"Inline-edit\" @change=\"inlineEdit = !inlineEdit\" />\n\n \u003Cnord-toggle label=\"Expand\" checked @change=\"expand = !expand\" />\n \u003C/div>\n\n \u003CBaseEditableField :is-editing>\n \u003CBaseTags\n v-model:is-editing=\"isEditing\"\n v-model:selected-tags=\"selectedTags\"\n :categories=\"[\n { label: 'Vowels', tags: vowels },\n { label: 'Consonants', tags: consonant },\n ]\"\n />\n\n \u003Ctemplate #edit>\n \u003CInputComboboxMultiple\n v-model=\"selectedTags\"\n label=\"Alphabet\"\n hide-label\n :inline-edit\n :expand\n :options=\"\n alphabet.map((letter) => ({ label: letter, value: letter }))\n \"\n />\n \u003C/template>\n \u003C/BaseEditableField>\n \u003C/div>\n\u003C/template>\n",{"name":785,"displayName":786,"url":787,"code":788},"async","Async","/main/#/922/product-patterns/usage-examples/tags/async","\u003Cscript setup lang=\"ts\">\nimport { safeMathRandom } from '@/utils/number.js'\nimport BaseEditableField from '@/components/base/editable/Field.vue'\nimport InputComboboxMultiple from '@/components/input/ComboboxMultiple.vue'\nimport BaseTags from '@/components/base/Tags.vue'\ntype TagsExampleData = {\n vowels: string[]\n consonant: string[]\n}\n\nconst alphabet = Array.from({ length: 26 }, (_, i) =>\n String.fromCharCode(65 + i),\n)\n\nconst fetchAlphabet = async (query: string) => {\n await new Promise((resolve) =>\n setTimeout(resolve, Math.floor(safeMathRandom() * 500) + 500),\n )\n\n if (query) {\n return alphabet\n .filter((type) => type.toLowerCase().includes(query.toLowerCase()))\n .map((letter) => ({\n label: letter,\n value: letter,\n }))\n }\n\n return alphabet.map((letter) => ({\n label: letter,\n value: letter,\n }))\n}\n\nconst vowels: TagsExampleData['vowels'] = ['A', 'E', 'I', 'O', 'U']\nconst consonant: TagsExampleData['consonant'] = alphabet.filter(\n (char) => !vowels.includes(char),\n)\n\nconst isEditing = ref\u003Cboolean>(false)\nconst inlineEdit = ref\u003Cboolean>(false)\nconst expand = ref\u003Cboolean>(true)\nconst selectedTags = ref\u003Cstring[]>([])\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003Cnord-toggle\n label=\"Edit mode\"\n :checked=\"isEditing\"\n @change=\"isEditing = !isEditing\"\n />\n\n \u003Cnord-toggle label=\"Inline-edit\" @change=\"inlineEdit = !inlineEdit\" />\n\n \u003Cnord-toggle label=\"Expand\" checked @change=\"expand = !expand\" />\n \u003C/div>\n\n \u003CBaseEditableField :is-editing>\n \u003CBaseTags\n v-model:is-editing=\"isEditing\"\n v-model:selected-tags=\"selectedTags\"\n :categories=\"[\n { label: 'Vowels', tags: vowels },\n { label: 'Consonants', tags: consonant },\n ]\"\n />\n\n \u003Ctemplate #edit>\n \u003CInputComboboxMultiple\n v-model=\"selectedTags\"\n async\n label=\"Alphabet\"\n hide-label\n :min-chars=\"0\"\n :delay=\"0\"\n :max-displayed-options=\"10\"\n resolve-on-load\n resolve-on-open\n infinite-scroll\n :inline-edit\n :expand\n :options=\"fetchAlphabet\"\n />\n \u003C/template>\n \u003C/BaseEditableField>\n \u003C/div>\n\u003C/template>\n",{"name":790,"displayName":791,"url":792,"code":793},"client-tags","Client tags","/main/#/922/product-patterns/usage-examples/tags/client-tags","\u003Cscript setup lang=\"ts\">\nimport { safeMathRandom } from '@/utils/number.js'\nimport ClientSectionTags from '@/components/ClientSectionTags.vue'\nconst alphabet = Array.from({ length: 26 }, (_, i) =>\n String.fromCharCode(65 + i),\n)\n\n// Values set here to simulate the billing categories\nconst billingTags = ['C', 'W', 'K', 'S']\n\nconst inlineEdit = ref\u003Cboolean>(false)\n\nconst fetchAlphabet = async (query: string) => {\n await new Promise((resolve) =>\n setTimeout(resolve, Math.floor(safeMathRandom() * 500) + 500),\n )\n\n if (query) {\n return alphabet\n .filter((type) => type.toLowerCase().includes(query.toLowerCase()))\n .map((letter) => ({\n label: letter,\n value: letter,\n }))\n }\n\n return alphabet.map((letter) => ({\n label: letter,\n value: letter,\n }))\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Cnord-toggle label=\"Inline-edit\" @change=\"inlineEdit = !inlineEdit\" />\n\n \u003CClientSectionTags\n :form-options=\"fetchAlphabet\"\n :billing-tags\n :inline-edit\n />\n \u003C/div>\n\u003C/template>\n",{"name":795,"displayName":796,"url":797,"code":798},"form-async","Form async","/main/#/922/product-patterns/usage-examples/tags/form-async","\u003Cscript setup lang=\"ts\">\nimport { z } from 'zod'\nimport { useFormValidation } from '@/composables/useFormValidation.js'\nimport { safeMathRandom } from '@/utils/number.js'\nimport BaseEditableField from '@/components/base/editable/Field.vue'\nimport BaseTags from '@/components/base/Tags.vue'\nimport FormComboboxMultiple from '@/components/form/ComboboxMultiple.vue'\n\ntype TagsExampleData = {\n vowels: string[]\n consonant: string[]\n}\n\nconst alphabet = Array.from({ length: 26 }, (_, i) =>\n String.fromCharCode(65 + i),\n)\n\nconst fetchAlphabet = async (query: string) => {\n await new Promise((resolve) =>\n setTimeout(resolve, Math.floor(safeMathRandom() * 500) + 500),\n )\n\n if (query) {\n return alphabet\n .filter((type) => type.toLowerCase().includes(query.toLowerCase()))\n .map((letter) => ({\n label: letter,\n value: letter,\n }))\n }\n\n return alphabet.map((letter) => ({\n label: letter,\n value: letter,\n }))\n}\n\nconst vowels: TagsExampleData['vowels'] = ['A', 'E', 'I', 'O', 'U']\nconst consonant: TagsExampleData['consonant'] = alphabet.filter(\n (char) => !vowels.includes(char),\n)\nconst formSchema = z.object({\n letters: z.string().array().optional(),\n})\nconst validationSchema = toTypedSchema(formSchema)\n\nconst isEditing = ref\u003Cboolean>(false)\nconst inlineEdit = ref\u003Cboolean>(false)\nconst expand = ref\u003Cboolean>(true)\nconst selectedTags = ref\u003Cstring[]>([])\nconst formElement = useTemplateRef('formRef')\n\nconst { handleErrors } = useFormValidation(formElement)\nconst { handleSubmit } = useForm({\n validationSchema,\n keepValuesOnUnmount: true,\n})\n\nconst onSubmit = handleSubmit(\n (data) => console.log(data),\n () => handleErrors(),\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cform\n ref=\"formRef\"\n class=\"n:flex n:flex-col n:flex-wrap n:gap-m\"\n @submit=\"onSubmit\"\n >\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003Cnord-toggle\n label=\"Edit mode\"\n :checked=\"isEditing\"\n @change=\"isEditing = !isEditing\"\n />\n\n \u003Cnord-toggle label=\"Inline-edit\" @change=\"inlineEdit = !inlineEdit\" />\n\n \u003Cnord-toggle label=\"Expand\" checked @change=\"expand = !expand\" />\n\n \u003Cnord-button size=\"s\" variant=\"primary\">Submit\u003C/nord-button>\n \u003C/div>\n\n \u003CBaseEditableField :is-editing>\n \u003CBaseTags\n v-model:is-editing=\"isEditing\"\n v-model:selected-tags=\"selectedTags\"\n :categories=\"[\n { label: 'Vowels', tags: vowels },\n { label: 'Consonants', tags: consonant },\n ]\"\n />\n\n \u003Ctemplate #edit>\n \u003CFormComboboxMultiple\n v-model=\"selectedTags\"\n async\n name=\"letters\"\n label=\"Alphabet\"\n hide-label\n :min-chars=\"0\"\n :delay=\"0\"\n :max-displayed-options=\"10\"\n resolve-on-load\n resolve-on-open\n infinite-scroll\n :inline-edit\n :expand\n :options=\"fetchAlphabet\"\n />\n \u003C/template>\n \u003C/BaseEditableField>\n \u003C/form>\n\u003C/template>\n",{"name":800,"displayName":801,"url":802,"code":803},"form-basic","Form basic","/main/#/922/product-patterns/usage-examples/tags/form-basic","\u003Cscript setup lang=\"ts\">\nimport { z } from 'zod'\nimport { useFormValidation } from '@/composables/useFormValidation.js'\nimport BaseEditableField from '@/components/base/editable/Field.vue'\nimport BaseTags from '@/components/base/Tags.vue'\nimport FormComboboxMultiple from '@/components/form/ComboboxMultiple.vue'\n\ntype TagsExampleData = {\n vowels: string[]\n consonant: string[]\n}\n\nconst alphabet = Array.from({ length: 26 }, (_, i) =>\n String.fromCharCode(65 + i),\n)\nconst vowels: TagsExampleData['vowels'] = ['A', 'E', 'I', 'O', 'U']\nconst consonant: TagsExampleData['consonant'] = alphabet.filter(\n (char) => !vowels.includes(char),\n)\nconst formSchema = z.object({\n letters: z.string().array().min(1, 'You need some letters!'),\n})\nconst validationSchema = toTypedSchema(formSchema)\n\nconst isEditing = ref\u003Cboolean>(false)\nconst inlineEdit = ref\u003Cboolean>(false)\nconst expand = ref\u003Cboolean>(true)\nconst selectedTags = ref\u003Cstring[]>([])\nconst formElement = useTemplateRef('formRef')\n\nconst { handleErrors } = useFormValidation(formElement)\nconst { handleSubmit } = useForm({\n initialValues: { letters: [] },\n validationSchema,\n keepValuesOnUnmount: true,\n})\n\nconst onSubmit = handleSubmit(\n (data) => console.log(data),\n () => handleErrors(),\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cform\n ref=\"formRef\"\n class=\"n:flex n:flex-col n:flex-wrap n:gap-m\"\n @submit=\"onSubmit\"\n >\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003Cnord-toggle\n label=\"Edit mode\"\n :checked=\"isEditing\"\n @change=\"isEditing = !isEditing\"\n />\n\n \u003Cnord-toggle label=\"Inline-edit\" @change=\"inlineEdit = !inlineEdit\" />\n\n \u003Cnord-toggle label=\"Expand\" checked @change=\"expand = !expand\" />\n\n \u003Cnord-button size=\"s\" variant=\"primary\">Submit\u003C/nord-button>\n \u003C/div>\n\n \u003CBaseEditableField :is-editing>\n \u003CBaseTags\n v-model:is-editing=\"isEditing\"\n v-model:selected-tags=\"selectedTags\"\n :categories=\"[\n { label: 'Vowels', tags: vowels },\n { label: 'Consonants', tags: consonant },\n ]\"\n />\n\n \u003Ctemplate #edit>\n \u003CFormComboboxMultiple\n v-model=\"selectedTags\"\n name=\"letters\"\n label=\"Alphabet\"\n hide-label\n :inline-edit\n :expand\n :options=\"\n alphabet.map((letter) => ({ label: letter, value: letter }))\n \"\n />\n \u003C/template>\n \u003C/BaseEditableField>\n \u003C/form>\n\u003C/template>\n",{"name":30,"displayName":31,"url":805,"code":806},"/main/#/922/product-patterns/usage-examples/tags/with-initial-state","\u003Cscript setup lang=\"ts\">\nimport BaseEditableField from '@/components/base/editable/Field.vue'\nimport InputComboboxMultiple from '@/components/input/ComboboxMultiple.vue'\nimport BaseTags from '@/components/base/Tags.vue'\ntype TagsExampleData = {\n vowels: string[]\n consonant: string[]\n}\n\nconst alphabet = Array.from({ length: 26 }, (_, i) =>\n String.fromCharCode(65 + i),\n)\nconst vowels: TagsExampleData['vowels'] = ['A', 'E', 'I', 'O', 'U']\nconst consonant: TagsExampleData['consonant'] = alphabet.filter(\n (char) => !vowels.includes(char),\n)\n\nconst isEditing = ref\u003Cboolean>(true)\nconst inlineEdit = ref\u003Cboolean>(false)\nconst expand = ref\u003Cboolean>(true)\nconst selectedTags = ref\u003Cstring[]>(['C', 'W', 'K', 'S'])\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003Cnord-toggle\n label=\"Edit mode\"\n :checked=\"isEditing\"\n @change=\"isEditing = !isEditing\"\n />\n\n \u003Cnord-toggle label=\"Inline-edit\" @change=\"inlineEdit = !inlineEdit\" />\n\n \u003Cnord-toggle label=\"Expand\" checked @change=\"expand = !expand\" />\n \u003C/div>\n\n \u003CBaseEditableField :is-editing>\n \u003CBaseTags\n v-model:is-editing=\"isEditing\"\n v-model:selected-tags=\"selectedTags\"\n :categories=\"[\n { label: 'Vowels', tags: vowels },\n { label: 'Consonants', tags: consonant },\n ]\"\n />\n\n \u003Ctemplate #edit>\n \u003CInputComboboxMultiple\n v-model=\"selectedTags\"\n label=\"Vowels & Consonants\"\n :inline-edit\n :expand\n :options=\"\n alphabet.map((letter) => ({ label: letter, value: letter }))\n \"\n />\n \u003C/template>\n \u003C/BaseEditableField>\n \u003C/div>\n\u003C/template>\n",{"name":808,"displayName":809,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":810},"pcnf-time-duration","Time Duration",[811,814,819,824],{"name":15,"displayName":16,"url":812,"code":813},"/main/#/922/product-patterns/usage-examples/time-duration/basic","\u003Cscript setup lang=\"ts\">\nimport InputTimeDuration from '@/components/input/TimeDuration.vue'\nconst value = ref\u003Cstring>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputTimeDuration v-model=\"value\" label=\"Duration\" />\n\u003C/template>\n",{"name":815,"displayName":816,"url":817,"code":818},"with-custom-interval","With custom interval","/main/#/922/product-patterns/usage-examples/time-duration/with-custom-interval","\u003Cscript setup lang=\"ts\">\nimport InputTimeDuration from '@/components/input/TimeDuration.vue'\nconst value = ref\u003Cstring>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputTimeDuration v-model=\"value\" label=\"Duration\" :interval=\"15\" />\n\u003C/template>\n",{"name":820,"displayName":821,"url":822,"code":823},"with-custom-min-and-max-duration","With custom min and max duration","/main/#/922/product-patterns/usage-examples/time-duration/with-custom-min-and-max-duration","\u003Cscript setup lang=\"ts\">\nimport InputTimeDuration from '@/components/input/TimeDuration.vue'\nconst value = ref\u003Cstring>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputTimeDuration\n v-model=\"value\"\n label=\"Duration\"\n :min-duration=\"60\"\n :max-duration=\"490\"\n />\n\u003C/template>\n",{"name":235,"displayName":236,"url":825,"code":826},"/main/#/922/product-patterns/usage-examples/time-duration/with-error","\u003Cscript setup lang=\"ts\">\nimport InputTimeDuration from '@/components/input/TimeDuration.vue'\nconst value = ref\u003Cstring>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputTimeDuration\n v-model=\"value\"\n label=\"Duration\"\n :error=\"value ? undefined : 'This field is required'\"\n />\n\u003C/template>\n",{"name":828,"displayName":829,"description":830,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":831},"pcnf-time-picker","Time Picker","Time picker is designed to allow the user to type time or select it from a predefined dropdown menu.",[832],{"name":15,"displayName":16,"url":833,"code":834},"/main/#/922/product-patterns/usage-examples/time-picker/basic","\u003Cscript lang=\"ts\" setup>\nimport InputTimePicker from '@/components/input/TimePicker.vue'\nconst value = ref\u003Cstring>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003CInputTimePicker v-model=\"value\" label=\"Time picker\" />\n\u003C/template>\n",{"name":836,"displayName":837,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":838},"pcnf-toast","Toast",[839,842,847,852],{"name":15,"displayName":16,"url":840,"code":841},"/main/#/922/product-patterns/usage-examples/toast/basic","\u003Cscript setup lang=\"ts\">\nimport { useAddToast } from '@/composables/useToast.js'\nconst addToast = useAddToast()\n\nconst handleAddToast = () => {\n addToast('Message sent')\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Cp>Click the button below to add a toast notification.\u003C/p>\n\n \u003Cnord-button variant=\"primary\" @click=\"handleAddToast\">\n Add toast\n \u003C/nord-button>\n \u003C/div>\n\u003C/template>\n",{"name":843,"displayName":844,"url":845,"code":846},"custom-auto-dismiss","Custom auto dismiss","/main/#/922/product-patterns/usage-examples/toast/custom-auto-dismiss","\u003Cscript setup lang=\"ts\">\nimport { useAddToast } from '@/composables/useToast.js'\nconst addToast = useAddToast()\n\nconst handleShortDismiss = () => {\n addToast('Quick message (1s)', {\n autoDismiss: 1000,\n })\n}\n\nconst handleLongDismiss = () => {\n addToast('Important update (5s)', {\n autoDismiss: 5000,\n })\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Cp>\n By default, toasts auto-dismiss after 3 seconds. This example demonstrates\n how to set a custom auto-dismiss duration.\n \u003C/p>\n\n \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n \u003Cnord-button variant=\"primary\" @click=\"handleShortDismiss\">\n Show quick toast\n \u003C/nord-button>\n\n \u003Cnord-button variant=\"primary\" @click=\"handleLongDismiss\">\n Show longer toast\n \u003C/nord-button>\n \u003C/div>\n \u003C/div>\n\u003C/template>\n",{"name":848,"displayName":849,"url":850,"code":851},"custom-rendering","Custom rendering","/main/#/922/product-patterns/usage-examples/toast/custom-rendering","\u003Cscript setup lang=\"tsx\">\nimport { NuxtLink } from '#components'\nimport { useAddToast } from '@/composables/useToast.js'\n\nconst route = useRoute()\nconst addToast = useAddToast()\n\nconst handleAddToastWithTSX = () => {\n addToast(\n \u003Cspan>\n Credit note \u003CNuxtLink to={route.path}>#12345\u003C/NuxtLink> created\n successfully\n \u003C/span>,\n )\n}\n\nconst handleAddToastWithHFunction = () => {\n addToast(\n h('span', [\n 'Invoice Payment ',\n h(\n NuxtLink,\n {\n to: route.path,\n },\n () => '#67890',\n ),\n ' updated successfully',\n ]),\n )\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Cp>\n You can use TSX or Vue's h() function to create custom toast content with\n interactive elements like links.\n \u003C/p>\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Ch3 class=\"n:typeset n:font-heading\">Using TSX\u003C/h3>\n \u003Cp>TSX provides a familiar React-like syntax for creating VNodes.\u003C/p>\n \u003Cnord-button variant=\"primary\" @click=\"handleAddToastWithTSX\">\n Show toast with TSX\n \u003C/nord-button>\n \u003C/div>\n\n \u003Cnord-divider />\n\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Ch3 class=\"n:typeset n:font-heading\">Using h() Function\u003C/h3>\n \u003Cp>\n Vue's h() function offers programmatic control over creating VNodes.\n \u003C/p>\n \u003Cnord-button variant=\"primary\" @click=\"handleAddToastWithHFunction\">\n Show toast with h()\n \u003C/nord-button>\n \u003C/div>\n \u003C/div>\n \u003C/div>\n\u003C/template>\n",{"name":853,"displayName":854,"url":855,"code":856},"error","Error","/main/#/922/product-patterns/usage-examples/toast/error","\u003Cscript setup lang=\"ts\">\nimport { useAddToast } from '@/composables/useToast.js'\nconst addToast = useAddToast()\n\nconst handleAddErrorToast = () => {\n addToast('No internet connection', {\n variant: 'danger',\n })\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n \u003Cp>\n Error toasts use the danger variant to indicate that something went wrong.\n \u003C/p>\n\n \u003Cnord-button variant=\"primary\" @click=\"handleAddErrorToast\">\n Add error toast\n \u003C/nord-button>\n \u003C/div>\n\u003C/template>\n",null,[859,865,870,874,879,883,888,892,897,902,906,910,914,919,923,927,931,935,939,943,947,951,955,959,963,967,972,976,980,984,988,992,996,1000,1004,1008,1012,1016,1020,1024,1028,1032,1036,1040,1044,1048,1053,1057,1062,1066,1070,1073,1077,1081,1085,1089],{"name":860,"tagName":861,"description":862,"category":863,"status":864},"Avatar","nord-avatar","Avatar is used for showing a thumbnail representation of a single user or entity.\nDefault avatar illustration is displayed when no src is specified.","image","ready",{"name":866,"tagName":867,"description":868,"category":869,"status":864},"Badge","nord-badge","Badges are used to inform users of the status of an object\nor of an action that’s been taken. Commonly used in tabular\ndata to indicate status.","feedback",{"name":871,"tagName":872,"description":873,"category":869,"status":864},"Banner","nord-banner","Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",{"name":875,"tagName":876,"description":877,"category":878,"status":864},"Button","nord-button","Buttons are used for interface actions. Primary style should be\nused only once per section for main call-to-action, while other\nstyles can appear more frequently.","action",{"name":880,"tagName":881,"description":882,"category":878,"status":864},"ButtonGroup","nord-button-group","Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.",{"name":884,"tagName":885,"description":886,"category":887,"status":864},"Calendar","nord-calendar","Calendar allows user to pick a date. It comes with built-in\nfunctionality that allows you to set a minimum and a maximum allowed date.\nPlease note that the date must be passed in ISO-8601 format.","structure",{"name":889,"tagName":890,"description":891,"category":887,"status":864},"Card","nord-card","Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",{"name":893,"tagName":894,"description":895,"category":896,"status":864},"Checkbox","nord-checkbox","Checkboxes allow user to choose one or more options from a limited set of options.\nIf you have more than 10 options, please use Select component instead.","form",{"name":898,"tagName":899,"description":900,"category":887,"status":901},"CommandMenu","nord-command-menu","Command Menu allows users to navigate and use an app without\ntouching the mouse and helps them transform into “power users”\nwho can harness more advanced features far faster.","new",{"name":903,"tagName":904,"description":905,"category":896,"status":864},"DatePicker","nord-date-picker","\nDate Picker allows user to enter a date either through text input,\nor by choosing a date from the calendar. Please note that the date\nmust be passed in ISO-8601 format: YYYY-MM-DD.",{"name":907,"tagName":908,"description":909,"category":887,"status":864},"Divider","nord-divider","Divider components are used to separate and distinguish sections of\ncontent or groups of menu items. Visually, they look like\nhorizontal or vertical lines.",{"name":911,"tagName":912,"description":913,"category":887,"status":864},"Drawer","nord-drawer","Drawer is used to display context-sensitive actions and information.\nDrawer doesn’t block users from completing their task, like a modal would.",{"name":915,"tagName":916,"description":917,"category":918,"status":864},"Dropdown","nord-dropdown","Dropdown menu displays a list of actions or selectable options for\na user. Dropdown uses popout component internally to create\nthe overlay functionality.","overlay",{"name":920,"tagName":921,"description":922,"category":918,"status":864},"DropdownGroup","nord-dropdown-group","Dropdown group includes all the actions or items in a single dropdown\ngroup and is used for grouping items into related categories.",{"name":924,"tagName":925,"description":926,"category":918,"status":864},"DropdownItem","nord-dropdown-item","Dropdown item populates dropdown with actions. Items can be\nplaced either inside a dropdown group or directly inside a\ndropdown component.",{"name":928,"tagName":929,"description":930,"category":887,"status":864},"DropdownSubmenu","nord-dropdown-submenu","Dropdown submenu nests a secondary menu within a parent dropdown.\nThe trigger slot contains the item that opens the submenu, and the default slot contains the submenu items.\n\nSupports both hover (non-touch) and click (touch-devices/accessibility) interactions.\n\nOn small screens, uses mobile stack navigation: tapping a submenu trigger replaces the\ndropdown's visible content with the submenu's items and shows a back button.",{"name":932,"tagName":933,"description":934,"category":869,"status":864},"EmptyState","nord-empty-state","Empty state can be used when there is no data to display to\ndescribe what the user can do next. Empty state provides\nexplanation and guidance to help user progress.",{"name":936,"tagName":937,"description":938,"category":887,"status":864},"Fieldset","nord-fieldset","Fieldset is used for grouping sets of input components.\nIt is necessary to use a fieldset with radio and checkbox components.\nIt can also be useful for logically grouping other types of inputs.",{"name":940,"tagName":941,"description":942,"category":887,"status":864},"Footer","nord-footer","The footer is a block of designated space for providing additional information or actions that are positioned below the main content.",{"name":944,"tagName":945,"description":946,"category":887,"status":864},"Header","nord-header","The header is a block of designated space for labelling the currently\nviewed context as well as providing primary actions.",{"name":948,"tagName":949,"description":950,"category":863,"status":864},"Icon","nord-icon","Icons are used to provide additional meaning or in places where text label doesn’t fit.\nIcon component allows you to display an icon from the Nordicons library.",{"name":952,"tagName":953,"description":954,"category":896,"status":864},"Input","nord-input","Inputs are used to allow users to provide text input when the expected input is short.\nAs well as plain text, Input supports various types of text, including passwords and numbers.",{"name":956,"tagName":957,"description":958,"category":887,"status":864},"Layout","nord-layout","Layout component is used to create the main layout of an app. Layout\ncurrently comes with one main configuration: two-column.",{"name":960,"tagName":961,"description":962,"category":887,"status":864},"Message","nord-message","Message represents a specific item within a collection,\nsuch as notifications, tasks or conversations. Message\ncan be placed directly inside a dropdown component.",{"name":964,"tagName":965,"description":966,"category":918,"status":864},"Modal","nord-modal","Modal component is used to display content that temporarily blocks interactions\nwith the main view of an application. Modal should be used sparingly and\nonly when necessary.",{"name":968,"tagName":969,"description":970,"category":971,"status":864},"NavGroup","nord-nav-group","Navigation group includes all the actions or items in a single\ngroup and is used for grouping items into related categories.","navigation",{"name":973,"tagName":974,"description":975,"category":971,"status":864},"Navigation","nord-navigation","Navigation is used to display the primary navigation in the sidebar\nof an application. Navigation includes a list of links that users\nuse to move between sections of the application.",{"name":977,"tagName":978,"description":979,"category":971,"status":864},"NavItem","nord-nav-item","Navigation item populates sidebar navigation with links.\nEvery item should be placed inside a navigation group.",{"name":981,"tagName":982,"description":983,"category":971,"status":864},"NavToggle","nord-nav-toggle","Nav toggle is meant for hiding and showing the primary navigation.\nThis component is used internally in the Layout component, but can also be\nused separate to further customize the behavior.",{"name":985,"tagName":986,"description":987,"category":887,"status":864},"Notification","nord-notification","Notifications provide important information that requires action or acknowledgement.\nA notification is displayed until the user dismisses it.",{"name":989,"tagName":990,"description":991,"category":887,"status":864},"NotificationGroup","nord-notification-group","Notification group is used to position and style a group of notifications.",{"name":993,"tagName":994,"description":995,"category":918,"status":864},"Popout","nord-popout","Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.",{"name":997,"tagName":998,"description":999,"category":869,"status":864},"Progress","nord-progress","Progress component is used to display a circular pie-chart style progress indicator.\nYou can customize the size and color of the progress indicator with the\nprovided properties.",{"name":1001,"tagName":1002,"description":1003,"category":887,"status":864},"ProgressBar","nord-progress-bar","Progress Bar is used to visually represent the completion\nof a task or process. It shows how much of the task has\nbeen completed and how much is still left.",{"name":1005,"tagName":1006,"description":1007,"category":887,"status":864},"Qrcode","nord-qrcode","QR Code component is used for providing information or links\nto users which they can quickly scan with their smartphone.",{"name":1009,"tagName":1010,"description":1011,"category":896,"status":864},"Radio","nord-radio","Radio buttons are graphical user interface elements that allow user to choose only one option from\na predefined set of mutually exclusive options.",{"name":1013,"tagName":1014,"description":1015,"category":896,"status":864},"Range","nord-range","Range input lets user specify a numeric value using a slider which\nmust be no less than a given value, and no more than another given value.",{"name":1017,"tagName":1018,"description":1019,"category":887,"status":864},"SegmentedControl","nord-segmented-control","Segmented control is used to pick one choice from a set of\nclosely related choices, and immediately apply that selection.",{"name":1021,"tagName":1022,"description":1023,"category":887,"status":864},"SegmentedControlItem","nord-segmented-control-item","Segmented control items populate a segmented control with options.\nEvery item should be placed inside a segmented control.",{"name":1025,"tagName":1026,"description":1027,"category":896,"status":864},"Select","nord-select","Select lets users choose one option from an options menu.\nConsider using select when you have 5 or more options to choose from.",{"name":1029,"tagName":1030,"description":1031,"category":887,"status":864},"Skeleton","nord-skeleton","Skeletons are used to provide a low fidelity representation of content\nbefore it appears in a view. This improves the perceived loading time\nfor our users.",{"name":1033,"tagName":1034,"description":1035,"category":869,"status":864},"Spinner","nord-spinner","Spinner component is used to indicate users that their action is being\nprocessed. You can customize the size and color of the spinner with the\nprovided properties.",{"name":1037,"tagName":1038,"description":1039,"category":887,"status":864},"Stack","nord-stack","Stack component manages layout of immediate children along the\nvertical or horizontal axis with optional spacing between each child.",{"name":1041,"tagName":1042,"description":1043,"category":887,"status":864},"Tab","nord-tab","The interactive tab button for use within the tab group component.",{"name":1045,"tagName":1046,"description":1047,"category":971,"status":864},"TabGroup","nord-tab-group","Tab Group allows multiple panels to be contained within a single window,\nusing tabs as a navigational element.",{"name":1049,"tagName":1050,"description":1051,"category":1052,"status":864},"Table","nord-table","Table is used to organize and display information from a data set.\nProvides table styles in addition to features like sticky\nheaders and support for narrow viewports.","list",{"name":1054,"tagName":1055,"description":1056,"category":971,"status":864},"TabPanel","nord-tab-panel","The panel which contains content that can be revealed using a tab\nin the tab group component.",{"name":1058,"tagName":1059,"description":1060,"category":1061,"status":864},"Tag","nord-tag","Tags represent a set of keywords that help label, categorize,\nand organize objects. Commonly used to signify the attributes of an object.","text",{"name":1063,"tagName":1064,"description":1065,"category":887,"status":864},"TagGroup","nord-tag-group","Tag groups are designed to bring together selectable tags that are of a similar nature. For example categories you can filter by.",{"name":1067,"tagName":1068,"description":1069,"category":896,"status":864},"Textarea","nord-textarea","Textarea is a component that allows user to write text over\nmultiple rows. Used when the expected user input is long.\nFor shorter input, use the Input component.",{"name":837,"tagName":1071,"description":1072,"category":869,"status":864},"nord-toast","Toasts are non-disruptive messages that appear in the interface\nto provide quick, at-a-glance feedback on the outcome of an action.",{"name":1074,"tagName":1075,"description":1076,"category":869,"status":864},"ToastGroup","nord-toast-group","Toast group is used to position and style a group of toasts, whilst ensuring they are announced by screen readers.",{"name":1078,"tagName":1079,"description":1080,"category":896,"status":864},"Toggle","nord-toggle","Toggle switch gives control over a feature or option that can be\nturned on or off. If a physical switch would work for the action, a\ntoggle is probably the best component to use.",{"name":1082,"tagName":1083,"description":1084,"category":918,"status":864},"Tooltip","nord-tooltip","Tooltips are floating containers for displaying additional information\nfor the currently focused element. A tooltip can be useful when you want\nto e.g. give a hint about an existing Command Menu shortcut.",{"name":1086,"tagName":1087,"description":1088,"category":887,"status":864},"TopBar","nord-top-bar","Top bar is a header component that is always visible at the top of the interface. Top bar allows functionality such as search and contextual menus to be placed at the top of the interface.",{"name":1090,"tagName":1091,"description":1092,"category":1061,"status":864},"VisuallyHidden","nord-visually-hidden","Visually hidden is used when an element needs to be available\nto assistive technologies like screen readers, but be otherwise\nhidden.",[1094,1100,1110,1115,1121,1124,1132,1139,1153,1160,1170,1180,1190,1195,1199,1203,1206,1219,1231,1235,1239,1243,1250,1256,1261,1269,1272,1285,1290,1296,1304,1310,1313],{"name":5,"displayName":6,"description":7,"usageContent":8,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1095},[1096,1097,1098,1099],{"name":15,"displayName":16,"url":17,"code":18},{"name":20,"displayName":21,"url":22,"code":23},{"name":25,"displayName":26,"url":27,"code":28},{"name":30,"displayName":31,"url":32,"code":33},{"name":35,"displayName":36,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1101},[1102,1103,1104,1105,1106,1107,1108,1109],{"name":15,"displayName":16,"url":39,"code":40},{"name":42,"displayName":43,"url":44,"code":45},{"name":25,"displayName":26,"url":47,"code":48},{"name":50,"displayName":51,"url":52,"code":53},{"name":55,"displayName":56,"url":57,"code":58},{"name":60,"displayName":61,"url":62,"code":63},{"name":65,"displayName":66,"url":67,"code":68},{"name":30,"displayName":31,"url":70,"code":71},{"name":73,"displayName":74,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1111},[1112,1113,1114],{"name":15,"displayName":16,"url":77,"code":78},{"name":80,"displayName":81,"url":82,"code":83},{"name":85,"displayName":86,"url":87,"code":88},{"name":90,"displayName":91,"description":92,"usageContent":93,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1116},[1117,1118,1119,1120],{"name":15,"displayName":16,"url":96,"code":97},{"name":99,"displayName":100,"url":101,"code":102},{"name":104,"displayName":105,"url":106,"code":107},{"name":109,"displayName":110,"url":111,"code":112},{"name":114,"displayName":115,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1122},[1123],{"name":15,"displayName":16,"url":118,"code":119},{"name":121,"displayName":122,"description":123,"usageContent":124,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1125},[1126,1127,1128,1129,1130,1131],{"name":15,"displayName":16,"url":127,"code":128},{"name":25,"displayName":26,"url":130,"code":131},{"name":133,"displayName":134,"url":135,"code":136},{"name":30,"displayName":31,"url":138,"code":139},{"name":141,"displayName":142,"url":143,"code":144},{"name":146,"displayName":147,"url":148,"code":149},{"name":151,"displayName":152,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1133},[1134,1135,1136,1137,1138],{"name":15,"displayName":16,"url":155,"code":156},{"name":158,"displayName":159,"url":160,"code":161},{"name":163,"displayName":164,"url":165,"code":166},{"name":168,"displayName":169,"url":170,"code":171},{"name":173,"displayName":174,"url":175,"code":176},{"name":178,"displayName":179,"description":180,"usageContent":181,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1140},[1141,1142,1143,1144,1145,1146,1147,1148,1149,1150,1151,1152],{"name":15,"displayName":16,"url":184,"code":185},{"name":187,"displayName":188,"url":189,"code":190},{"name":192,"displayName":193,"url":194,"code":195},{"name":25,"displayName":26,"url":197,"code":198},{"name":200,"displayName":201,"url":202,"code":203},{"name":205,"displayName":206,"url":207,"code":208},{"name":210,"displayName":211,"url":212,"code":213},{"name":215,"displayName":216,"url":217,"code":218},{"name":220,"displayName":221,"url":222,"code":223},{"name":225,"displayName":226,"url":227,"code":228},{"name":230,"displayName":231,"url":232,"code":233},{"name":235,"displayName":236,"url":237,"code":238},{"name":240,"displayName":241,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1154},[1155,1156,1157,1158,1159],{"name":244,"displayName":245,"url":246,"code":247},{"name":249,"displayName":250,"url":251,"code":252},{"name":254,"displayName":255,"url":256,"code":257},{"name":259,"displayName":260,"url":261,"code":262},{"name":264,"displayName":265,"url":266,"code":267},{"name":269,"displayName":270,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1161},[1162,1163,1164,1165,1166,1167,1168,1169],{"name":15,"displayName":16,"url":273,"code":274},{"name":276,"displayName":277,"url":278,"code":279},{"name":281,"displayName":282,"url":283,"code":284},{"name":286,"displayName":287,"url":288,"code":289},{"name":291,"displayName":292,"url":293,"code":294},{"name":296,"displayName":297,"url":298,"code":299},{"name":301,"displayName":302,"url":303,"code":304},{"name":306,"displayName":307,"url":308,"code":309},{"name":311,"displayName":312,"description":313,"usageContent":314,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1171},[1172,1173,1174,1175,1176,1177,1178,1179],{"name":15,"displayName":16,"url":317,"code":318},{"name":320,"displayName":321,"url":322,"code":323},{"name":325,"displayName":326,"url":327,"code":328},{"name":330,"displayName":331,"url":332,"code":333},{"name":25,"displayName":26,"url":335,"code":336},{"name":338,"displayName":339,"url":340,"code":341},{"name":343,"displayName":344,"url":345,"code":346},{"name":348,"displayName":349,"url":350,"code":351},{"name":353,"displayName":354,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1181},[1182,1183,1184,1185,1186,1187,1188,1189],{"name":15,"displayName":16,"url":357,"code":358},{"name":360,"displayName":361,"url":362,"code":363},{"name":365,"displayName":366,"url":367,"code":368},{"name":370,"displayName":371,"url":372,"code":373},{"name":375,"displayName":376,"url":377,"code":378},{"name":380,"displayName":381,"url":382,"code":383},{"name":385,"displayName":386,"url":387,"code":388},{"name":390,"displayName":391,"url":392,"code":393},{"name":395,"displayName":396,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1191},[1192,1193,1194],{"name":15,"displayName":16,"url":399,"code":400},{"name":402,"displayName":403,"url":404,"code":405},{"name":407,"displayName":408,"url":409,"code":410},{"name":412,"displayName":413,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1196},[1197,1198],{"name":15,"displayName":16,"url":416,"code":417},{"name":419,"displayName":420,"url":421,"code":422},{"name":424,"displayName":425,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1200},[1201,1202],{"name":15,"displayName":16,"url":428,"code":429},{"name":431,"displayName":432,"url":433,"code":434},{"name":436,"displayName":437,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1204},[1205],{"name":15,"displayName":16,"url":440,"code":441},{"name":443,"displayName":444,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1207},[1208,1209,1210,1211,1212,1213,1214,1215,1216,1217,1218],{"name":15,"displayName":16,"url":447,"code":448},{"name":450,"displayName":451,"url":452,"code":453},{"name":205,"displayName":206,"url":455,"code":456},{"name":458,"displayName":459,"url":460,"code":461},{"name":463,"displayName":464,"url":465,"code":466},{"name":468,"displayName":469,"url":470,"code":471},{"name":473,"displayName":474,"url":475,"code":476},{"name":478,"displayName":479,"url":480,"code":481},{"name":483,"displayName":484,"url":485,"code":486},{"name":488,"displayName":489,"url":490,"code":491},{"name":493,"displayName":494,"url":495,"code":496},{"name":498,"displayName":499,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1220},[1221,1222,1223,1224,1225,1226,1227,1228,1229,1230],{"name":15,"displayName":16,"url":502,"code":503},{"name":505,"displayName":506,"url":507,"code":508},{"name":510,"displayName":511,"url":512,"code":513},{"name":515,"displayName":516,"url":517,"code":518},{"name":520,"displayName":521,"url":522,"code":523},{"name":525,"displayName":526,"url":527,"code":528},{"name":530,"displayName":531,"url":532,"code":533},{"name":535,"displayName":536,"url":537,"code":538},{"name":540,"displayName":541,"url":542,"code":543},{"name":545,"displayName":546,"url":547,"code":548},{"name":550,"displayName":551,"description":552,"usageContent":553,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1232},[1233,1234],{"name":15,"displayName":16,"url":556,"code":557},{"name":493,"displayName":494,"url":559,"code":560},{"name":562,"displayName":521,"description":563,"usageContent":564,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1236},[1237,1238],{"name":15,"displayName":16,"url":567,"code":568},{"name":570,"displayName":571,"url":572,"code":573},{"name":575,"displayName":576,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1240},[1241,1242],{"name":15,"displayName":16,"url":579,"code":580},{"name":582,"displayName":583,"url":584,"code":585},{"name":587,"displayName":588,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1244},[1245,1246,1247,1248,1249],{"name":15,"displayName":16,"url":591,"code":592},{"name":419,"displayName":420,"url":594,"code":595},{"name":402,"displayName":403,"url":597,"code":598},{"name":600,"displayName":601,"url":602,"code":603},{"name":605,"displayName":606,"url":607,"code":608},{"name":610,"displayName":611,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1251},[1252,1253,1254,1255],{"name":15,"displayName":16,"url":614,"code":615},{"name":600,"displayName":601,"url":617,"code":618},{"name":620,"displayName":621,"url":622,"code":623},{"name":625,"displayName":626,"url":627,"code":628},{"name":630,"displayName":631,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1257},[1258,1259,1260],{"name":15,"displayName":16,"url":634,"code":635},{"name":637,"displayName":638,"url":639,"code":640},{"name":642,"displayName":643,"url":644,"code":645},{"name":647,"displayName":648,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1262},[1263,1264,1265,1266,1267,1268],{"name":15,"displayName":16,"url":651,"code":652},{"name":654,"displayName":655,"url":656,"code":657},{"name":659,"displayName":660,"url":661,"code":662},{"name":664,"displayName":665,"url":666,"code":667},{"name":669,"displayName":670,"url":671,"code":672},{"name":674,"displayName":675,"url":676,"code":677},{"name":679,"displayName":680,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1270},[1271],{"name":15,"displayName":16,"url":683,"code":684},{"name":686,"displayName":687,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1273},[1274,1275,1276,1277,1278,1279,1280,1281,1282,1283,1284],{"name":15,"displayName":16,"url":690,"code":691},{"name":693,"displayName":694,"url":695,"code":696},{"name":698,"displayName":699,"url":700,"code":701},{"name":703,"displayName":704,"url":705,"code":706},{"name":708,"displayName":709,"url":710,"code":711},{"name":220,"displayName":221,"url":713,"code":714},{"name":716,"displayName":717,"url":718,"code":719},{"name":235,"displayName":236,"url":721,"code":722},{"name":674,"displayName":675,"url":724,"code":725},{"name":727,"displayName":728,"url":729,"code":730},{"name":732,"displayName":733,"url":734,"code":735},{"name":737,"displayName":738,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1286},[1287,1288,1289],{"name":741,"displayName":742,"url":743,"code":744},{"name":746,"displayName":747,"url":748,"code":749},{"name":751,"displayName":752,"url":753,"code":754},{"name":756,"displayName":757,"description":758,"usageContent":759,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1291},[1292,1293,1294,1295],{"name":15,"displayName":16,"url":762,"code":763},{"name":765,"displayName":766,"url":767,"code":768},{"name":99,"displayName":100,"url":770,"code":771},{"name":773,"displayName":774,"url":775,"code":776},{"name":778,"displayName":779,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1297},[1298,1299,1300,1301,1302,1303],{"name":15,"displayName":16,"url":782,"code":783},{"name":785,"displayName":786,"url":787,"code":788},{"name":790,"displayName":791,"url":792,"code":793},{"name":795,"displayName":796,"url":797,"code":798},{"name":800,"displayName":801,"url":802,"code":803},{"name":30,"displayName":31,"url":805,"code":806},{"name":808,"displayName":809,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1305},[1306,1307,1308,1309],{"name":15,"displayName":16,"url":812,"code":813},{"name":815,"displayName":816,"url":817,"code":818},{"name":820,"displayName":821,"url":822,"code":823},{"name":235,"displayName":236,"url":825,"code":826},{"name":828,"displayName":829,"description":830,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1311},[1312],{"name":15,"displayName":16,"url":833,"code":834},{"name":836,"displayName":837,"product":9,"availability":10,"productColor":11,"examplesBaseURL":12,"examples":1314},[1315,1316,1317,1318],{"name":15,"displayName":16,"url":840,"code":841},{"name":843,"displayName":844,"url":845,"code":846},{"name":848,"displayName":849,"url":850,"code":851},{"name":853,"displayName":854,"url":855,"code":856},[1320,1330,1345,1382,1430,1436,1441,1448,1557,1564,1601,1616,1620,1624,1627,1630,1634,1638,1642,1646,1650],{"title":1321,"path":1322,"stem":1323,"children":1324},"Getting Started","/start","02.start/01.index",[1325,1326],{"title":1321,"path":1322,"stem":1323},{"title":1327,"path":1328,"stem":1329},"About Nord","/start/about","02.start/02.about",{"title":1331,"path":1332,"stem":1333,"children":1334,"icon":1344},"What's New","/new","03.new/00.index",[1335,1338,1341],{"path":1336,"title":1337},"/changelogs/web-components","Changelog",{"path":1339,"title":1340},"/updates","Latest Updates",{"path":1342,"title":1343},"/migrations","Migrations","i-lucide-sparkles",{"title":1346,"path":1347,"stem":1348,"children":1349},"Design Tokens","/tokens","04.tokens/index",[1350,1353,1356,1359,1362,1365,1368,1370,1373,1376,1379],{"path":1351,"title":1352},"#color","Color",{"path":1354,"title":1355},"#border-radius","Border Radius",{"path":1357,"title":1358},"#box-shadow","Box Shadow",{"path":1360,"title":1361},"#font-size","Font Size",{"path":1363,"title":1364},"#font","Font",{"path":1366,"title":1367},"#line-height","Line Height",{"path":1369,"title":494},"#size",{"path":1371,"title":1372},"#space","Space",{"path":1374,"title":1375},"#transition","Transition",{"path":1377,"title":1378},"#z-index","Z-index",{"path":1380,"title":1381},"#usage","Usage",{"title":1383,"path":1384,"stem":1385,"children":1386,"order":1429},"Guidelines","/guidelines","05.guidelines/0.index",[1387,1390,1393,1396,1399,1402,1405,1408,1411,1414,1417,1420,1423,1426],{"path":1388,"title":1389},"/accessibility-checklist","Accessibility",{"path":1391,"title":1392},"/colors","Color System",{"path":1394,"title":1395},"/color-utilities","Color Utilities",{"path":1397,"title":1398},"/cdn","Content Delivery Network",{"path":1400,"title":1401},"/principles","Principles",{"path":1403,"title":1404},"/figma","Figma Toolkit",{"path":1406,"title":1407},"/grid","Grid",{"path":1409,"title":1410},"/iconography","Iconography",{"path":1412,"title":1413},"/localization","Localization",{"path":1415,"title":1416},"/naming","Naming",{"path":1418,"title":1419},"/brand","Nordhealth Brand",{"path":1421,"title":1422},"/typography","Typography",{"path":1424,"title":1425},"/web-components","Web Components",{"path":1427,"title":1428},"/webfonts","Webfonts",4,{"title":1425,"path":1431,"stem":1432,"children":1433,"order":1435},"/components","06.components/index",[1434],{"title":1425,"path":1431,"stem":1432,"order":1435},6,{"title":1437,"path":1438,"stem":1439,"order":1440},"Community Assets","/community-assets","07.community-assets",7,{"title":1442,"path":1443,"stem":1444,"children":1445,"order":1447},"Templates","/templates","08.templates/index",[1446],{"title":1442,"path":1443,"stem":1444,"order":1447},8,{"title":1449,"path":1450,"stem":1451,"children":1452},"CSS","/css","09.css/00.index",[1453,1500,1537],{"path":1454,"title":1455,"children":1456},"/css/tailwind/","Tailwind CSS",[1457,1460,1462,1465,1468,1471,1474,1477,1480,1483,1486,1489,1492,1494,1497],{"path":1458,"title":1459},"/css/tailwind/#installation","Installation",{"path":1461,"title":1381},"/css/tailwind/#usage",{"path":1463,"title":1464},"/css/tailwind/#peer-dependencies","Peer Dependencies",{"path":1466,"title":1467},"/css/tailwind/#theme-variables","Theme Variables",{"path":1469,"title":1470},"/css/tailwind/#logical-properties","Logical Properties",{"path":1472,"title":1473},"/css/tailwind/#typography-examples","Typography Examples",{"path":1475,"title":1476},"/css/tailwind/#color-examples","Color Examples",{"path":1478,"title":1479},"/css/tailwind/#border-examples","Border Examples",{"path":1481,"title":1482},"/css/tailwind/#shadow-examples","Shadow Examples",{"path":1484,"title":1485},"/css/tailwind/#miscellaneous-utilities","Miscellaneous Utilities",{"path":1487,"title":1488},"/css/tailwind/#nord-components","Nord Components",{"path":1490,"title":1491},"/css/tailwind/#form-utilities","Form Utilities",{"path":1493,"title":1407},"/css/tailwind/#grid",{"path":1495,"title":1496},"/css/tailwind/#states-hover-focus-etc","States (Hover, Focus, etc.)",{"path":1498,"title":1499},"/css/tailwind/#extending-the-theme","Extending the Theme",{"path":1501,"title":1502,"children":1503},"/css/css-framework/","Legacy CSS Framework",[1504,1506,1508,1511,1514,1517,1520,1522,1525,1528,1531,1534],{"path":1505,"title":1459},"/css/css-framework/#installation",{"path":1507,"title":1381},"/css/css-framework/#usage",{"path":1509,"title":1510},"/css/css-framework/#utilities","Utilities",{"path":1512,"title":1513},"/css/css-framework/#reset-utility","Reset Utility",{"path":1515,"title":1516},"/css/css-framework/#typographic-utilities","Typographic Utilities",{"path":1518,"title":1519},"/css/css-framework/#font-size-utilities","Font Size Utilities",{"path":1521,"title":1395},"/css/css-framework/#color-utilities",{"path":1523,"title":1524},"/css/css-framework/#border-utilities","Border Utilities",{"path":1526,"title":1527},"/css/css-framework/#box-shadow-utilities","Box Shadow Utilities",{"path":1529,"title":1530},"/css/css-framework/#grid-and-container-utilities","Grid & Container Utilities",{"path":1532,"title":1533},"/css/css-framework/#spacing-utilities","Spacing Utilities",{"path":1535,"title":1536},"/css/css-framework/#css-custom-properties","CSS Custom Properties",{"path":1538,"title":1539,"children":1540},"/css/eslint/","ESLint Plugin",[1541,1543,1545,1548,1551,1554],{"path":1542,"title":1459},"/css/eslint/#installation",{"path":1544,"title":1381},"/css/eslint/#usage",{"path":1546,"title":1547},"/css/eslint/#nord-rules","Nord Rules",{"path":1549,"title":1550},"/css/eslint/#tailwind-rules","Tailwind Rules",{"path":1552,"title":1553},"/css/eslint/#custom-configuration","Custom Configuration",{"path":1555,"title":1556},"/css/eslint/#class-detection","Class Detection",{"title":1558,"path":1559,"stem":1560,"children":1561,"order":1563},"Nordicons","/nordicons","10.nordicons/index",[1562],{"title":1558,"path":1559,"stem":1560,"order":1563},10,{"title":1565,"path":1566,"stem":1567,"children":1568},"Themes","/themes","11.themes/index",[1569,1572,1574,1577,1580,1583,1586,1589,1592,1595,1598],{"path":1570,"title":1571},"#top","Overview",{"path":1573,"title":1459},"#installation",{"path":1575,"title":1576},"#available-themes","Available Themes",{"path":1578,"title":1579},"#examples","Examples",{"path":1581,"title":1582},"#dark-mode","Dark Mode",{"path":1584,"title":1585},"#creating-themes","Creating Themes",{"path":1587,"title":1588},"#accent-color","Accent Color",{"path":1590,"title":1591},"#top-bar-theming","Top Bar theming",{"path":1593,"title":1594},"#logo-usage","Logo Usage",{"path":1596,"title":1597},"#theming-in-figma","Theming in Figma",{"path":1599,"title":1600},"#theme-builder","Theme Builder",{"title":1602,"path":1603,"stem":1604,"children":1605},"AI","/ai","12.ai/0.index",[1606,1608,1612],{"title":1607,"path":1603,"stem":1604},"AI Integration",{"title":1609,"path":1610,"stem":1611},"LLMs.txt","/ai/llms-txt","12.ai/02.llms-txt",{"title":1613,"path":1614,"stem":1615},"Agent Skills","/ai/skills","12.ai/03.skills",{"title":1617,"path":1618,"stem":1619},"Downloads","/downloads","13.downloads",{"title":1621,"path":1622,"stem":1623},"FAQ","/faq","14.faq",{"title":1327,"path":1625,"stem":1626},"/about","about",{"title":1389,"path":1628,"stem":1629},"/accessibility","accessibility",{"title":1631,"path":1632,"stem":1633},"Backlog Prioritization Model","/backlog-prioritization-model","backlog-prioritization-model",{"title":1635,"path":1636,"stem":1637},"Careers","/careers","careers",{"title":1639,"path":1640,"stem":1641},"Contributing","/contributing","contributing",{"title":1643,"path":1644,"stem":1645},"Help & Feedback","/help","help",{"title":1647,"path":1648,"stem":1649},"","/","index",{"title":1651,"path":1652,"stem":1653},"Terms of Use","/terms","terms",1775650617262]