New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

nav-frontend-skjema

Package Overview
Dependencies
Maintainers
32
Versions
194
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

nav-frontend-skjema - npm Package Compare versions

Comparing version 3.0.25 to 3.0.26

lib/checkboks-panel.d.ts

16

lib/checkboks-panel-gruppe.d.ts
import * as React from "react";
import { CheckboksPanelProps } from ".";
import "nav-frontend-skjema-style";
export interface CheckboksPanelProps extends React.InputHTMLAttributes<HTMLInputElement> {
label: React.ReactNode;
subtext?: string;
}
export interface CheckboksPanelState {
checked: boolean;
hasFocus: boolean;
}
export declare class CheckboksPanel extends React.Component<CheckboksPanelProps, CheckboksPanelState> {
constructor(props: CheckboksPanelProps);
UNSAFE_componentWillReceiveProps(newProps: any): void;
handleChange: (e: any) => void;
toggleOutline(): void;
render(): JSX.Element;
}
export interface CheckboksPanelGruppeProps {

@@ -19,0 +5,0 @@ /**

@@ -14,79 +14,12 @@ "use strict";

Object.defineProperty(exports, "__esModule", { value: true });
exports.CheckboksPanel = void 0;
/* eslint-disable max-classes-per-file */
var React = require("react");
var PT = require("prop-types");
var classNames = require("classnames");
var _1 = require(".");
require("nav-frontend-skjema-style");
var nav_frontend_js_utils_1 = require("nav-frontend-js-utils");
require("nav-frontend-skjema-style");
var _1 = require(".");
var classnames_1 = require("classnames");
var CheckboksPanel = function (_React$Component) {
_inherits(CheckboksPanel, _React$Component);
var CheckboksPanelGruppe = function (_React$Component) {
_inherits(CheckboksPanelGruppe, _React$Component);
function CheckboksPanel(props) {
_classCallCheck(this, CheckboksPanel);
var _this = _possibleConstructorReturn(this, (CheckboksPanel.__proto__ || Object.getPrototypeOf(CheckboksPanel)).call(this, props));
_this.handleChange = function (e) {
_this.setState({ checked: e.target.checked });
if (typeof _this.props.onChange === "function") _this.props.onChange(e);
};
_this.state = { hasFocus: false, checked: !!_this.props.checked };
return _this;
}
// eslint-disable-next-line camelcase
_createClass(CheckboksPanel, [{
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(newProps) {
this.setState({ checked: !!newProps.checked });
}
}, {
key: "toggleOutline",
value: function toggleOutline() {
this.setState({ hasFocus: !this.state.hasFocus });
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _props = this.props,
id = _props.id,
label = _props.label,
subtext = _props.subtext,
disabled = _props.disabled,
other = _objectWithoutProperties(_props, ["id", "label", "subtext", "disabled"]);
var _state = this.state,
hasFocus = _state.hasFocus,
checked = _state.checked;
var inputId = id || nav_frontend_js_utils_1.guid();
var cls = classNames("inputPanel checkboksPanel", {
"inputPanel--checked": checked && !disabled,
"inputPanel--focused": hasFocus && !disabled,
"inputPanel--disabled": disabled === true
});
return React.createElement(_1.SkjemaGruppeFeilContext.Consumer, null, function (context) {
return React.createElement("label", { className: cls, htmlFor: inputId }, React.createElement("input", Object.assign({ id: inputId, className: "inputPanel__field", type: "checkbox", checked: checked, "aria-checked": checked, disabled: disabled, "aria-invalid": !!context.feil, "aria-errormessage": context.feilmeldingId }, other, { onFocus: function onFocus() {
return _this2.toggleOutline();
}, onBlur: function onBlur() {
return _this2.toggleOutline();
}, onChange: _this2.handleChange })), React.createElement("span", { className: "inputPanel__label" }, label), subtext && React.createElement("span", { className: "inputPanel__subtext" }, subtext));
});
}
}]);
return CheckboksPanel;
}(React.Component);
exports.CheckboksPanel = CheckboksPanel;
var CheckboksPanelGruppe = function (_React$Component2) {
_inherits(CheckboksPanelGruppe, _React$Component2);
function CheckboksPanelGruppe() {

@@ -101,13 +34,13 @@ _classCallCheck(this, CheckboksPanelGruppe);

value: function render() {
var _props2 = this.props,
checkboxes = _props2.checkboxes,
legend = _props2.legend,
feil = _props2.feil,
_onChange = _props2.onChange,
className = _props2.className,
other = _objectWithoutProperties(_props2, ["checkboxes", "legend", "feil", "onChange", "className"]);
var _props = this.props,
checkboxes = _props.checkboxes,
legend = _props.legend,
feil = _props.feil,
_onChange = _props.onChange,
className = _props.className,
other = _objectWithoutProperties(_props, ["checkboxes", "legend", "feil", "onChange", "className"]);
var feilmeldingId = nav_frontend_js_utils_1.guid();
return React.createElement(_1.SkjemaGruppe, Object.assign({ className: classNames("inputPanelGruppe", className), legend: legend, feil: feil, feilmeldingId: feilmeldingId }, other), React.createElement("div", { className: "inputPanelGruppe__inner" }, checkboxes.map(function (checkbox) {
return React.createElement(CheckboksPanel, Object.assign({ key: "" + checkbox.id + checkbox.label, onChange: function onChange(event) {
return React.createElement(_1.SkjemaGruppe, Object.assign({ className: classnames_1.default("inputPanelGruppe", className), legend: legend, feil: feil, feilmeldingId: feilmeldingId }, other), React.createElement("div", { className: "inputPanelGruppe__inner" }, checkboxes.map(function (checkbox) {
return React.createElement(_1.CheckboksPanel, Object.assign({ key: "" + checkbox.id + checkbox.label, onChange: function onChange(event) {
return _onChange(event, checkbox.value);

@@ -114,0 +47,0 @@ } }, checkbox));

import * as React from "react";
import { SkjemaGruppeProps } from ".";
import "nav-frontend-skjema-style";
export declare class CheckboxGruppe extends React.Component<SkjemaGruppeProps> {
render(): JSX.Element;
}
export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {

@@ -8,0 +4,0 @@ /**

@@ -14,4 +14,3 @@ "use strict";

Object.defineProperty(exports, "__esModule", { value: true });
exports.Checkbox = exports.CheckboxGruppe = void 0;
/* eslint-disable max-classes-per-file */
exports.Checkbox = void 0;
var PT = require("prop-types");

@@ -24,28 +23,2 @@ var React = require("react");

require("nav-frontend-skjema-style");
var CheckboxGruppe = function (_React$Component) {
_inherits(CheckboxGruppe, _React$Component);
function CheckboxGruppe() {
_classCallCheck(this, CheckboxGruppe);
return _possibleConstructorReturn(this, (CheckboxGruppe.__proto__ || Object.getPrototypeOf(CheckboxGruppe)).apply(this, arguments));
}
_createClass(CheckboxGruppe, [{
key: "render",
value: function render() {
var _props = this.props,
children = _props.children,
className = _props.className,
other = _objectWithoutProperties(_props, ["children", "className"]);
return React.createElement(_1.SkjemaGruppe, Object.assign({ className: classNames("checkboxgruppe", className) }, other), children);
}
}]);
return CheckboxGruppe;
}(React.Component);
exports.CheckboxGruppe = CheckboxGruppe;
var cls = function cls(className) {

@@ -63,4 +36,4 @@ return classNames("skjemaelement", className);

var Checkbox = function (_React$Component2) {
_inherits(Checkbox, _React$Component2);
var Checkbox = function (_React$Component) {
_inherits(Checkbox, _React$Component);

@@ -76,9 +49,9 @@ function Checkbox() {

value: function render() {
var _props2 = this.props,
className = _props2.className,
label = _props2.label,
id = _props2.id,
feil = _props2.feil,
checkboxRef = _props2.checkboxRef,
other = _objectWithoutProperties(_props2, ["className", "label", "id", "feil", "checkboxRef"]);
var _props = this.props,
className = _props.className,
label = _props.label,
id = _props.id,
feil = _props.feil,
checkboxRef = _props.checkboxRef,
other = _objectWithoutProperties(_props, ["className", "label", "id", "feil", "checkboxRef"]);

@@ -85,0 +58,0 @@ var inputId = id || nav_frontend_js_utils_1.guid();

@@ -5,4 +5,6 @@ export { default as FnrInput, FnrInputProps } from "./fnr-input";

export { default as TextareaControlled, TextareaControlledProps, } from "./textarea-controlled";
export { default as Checkbox, CheckboxProps, CheckboxGruppe } from "./checkbox";
export { default as Radio, RadioProps, RadioGruppe } from "./radio";
export { default as Checkbox, CheckboxProps } from "./checkbox";
export { default as CheckboxGruppe } from "./checkbox-gruppe";
export { default as Radio, RadioProps } from "./radio";
export { default as RadioGruppe } from "./radio-gruppe";
export { default as Select, SelectProps } from "./select";

@@ -12,4 +14,6 @@ export { default as SkjemaGruppe, SkjemaGruppeProps, SkjemaGruppeFeilContext, SkjemaGruppeFeilContextProps, } from "./skjema-gruppe";

export { default as ToggleKnapp, ToggleKnappProps } from "./toggle-knapp";
export { default as RadioPanelGruppe, RadioPanelGruppeProps, RadioPanel, RadioPanelProps, } from "./radio-panel-gruppe";
export { default as CheckboksPanelGruppe, CheckboksPanelGruppeProps, CheckboksPanel, CheckboksPanelProps, } from "./checkboks-panel-gruppe";
export { default as RadioPanelGruppe, RadioPanelGruppeProps, } from "./radio-panel-gruppe";
export { default as RadioPanel, RadioPanelProps } from "./radio-panel";
export { default as CheckboksPanelGruppe, CheckboksPanelGruppeProps, } from "./checkboks-panel-gruppe";
export { default as CheckboksPanel, CheckboksPanelProps, } from "./checkboks-panel";
export { default as BekreftCheckboksPanel, BekreftCheckboksPanelProps, } from "./bekreft-checkboks-panel";

@@ -16,0 +20,0 @@ export { default as Feiloppsummering, FeiloppsummeringProps, FeiloppsummeringFeil, } from "./feiloppsummering";

@@ -24,4 +24,5 @@ "use strict";

} });
var checkbox_gruppe_1 = require("./checkbox-gruppe");
Object.defineProperty(exports, "CheckboxGruppe", { enumerable: true, get: function get() {
return checkbox_1.CheckboxGruppe;
return checkbox_gruppe_1.default;
} });

@@ -32,4 +33,5 @@ var radio_1 = require("./radio");

} });
var radio_gruppe_1 = require("./radio-gruppe");
Object.defineProperty(exports, "RadioGruppe", { enumerable: true, get: function get() {
return radio_1.RadioGruppe;
return radio_gruppe_1.default;
} });

@@ -59,4 +61,5 @@ var select_1 = require("./select");

} });
var radio_panel_1 = require("./radio-panel");
Object.defineProperty(exports, "RadioPanel", { enumerable: true, get: function get() {
return radio_panel_gruppe_1.RadioPanel;
return radio_panel_1.default;
} });

@@ -67,4 +70,5 @@ var checkboks_panel_gruppe_1 = require("./checkboks-panel-gruppe");

} });
var checkboks_panel_1 = require("./checkboks-panel");
Object.defineProperty(exports, "CheckboksPanel", { enumerable: true, get: function get() {
return checkboks_panel_gruppe_1.CheckboksPanel;
return checkboks_panel_1.default;
} });

@@ -71,0 +75,0 @@ var bekreft_checkboks_panel_1 = require("./bekreft-checkboks-panel");

import * as React from "react";
import { RadioPanelProps } from ".";
import "nav-frontend-skjema-style";
export interface RadioPanelProps extends React.InputHTMLAttributes<HTMLInputElement> {
label: React.ReactNode;
}
export interface RadioPanelState {
hasFocus: boolean;
}
export declare class RadioPanel extends React.Component<RadioPanelProps, RadioPanelState> {
constructor(props: RadioPanelProps);
toggleOutline(): void;
render(): JSX.Element;
}
export interface RadioPanelGruppeProps {

@@ -15,0 +5,0 @@ /**

@@ -14,4 +14,2 @@ "use strict";

Object.defineProperty(exports, "__esModule", { value: true });
exports.RadioPanel = void 0;
/* eslint-disable max-classes-per-file */
var React = require("react");

@@ -24,57 +22,5 @@ var PT = require("prop-types");

var RadioPanel = function (_React$Component) {
_inherits(RadioPanel, _React$Component);
var RadioPanelGruppe = function (_React$Component) {
_inherits(RadioPanelGruppe, _React$Component);
function RadioPanel(props) {
_classCallCheck(this, RadioPanel);
var _this = _possibleConstructorReturn(this, (RadioPanel.__proto__ || Object.getPrototypeOf(RadioPanel)).call(this, props));
_this.state = { hasFocus: false };
return _this;
}
_createClass(RadioPanel, [{
key: "toggleOutline",
value: function toggleOutline() {
this.setState({ hasFocus: !this.state.hasFocus });
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _props = this.props,
id = _props.id,
label = _props.label,
checked = _props.checked,
disabled = _props.disabled,
other = _objectWithoutProperties(_props, ["id", "label", "checked", "disabled"]);
var hasFocus = this.state.hasFocus;
var inputId = id || nav_frontend_js_utils_1.guid();
var cls = classNames("inputPanel radioPanel", {
"inputPanel--checked": checked && !disabled,
"inputPanel--focused": hasFocus && !disabled,
"inputPanel--disabled": disabled === true
});
return React.createElement(_1.SkjemaGruppeFeilContext.Consumer, null, function (context) {
return React.createElement("label", { className: cls, htmlFor: inputId }, React.createElement("input", Object.assign({ id: inputId, className: "inputPanel__field", type: "radio", checked: checked, "aria-checked": checked, disabled: disabled, "aria-invalid": !!context.feil, "aria-errormessage": context.feilmeldingId }, other, { onFocus: function onFocus() {
return _this2.toggleOutline();
}, onBlur: function onBlur() {
return _this2.toggleOutline();
} })), React.createElement("span", { className: "inputPanel__label" }, label));
});
}
}]);
return RadioPanel;
}(React.Component);
exports.RadioPanel = RadioPanel;
var RadioPanelGruppe = function (_React$Component2) {
_inherits(RadioPanelGruppe, _React$Component2);
function RadioPanelGruppe() {

@@ -89,11 +35,11 @@ _classCallCheck(this, RadioPanelGruppe);

value: function render() {
var _props2 = this.props,
radios = _props2.radios,
name = _props2.name,
legend = _props2.legend,
feil = _props2.feil,
checked = _props2.checked,
_onChange = _props2.onChange,
className = _props2.className,
other = _objectWithoutProperties(_props2, ["radios", "name", "legend", "feil", "checked", "onChange", "className"]);
var _props = this.props,
radios = _props.radios,
name = _props.name,
legend = _props.legend,
feil = _props.feil,
checked = _props.checked,
_onChange = _props.onChange,
className = _props.className,
other = _objectWithoutProperties(_props, ["radios", "name", "legend", "feil", "checked", "onChange", "className"]);

@@ -103,3 +49,3 @@ var cls = classNames("inputPanelGruppe", className);

return React.createElement(_1.SkjemaGruppe, Object.assign({ className: cls, legend: legend, feil: feil, feilmeldingId: feilmeldingId }, other), React.createElement("div", { className: "inputPanelGruppe__inner" }, radios.map(function (radio) {
return React.createElement(RadioPanel, Object.assign({ name: name, key: name + "-" + radio.value, checked: checked === radio.value, onChange: function onChange(event) {
return React.createElement(_1.RadioPanel, Object.assign({ name: name, key: name + "-" + radio.value, checked: checked === radio.value, onChange: function onChange(event) {
return _onChange(event, radio.value);

@@ -106,0 +52,0 @@ } }, radio));

import * as React from "react";
import "nav-frontend-skjema-style";
import { SkjemaGruppeProps } from ".";
export declare class RadioGruppe extends React.Component<SkjemaGruppeProps> {
render(): JSX.Element;
}
export interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement> {

@@ -8,0 +4,0 @@ /**

@@ -14,5 +14,2 @@ "use strict";

Object.defineProperty(exports, "__esModule", { value: true });
exports.RadioGruppe = void 0;
/* eslint-disable indent */
/* eslint-disable max-classes-per-file */
var PT = require("prop-types");

@@ -24,30 +21,4 @@ var React = require("react");

var _1 = require(".");
var RadioGruppe = function (_React$Component) {
_inherits(RadioGruppe, _React$Component);
function RadioGruppe() {
_classCallCheck(this, RadioGruppe);
return _possibleConstructorReturn(this, (RadioGruppe.__proto__ || Object.getPrototypeOf(RadioGruppe)).apply(this, arguments));
}
_createClass(RadioGruppe, [{
key: "render",
value: function render() {
var _props = this.props,
children = _props.children,
className = _props.className,
other = _objectWithoutProperties(_props, ["children", "className"]);
return React.createElement(_1.SkjemaGruppe, Object.assign({ className: classNames("radiogruppe", className) }, other), children);
}
}]);
return RadioGruppe;
}(React.Component);
exports.RadioGruppe = RadioGruppe;
var cls = function cls(className) {
return classNames("skjemaelement", className);
return classNames("skjemaelement", className);
};

@@ -58,60 +29,60 @@ /**

var Radio = function (_React$Component2) {
_inherits(Radio, _React$Component2);
var Radio = function (_React$Component) {
_inherits(Radio, _React$Component);
function Radio() {
_classCallCheck(this, Radio);
function Radio() {
_classCallCheck(this, Radio);
return _possibleConstructorReturn(this, (Radio.__proto__ || Object.getPrototypeOf(Radio)).apply(this, arguments));
}
return _possibleConstructorReturn(this, (Radio.__proto__ || Object.getPrototypeOf(Radio)).apply(this, arguments));
}
_createClass(Radio, [{
key: "render",
value: function render() {
var _props2 = this.props,
className = _props2.className,
name = _props2.name,
label = _props2.label,
id = _props2.id,
radioRef = _props2.radioRef,
other = _objectWithoutProperties(_props2, ["className", "name", "label", "id", "radioRef"]);
_createClass(Radio, [{
key: "render",
value: function render() {
var _props = this.props,
className = _props.className,
name = _props.name,
label = _props.label,
id = _props.id,
radioRef = _props.radioRef,
other = _objectWithoutProperties(_props, ["className", "name", "label", "id", "radioRef"]);
var inputId = id || nav_frontend_js_utils_1.guid();
// tslint:disable:react-a11y-role-has-required-aria-props
return React.createElement(_1.SkjemaGruppeFeilContext.Consumer, null, function (context) {
return React.createElement("div", { className: cls(className) }, React.createElement("input", Object.assign({ type: "radio", name: name, className: "skjemaelement__input radioknapp", id: inputId, ref: radioRef, "aria-invalid": !!context.feil, "aria-errormessage": context.feil ? context.feilmeldingId : undefined }, other)), React.createElement("label", { className: "skjemaelement__label", htmlFor: inputId }, label));
});
}
}]);
var inputId = id || nav_frontend_js_utils_1.guid();
// tslint:disable:react-a11y-role-has-required-aria-props
return React.createElement(_1.SkjemaGruppeFeilContext.Consumer, null, function (context) {
return React.createElement("div", { className: cls(className) }, React.createElement("input", Object.assign({ type: "radio", name: name, className: "skjemaelement__input radioknapp", id: inputId, ref: radioRef, "aria-invalid": !!context.feil, "aria-errormessage": context.feil ? context.feilmeldingId : undefined }, other)), React.createElement("label", { className: "skjemaelement__label", htmlFor: inputId }, label));
});
}
}]);
return Radio;
return Radio;
}(React.Component);
Radio.propTypes = {
/**
* ClassName
*/
className: PT.string,
/**
* Label for radiobutton
*/
label: PT.node.isRequired,
/**
* Id for radiobutton, hvis id ikke er satt brukes en tilfeldig guid
*/
id: PT.string,
/**
* Name for radiobutton gruppe
*/
name: PT.string.isRequired,
/**
* Referanse til selve radioknappen. Brukes for eksempel til å sette fokus
*/
radioRef: PT.func
/**
* ClassName
*/
className: PT.string,
/**
* Label for radiobutton
*/
label: PT.node.isRequired,
/**
* Id for radiobutton, hvis id ikke er satt brukes en tilfeldig guid
*/
id: PT.string,
/**
* Name for radiobutton gruppe
*/
name: PT.string.isRequired,
/**
* Referanse til selve radioknappen. Brukes for eksempel til å sette fokus
*/
radioRef: PT.func
};
Radio.defaultProps = {
className: undefined,
id: undefined,
radioRef: undefined
className: undefined,
id: undefined,
radioRef: undefined
};
exports.default = Radio;
import * as React from "react";
import "nav-frontend-skjema-style";
declare class SkjemaelementFeilmelding extends React.Component<React.HTMLAttributes<HTMLDivElement>> {

@@ -3,0 +4,0 @@ static defaultProps: Partial<React.HTMLAttributes<HTMLDivElement>>;

@@ -16,2 +16,3 @@ "use strict";

var nav_frontend_typografi_1 = require("nav-frontend-typografi");
require("nav-frontend-skjema-style");

@@ -18,0 +19,0 @@ var SkjemaelementFeilmelding = function (_React$Component) {

import * as React from "react";
import "nav-frontend-skjema-style";
export interface TextareaControlledProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {

@@ -3,0 +4,0 @@ label?: React.ReactNode;

@@ -20,2 +20,3 @@ "use strict";

var textarea_1 = require("./textarea");
require("nav-frontend-skjema-style");

@@ -22,0 +23,0 @@ var TextareaControlled = function (_React$Component) {

{
"name": "nav-frontend-skjema",
"version": "3.0.25",
"version": "3.0.26",
"main": "lib/index.js",

@@ -35,3 +35,3 @@ "types": "lib/index.d.ts",

},
"gitHead": "740465f2659780fcddc0cbc47c33d6da57e6e81d"
"gitHead": "20b8b6e96f044cbe73f985a562dd8687013ebb9a"
}

@@ -8,4 +8,6 @@ export { default as FnrInput, FnrInputProps } from "./fnr-input";

} from "./textarea-controlled";
export { default as Checkbox, CheckboxProps, CheckboxGruppe } from "./checkbox";
export { default as Radio, RadioProps, RadioGruppe } from "./radio";
export { default as Checkbox, CheckboxProps } from "./checkbox";
export { default as CheckboxGruppe } from "./checkbox-gruppe";
export { default as Radio, RadioProps } from "./radio";
export { default as RadioGruppe } from "./radio-gruppe";
export { default as Select, SelectProps } from "./select";

@@ -23,12 +25,13 @@ export {

RadioPanelGruppeProps,
RadioPanel,
RadioPanelProps,
} from "./radio-panel-gruppe";
export { default as RadioPanel, RadioPanelProps } from "./radio-panel";
export {
default as CheckboksPanelGruppe,
CheckboksPanelGruppeProps,
CheckboksPanel,
CheckboksPanelProps,
} from "./checkboks-panel-gruppe";
export {
default as CheckboksPanel,
CheckboksPanelProps,
} from "./checkboks-panel";
export {
default as BekreftCheckboksPanel,

@@ -35,0 +38,0 @@ BekreftCheckboksPanelProps,

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc